@import '../../thems/mixins';

.btn {
  appearance: none;
  border-radius: 100px;
  cursor: pointer;
  display: inline-block;
  height: $control-size;
  line-height: $line-height;
  outline: none;
  padding: $control-padding-y 1.6rem;
  text-align: center;
  text-decoration: none;
  transition: background .2s, border .2s, box-shadow .2s, color .2s;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  border: $border-width solid;
  line-height: 1;
  @include useTheme('color', 'color', 'button');
  @include useTheme('background-color', 'background-color', 'button');
  @include useTheme('border-color', 'border-color');
  &:not(.btn-link) {
    font-size: $font-size-sm;
  }
  &:focus:not(.btn-link) {
    @include control-shadow();
  }
  &:hover:not(.btn-link) {
    @include useTheme('background-color', 'background-color', 'button');
  }
  &:active:not(.btn-link),
  &.active:not(.btn-link),
  &:focus:not(.btn-link) {
    @include useTheme('background-color', 'background-color', 'button');
  }
  &[disabled]:not(.btn-link),
  &:disabled:not(.btn-link),
  &.disabled:not(.btn-link) {
    pointer-events: none;
    @include useTheme('border-color', 'border-color');
    @include useTheme('background', 'background-disabled');
    @include text-gray(0.4);
  }

  // Button Sizes
  &.btn-sm {
    font-size: $font-size-sm;
    height: $control-size-sm;
    padding: $control-padding-y 1rem;
  }

  &.btn-lg {
    font-size: $font-size;
    height: $control-size-lg;
  }

  // Button Primary
  &.btn-primary:not(.disabled):not(:disabled):not([disabled]) {
    border-color: transparent;
    @include useTheme('background', 'primary-gradient');
    @include useTheme('color', 'light-color');
    &:focus,
    &:hover {
      border-color: #ff5500;
      @include primary-shadow();
    }
    &:active,
    &.active {
      border-color: #ff5500;
    }
    &.loading {
      &::after {
        @include useTheme('border-bottom-color', 'light-color');
        @include useTheme('border-left-color', 'light-color');
      }
    }
  }

  // Button Colors
  &.btn-success {
    @include button-variant($success-color);
  }

  &.btn-error {
    @include button-variant($error-color);
  }

  &.btn-success.btn-outline {
    @include button-outline-variant($success-color);
  }

  &.btn-error.btn-outline {
    @include button-outline-variant($error-color);
  }

  &.btn-primary.btn-outline:not(.disabled):not(:disabled):not([disabled]) {
    @include button-outline-variant($primary-color);
  }
  &.btn-primary.btn-outline.disabled,
  &.btn-primary.btn-outline:disabled {
    @include button-outline-variant($primary-color);
  }

  // Button Link
  &.btn-link {
    background: transparent;
    border-color: transparent;
    @include useTheme('color', 'link-color');
    &:focus,
    &:hover,
    &:active,
    &.active {
      box-shadow: none;
      border-color: transparent;
      @include useTheme('color', 'link-color-dark');
    }
  }

  // Button Block
  &.btn-block {
    display: block;
    width: 100%;
  }

  // Button Action
  &.btn-action {
    width: $control-size;
    padding-left: 0;
    padding-right: 0;

    &.btn-sm {
      width: $control-size-sm;
    }

    &.btn-lg {
      width: $control-size-lg;
    }
  }

  // Button Clear
  &.btn-clear {
    background: transparent;
    border: 0;
    color: currentColor;
    height: $unit-5;
    line-height: $unit-4;
    margin-left: $unit-1;
    margin-right: -2px;
    opacity: 1;
    padding: $unit-h;
    text-decoration: none;
    width: $unit-5;

    &:focus,
    &:hover {
      @include useTheme('background', 'background-main');
      opacity: .95;
    }

    &::before {
      content: "\2715";
    }
  }
}

// Button groups
.btn-group {
  display: inline-flex;
  flex-wrap: wrap;

  .btn {
    flex: 1 0 auto;
    &:first-child:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
      margin-left: -$border-width;
    }
    &:last-child:not(:first-child) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      margin-left: -$border-width;
    }
    &:focus,
    &:hover,
    &:active,
    &.active {
      z-index: $zindex-0;
    }
  }

  &.btn-group-block {
    display: flex;

    .btn {
      flex: 1 0 0;
    }
  }
}