// ********************************************
// container definition
$btn-el: #{$prefix}-button;
$input-addon-group: #{$prefix}-input-addon-group;

// ********************************************
// element definition
$btn-icon: #{$prefix}-icon;

// ********************************************
// modifiers
$btn-el-s: #{$btn-el}--s;
$btn-el-m: #{$btn-el}--m;
$btn-el-l: #{$btn-el}--l;
$btn-el-fluid: #{$btn-el}--fluid-width;
$btn-el-primary: #{$btn-el}--primary;
$btn-el-text: #{$btn-el}--text;
$btn-el-secondary: #{$btn-el}--secondary;
$btn-el-link: #{$btn-el}--link;

// variants
$btn-el-vfocus: #{$btn-el}--variant-focus;
$btn-el-vdefault: #{$btn-el}--variant-default;
$btn-el-vactive: #{$btn-el}--variant-active;
$btn-el-vdisabled: #{$btn-el}--variant-disabled;
$btn-el-vhover: #{$btn-el}--variant-hover;
$btn-el-focus-poc: #{$btn-el}--focus-poc;

// ********************************************
// Vars
$button-height: space(m) * 1.17;
$button-border-radius: $theme-base-border-radius;
$button-width: space(l) * 1.3;
$button-padding: 0 space(s);
$s-size: space(s) * 1.125; //18px;
$m-size: space(m) * 1.17; //28px
$l-size: space(l) * 1.25; //40px;

$s-font: font-size(300); //12px
$m-font: font-size(500); //14px;
$l-font: font-size(600); //16px;

$border-type: solid border-size(xs);
$border-type-2: solid border-size(m);
$text-disabled: #5c6574;

@mixin withFocus($color: color(brand-primary, 600)) {
  outline: none;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    @include dsFocus($color);
  }
}

@mixin withDisabled() {
  cursor: not-allowed;
}

div.#{$btn-el} {
  appearance: initial;
}

.#{$btn-el} {
  @include body-text-style(semibold);
  @include center;

  min-width: $button-width;
  line-height: unset;
  border-radius: $button-border-radius;
  padding: $button-padding;
  cursor: pointer;
  white-space: nowrap;
  transition: duration(base) easing(base);
  position: relative;

  & .label-wrapper {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &:focus {
    outline: none;
  }

  &--icon-only {
    min-width: auto;
    min-width: initial;
    padding-left: 0;
    padding-right: 0;
  }

  .#{$btn-icon} {
    &:first-child:not(:last-child) {
      margin-right: space(xs);
      margin-left: space(xs) * -1;
    }

    &:last-child:not(:first-child) {
      margin-left: space(xs);
      margin-right: space(xs) * -1;
    }

    &:last-child,
    &:first-child {
      .#{$btn-el} {
        padding-left: space(s) * -1;
        padding-right: space(s) * -1;
      }
    }
  }
}

// ********************************************
// Sizes
.#{$btn-el-s} {
  height: $s-size;
  font-size: $s-font;
  &.#{$btn-el}--icon-only {
    width: $s-size;
  }

  // https://jira.elliemae.io/browse/PUI-6990
  // & .#{$btn-icon} {
  //   height: 12px;
  //   width: 12px;
  //   margin-bottom: 5px;
  // }
}
.#{$btn-el-m} {
  height: $m-size;
  font-size: $m-font;
  &.#{$btn-el}--icon-only {
    width: $m-size;
  }

  // https://jira.elliemae.io/browse/PUI-6990
  // & .#{$btn-icon} {
  //   height: 14px;
  //   width: 14px;
  //   margin-bottom: 4px;
  // }
}
.#{$btn-el-l} {
  height: $l-size;
  font-size: $l-font;
  &.#{$btn-el}--icon-only {
    width: $l-size;
  }
}
.#{$btn-el-fluid} {
  width: 100%;
}

// ********************************************
// Primary

.#{$btn-el-primary} {
  color: color(neutral, 000);
  background-color: color(brand-primary, 600);
  border: $border-type color(brand-primary, 600);

  .#{$btn-icon} {
    @include icon-color(color(neutral, 000));
  }

  &:hover:not([disabled]),
  &.#{$btn-el-vhover} {
    background-color: color(brand-primary, 700);
    border: $border-type color(brand-primary, 700);
  }

  &:active,
  &.#{$btn-el-vactive} {
    background-color: color(brand-primary, 700);
    border: $border-type color(brand-primary, 700);
  }

  &:disabled,
  &.#{$btn-el-vdisabled} {
    color: $text-disabled;
    background-color: color(neutral, 100);
    border-color: color(neutral, 100);

    @include withDisabled;

    .#{$btn-icon} {
      @include icon-color($text-disabled);
    }
  }

  &:focus,
  &.#{$btn-el-vfocus} {
    &::after {
      position: absolute;
      content: '';
      top: 1px;
      left: 1px;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      border: $border-type-2 color(neutral, 000);
    }
  }

  &.#{$btn-el-s} {
    &:focus,
    &.#{$btn-el-vfocus} {
      &::after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: $border-type color(neutral, 000);
      }
    }
  }
}

// ********************************************
// Text
.#{$btn-el-text} {
  color: color(brand-primary, 600);
  text-transform: uppercase;
  letter-spacing: 0;
  background-color: transparent;
  border: none;
  font-weight: 600;

  @at-root .#{$input-addon-group}__addon {
    .#{$btn-el-text} {
      border: $border-type color(neutral, 400);
    }
  }

  .#{$btn-icon} {
    @include icon-color(color(brand-primary, 600));
  }

  &:hover:not([disabled]),
  &.#{$btn-el-vhover} {
    color: color(brand-primary, 700);
    background-color: color(brand-primary, 200);
  }

  &:active,
  &.#{$btn-el-vactive} {
    color: color(brand-primary, 700);

    .#{$btn-icon} {
      @include icon-color(color(brand-primary, 700));
    }
  }

  &:disabled,
  &.#{$btn-el-vdisabled} {
    color: color(neutral, 500);
    background: color(neutral, 000);

    @include withDisabled;

    .#{$btn-icon} {
      @include icon-color(color(neutral, 500));
    }
  }

  &:focus,
  &:focus:not([disabled]),
  &.#{$btn-el-vfocus} {
    &::after {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 2px;
      border: $border-type-2 color(brand-primary, 700);
    }
  }
}

// ********************************************
// Secondary
.#{$btn-el-secondary} {
  color: color(brand-primary, 600);
  background-color: color(neutral, 000);
  border: $border-type color(neutral, 400);
  border-radius: 2px;

  @at-root .#{$input-addon-group}__addon {
    .#{$btn-el-secondary} {
      border: $border-type color(neutral, 400);
    }
  }

  .#{$btn-icon} {
    @include icon-color(color(brand-primary, 600));
  }

  &:hover:not([disabled]),
  &.#{$btn-el-vhover} {
    border: $border-type color(brand-primary, 700);

    .#{$btn-icon} {
      @include icon-color(color(brand-primary, 700));
    }
  }

  &:active,
  &.#{$btn-el-vactive} {
    color: color(brand-primary, 700);
    border: $border-type color(brand-primary, 700);

    .#{$btn-icon} {
      @include icon-color(color(brand-primary, 700));
    }
  }

  &:disabled,
  &.#{$btn-el-vdisabled} {
    color: color(neutral, 500);
    background-color: color(neutral, 000);

    @include withDisabled;

    .#{$btn-icon} {
      @include icon-color(color(neutral, 500));
    }
  }

  &:focus,
  &.#{$btn-el-vfocus} {
    &::after {
      position: absolute;
      content: '';
      top: -1px;
      left: -1px;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      border-radius: 2px;
      border: $border-type-2 color(brand-primary, 700);
    }
  }
}

// ********************************************
// link
.#{$btn-el-link} {
  @include link-text-style;

  padding: 0;
  color: color(brand-primary, 600);
  border: none;
  display: inline;
  height: unset;
  line-height: unset;
  background: transparent;
  min-width: auto;
  min-width: initial;

  &:hover:not([disabled]) {
    text-decoration-line: underline;
  }

  &:active {
    color: color(brand-primary, 700);
  }

  &:disabled {
    color: color(neutral, 400);

    @include withDisabled;
  }

  &.#{$btn-el}--icon-only {
    &:focus,
    &.#{$btn-el-vfocus} {
      span.label-wrapper {
        @include withFocus;

        &::after {
          top: -2px;
          left: -2px;
          width: calc(100% + 4px);
          height: calc(100% + 4px);
        }
      }
    }
  }
}

$intent-colors: (
  'success': color('success', 900),
  'danger': color('danger', 900),
  'warning': color('warning', 900),
  'info': color('brand-primary', 600),
);

@each $intent, $color in $intent-colors {
  // button text
  .#{$btn-el}-#{$intent}.#{$btn-el-text} {
    color: $color;

    &:focus,
    &:focus:not([disabled]),
    &.#{$btn-el-vfocus} {
      color: $color;

      &::after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 2px;
        border: $border-type-2 $color;
      }
    }

    &:hover,
    &:hover:not([disabled]),
    &.#{$btn-el-vhover} {
      color: $color;

      span.label-wrapper.no-icon {
        &::before {
          background-color: transparent;
          border-radius: 2px;
        }
      }
    }

    &:active {
      color: darken($color, 10%);

      .#{$btn-icon} {
        @include icon-color(darken($color, 10%));
      }
    }
  }
}

// ********************************************
// Mobile
@include md {
  // Sizes
  .#{$btn-el-s} {
    height: calc(#{space(s)} * 1.22);

    &.#{$btn-el}--icon-only {
      width: calc(#{space(s)} * 1.22);
    }
  }

  .#{$btn-el-m} {
    font-size: tomobile(font-size(600));
    height: calc(#{space(m)} * 1.085);

    &.#{$btn-el}--icon-only {
      width: calc(#{space(m)} * 1.085);
    }
  }

  .#{$btn-el-m}:not(.#{$btn-el}--icon-only) {
    &.#{$btn-el-primary},
    &.#{$btn-el-secondary} {
      min-width: calc(#{space(l)} * 1.016 * 2);
    }
  }

  .#{$btn-el-l} {
    font-size: tomobile(font-size(600));
    height: calc(#{space(l)} * 1.016);

    &.#{$btn-el}--icon-only {
      width: calc(#{space(l)} * 1.016);
    }
  }
}