/// @Foundation.settings
// Button
$button-padding: 0.85em 1em !default;
$button-margin: 0 $global-padding $global-padding 0 !default;
$button-style: solid !default;
$button-background: $primary-color !default;
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
$button-color: auto !default;
$button-radius: 0 !default;
$button-sizes: (
  tiny: 0.7,
  small: 0.8,
  medium: 1,
  large: 1.3,
) !default;
$button-font-size: 0.9rem !default;
$button-opacity-disabled: 0.5 !default;
$button-tag-selector: false !default;
///

%button {
  display: inline-block;
  border: 0;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease-out;
  vertical-align: middle;

  padding: $button-padding;
  margin: $button-margin;
  font-size: $button-font-size;
  border-radius: $button-radius;

  // Dropdown arrow
  // TODO: Change to class and mixin because now the toggle is 'fa-open' which is too generic
  // &[data-popup-toggle] {
  //   position: relative;
  //   padding-right: 2em; // Placeholder

  //   &::after {
  //     @include css-triangle(6px, black, top);
  //     position: absolute;
  //     right: 0.7em;
  //     top: 50%;
  //     margin-top: -3px;
  //   }
  // }
}

@mixin button-size($size: medium, $expand: false) {
  $size: $button-font-size * map-get($button-sizes, $size);
  font-size: $size;

  @if $expand {
    @include button-expand;
  }

  @if using(iconic) {
    .iconic {
      width: 1em;
      height: 1em;
      vertical-align: middle;
      margin-right: 0.25em;
      margin-top: -2px; // The icons are oddly misaligned
    }
  }
}

@mixin button-expand($expand: true) {
  @if $expand {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  @else {
    display: inline-block;
    width: auto;
    margin: $button-margin;
  }
}

@mixin button-style(
  $background: $button-background,
  $background-hover: $button-background-hover,
  $color: $button-color,
  $style: $button-style,
  $radius: $button-radius,
  $btngroup: false
){
  @if $style == hollow {
    border: 1px solid $background;
    background: transparent;
    color: $background;

    &:hover, &:focus {
      border-color: scale-color($background, $lightness: 25%);
      background: transparent;
      color: scale-color($background, $lightness: 25%);
    }
  }
  // Solid is the default
  @else {
    @if $color == auto {
      $color: isitlight($background);
    }

    background: $background;
    color: $color;

    &:hover, &:focus {
      @if $background-hover == auto {
        background: scale-color($background, $lightness: -15%);
      }
      @else {
        background: $background-hover;
      }
      color: $color;
    }
  }

  @if $btngroup {
    border-color: $background;
    &:hover, &:focus {
      border-color: scale-color($background, $lightness: -25%);
    }
  }

  @if using(iconic) {
    @if $style == hollow {
      .iconic {
        @include color-icon($background);
      }
      &:hover .iconic {
        @include color-icon(scale-color($background, $lightness: 25%));
      }
    }
    @else {
      .iconic {
        @include color-icon($color);
      }
    }
  }
}

@mixin button-disabled() {
  opacity: $button-opacity-disabled;
  cursor: default;
  pointer-events: none;
}

@mixin button(
  $size: medium,
  $expand: false,
  $background: $button-background,
  $background-hover: $button-background-hover,
  $color: $button-color,
  $style: $button-style,
  $radius: $button-radius
) {
  @extend %button;
  @include button-size($size);
  @include button-expand($expand);
  @include button-style($background, $background-hover, $color, $style);
}

@include exports(button) {
  .button {
    @include button;

    &.tiny   { @include button-size(tiny); }
    &.small  { @include button-size(small); }
    &.large  { @include button-size(large); }
    &.expand { @include button-expand; }

    &.secondary { @include button-style($secondary-color, auto) }
    &.success   { @include button-style($success-color, auto) }
    &.warning   { @include button-style($warning-color, auto) }
    &.alert     { @include button-style($alert-color, auto) }
    &.info      { @include button-style($info-color, auto) }
    &.dark      { @include button-style($dark-color, auto) }

    @if $button-style != hollow {
      &.hollow { @include button-style($style: hollow);
        &.secondary { @include button-style($secondary-color, $style: hollow); }
        &.success   { @include button-style($success-color, $style: hollow); }
        &.warning   { @include button-style($warning-color, $style: hollow); }
        &.alert     { @include button-style($alert-color, $style: hollow); }
        &.info      { @include button-style($info-color, $style: hollow); }
        &.dark      { @include button-style($dark-color, $style: hollow); }
      }
    }

    &.disabled { @include button-disabled; }
  }

  @if $button-tag-selector {
    button {
      @extend .button;
    }
  }
}