$button-prefix: #{$prefix}-button;

@mixin button-base {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  border: $global-border-width solid transparent;
  border-radius: $global-radius;
  outline: 0;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  transition: all $animation-duration-base ease-out;
  cursor: pointer;
  user-select: none;
  &:not([disabled]):hover {
    text-decoration: none;
  }

  &:not([disabled]):active {
    outline: 0;
    transition: none;
  }

  &-disabled,
  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }
}

@mixin button-disabled($font-color, $border-color, $bg-color) {
  &.#{$button-prefix}-disabled,
  &.disabled,
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active,
    &.#{$button-prefix}-active,
    &.active {
      border-color: $border-color;
      box-shadow: none;
      background-color: $bg-color;
      color: $font-color;
      text-shadow: none;
      .#{$button-prefix}-prefix {
        color: $font-color;
      }
    }
  }
}

@mixin button-variant-contained($base-color) {
  @include button-disabled(
    $component-disabled-color,
    $component-disabled-bg,
    $component-disabled-bg
  );
  border-color: $base-color;
  background-color: $base-color;
  color: $white;
  &::after {
    // animation
    color: $base-color;
  }
  &:hover,
  &:active,
  &.#{$button-prefix}-active,
  &:focus {
    border-color: shade($base-color, 15%);
    background-color: shade($base-color, 15%);
    color: $white;
    @if $base-color == $component-default-color {
      border-color: $button-contained-hover-bg;
      background-color: $button-contained-hover-bg;
      color: $base-color;
    }
  }
  @if $base-color == $component-default-color {
    border-color: $button-default-hover-bg;
    background-color: $button-default-hover-bg;
    color: $base-color;
  }
}

@mixin button-variant-flat($base-color) {
  @include button-disabled(
    $component-disabled-color,
    $component-disabled-bg,
    $component-disabled-bg
  );
  border-color: tint($base-color, 90%);
  background-color: tint($base-color, 90%);
  color: $base-color;
  &:hover,
  &:active,
  &.#{$button-prefix}-active,
  &:focus {
    border-color: tint($base-color, 75%);
    background-color: tint($base-color, 75%);
    @if $base-color == $component-default-color {
      border-color: $button-default-hover-bg;
      background-color: $button-default-hover-bg;
    }
  }
  @if $base-color == $component-default-color {
    border-color: $button-default-bg;
    background-color: $button-default-bg;
  }
}

@mixin button-variant-text($base-color) {
  @include button-disabled($component-disabled-color, transparent, transparent);
  height: auto;
  min-height: unset;
  padding: 0 $text-button-padding;
  border: none;
  background: transparent;
  color: $base-color;
  // vertical-align: unset;
  &:hover,
  &:active,
  &.#{$button-prefix}-active,
  &:focus {
    color: tint($base-color, 30%);
    @if $base-color == $component-default-color {
      color: $primary-color;
      .#{$button-prefix}-prefix {
        color: $primary-color;
      }
    }
  }
}
@mixin button-variant-outlined($base-color) {
  @include button-disabled($component-disabled-color, $component-disabled-border, $white);
  border-color: $base-color;
  background-color: $white;
  color: $base-color;
  &:hover,
  &:active,
  &.#{$button-prefix}-active,
  &:focus {
    border-color: shade($base-color, 15%);
    background-color: $white;
    color: shade($base-color, 15%);
    @if $base-color == $component-default-color {
      border-color: $primary-color;
      color: $primary-color;
    }
  }
  @if $base-color == $component-default-color {
    border-color: $global-border-color;
  }
}
@mixin button-variant-hollow($highlight-color, $base-color: $white) {
  @include button-disabled($component-disabled-color, $component-disabled-color, transparent);
  border-color: $base-color;
  background-color: transparent;
  color: $base-color;
  &:hover,
  &:active,
  &.#{$button-prefix}-active,
  &:focus {
    border-color: $highlight-color;
    color: $highlight-color;
    .#{$button-prefix}-prefix {
      color: $highlight-color;
    }
  }
}

@mixin button-click-animation-base {
  &::after {
    display: block;
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border: 0 solid;
    border-radius: inherit;
    opacity: 0.5;
    animation: buttonEffect $animation-duration-slower $ease-out-circ;
    animation-fill-mode: both;
    content: '';
    pointer-events: none;
  }
}

@mixin ne-button {
  .#{$prefix}-button.#{$prefix}-icon-button {
    width: auto;
    min-width: 0;
    height: auto;
    padding: $icon-button-padding;
  }
  .#{$prefix}-button {
    @include button-base;

    &-shape-circle {
      border-radius: 9999px;
    }

    &-shape-dash {
      border-style: dashed;
    }
    &-shape-borderless {
      border: none !important;
    }
    &-clicked:not(.#{$button-prefix}-text):not(.#{$button-prefix}-shape-borderless) {
      @include button-click-animation-base;
    }
    .#{$button-prefix}-prefix {
      margin-right: $icon-gutter;
    }

    &-color-secondary {
      @include button-variant-flat($component-default-color);
      &.#{$button-prefix}-hollow {
        @include button-variant-hollow($primary-color, $white);
        .#{$button-prefix}-prefix {
          color: $white;
        }
      }
      &.#{$button-prefix}-contained {
        @include button-variant-contained($component-default-color);
      }
      &.#{$button-prefix}-outlined {
        @include button-variant-outlined($component-default-color);
      }
      &.#{$button-prefix}-text {
        @include button-variant-text($component-default-color);
      }
      .#{$button-prefix}-prefix {
        color: $icon-color;
      }
    }

    &-color-primary {
      @include button-variant-flat($primary-color);
      &.#{$button-prefix}-hollow {
        @include button-variant-hollow(tint($primary-color, 30%), $primary-color);
      }
      &.#{$button-prefix}-contained {
        @include button-variant-contained($primary-color);
      }
      &.#{$button-prefix}-outlined {
        @include button-variant-outlined($primary-color);
      }
      &.#{$button-prefix}-text {
        @include button-variant-text($primary-color);
      }
    }
    &-color-error {
      @include button-variant-flat($error-color);
      &.#{$button-prefix}-hollow {
        @include button-variant-hollow(tint($error-color, 30%), $error-color);
      }

      &.#{$button-prefix}-contained {
        @include button-variant-contained($error-color);
      }
      &.#{$button-prefix}-outlined {
        @include button-variant-outlined($error-color);
      }
      &.#{$button-prefix}-text {
        @include button-variant-text($error-color);
      }
    }
    &-color-success {
      @include button-variant-flat($success-color);
      &.#{$button-prefix}-hollow {
        @include button-variant-hollow(tint($success-color, 30%), $success-color);
      }
      &.#{$button-prefix}-contained {
        @include button-variant-contained($success-color);
      }
      &.#{$button-prefix}-outlined {
        @include button-variant-outlined($success-color);
      }
      &.#{$button-prefix}-text {
        @include button-variant-text($success-color);
      }
    }
    &-color-warning {
      @include button-variant-flat($warning-color);
      &.#{$button-prefix}-hollow {
        @include button-variant-hollow(tint($warning-color, 30%), $warning-color);
      }
      &.#{$button-prefix}-contained {
        @include button-variant-contained($warning-color);
      }
      &.#{$button-prefix}-outlined {
        @include button-variant-outlined($warning-color);
      }
      &.#{$button-prefix}-text {
        @include button-variant-text($warning-color);
      }
    }
    &-color-info {
      @include button-variant-flat($info-color);
      &.#{$button-prefix}-hollow {
        @include button-variant-hollow(tint($info-color, 30%), $info-color);
      }
      &.#{$button-prefix}-contained {
        @include button-variant-contained($info-color);
      }
      &.#{$button-prefix}-outlined {
        @include button-variant-outlined($info-color);
      }
      &.#{$button-prefix}-text {
        @include button-variant-text($info-color);
      }
    }
    &-hollow {
      @include button-variant-hollow($primary-color);
    }
  }
  @each $name, $value in $sizes-map {
    .#{$button-prefix}-#{$name} {
      min-width: $value;
      height: $value;
      padding: map-get($button-padding-map, $name);
      font-size: map-get($font-sizes-map, $name);
      line-height: ($global-line-height + 0.01px) / map-get($font-sizes-map, $name);
      &.#{$button-prefix}-icon {
        padding: 0;
        .#{$button-prefix}-prefix {
          margin-right: 0;
        }
      }
    }
  }
}