@import "../var/colors";
@import "../var/options";
@import "../var/component/button";

@import "../fn/utils";

.btn {
  display: inline-block;
  min-width: $button-min-width;
  padding: $button-padding-y $button-padding-x;
  text-transform: $button-text-transform;
  font-weight: $button-font-weight;
  font-size: $button-font-size;
  border: $button-border;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  border: none;
  // Prevents mobile view from highlighting the buttons on tap
  -webkit-tap-highlight-color: transparent;

  &:focus {
    // Prevent the focus outline from being drawn
    outline: none;
  }
  &:disabled {
    opacity: .6;
    cursor: not-allowed;
  }

  @if $enable-border-radius {
    border-radius: $button-border-radius;
  }
  @if $enable-transitions {
    transition: $button-transition;
  }

  @each $accent, $color in $color-map {
    &.btn-#{$accent} {
      @if $enable-css3-vars {
        --button-#{$accent}-color: text_color($color);
      };

      background-color: resolve-var($color, color-#{$accent});
      color: resolve-var(text_color($color), button-#{$accent}-color);

      // Feedback specific style:
      .feedback {
        background-color: text_color($color, $by: 25%);
      }
    }
  }
}