@import './global/variables.scss';
@import './global/mixins';

$btn-primary-bg: $sg-blue-80;
$btn-primary-bg-hover: $sg-blue;
$btn-primary-border: $sg-blue;
$btn-primary-color: $white;
$btn-primary-badge-bg: $white;
$btn-primary-badge-color: $sg-blue;

$btn-secondary-bg: $white;
$btn-secondary-bg-hover: $sg-blue-10;
$btn-secondary-border: $sg-blue-80;
$btn-secondary-color: $sg-blue;
$btn-secondary-badge-bg: $sg-blue;
$btn-secondary-badge-color: $white;

$btn-danger-bg: rgba($ron-burgundy, 0.8);
$btn-danger-bg-hover: $ron-burgundy;
$btn-danger-border: $ron-burgundy;
$btn-danger-color: $white;
$btn-danger-badge-bg: $white;
$btn-danger-badge-color: $ron-burgundy;

$btn-dark-bg: transparent;
$btn-dark-bg-hover: rgba($white, 0.1);
$btn-dark-border: rgba($white, 0.6);
$btn-dark-color: $white;
$btn-dark-badge-bg: $white;
$btn-dark-badge-color: $slate;

$btn-disabled-bg: $steel;
$btn-disabled-border: $steel;
$btn-disabled-color: $white;
$btn-disabled-secondary-bg: $white;
$btn-disabled-secondary-border: $steel;
$btn-disabled-secondary-color: $steel;

$btn-gear-color: $slate-60;
$btn-gear-primary-color: $white;

$btn-group-bg: $white;
$btn-group-bg-hover: rgba($sg-blue, 0.1);
$btn-group-bg-active: $sg-blue-80;
$btn-group-border: rgba($sg-blue, 0.8);
$btn-group-border-active: $sg-blue;
$btn-group-color: $sg-blue;
$btn-group-color-active: $white;

$btn-selectable-border: $slate-20;
$btn-selectable-border-hover: $sg-blue-40;
$btn-selectable-border-active: $sg-blue;
$btn-selectable-color: $slate-80;

.btn-list {
  font-size: 0;

  > .btn + .btn {
    margin-left: 12px;
  }
}

.btn {
  position: relative;
  display: inline-block;
  padding: 11px 30px;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-radius: $border-radius;
  box-sizing: border-box;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  user-select: none;

  &.is-disabled {
    color: $btn-disabled-color;
    pointer-events: none;
    cursor: default;
    background-color: $btn-disabled-bg;
    border-color: $btn-disabled-border;

    &.btn-secondary,
    &.btn-danger {
      color: $btn-disabled-secondary-color;
      background-color: $btn-disabled-secondary-bg;
      border-color: $btn-disabled-secondary-border;
    }
  }

  &.has-icon,
  &.btn-with-icon,
  &.has-badge {
    padding-right: 18px;
    padding-left: 18px;
  }

  &.is-loading {
    pointer-events: none;
  }

  :global {
    .sg-icon,
    .sg-loader,
    .badge {
      display: block;
      float: left;
      margin-right: 6px;
    }

    .badge {
      margin-bottom: 0;
    }
  }
}

.btn-primary {
  color: $btn-primary-color;
  background-color: $btn-primary-bg;
  border-color: $btn-primary-border;

  &:hover,
  &:focus {
    color: $btn-primary-color;
    background-color: $btn-primary-bg-hover;
    outline: none;
  }

  &:active,
  &.is-active {
    @include btn-shadow;
  }

  &.has-badge {
    :global {
      .badge {
        color: $btn-primary-badge-color;
        background-color: $btn-primary-badge-bg;
      }
    }
  }
}

.btn-secondary {
  color: $btn-secondary-color;
  background-color: $btn-secondary-bg;
  border-color: $btn-secondary-border;

  &:hover,
  &:focus {
    color: $btn-secondary-color;
    background-color: $btn-secondary-bg-hover;
  }

  &:active,
  &.is-active {
    @include btn-shadow;
  }

  &.has-badge {
    :global {
      .badge {
        color: $btn-secondary-badge-color;
        background-color: $btn-secondary-badge-bg;
      }
    }
  }
}

.btn-tertiary {
  color: $btn-tertiary-color;
  background-color: $btn-tertiary-bg;
  border-color: $btn-tertiary-color;

  &:focus,
  &:hover {
    color: $btn-tertiary-color-hover;
  }

  &:active,
  &.is-active {
    @include btn-shadow;
  }

  &.has-badge :global(.badge) {
    background-color: $btn-tertiary-badge-bg;
  }
}

.btn-danger {
  color: $btn-danger-color;
  background-color: $btn-danger-bg;
  border-color: $btn-danger-border;

  &:hover,
  &:focus {
    color: $btn-danger-color;
    background-color: $btn-danger-bg-hover;
  }

  &:active,
  &.is-active {
    @include btn-shadow;
    color: $btn-danger-color;
  }

  &.has-badge {
    :global {
      .badge {
        color: $btn-danger-badge-color;
        background-color: $btn-danger-badge-bg;
      }
    }
  }
}

.btn-small {
  padding: 6px 18px;
}

.btn-dropdown {
  padding-right: 30px;
  padding-left: 18px;

  &::before {
    @include icon-font-base;
    position: absolute;
    top: 12px;
    right: 13px;
    color: inherit;
    content: $icon-caret;
  }

  &.btn-small {
    padding-right: 30px;
    padding-left: 20px;

    &::before {
      top: 7px;
      right: 10px;
    }

    &.btn-dropdown-gear {
      padding: 0 15px 0 10px;
    }

    &.btn-dropdown-gear::before {
      top: 3px;
      right: 1px;
    }
  }
}

.btn-dropdown-gear {
  border: 0;

  &.is-active > .sg-icon {
    transform: rotate(135deg);
  }

  &::before {
    top: 14px;
    font-size: 16px;
    color: $btn-gear-color;
  }

  &.btn-primary::before,
  &.btn-primary > .sg-icon {
    color: $btn-gear-primary-color;
  }

  > .sg-icon {
    display: block;
    font-size: 18px;
    color: $btn-gear-color;
    transition: transform 0.5s;
  }
}

.btn-on-dark.btn-secondary {
  color: $btn-dark-color;
  background-color: $btn-dark-bg;
  border-color: $btn-dark-border;

  &:hover,
  &:focus {
    background-color: $btn-dark-bg-hover;
    border-color: $btn-dark-color;
  }

  &.is-disabled {
    color: $btn-disabled-secondary-color;
    background-color: $btn-dark-bg;
    border-color: $btn-disabled-secondary-border;

    &:hover,
    &:focus {
      background-color: inherit;
    }
  }

  &.has-badge {
    :global {
      .badge {
        color: $btn-dark-badge-color;
        background-color: $btn-dark-badge-bg;
      }
    }
  }
}

.btn-group {
  display: inline-block;
  padding: 4px;
  border: 1px solid $sg-blue-80;
  border-radius: $border-radius;

  &.is-disabled {
    border-color: $btn-disabled-border;

    > .btn-group-item {
      color: $btn-disabled-secondary-color;
      pointer-events: none;

      &:hover,
      &:focus {
        background-color: transparent;
      }
    }

    > .btn-group-item.is-active {
      color: $btn-disabled-color;
      background-color: $btn-disabled-bg;
      border-color: $btn-disabled-border;
    }
  }

  > .btn-group-item {
    float: left;
    padding: 6px 18px;
    color: $btn-group-color;
    background-color: $btn-group-bg;
    border: 1px solid transparent;

    &:hover,
    &:focus {
      background-color: $btn-group-bg-hover;
    }

    &.is-active {
      color: $btn-group-color-active;
      background-color: $btn-group-bg-active;
      border-color: $btn-group-border-active;
    }
  }

  > .btn-group-item.btn-small {
    padding: 2px 12px;
  }
}

.btn-group-stacked {
  .btn-group-item {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
}