// =============================================================================
// _BUTTONS.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// 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);
  font-weight: inherit;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
  color: $white;
  background-color: $btnBackground;
  @include transition(#{all 0.15s linear});

  &:hover {
    text-decoration: none;
    color: $white;
    border-color: darken($btnBorder, 15%);
    background-color: darken($btnBackground, 10%);    
  }

  &:focus {
    @include tab-focus();
  }

  &:hover,
  &:active {
    outline: 0 !important;
  }
}



// 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);
}


//
// Regular.
//

.x-btn.x-btn-regular {
  padding: 0.563em 1.125em 0.813em;
  @include font-size(1.6);
}


//
// 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*="#{$fa-css-prefix}-"] {
    display: inline;
    margin: 0 0.5em 0 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;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
  }

  &:before {
    top: 2px;
    width: 172px;
    height: 43px;
    background-image: url(../../../../img/global/btn-circle-top-small.png);
    background-size: 172px 43px;
  }

  &:after {
    bottom: 2px;
    width: 190px;
    height: 43px;
    background-image: url(../../../../img/global/btn-circle-bottom-small.png);
    background-size: 190px 43px;
  }

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

  @include break(middle-bear) {
    &:before {
      top: 2px;
      width: 112px;
      height: 28px;
      background-image: url(../../../../img/global/btn-circle-top-small.png);
      background-size: 112px 28px;
    }

    &:after {
      bottom: 2px;
      width: 127px;
      height: 29px;
      background-image: url(../../../../img/global/btn-circle-bottom-small.png);
      background-size: 127px 29px;
    }
  }
}