/// Apply button basic display.
///
/// This mixin will apply button basic styles (pseudo-classes, state classes).
///
/// @group buttons
///
/// @example scss - Usage
///   .k-MyButton {
///     @include k-buttonBase;
///   }
///
/// @example css - CSS output
///   .k-MyButton {
///     display: inline-block;
///     box-sizing: border-box;
///     cursor: pointer;
///   }
///
///   .k-MyButton:hover {
///     outline: 0;
///     text-decoration: none;
///   }
///
///   .k-MyButton:focus {
///     text-decoration: none;
///   }
///
///   .k-MyButton:disabled {
///     cursor: not-allowed;
///   }
///
///   .k-MyButton::-moz-focus-inner {
///     padding: 0;
///     border: 0;
///   }

@mixin k-buttonBase {
  @include k-buttonBrowserFixes;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;

  // Reset browser default styles.
  background-color: transparent;
  border: k-px-to-rem(2px) solid transparent;

  vertical-align: middle;

  &:hover {
    outline: 0;
    text-decoration: none;
  }

  &:focus {
    text-decoration: none;
  }

  &:disabled {
    cursor: not-allowed;
  }
}