// Import any global ../variables from "../../../variables/*.scss"
@import "../../variables/colors.scss";
@import "../../variables/fonts.scss";
@import "../../variables/spacing.scss";

.button {
  display: inline-block;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;

  height: 40px;
  line-height: 38px;
  text-decoration: none;
  outline: none;
  border-radius: $borderRadiusBase;
  border: 1px solid transparent;

  font-family: $fontBase;
  font-size: 14px;
  font-weight: bold;

  cursor: pointer;
  user-select: none;
  transition: all 100ms ease-in-out;
  svg *[fill-rule=nonzero] {
    transition: fill 100ms ease-in-out;
  }

  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 16px;
  padding-right: 16px;

  &:disabled {
    color: $gray500;
    border-color: $gray200;
    cursor: not-allowed;
    &:hover, &:focus { box-shadow: none; }
    &:active { border-color: $gray200; }
  }
}

.icon {
  display: inline-block;
  vertical-align: middle;
  height: 24px;
  margin-bottom: 2px;
}
.icon.left {
  transform: translate(-4px, 0px);
  margin-right: 4px;
}
.icon.left:last-child { transform: translate(-9px, 0px); }
.icon.right {
  transform: translate(4px, 0px);
  margin-left: 4px;
}

.small {
  font-weight: normal;
  height: 24px;
  line-height: 22px;
  font-size: 13px;
  padding-left: 4px;
  padding-right: 4px;
}
.large {
  height: 50px;
  line-height: 48px;
  font-size: 18px;
}

$themes: (
  // NOTE: "primary" uses the same colors as "emphasis",
  // except for special cases, see below
  primary: (
    color: $blue,
    colorLight: $blueLight,
    colorDark: $blueDark,
  ),
  emphasis: (
    color: $blue,
    colorLight: $blueLight,
    colorDark: $blueDark,
  ),
  danger: (
    color: $red,
    colorLight: $redLight,
    colorDark: $redDark,
  ),
  warning: (
    color: $yellow,
    colorLight: $yellowLight,
    colorDark: $yellowDark,
  ),
  success: (
    color: $green,
    colorLight: $greenLight,
    colorDark: $greenDark,
  ),
  muted: (
    color: $gray500,
    colorLight: $gray200,
    colorDark: $gray700
  ),
);

@mixin icon-color($color) {
  svg *[fill-rule=nonzero] {
    fill: $color;
  }
}

@each $themeName, $colors in $themes {
  $color: map-get($colors, color);
  $colorLight: map-get($colors, colorLight);
  .#{$themeName} {
    &.default {
      background-color: transparent;
      @if $themeName == 'primary' {
        color: $midnight;
        @include icon-color($midnight);
        border-color: $midnightTransparent20;
      } @else {
        color: $color;
        @include icon-color($color);
        border-color: $color;
      }
    }
    &.default:hover {
      color: $color;
      @include icon-color($color);
      background-color: $colorLight;
      border-color: $colorLight;
    }
    &.default:focus {
      color: $color;
      @include icon-color($color);
      background-color: $colorLight;
      border-color: $color;
      box-shadow: 0 0 0 1px $color;
    }
    &.default:disabled {
      color: $gray500;
      @include icon-color($gray500);
      background-color: $gray200;
      border-color: $gray200;
    }
    &.default:active {
      color: $white;
      @include icon-color($white);
      background-color: $color;
      border-color: $color;
      box-shadow: none;
    }
    &.default:hover:disabled,
    &.default:focus:disabled,
    &.default:active:disabled { box-shadow: none; }

    &.filled {
      color: $white;
      @include icon-color($white);
      @if $themeName == primary {
        background-color: $midnight;
        border-color: $midnight;
      } @else {
        background-color: $color;
        border-color: $color;
      }
    }
    &.filled:hover {
      color: $color;
      @include icon-color($color);
      background-color: $colorLight;
      border-color: $colorLight;
    }
    &.filled:focus {
      color: $color;
      @include icon-color($color);
      background-color: $colorLight;
      border-color: $color;
      box-shadow: 0 0 0 1px $color;
    }
    &.filled:active {
      color: $white;
      @include icon-color($white);
      background-color: $color;
      border-color: $color;
      box-shadow: none;
    }
    &.filled:disabled {
      color: $gray500;
      @include icon-color($gray500);
      background-color: $gray200;
      border-color: $gray200;
    }
    &.filled:hover:disabled,
    &.filled:focus:disabled,
    &.filled:active:disabled { box-shadow: none; }

    &.underline {
      @if $themeName == primary {
        color: $midnight;
        @include icon-color($midnight);
      } @else {
        color: $color;
        @include icon-color($color);
      }
      background-color: transparent;
      border-color: transparent;
      text-decoration: underline;
    }
    &.underline:hover {
      color: $color;
      @include icon-color($color);
      background-color: $colorLight;
      border-color: $colorLight;
    }
    &.underline:focus {
      color: $color;
      @include icon-color($color);
      background-color: $colorLight;
      border-color: $color;
      box-shadow: 0 0 0 1px $color;
    }
    &.underline:active {
      color: $white;
      @include icon-color($white);
      background-color: $color;
      border-color: $color;
      box-shadow: none;
    }
    &.underline:disabled {
      color: $gray500;
      @include icon-color($gray500);
      background-color: $gray200;
    }
    &.underline:hover:disabled,
    &.underline:focus:disabled,
    &.underline:active:disabled {
      border-color: transparent;
    }
  }
}




.buttonGroup {
  white-space: nowrap;
}
.buttonGroup .button {
  margin-left: 4px;
  margin-right: 4px;
}
.buttonGroup > .button:first-child { margin-left: 0px; }
.buttonGroup > .button:last-child { margin-right: 0px; }