$seed-button-namespace: 'c-Button';
$seed-button-font-weight: 600;
@import '../configs/seed-control';
@import 'pack/seed-button/_index';
@import 'pack/seed-dash/_index';
@import 'pack/seed-button/mixins/generate-button-styles';

button.#{$seed-button-namespace} {
  @import '../resets/base';
}

.c-Button {
  @import '../configs/color';

  &:focus {
    position: relative;
    z-index: 2;
  }

  &.is-first {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  &.is-notOnly {
    border-radius: 0;
  }
  &.is-last {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  &:before {
    border-radius: 2px;
    bottom: 0;
    content: '';
    display: none;
    left: 0;
    opacity: 0.3;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
  }

  &--outline {
    border-color: currentColor;
    background-color: transparent;
    box-shadow: 0 0 0 1px currentColor inset;
    position: relative;
    &:hover,
    &:active,
    &:focus,
    &:focus:active {
      border-color: currentColor;
      background-color: transparent;
      box-shadow: 0 0 0 1px currentColor inset;
    }
    &:focus,
    &:focus:active {
      &:before {
        box-shadow: 0 0 0 3px currentColor;
        display: block;
      }
    }
    &:focus:active {
      &:before {
        opacity: 0.45;
      }
    }
  }

  $themes: (
    editing:
      (
        _generate-states: false,
        background:
          (
            default: _color(yellow, 100),
            hover: _color(yellow, 200),
            active: darken(_color(yellow, 200), 3%),
            focus: _color(yellow, 100)
          ),
        border:
          (
            default: _color(yellow, 600),
            hover: _color(yellow, 600),
            active: _color(yellow, 700),
            focus: darken(_color(yellow, 700), 1%)
          ),
        box-shadow:
          (
            default: 0 0 0 1px _color(yellow, 600) inset,
            hover: 0 0 0 1px _color(yellow, 600) inset,
            active: 0 0 0 1px _color(yellow, 700) inset,
            focus: 0 0 0 1px darken(_color(yellow, 700), 1%) inset
          ),
        text:
          (
            default: _color(yellow, 700),
            hover: darken(_color(yellow, 700), 5%),
            active: darken(_color(yellow, 700), 8%),
            focus: darken(_color(yellow, 700), 5%)
          ),
        text-decoration: (default: none, hover: none, active: none, focus: none)
      )
  );

  // Themes
  @each $theme, $config in $themes {
    &--#{$theme} {
      @include generate-button-styles($config);
    }
  }
  // Theme: Pill
  &--pill.c-Button {
    background-color: white;
    border-radius: 9999px;
    color: _color(charcoal, 200);
    font-size: 12px;
    font-weight: 500;
    height: 18px;
    line-height: 1;
    padding: 0 8px;

    &:hover {
      color: _color(charcoal, 300);
      border-color: _color(grey, 800);
    }
    &:active {
      background-color: _color(grey, 300);
    }
    &:active,
    &:focus {
      border-color: _color(grey, 800);
      box-shadow: 0 0 0 1px _color(grey, 800);
    }
  }
}