// =============================================================================
// SCSS/SITE/_BUTTONS.SCSS
// -----------------------------------------------------------------------------
// Button extensions used across all Stacks.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
//   02. Button Sizes
//       a. Jumbo
//       b. Extra Large
//       c. Large
//       d. Small
//       e. Mini
//   03. Button Extensions
//       a. Square
//       b. Rounded
//       c. Pill
//       d. Transparent
//       e. Block
//       f. Icons
//       g. Icon Only
//       h. Button Circle
// =============================================================================

// Base Styles
// =============================================================================

.x-btn,
.button,
[type="submit"] {
  display: inline-block;
  position: relative;
  border: 1px solid $btnBorder;
  padding: 0.563em 1.125em 0.813em;
  cursor: pointer;
  @include font-size(1.6);
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
  color: $white;
  background-color: $btnBackground;
  @include transition(#{all 0.15s linear});
}

.x-btn:hover,
.button:hover,
[type="submit"]:hover {
  text-decoration: none;
  color: $white;
  border-color: darken($btnBorder, 15%);
  background-color: darken($btnBackground, 10%);
}

.x-btn:focus,
.button:focus,
[type="submit"]:focus {
  @include tab-focus();
}



// Button Sizes
// =============================================================================

//
// Jumbo.
//

.x-btn.x-btn-jumbo {
  padding: 0.643em 1.429em 0.786em;
  @include font-size(2.8);
}


//
// Extra Large.
//

.x-btn.x-btn-x-large {
  padding: 0.714em 1.286em 0.857em;
  @include font-size(2.1);
}


//
// Large.
//

.x-btn.x-btn-large {
  padding: 0.579em 1.105em 0.842em;
  @include font-size(1.9);
}


//
// Small.
//

.x-btn.x-btn-small {
  padding: 0.429em 1.143em 0.643em;
  @include font-size(1.4);
}


//
// Mini.
//

.x-btn.x-btn-mini {
  padding: 0.385em 0.923em 0.538em;
  @include font-size(1.3);
}



// Button Extensions
// =============================================================================

//
// Square.
//

.x-btn.x-btn-square {
  border-radius: 0;
}


//
// Rounded.
//

.x-btn.x-btn-rounded {
  border-radius: 0.225em;
}


//
// Pill.
//

.x-btn.x-btn-pill {
  border-radius: 100em;
}


//
// Block.
//

.x-btn-block {
  display: block;
  width: 100%;
}

.x-btn-block + .x-btn-block {
  margin-top: 1em;
}


//
// Icons.
//

.x-btn {
  [class^="x-icon-"],
  [class*=" x-icon-"] {
    display: inline;
    margin-right: 0.5em;
  }
}


//
// Icon only.
//

.x-btn-icon-only {
  [class^="x-icon-"],
  [class*=" x-icon-"] {
    margin: 0;
  }
}


//
// Button circle.
//

.x-btn-circle-wrap {
  display: inline-block;
  position: relative;

  &.x-btn-jumbo,
  &.x-btn-x-large,
  &.x-btn-large {
    margin: 0 0 21px;
    padding: 0;
  }

  &:before,
  &:after {
    content: "";
    position: relative;
    display: block;
    margin: 0 auto;
    z-index: 0;
  }

  &:before {
    top: 2px;
  }

  &:after {
    bottom: 2px;
  }

  .x-btn {
    position: relative;
    z-index: 1;
  }
}