@import '../../../styles/core.scss';

@mixin button($color) {
  $root: #{&};
  $dark: scale-color($color, $lightness: -10%);
  $darker: scale-color($color, $lightness: -20%);
  $lighter: scale-color($color, $lightness: +20%);
  $disabled: scale-color($color, $lightness: +40%);
  $text: if(lightness($color) > 66, black, white);
  $active: rgba(mix($text, $color, 70%), 0.9);

  background: $color;
  border-radius: 6px;
  color: $text;
  font-weight: 600;
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  &::-moz-focus-inner {
    border: 0;
  }

  &:hover {
    background: $dark;
  }

  &:active {
    background: $darker;
  }

  &:focus {
    box-shadow: 0 0 0 3px rgba($color, 0.25);
    outline: none;
  }

  &:disabled {
    background: $disabled;
    cursor: not-allowed;
  }

  &_sm {
    font-size: ms(-1);
    height: 30px;

    &.Button_circular {
      border-radius: 30px;
    }
  }

  &_md {
    font-size: ms(0);
    height: 40px;

    &.Button_circular {
      border-radius: 40px;
    }
  }

  &_lg {
    font-size: ms(1);
    height: 50px;

    &.Button_circular {
      border-radius: 50px;
    }
  }

  &_ghost {
    @extend #{$root};
    background: none;
    border: 2px solid currentColor;
    color: $color;

    &:hover,
    &:active,
    &:disabled {
      background: none;
    }

    &:hover {
      color: $dark;
    }

    &:active {
      color: $darker;
    }

    &:disabled {
      color: $disabled;
    }
  }

  &_text {
    @extend #{$root};
    background: transparent;
    box-shadow: none;
    color: $color;

    &:hover,
    &:active,
    &:disabled {
      background: none;
    }

    &:hover {
      color: $dark;
    }

    &:active {
      color: $darker;
    }

    &:disabled {
      color: $disabled;
    }
  }

  > i:not(:only-child) {
    &:first-child {
      margin-right: ms(-8);
    }

    &:last-child {
      margin-left: ms(-8);
    }
  }
}

.Button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font: inherit;
  font-size: ms(0);
  appearance: none;
  padding: ms(-5) ms(0);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  @include button(get(color 'blue'));
  @each $k, $v in get(color) {
    &_#{$k} {
      @extend .Button;
      @include button($v);
      &_darker {
        $darker: scale-color($v, $lightness: -33%);
        $darker: saturate($darker, 20%);
        @include button($darker);
      }
    }
  }
  @at-root a#{&} {
    text-decoration: none;
  }
}