@import "settings";
@import "foundation-sites/scss/components/button";
@import "typography";
@import "utils";

/* --- Bonsai Variables --- */

/// Set to false to not include buttons in the bundle
/// @type Bool
$bonsai-include-buttons: $bonsai-include-components !default;

/// Border radius for buttons, defaulted to global-radius.
/// @type Number | List
$bonsai-button-radius: $bonsai-global-radius !default;

/// Padding inside of buttons
/// @type Number | List
$bonsai-button-padding: ($bonsai-spacing-base * 2) + 1  $bonsai-spacing-base * 3 !default;

/// Margin around buttons.
/// @type Number | List
$bonsai-button-margin: 0 0 ($bonsai-spacing-base * 3) + 2  0 !default;

/// Sizes for buttons.
/// @type Number | Map
$bonsai-button-sizes: (default: 0.875rem) !default;

/// Default background color
/// @type Color
$bonsai-button-background: get-color(primary) !default;

/// Background color on hover for buttons.
/// @type Color
$bonsai-background-hover: get-color(blue-gray) !default;

/// Default font color for buttons
/// @type Color
$bonsai-button-color: get-color(secondary) !default;

/// Default font color for buttons on hover
/// @type Color
$bonsai-color-hover: get-color(primary) !default;

/// Default color for disabled buttons
/// @type Color
$bonsai-button-disabled-background: get-color(very-light-gray) !default;

/// Default font color for disabled buttons
/// @type Color
$bonsai-button-disabled-color: get-color(disabled-text) !default;

/// Sets opacity for a disabled button.
/// @type Number | List
$bonsai-button-opacity-disabled: 1 !default;

/* --- Foundation configuration --- */
$button-radius: $bonsai-button-radius;
$button-background: $bonsai-button-background;
$button-padding: $bonsai-button-padding;
$button-margin: $bonsai-button-margin;
$button-background-hover: $bonsai-background-hover;
$button-color: $bonsai-button-color;
$button-color-hover: $bonsai-color-hover;
$button-opacity-disabled: $bonsai-button-opacity-disabled;
$closebutton-color: $bonsai-close-button-color;
$closebutton-color-hover: $bonsai-close-button-hover;
$closebutton-size: $bonsai-close-button-size;
$button-sizes: $bonsai-button-sizes;

/* --- Mixins --- */

/// Change the size of a button from the default size
///
/// @param {Number} $font-size - Font size of the button
/// @param {List} $padding - Padding value of the button
///
@mixin button-size ($font-size, $padding) {
  font-size: $font-size;
  padding: $padding;
}

/// Button Hover Style
@mixin button-hover-style {
  border: 1px solid $bonsai-button-background;
  background-color: $bonsai-background-hover;
  color: $bonsai-color-hover;
  -webkit-box-shadow: inset 0px 0px 0px 1px $bonsai-color-hover;
  -moz-box-shadow: inset 0px 0px 0px 1px $bonsai-color-hover;
  box-shadow: inset 0px 0px 0px 1px $bonsai-color-hover;
}

/// Full width button, will need to be included with one of the other button styles
@mixin expanded-button-style {
  @include button-expand(true);
}

/// Dropdown Arrow Only
/// @param {Color} $triangle-color - Color of the arrow
@mixin dropdown-button-triangle ($triangle-color) {
  &::after {
    @include css-triangle($color: $triangle-color);
  }
}

/// Shadow button is intended for the display of a joined button with an input field
///
/// @param {Number} $border [$input-border] - Button border
/// @param {Keyword} $border-non-direction [left] - Side of button to not have a border
/// @param {List} $box-shadow [$bonsai-input-shadow] - Button shadow
/// @param {Color} $active-color [$bonsai-white] - Color when the button is :active/:focus
///
@mixin shadow-button-style(
  $border: $input-border,
  $border-none-direction: left,
  $box-shadow: $bonsai-input-shadow,
  $active-color: $bonsai-white
) {
  border: $border;
  border-#{$border-none-direction}: none;
  box-shadow: $box-shadow;

  &:active,
  &:focus {
    color: $active-color;
  }
}

/// Disabled Button Styling
///
/// @param {Color} $color [$bonsai-button-disabled-color] - Text color
/// @param {Color} $background [$bonsai-button-disabled-background] - Background color
/// @param {Color} $border-color [$bonsai-button-disabled-background] - Border color
///
@mixin disabled-button-style (
  $color: $bonsai-button-disabled-color,
  $background: $bonsai-button-disabled-background,
  $border-color: $bonsai-button-disabled-background
) {
  @include button-disabled(
    $background: $background !important,
    $color: $color !important
  );

  border-color: $border-color !important;

  &,
  &:hover {
    cursor: not-allowed !important;
    box-shadow: none !important;
  }
}

/// Disabled Button Region Styling
@mixin disabled-button-region-style() {
  @include disabled-button-style($bonsai-medium-gray, transparent, transparent);

  border: none;
}

/// Dropdown Button Styling
///
/// @param {Color} $triangle-color [$bonsai-button-color] - color of the triangle
///
@mixin dropdown-button-style($triangle-color: $bonsai-button-color) {
  @include button-dropdown;
  @include dropdown-button-triangle($triangle-color);
}

/// Secondary Button Style
@mixin secondary-button-style {
  @include button-style(
    $background: $bonsai-white,
    $background-hover: $bonsai-background-hover,
    $color: $bonsai-button-background
  );

  border: 1px solid $bonsai-button-background;

  &:hover,
  &:focus {
    @include button-hover-style;
  }

  &:active {
    background-color: $bonsai-white;
    color: $bonsai-button-background;
    box-shadow: none;
  }
}

/// Ghost Button Style
@mixin ghost-button-style {
  background-color: transparent;
  border-color: $bonsai-white;
  color: $bonsai-white;

  &:hover,
  &:focus {
    background-color: $bonsai-white;
    color: get-color(dark-gray);
    border-color: transparent;
  }
}

/// Button region style
@mixin button-region-style {
  background: transparent;
  color: $bonsai-blue;
  text-decoration: underline !important;
  outline: none;
  transition: none;
  border: 2px solid transparent;

  &:focus,
  &:hover {
    background-color: $bonsai-blue-gray;
    border: 2px solid $button-color-hover;
    box-shadow: none;
  }
}

/// Primary Button Style
@mixin base-button-style {
  @include button-base;
  @include button-style(
    $background: $bonsai-button-background,
    $background-hover: $bonsai-background-hover,
    $color: $bonsai-button-color
  );
  @include no-underline;

  &:hover,
  &:focus {
    @include button-hover-style;
  }

  &:active {
    background-color: $bonsai-button-background;
    color: $bonsai-white;
  }

  &.dropdown {
    @include dropdown-button-style;

    color: $bonsai-white;
    background-color: $bonsai-button-background;
  }
}

/// Button Default Class Patterns.
///
/// This will generate all default CSS classes when $bonsai-include-button is true
@mixin buttons {
  @if $bonsai-include-buttons {
    button {
      cursor: pointer;
    }

    .button,
    .button.has-tip {
      @include base-button-style;

      &.dropdown {
        @include dropdown-button-style;
      }

      &.ghost {
        @include ghost-button-style;

        &.dropdown {
          @include dropdown-button-triangle(get-color("white"));

          &:hover,
          &:active,
          &:focus {
            @include dropdown-button-triangle(get-color(dark-gray));
          }
        }
      }

      &.secondary {
        @include secondary-button-style;

        &.dropdown {
          @include dropdown-button-triangle($bonsai-button-background);

          background-color: $bonsai-white;
          color: $bonsai-dark-blue;

          &:hover,
          &:focus {
            @include dropdown-button-triangle(get-color(very-dark-blue));

            background-color: $bonsai-background-hover;
          }
        }
      }

      &.small {
        @include button-size(85%, $bonsai-spacing-base + 3px ($bonsai-spacing-base * 2) + 2px);
      }

      &.large {
        @include button-size(115%, ($bonsai-spacing-base * 2) + 2px ($bonsai-spacing-base * 3) + 2px);
      }

      &.expanded {
        @include expanded-button-style;
      }

      &.shadow {
        @include shadow-button-style;
      }

      &.disabled,
      &:disabled {
        @include disabled-button-style;

        &.dropdown,
        &.dropdown:hover {
          @include dropdown-button-triangle($bonsai-button-disabled-color);
        }
      }

      &.region {
        @include button-region-style;

        &.disabled,
        &:disabled {
          @include disabled-button-region-style;
        }
      }
    }
  }
}