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

@include exports('components.buttons') {
  //
  // Base styles
  //
  .btn {
    display: inline-block;
    font-family: $btn-font-family;
    font-weight: $btn-font-weight;
    color: $body-color;
    text-align: center;
    text-transform: $input-btn-text-transform;
    text-decoration: if($link-decoration == none, null, none);
    white-space: $btn-white-space;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: $btn-border-width solid transparent;
    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
    @include transition($btn-transition);

    @include hover() {
      color: $body-color;
      text-decoration: none;
    }

    &:focus,
    &.focus {
      outline: 0;
    }

    // Disabled comes first so active can properly restyle
    &.disabled,
    &:disabled {
      cursor: default;
      opacity: $btn-disabled-opacity;
    }

    &:not(:disabled):not(.disabled) {
      cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
    }
  }

  // Future-proof disabling of clicks on `<a>` elements
  a.btn.disabled,
  fieldset:disabled a.btn {
    pointer-events: none;
  }

  //
  // Alternate buttons
  //

  @each $color, $value in $theme-colors {
    .btn-#{$color} {
      @include button-variant($value, $value);
    }
  }

  @each $color, $value in $theme-colors {
    .btn-outline-#{$color} {
      @include button-outline-variant($value);
    }
  }

  //
  // Link buttons
  //

  // Make a button look and behave like a link
  .btn-link {
    font-weight: $font-weight-bold;
    color: $gray-500;
    text-decoration: none;

    @include hover() {
      color: $gray-900;
    }

    &:focus,
    &.focus {
      color: $gray-900;
    }

    &:disabled,
    &.disabled {
      color: $gray-300;
      pointer-events: none;
    }
    // No need for an active state here
  }

  // The .btn-icon class is made to contain an icon. This is useful for tab index to focus an icon like it is a button.
  // It can be a picture (JPG, PNG... etc) or SVG icon. By default it support SVG natively, but if you want to use
  // another kind of tag (like an img, span, div...) you can just add the .btn-icon-child class on those elements so
  // they will be updated accordingly.
  .btn-icon {
    font-weight: normal; // This is important to remove any spaces inside the button when using a child item.
    font-size: 0; // This is important to remove any spaces inside the button when using a child item.
    text-decoration: none;
    padding: 0 !important;
    border: none !important;
    margin: 0;
    line-height: normal;

    .btn-icon-child,
    svg {
      color: $gray-500;
      fill: $gray-500;
    }

    @include hover() {
      color: $gray-900;
      svg {
        color: $gray-900;
        fill: $gray-900;
      }
      .btn-icon-child {
        opacity: 0.8;
      }
    }

    &:focus,
    &.focus {
      color: $gray-900;
      svg {
        color: $gray-900;
        fill: $gray-900;
      }
      .btn-icon-child {
        opacity: 0.8;
      }
    }

    &:disabled,
    &.disabled {
      color: $gray-400;
      pointer-events: none;
      opacity: 1 !important;
      svg {
        pointer-events: none;
        color: $gray-400;
        fill: $gray-400;
      }
      .btn-icon-child {
        opacity: 0.6;
      }
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
      &:focus {
        transform: scale(1.2);
      }
    }
  }

  //
  // Button Sizes
  //

  .btn-lg {
    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius);
  }

  .btn-sm {
    font-weight: $font-weight-normal;
    text-transform: none;
    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius);
  }

  //
  // Block button
  //

  .btn-block {
    display: block;
    width: 100%;

    // Vertically space out multiple block buttons
    + .btn-block {
      margin-top: $btn-block-spacing-y;
    }
  }

  // Specificity overrides
  input[type='submit'],
  input[type='reset'],
  input[type='button'] {
    &.btn-block {
      width: 100%;
    }
  }
}