////
///
/// This file defines the bulk of all button styling.
///
/// @group buttons
/// @author Gert-Jan Meire
///
////

///
/// Button - small variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-small {
  @include small-text;

  min-height: 1.9rem;
  letter-spacing: .02em;
}

///
/// Button - medium variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-medium {
  @include medium-text;

  min-height: 2.2rem;
  letter-spacing: .025em;
}

///
/// Button - large variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-large {
  @include large-text;

  min-height: 2.5rem;
  letter-spacing: .03em;
}

///
/// Button - disabled variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
/// @require color
///
@mixin button-disabled {
  [class*='cs--'] & {
    border: 0;
    background-color: color('dark-gray', -3);
    color: color('white');
    box-shadow: none;

    &:hover {
      background-color: color('dark-gray', -3);
      color: color('white');
      box-shadow: none;
      cursor: not-allowed;
    }
  }
}

///
/// General button styling.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button {
  @include button-medium; // Default.
  @include bold-text;

  padding: 0 2.6em;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, box-shadow .1s ease-in-out;
  border: 2px solid;
  border-radius: border-radius('radius-1');
  outline: 0;
  font-family: $default-font-family;
  text-align: center;
  cursor: pointer;

  &:disabled {
    @include button-disabled;
  }

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

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

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

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

  &[class*="icon-"] {
    @include button-icon;
  }
}

///
/// Makes a button display block instead of inline.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-block {
  display: inline-block;
  width: 100%;
}

///
/// Define a button with an icon.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-icon {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 0 .8em 0 1.2em;
  line-height: 1.8em;
  text-align: left;

  // Padding fix specificly for IE11.
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
    padding: .3em .8em 0 1.2em;
    line-height: 1.6;
  }

  &::before {
    order: 2;
    margin-left: .5rem;
    // Fix for IE11 flex order property.
    float: right;
    font-size: 1.8em;

    // Font-size specificly for IE11.
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
      font-size: 1.2rem;
    }
  }

  &::after {
    padding-right: .2rem;
    content: '';
  }
}

.button,
input[type="button"],
input[type="submit"] {
  @include button;

  -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
}