// sass-lint:disable force-pseudo-nesting force-element-nesting
$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-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: $luci-space-sm $luci-space-xl;
$button-space-inset-s: $luci-space-xs $luci-space-sm;
$button-space-inline-left: $luci-space-xxs;

$button-line-height: 1.25;

$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-checked: $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-checked: $button-text-color-primary,
    color-disabled: $button-text-disabled-color,
    icon-color: $luci-icon-color-on-interactive,
    icon-color-hover: $luci-icon-color-on-interactive,
    icon-color-active: $luci-icon-color-on-interactive,
    icon-color-checked: $luci-icon-color-on-interactive,
    icon-color-disabled: $luci-icon-color-disabled
  ),
  primary-on-dark: (
    background: $button-color-white,
    background-hover: $button-color-white-hover,
    background-active: $button-color-white-hover,
    background-checked: $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-checked: $button-color-blue-active,
    color-disabled: $button-text-disabled-color-on-dark,
    icon-color: $luci-icon-color-default,
    icon-color-hover: $luci-icon-color-hover,
    icon-color-active: $luci-icon-color-active,
    icon-color-checked: $luci-icon-color-active,
    icon-color-disabled: $luci-icon-color-disabled
  ),
  secondary: (
    background: $button-color-white,
    background-hover: $button-color-white,
    background-active: $button-color-blue-active,
    background-checked: $button-color-blue-active,
    background-disabled: $button-color-white,
    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-text-disabled-color,
    color: $button-color-blue,
    color-hover: $button-color-blue-hover,
    color-active: $button-text-color-primary,
    color-checked: $button-text-color-primary,
    color-disabled: $button-text-disabled-color,
    icon-color: $luci-icon-color-default,
    icon-color-hover: $luci-icon-color-hover,
    icon-color-active: $luci-icon-color-on-interactive,
    icon-color-checked: $luci-icon-color-on-interactive,
    icon-color-disabled: $luci-icon-color-disabled
  ),
  flat: (
    background: transparent,
    background-hover: transparent,
    background-active: transparent,
    background-disabled: transparent,
    border: solid $button-border-width-m transparent,
    border-color-hover: transparent,
    border-color-active: transparent,
    border-color-disabled: transparent,
    color-active: $button-color-blue-active,
    icon-color-active: $luci-icon-color-active
  )
);

@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: $luci-font-family-sans-serif;
  font-size: $button-font-size;
  font-style: normal;
  font-weight: $luci-font-weight-semi-bold;
  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), 'icon-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: map-get(map-get($variation-properties, $variation), 'icon-color-hover');
  }
}

@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: map-get(map-get($variation-properties, $variation), 'icon-color-active');
  }
}

@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: map-get(map-get($variation-properties, $variation), 'icon-color-checked');
  }
}

@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: map-get(map-get($variation-properties, $variation), 'icon-color-disabled');
  }
}

@mixin luci-button-focus-styles() {
  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');
  }

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

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

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

  //Align all Button Group component variant button members with primary button styles
  .luci-button-group & {
    &:hover,
    &.luci-button--hover {
      @include luci-button-hover-styles($variation: 'primary');
    }

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

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

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

  //Align Menu component trigger button selected state with primary button checked styles
  .luci-menu--is-open &.luci-menu__trigger {
    @include luci-button-checked-styles($variation: 'primary');
  }
}

// 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--selected,
  .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;
    }
  }

  //Align all Button Group component variant button members with primary button styles
  .luci-button-group & {
    &:hover,
    &.luci-button--hover {
      .luci-button__inner {
        @include luci-button-hover-styles($variation: 'primary');
      }
    }

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

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

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

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

/////////////////////////////////////////////
// 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');
  }

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

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

  //Align all Button Group component variant button members with primary button styles
  .luci-button-group & {
    &:disabled,
    &.luci-button--disabled {
      @include luci-button-disabled-styles($variation: 'primary');
    }
  }
}

// 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,
  &.luci-button--active {
    .luci-button__inner {
      @include luci-button-active-styles($variation: 'primary');
    }
  }

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

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

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

/////////////////////////////////////////////
// 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');
  }

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

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

// Primary input button on dark backgrounds
.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,
  &.luci-button--active {
    .luci-button__inner {
      @include luci-button-active-styles($variation: 'primary-on-dark');
    }
  }

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

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

//Flat button variant
.luci-button--flat {

  &:not(.luci-button--input) {
    @include luci-button-styles($variation: 'flat');

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

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

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

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

  &.luci-button--input {

    .luci-button__inner {
      @include luci-button-styles($variation: 'flat');
    }

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

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

    &.luci-button--selected,
    .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: 'flat');
      }
    }
  }
}

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

  // 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;
  }

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

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

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

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

.luci-button__inner {
  align-items: center;
  background: transparent;
  display: flex;
  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;
}

.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: $luci-font-weight-regular;
  letter-spacing: 0;
  min-height: $button-min-height-s;
  padding: $button-space-inset-s;
}