/* ===================================================
/* BUTTONS
/* ===================================================

// =================================
// MIXINS
// =================================
=create-button
  +reset-appearance
  display: inline-flex
  flex:
    grow: 0
    shrink: 0
    basis: auto
  justify-content: center
  align-items: center
  line-height: $line-height
  vertical-align: center
  padding: $button-padding
  font:
    size: $font-size
    weight: $font-weight-normal
  color: $font-color
  text:
    align: center
    decoration: none
  background: $color-default
  border: 1px solid $color-default
  border-radius: $border-radius
  cursor: pointer
  white-space: nowrap
  // Pseudo
  &:not(:disabled):hover,
  &:not(:disabled):focus
    text-decoration: none // Ensures <a> won't have any underlines
    background: darken($color-default, $darken)
    border-color: darken($color-default, $darken)
  &:disabled,
  &.make-disabled,
  &[disabled]
    cursor: not-allowed
    opacity: 0.3
    pointer-events: none
    user-select: none
  // Modifiers
  @each $type, $color in $button-color-map
    &.make-#{$type}
      color: setTextColor($color) !important
      background: $color
      border: 1px solid $color
      // Pseudo
      &:not(:disabled):hover,
      &:not(:disabled):focus,
      &:not(:disabled):active
        background: darken($color, $darken)
        border-color: darken($color, $darken)
      // Modifiers
      &.make-reversed
        color: $color !important
        background: setTextColor($color)
        border: 1px solid setTextColor($color)
        // Pseudo
        &:not(:disabled):hover,
        &:not(:disabled):focus,
        &:not(:disabled):active
          background: darken(setTextColor($color), $darken / 2)
          border-color: setTextColor($color)
        // Modifiers
        &.make-outlined
          color: setTextColor($color) !important
          background: $color-none !important
          border: 1px solid setTextColor($color)
          // Pseudo
          &:not(:disabled):hover,
          &:not(:disabled):focus,
          &:not(:disabled):active
            color: setTextColor($color) !important
            background: $color
            border-color: $color
      &.make-link
        @if ($type == 'light')
          color: $color !important
          background: $color-none
          border: none
          // Pseudo
          &:not(:disabled):hover,
          &:not(:disabled):focus,
          &:not(:disabled):active
            color: darken($color, 10%) !important
            text-decoration: underline
            background: rgba($color-default, 0.1)
        @else
          color: $color !important
          background: $color-none
          border: none
          // Pseudo
          &:not(:disabled):hover,
          &:not(:disabled):focus,
          &:not(:disabled):active
            color: darken($color, 10%) !important
            text-decoration: underline
            background: rgba($color, 0.1)
      &.make-outlined
        color: $color !important
        background: $color-none
        border: 1px solid $color
        // Pseudo
        &:not(:disabled):hover,
        &:not(:disabled):focus,
        &:not(:disabled):active
          color: setTextColor($color) !important
          background: $color !important
          border-color: $color
  // Modifiers
  &.make-smaller
    font-size: $font-size * 0.66666
  &.make-small
    font-size: $font-size * 0.8
  &.make-large
    font-size: $font-size * 1.33333
  &.make-larger
    font-size: $font-size * 1.6
  &.make-block
    display: block
    width: 100%
    padding: 0.5rem 0
    font-size: 1.8rem
  &.make-radial
    border-radius: $border-radius * 2
  &.make-round
    border-radius: 3.5rem

// =================================
// BUTTONS
// =================================
.button
  +create-button