@import "../../styles/color.module";
@import "../../styles/font.module";

.button {
  line-height: 16px;
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: .4px;
  font-size: 14px;
  font-family: $fontSecondary;
  vertical-align: middle;
  text-align: center;
  outline: none;
  cursor: pointer;
  white-space: nowrap;

  // Icon

  svg, img {
    height: 16px;
    width: 16px;
    vertical-align: top;
    margin-left: 12px;
  }

  // Theme

  &[data-size="default"] {
    padding: 16px 32px;
  }

  &[data-size="thin"] {
    padding: 8px 24px;
  }

  &[data-theme="primary"] {
    background-color: $blue100;
    border: solid 1px $blue100;
    color: $white;
  }

  &[data-theme="secondary"] {
    background: transparent;
    color: $blue100;
    border: solid 1px $blue100;
  }

  &[data-theme="ghost"] {
    background: transparent;
    border-color: transparent;
    color: $blue100;
  }

  // Hover

  &[data-theme="primary"]:hover {
    background-color: $blueHover;
  }

  &[data-theme="secondary"]:hover {
    background-color: $blueHoverSecondary;
  }

  &[data-theme="ghost"]:hover {
    background-color: $blueHoverSecondary;
    border-color: transparent;
    color: $blue100;
  }

  // Active

  &[data-theme="primary"]:active {
    background-color: $blue100;
    border: solid 1px $blue100;
    color: $white;
  }

  &[data-theme="secondary"]:active {
    background-color: $blue100;
    border: solid 1px $blue100;
    color: $white;
  }

  &[data-theme="ghost"]:active {
    background-color: $blue100;
    border: solid 1px $blue100;
    color: $white;
  }

  // Focus

  &[data-theme="primary"]:focus {
    background-color: $blueFocused;
    border: solid 1px $blue100;
    color: $white;
  }

  &[data-theme="secondary"]:focus {
    background-color: $blueFocused;
    border: solid 1px $blue100;
    color: $white;
  }

  &[data-theme="ghost"]:focus {
    background-color: $blueFocused;
    border: solid 1px $blue100;
    color: $white;
  }

  // Disabled

  &[data-theme="primary"]:disabled:not([data-loading="true"]) {
    background-color: $grey10;
    border-color: $grey10;
    color: $grey50;
  }

  &[data-theme="secondary"]:disabled:not([data-loading="true"]) {
    background-color: $grey10;
    border-color: $grey50;
    color: $grey50;
  }

  &[data-theme="ghost"]:disabled:not([data-loading="true"]) {
    background-color: transparent;
    border-color: transparent;
    color: $grey50;
  }
}