@import "colors-list";

@mixin button-theme($theme-name) {
  $colors: map-get(map-get($themes, $theme-name), 'colors');
  font-size: 15px;
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s linear, color 0.3s linear, opacity 0.3s linear, outline-color 0.3s ease-in-out, outline-width 0.3s ease-in-out, box-shadow 0.3s;

  &.button-cut {
    border-radius: 5px;
  }

  &.button-rounded {
    border-radius: 15px;
  }

  @each $key, $color in $colors {
    @if($theme-name == 'dark') {
      @include button($key, map-get($colors, 'black'), $color);
    }
    @else {
      @include button($key, map-get($colors, 'white'), darken($color, 20));
    }
  }

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  &.button-exp {
    @each $key, $color in $colors {
      @if($theme-name == 'dark') {
        @include button($key, $color, darken($color, 60));
      }
      @else {
        @include button($key, $color, darken($color, 40));
      }
    }
  }

  &.button-plate {
    @each $key, $color in $colors {
      @if($theme-name == 'dark') {
        @include button($key, $color, darken(map-get($colors, 'gray'), 45));
      }
      @else {
        @include button($key, darken($color, 30), lighten(map-get($colors, 'gray'), 25));
      }
    }
  }

  &.button-shade {
    @each $key, $color in $colors {
      @if($theme-name == 'dark') {
        @include button($key, $color, mix(map-get($colors-dark, 'gray-0'), $color, 85%));
      }
      @else {
        @include button($key, darken($color, 30), mix(map-get($colors, 'white'), $color, 80%));
      }
    }
  }
}

@mixin button($key, $fg-color, $bg-color) {
  &.button-#{$key} {
    background-color: $bg-color;
    color: $fg-color;
    &:hover {
      background-color: lighten($bg-color, 10);
    }
    &:focus,
    &:active {
      background-color: darken($bg-color, 5);
      box-shadow: 0 0 2px 2px transparentize($bg-color, 0.7);
    }
  }
}

.button {
  @include button-theme('light');
}

.dark .button {
  @include button-theme('dark');
}