// sass-lint:disable force-pseudo-nesting force-element-nesting
$button-font-family: 'Source Sans Pro', sans-serif;
$button-font-weight: $luci-font-weight-semi-bold;
$button-font-weight-s: $luci-font-weight-regular;

$button-border-radius: $luci-border-radius-default;
$button-border-width-m: 2px;
$button-border-width-s: 1px;

$button-color-blue: $luci-interactive-color-default;
$button-color-blue-hover: $luci-interactive-color-hover;
$button-color-blue-active: $luci-interactive-color-active;
$button-color-white: $luci-color-white;
$button-color-purple: $luci-color-purple-60;
$button-color-purple-hover: $luci-color-purple-43;
$button-color-purple-active: $luci-color-purple-25;
$button-color-white-hover: $luci-color-neutral-85;

$button-text-color-primary: $luci-color-white;
$button-background-disabled-color: $luci-color-neutral-85;
$button-background-disabled-color-on-dark: $luci-color-neutral-53;
$button-text-disabled-color: $luci-color-neutral-76;
$button-text-disabled-color-on-dark: $luci-color-neutral-34;

$button-font-size: $luci-font-size-md;
$button-font-size-s: $luci-font-size-sm;

$button-space-inset-m: 12px 32px;
$button-space-inset-s: 8px 12px;
$button-space-inline-left: 8px;

$button-line-height: 1.375;

$button-min-height-m: 40px;
$button-min-height-s: 30px;

$button-icon-size-m: $luci-icon-size-sm;
$button-icon-size-s: $luci-icon-size-xs;

$button-focus-shadow: 0 0 0 2px $luci-interactive-color-focus;
$button-letter-spacing: .5;

$variation-properties: (
  primary: (
    background: $button-color-blue,
    background-hover: $button-color-blue-hover,
    background-active: $button-color-blue-active,
    background-disabled: $button-background-disabled-color,
    border: solid $button-border-width-m $button-color-blue,
    border-color-hover: $button-color-blue-hover,
    border-color-active: $button-color-blue-active,
    border-color-checked: $button-color-blue-active,
    border-color-disabled: $button-background-disabled-color,
    color: $button-text-color-primary,
    color-hover: $button-text-color-primary,
    color-active: $button-text-color-primary,
    color-disabled: $button-text-disabled-color
  ),
  primary-on-dark: (
    background: $button-color-white,
    background-hover: $button-color-white-hover,
    background-active: $button-color-white-hover,
    background-disabled: $button-background-disabled-color-on-dark,
    border: solid $button-border-width-m $button-color-white,
    border-color-hover: $button-color-white-hover,
    border-color-active: $button-color-white-hover,
    border-color-checked: $button-color-white-hover,
    border-color-disabled: $button-background-disabled-color-on-dark,
    color: $button-color-blue,
    color-hover: $button-color-blue-hover,
    color-active: $button-color-blue-active,
    color-disabled: $button-text-disabled-color-on-dark
  ),
  secondary: (
    background: $button-color-white,
    background-hover: $button-color-blue,
    background-active: $button-color-blue-active,
    background-disabled: $button-color-white,
    background-checked: $button-color-purple,
    border: solid $button-border-width-m $button-color-blue,
    border-color-hover: $button-color-blue,
    border-color-active: $button-color-blue-active,
    border-color-checked: $button-color-purple,
    border-color-disabled: $button-text-disabled-color,
    color: $button-color-blue,
    color-hover: $button-color-white,
    color-active: $button-color-white,
    color-checked: $button-color-white,
    color-disabled: $button-text-disabled-color
  )
);

@mixin luci-button-styles($variation: 'secondary') {
  @include luci-text-crop;
  @include luci-box-sizing;
  @include luci-font-reset;
  background: map-get(map-get($variation-properties, $variation), 'background');
  border: map-get(map-get($variation-properties, $variation), 'border');
  border-radius: $button-border-radius;
  color: map-get(map-get($variation-properties, $variation), 'color');
  cursor: pointer;
  font-family: $button-font-family;
  font-size: $button-font-size;
  font-style: normal;
  font-weight: $button-font-weight;
  letter-spacing: $button-letter-spacing;
  line-height: $button-line-height;
  margin: 0;
  padding: $button-space-inset-m;
  text-decoration: none;
  vertical-align: top;

  .luci-button__icon {
    fill: map-get(map-get($variation-properties, $variation), 'color');
  }
}

@mixin luci-button-hover-styles($variation: 'secondary') {
  background-color: map-get(map-get($variation-properties, $variation), 'background-hover');
  border-color: map-get(map-get($variation-properties, $variation), 'border-color-hover');
  color: map-get(map-get($variation-properties, $variation), 'color-hover');

  .luci-button__icon {
    fill: $luci-icon-color-on-interactive;
  }
}

@mixin luci-button-active-styles($variation: 'secondary') {
  background-color: map-get(map-get($variation-properties, $variation), 'background-active');
  border-color: map-get(map-get($variation-properties, $variation), 'border-color-active');
  color: map-get(map-get($variation-properties, $variation), 'color-active');

  .luci-button__icon {
    fill: $luci-icon-color-on-interactive;
  }
}

@mixin luci-button-checked-styles($variation: 'secondary') {
  background-color: map-get(map-get($variation-properties, $variation), 'background-checked');
  border-color: map-get(map-get($variation-properties, $variation), 'border-color-checked');
  color: map-get(map-get($variation-properties, $variation), 'color-checked');

  .luci-button__icon {
    fill: $luci-icon-color-on-interactive;
  }
}

@mixin luci-button-disabled-styles($variation: 'secondary') {
  background-color: map-get(map-get($variation-properties, $variation), 'background-disabled');
  border-color: map-get(map-get($variation-properties, $variation), 'border-color-disabled');
  color: map-get(map-get($variation-properties, $variation), 'color-disabled');
  cursor: not-allowed;

  .luci-button__icon {
    fill: $luci-icon-color-disabled;
  }
}

@mixin luci-button-focus-styles() {
  border-color: transparent;
  box-shadow: $button-focus-shadow;
  outline: none;
}

/////////////////////////////////////////////
// Secondary (Default)
/////////////////////////////////////////////
.luci-button:not(.luci-button--input) { // don't apply styles to input buttons, the __inner element will be styled instead
  @include luci-button-styles($variation: 'secondary');
  display: inline-block; // Non-input buttons are display inline-block by default, input buttons are set to display: inline-flex;
  min-height: $button-min-height-m;

  &:hover,
  &.luci-button--hover {
    @include luci-button-hover-styles($variation: 'secondary');
  }

  &:active,
  &.luci-button--active {
    @include luci-button-active-styles($variation: 'secondary');
  }

  &:disabled,
  &.luci-button--disabled {
    @include luci-button-disabled-styles($variation: 'secondary');
  }

  &:focus,
  &.luci-button--focus {
    @include luci-button-focus-styles;
  }
}

// Secondary input button
.luci-button--input {
  @include luci-font-reset;
  background: transparent;
  display: inline-block;
  position: relative;
  vertical-align: top;

  .luci-button__inner {
    @include luci-button-styles($variation: 'secondary');
    min-height: $button-min-height-m;
  }

  &:hover,
  &.luci-button--hover {
    .luci-button__inner {
      @include luci-button-hover-styles($variation: 'secondary');
    }
  }

  &:active,
  &.luci-button--active {
    .luci-button__inner {
      @include luci-button-active-styles($variation: 'secondary');
    }
  }

  .luci-button__input:checked + {
    .luci-button__inner {
      @include luci-button-checked-styles($variation: 'secondary');
    }
  }

  &.luci-button--disabled,
  .luci-button__input:disabled + {
    .luci-button__inner {
      @include luci-button-disabled-styles($variation: 'secondary');
    }
  }

  &.luci-button--focus,
  .luci-button__input:focus + {
    .luci-button__inner {
      @include luci-button-focus-styles;
    }
  }
}

/////////////////////////////////////////////
// Primary
/////////////////////////////////////////////
.luci-button--primary:not(.luci-button--input) {
  @include luci-button-styles($variation: 'primary');

  &:hover,
  &.luci-button--hover {
    @include luci-button-hover-styles($variation: 'primary');
  }

  &:active,
  &.luci-button--active {
    @include luci-button-active-styles($variation: 'primary');
  }

  &:disabled,
  &.luci-button--disabled {
    @include luci-button-disabled-styles($variation: 'primary');
  }

  &:focus,
  &.luci-button--focus {
    @include luci-button-focus-styles;
  }
}

// Primary input button
.luci-button--primary.luci-button--input {
  .luci-button__inner {
    @include luci-button-styles($variation: 'primary');
  }

  &:hover,
  &.luci-button--hover {
    .luci-button__inner {
      @include luci-button-hover-styles($variation: 'primary');
    }
  }

  // Active & Checked states are the same
  &:active,
  &.luci-button--active,
  .luci-button__input:checked + {
    .luci-button__inner {
      @include luci-button-active-styles($variation: 'primary');
    }
  }

  &.luci-button--disabled,
  .luci-button__input:disabled + {
    .luci-button__inner {
      @include luci-button-disabled-styles($variation: 'primary');
    }
  }

  &.luci-button--focus,
  .luci-button__input:focus + {
    .luci-button__inner {
      @include luci-button-focus-styles;
    }
  }
}

/////////////////////////////////////////////
// Primary, On Dark
/////////////////////////////////////////////
.luci-button--primary-on-dark:not(.luci-button--input) {
  @include luci-button-styles($variation: 'primary-on-dark');

  &:hover,
  &.luci-button--hover {
    @include luci-button-hover-styles($variation: 'primary-on-dark');
  }

  &:active,
  &.luci-button--active {
    @include luci-button-active-styles($variation: 'primary-on-dark');
  }

  &:disabled,
  &.luci-button--disabled {
    @include luci-button-disabled-styles($variation: 'primary-on-dark');
  }

  &:focus,
  &.luci-button--focus {
    @include luci-button-focus-styles;
  }
}

// Primary input button
.luci-button--primary-on-dark.luci-button--input {
  .luci-button__inner {
    @include luci-button-styles($variation: 'primary-on-dark');
  }

  &:hover,
  &.luci-button--hover {
    .luci-button__inner {
      @include luci-button-hover-styles($variation: 'primary-on-dark');
    }
  }

  // Active & Checked states are the same
  &:active,
  &.luci-button--active,
  .luci-button__input:checked + {
    .luci-button__inner {
      @include luci-button-active-styles($variation: 'primary-on-dark');
    }
  }

  &.luci-button--disabled,
  .luci-button__input:disabled + {
    .luci-button__inner {
      @include luci-button-disabled-styles($variation: 'primary-on-dark');
    }
  }

  &.luci-button--focus,
  .luci-button__input:focus + {
    .luci-button__inner {
      @include luci-button-focus-styles;
    }
  }
}

.luci-button--flat {

  &:not(.luci-button--input) {
    border-color: transparent;
  }

  &.luci-button--input {

    .luci-button__inner {
      border-color: transparent;
    }
  }
}

/////////////////////////////////////////////
// Icon Only
/////////////////////////////////////////////
.luci-button--icon-only:not(.luci-button--input) {
  background: $button-color-purple;
  border: 0;
  padding: $luci-space-sm;

  .luci-button__icon {
    fill: $luci-icon-color-on-interactive;
  }

  // Icon only buttons have unique sizes for small
  &.luci-button--small {
    padding: $luci-space-xs;
  }

  &:hover,
  &.luci-button--hover {
    background: $button-color-purple-hover;
  }

  &:active,
  &.luci-button--active {
    background: $button-color-purple-active;

    .luci-button__icon {
      fill: $luci-icon-color-on-interactive;
    }
  }

  &:disabled,
  &.luci-button--disabled {
    background: $button-background-disabled-color;

    .luci-button__icon {
      fill: $button-text-disabled-color;
    }
  }
}

// Input based icon-only buttons
.luci-button--icon-only.luci-button--input {
  .luci-button__inner {
    background: $button-color-purple;
    border: 0;
    padding: $luci-space-sm;

    &:hover {
      background: $button-color-purple-hover;
    }
  }

  &.luci-button--hover {
    .luci-button__inner {
      background: $button-color-purple-hover;
    }
  }

  .luci-button__icon {
    fill: $luci-icon-color-on-interactive;
  }

  // Icon only buttons have unique sizes for small
  &.luci-button--small {
    .luci-button__inner {
      padding: $luci-space-xs;
    }

    &.luci-button--flat {
      padding-left: 0;
      padding-right: 0;

      .luci-button__inner {
        padding-left: 6px;
        padding-right: 6px;
      }
    }
  }

  // Active and Checked states are the same
  &:active,
  &.luci-button--active,
  .luci-button__input:checked + {
    .luci-button__inner {
      background: $button-color-purple-active;
    }
  }

  &.luci-button--disabled,
  .luci-button__input:disabled + {
    .luci-button__inner {
      background: $button-background-disabled-color;

      .luci-button__icon {
        fill: $button-text-disabled-color;
      }
    }
  }

  &.luci-button--flat {
    .luci-button__inner {
      background: transparent;
    }

    .luci-button__input:checked + {
      .luci-button__inner {
        background: $button-color-purple;
      }
    }

    &.luci-button--disabled,
    .luci-button__input:disabled + {
      .luci-button__inner {
        background: transparent;
      }
    }
  }
}

// Flat icon-only buttons
.luci-button--icon-only.luci-button--flat {
  background: transparent;

  .luci-button__icon {
    fill: $button-color-purple;
  }

  &.luci-button--small {
    padding-left: 6px;
    padding-right: 6px;

    .luci-button__icon {
      height: $button-icon-size-m;
      width: $button-icon-size-m;
    }
  }

  &:hover,
  &.luci-button--hover {
    background: transparent;

    .luci-button__icon {
      fill: $luci-icon-color-hover;
    }
  }

  &:active,
  &.luci-button--active {
    background: $button-color-purple;

    .luci-button__icon {
      fill: $luci-icon-color-on-interactive;
    }
  }

  &:disabled,
  &.luci-button--disabled {
    background: transparent;

    .luci-button__icon {
      fill: $luci-icon-color-disabled;
    }
  }
}

// /////////////////////////////////////////////
// // Icon Only
// /////////////////////////////////////////////
// .luci-button--icon-only:not(.luci-button--input) {
//   background: transparent;
//   border: 0;
//   padding: $luci-space-sm;

//   .luci-button__icon {
//     fill: $button-color-purple;
//   }

//   // Icon only buttons have unique sizes for small
//   &.luci-button--small {
//     padding: $luci-space-xs;
//   }

//   &:hover,
//   &.luci-button--hover {
//     background: transparent;

//     .luci-button__icon {
//       fill: $luci-icon-color-hover;
//     }
//   }

//   &:active,
//   &.luci-button--active {
//     background: $button-color-purple;

//     .luci-button__icon {
//       fill: $luci-icon-color-on-interactive;
//     }
//   }

//   &:disabled,
//   &.luci-button--disabled {
//     background: transparent;

//     .luci-button__icon {
//       fill: $luci-icon-color-disabled;
//     }
//   }

//   &:focus,
//   &.luci-button--focus {
//     @include luci-button-focus-styles;
//   }
// }

// // Input based icon-only buttons
// .luci-button--icon-only.luci-button--input {
//   .luci-button__inner {
//     background: transparent;
//     border: 0;
//     padding: $luci-space-sm;
//   }

//   .luci-button__icon {
//     fill: $button-color-purple;
//   }

//   // Icon only buttons have unique sizes for small
//   &.luci-button--small {
//     .luci-button__inner {
//       padding: $luci-space-xs;
//     }
//   }

//   // Hover state is separate from Active and Checked
//   &:hover,
//   &.luci-button--hover {
//     background: transparent;

//     .luci-button__icon {
//       fill: $luci-icon-color-hover;
//     }
//   }

//   // Active and Checked states are the same
//   &:active,
//   &.luci-button--active,
//   .luci-button__input:checked + {
//     .luci-button__inner {
//       background: $button-color-purple;
//     }

//     .luci-button__icon {
//       fill: $luci-icon-color-on-interactive;
//     }
//   }

//   &.luci-button--disabled,
//   .luci-button__input:disabled + {
//     .luci-button__icon {
//       fill: $button-color-purple;
//     }
//   }

//   &.luci-button--focus,
//   .luci-button__input:focus + {
//     .luci-button__inner {
//       @include luci-button-focus-styles;
//     }
//   }
// }

/////////////////////////////////////////////
// Utils across all variants
/////////////////////////////////////////////
.luci-button__input {
  @include luci-accessibly-hidden;
}

.luci-button__inner {
  align-items: center;
  background: transparent;
  display: inline-flex;
  line-height: $button-line-height;
  vertical-align: top;
}

.luci-button__icon--left + .luci-button__text,
.luci-button__text + .luci-button__icon--right {
  margin-left: $button-space-inline-left;
}

.luci-button__icon {
  // Don't allow the icon's height to affect the overall height of the button
  @include n-icon-height-removal;
  display: block;
  flex-shrink: 0;
  height: $button-icon-size-m;
  width: $button-icon-size-m;

  .luci-button--small & {
    height: $button-icon-size-s;
    width: $button-icon-size-s;
  }
}

.luci-button__text {
  @include luci-text-crop;
  background: transparent;
  line-height: $button-line-height;
}

.luci-button.luci-button--with-icons {
  // remove text crop from outer block since a button with icons will have text-crop applied on the button__text element
  &:before,
  &:after {
    display: none;
  }
}

.luci-button--small:not(.luci-button--input),
.luci-button--small.luci-button--input .luci-button__inner {
  border-width: $button-border-width-s;
  font-size: $button-font-size-s;
  font-weight: $button-font-weight-s;
  letter-spacing: 0;
  min-height: $button-min-height-s;
  padding: $button-space-inset-s;
}