/**
 * 1. Setting to inline-block guarantees the same height when applied to both
 *    button elements and anchor tags.
 * 2. Links can be focused when they're "disabled" (since we're just faking this with a class), but
 *    at least make them look like they're not focused.
 */
.kuiButton {
  display: inline-block; /* 1 */
  appearance: none;
  cursor: pointer;
  padding: 4px 12px 5px;
  font-size: $globalFontSize;
  font-weight: $buttonFontWeight;
  line-height: $globalLineHeight;
  height: $buttonHeight;
  text-decoration: none;
  border: none;
  border-radius: $globalBorderRadius;

  @include kuiButtonDisabled {
    cursor: default;
  }

  @include kuiButtonActive {
    transform: translateY(1px);
  }

  &:focus {
    outline: none; /* 2 */
  }

  @include kuiButtonFocus {
    @include focus;
  }
}

  /**
   * 1. Solves whitespace problems introduced by inline elements.
   */
  .kuiButton__inner {
    display: flex; /* 1 */
    align-items: center; /* 1 */
  }

.kuiButton--small {
  font-size: $buttonSmallFontSize;
  padding: $buttonSmallPadding;
  height: $buttonSmallHeight;
}

.kuiButton--fullWidth {
  width: 100%;
  text-align: center;
}

.kuiButton--iconText {
  .kuiButton__icon {
    &:first-child:not(:only-child) {
      margin-right: $buttonIconSpacing;
    }

    &:last-child:not(:only-child) {
      margin-left: $buttonIconSpacing;
    }
  }

  &.kuiButton--small {
    .kuiButton__icon {
      &:first-child:not(:only-child) {
        margin-right: $buttonIconSmallSpacing;
      }

      &:last-child:not(:only-child) {
        margin-left: $buttonIconSmallSpacing;
      }
    }
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--basic {
  color: $buttonBasicTextColor;
  background-color: $buttonBasicBackgroundColor;

  @include kuiButtonFocus {
    color: $buttonBasicTextColor;
  }

  @include kuiButtonHoverAndActive {
    color: $buttonDefaultTextColor !important; /* 1 */
    background-color: $buttonBasicHoverBackgroundColor !important; /* 1 */
  }

  @include kuiButtonDisabled {
    color: $buttonBasicDisabledTextColor;
  }

  @include darkTheme {
    color: $buttonBasicTextColor--darkTheme;
    background-color: $buttonBasicBackgroundColor--darkTheme;

    @include kuiButtonFocus {
      @include focus($globalFocusColor, $globalBackgroundColor--darkTheme);
      color: $buttonBasicTextColor--darkTheme;
    }

    @include kuiButtonHoverAndActive {
      background-color: $buttonBasicHoverBackgroundColor--darkTheme !important; /* 1 */
    }

    @include kuiButtonDisabled {
      color: rgba($buttonBasicTextColor--darkTheme, 0.5);
    }
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--primary {
  color: $buttonDefaultTextColor;
  background-color: $buttonPrimaryBackgroundColor;

  @include kuiButtonFocus {
    color: $buttonDefaultTextColor;
  }

  @include kuiButtonHoverAndActive {
    color: $buttonDefaultTextColor !important; /* 1 */
    background-color: $buttonPrimaryHoverBackgroundColor;
  }

  @include kuiButtonDisabled {
    background-color: $buttonPrimaryDisabledBackgroundColor;
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--danger {
  color: $buttonDefaultTextColor;
  background-color: $buttonDangerBackgroundColor;

  @include kuiButtonFocus {
    @include focus($globalFocusDangerColor);
    color: $buttonDefaultTextColor;
  }

  @include kuiButtonHoverAndActive {
    color: $buttonDefaultTextColor !important; /* 1 */
    background-color: $buttonDangerHoverBackgroundColor;
  }

  @include kuiButtonDisabled {
    background-color: $buttonDangerDisabledBackgroundColor;
  }
}

/**
 * 1. Override Bootstrap.
 */
.kuiButton--warning {
  color: $buttonDefaultTextColor;
  background-color: $buttonWarningBackgroundColor;

  @include kuiButtonFocus {
    @include focus($globalFocusWarningColor);
    color: $buttonDefaultTextColor;
  }

  @include kuiButtonHoverAndActive {
    color: $buttonDefaultTextColor !important; /* 1 */
    background-color: $buttonWarningHoverBackgroundColor;
  }

  @include kuiButtonDisabled {
    background-color: $buttonWarningDisabledBackgroundColor;
  }
}

/**
 * 1. Override Bootstrap.
 * 2. Override either Bootstrap or Timelion styles.
 */
.kuiButton--hollow {
  color: $globalLinkColor !important; /* 2 */
  background-color: transparent;

  @include kuiButtonHoverAndActive {
    color: $globalLinkHoverColor !important; /* 1 */
    text-decoration: underline;
  }

  @include kuiButtonDisabled {
    color: $buttonHollowDiabledTextColor;
  }
}
