// Button : Base

// Dependencies
@import "pack/seed-dash/_index";
@import "pack/seed-publish/_index";
@import "../../configs/color";
@import "../../mixins/disabled-styles";
@import "./config";


@include export(seed-button) {
  & {
    -webkit-appearance: none;
    appearance: none;
    background-color: _color(button, default, background);
    border-color: _color(button, default, border);
    border-radius: $seed-button-border-radius;
    border-width: $seed-button-border-size;
    border-style: $seed-button-border-style;
    box-shadow: _color(button, default, box-shadow);
    box-sizing: border-box;
    color: _color(button, default, text);
    cursor: pointer;
    display: inline-block;
    font-size: $seed-button-font-size;
    font-weight: $seed-button-font-weight;
    height: $seed-button-height;
    line-height: $seed-button-line-height;
    outline: none;
    padding: $seed-button-padding;
    transition: $seed-button-transition;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;

    &:hover {
      background-color: _color(button, default, background, hover);
      border-color: _color(button, default, border, hover);
      color: _color(button, default, text, hover);
      text-decoration: none;
    }

    &:active {
      background-color: _color(button, default, background, active);
      border-color: _color(button, default, border, active);
      color: _color(button, default, text, active);
    }

    &:focus {
      border-color: _color(button, default, border, focus);
      box-shadow: _color(button, default, box-shadow, focus);
      color: _color(button, default, text, focus);

      &:active {
        box-shadow: _color(button, default, box-shadow, active);
      }
    }

    @include disabled-styles {
      background-color: _color(button, default, background);
      border-color: _color(button, default, border);
      text-decoration: none;
    }
  }
}