// Basic Button Overrides
// =========================================================================
button {
  appearance: none;
}

// ==========================================================================
// Base
// ==========================================================================
button,
.btn,
.btn:visited {
  display: inline-block;
  position: relative;
  .border-radius(a, @baseFontPx, @btnRadius);
  padding: 0;
  text-align: center;
  transition: background-color 0.2s;
  line-height: normal;
  margin: @btnMargin @btnMargin 0 0;

  .btn-label {
    position: relative;
    display: inline-block;
    pointer-events: none;
    #font.semi-bold-font-stack();
    text-transform: uppercase;
    letter-spacing: 0.6px;

    //&.btn-default-case {
    //  text-transform: none;
    //}

    // Superscript
    sup {
      color: @colorSlateLight;
      top: -6px;
    }
  }
}

// ==========================================================================
// Button Message (optional message below button)
// ==========================================================================
.btn-message {
  #font.size(@btnMessageFontSize);
  .margin(t, @btnMessageFontSize, 3);
}

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

// Large
.btn-large {
  .btn-label {
    #font.size(@btnLargeFontSize);
    .padding(trb, @btnLargeFontSize, @btnLargeLabelPaddingTopBtm, @btnLargeLabelPaddingLeftRight, @btnLargeLabelPaddingTopBtm);
  }

  // Utility and Add
  &.btn-utility, &.btn-add {
    .btn-label {
      .padding(t, @btnLargeFontSize, @btnUtilityLargeLabelPaddingTopBtm);
      .padding(b, @btnLargeFontSize, @btnUtilityLargeLabelPaddingTopBtm);
    }
  }

  // Text
  &.btn-text-action, &.btn-text-sub-action {
    .btn-label {
      .padding(l, @btnLargeFontSize, @btnLargeLabelPaddingLeftRight);
      .padding(r, @btnLargeFontSize, @btnLargeLabelPaddingLeftRight);
    }
  }

}

@media only screen and (min-width: @breakpointScreenSmallMin) and (max-width: @breakpointScreenSmallMax) {
  .btn-large {
    // This is just med rules TODO is there a nicer way to do this in LESS? extend?
    .btn-label {
      #font.size(@btnMedFontSize);
      line-height: 1.2;
      .padding(trb, @btnMedFontSize, @btnMedLabelPaddingTopBtm, @btnMedLabelPaddingLeftRight, @btnMedLabelPaddingTopBtm);
    }

    // Utility
    &.btn-utility, &.btn-add  {
      .btn-label {
        .padding(t, @btnMedFontSize, @btnUtilityMedLabelPaddingTopBtm);
        .padding(b, @btnMedFontSize, @btnUtilityMedLabelPaddingTopBtm);
      }
    }

    // Text
    &.btn-text-action, &.btn-text-sub-action {
      .btn-label {
        .padding(l, @btnMedFontSize, @btnMedLabelPaddingLeftRight);
        .padding(r, @btnMedFontSize, @btnMedLabelPaddingLeftRight);
      }
    }
  }
}

// Medium (required size for form groupings)
.btn-med {
  .btn-label {
    #font.size(@btnMedFontSize);
    line-height: 1.2;
    .padding(trb, @btnMedFontSize, @btnMedLabelPaddingTopBtm, @btnMedLabelPaddingLeftRight, @btnMedLabelPaddingTopBtm);
  }

  // Utility
  &.btn-utility, &.btn-add {
    .btn-label {
      .padding(t, @btnMedFontSize, @btnUtilityMedLabelPaddingTopBtm);
      .padding(b, @btnMedFontSize, @btnUtilityMedLabelPaddingTopBtm);
    }
  }

  // Text
  &.btn-text-action, &.btn-text-sub-action {
    .btn-label {
      .padding(l, @btnMedFontSize, @btnMedLabelPaddingLeftRight);
      .padding(r, @btnMedFontSize, @btnMedLabelPaddingLeftRight);
    }
  }
}

// Small
.btn-small {
  .btn-label {
    #font.size(@btnSmallFontSize);
    line-height: 1.2;
    .padding(trb, @btnSmallFontSize, @btnSmallLabelPaddingTopBtm, @btnSmallLabelPaddingLeftRight, @btnSmallLabelPaddingTopBtm);
  }

  // Utility
  &.btn-utility, &.btn-add {
    .btn-label {
      .padding(t, @btnSmallFontSize, @btnUtilitySmallLabelPaddingTopBtm);
      .padding(b, @btnSmallFontSize, @btnUtilitySmallLabelPaddingTopBtm);
    }
  }

  // Text
  &.btn-text-action, &.btn-text-sub-action {
    .btn-label {
      .padding(l, @btnSmallFontSize, @btnSmallLabelPaddingLeftRight);
      .padding(r, @btnSmallFontSize, @btnSmallLabelPaddingLeftRight);
    }
  }
}

// ==========================================================================
// Button States
// ==========================================================================

.btn {
  &:hover {
    text-decoration: none;
    cursor: pointer;
  }
  &:focus,
  &.vtest-focus {
    outline: none;
  }
  &:active, &.selected {
    //border: none;
  }
}

// ==========================================================================
// Visual Styles
// ==========================================================================

// Action
.btn-action {
  border: none;
  background-color: @btnActionBgColor;

  .btn-label {
    color: @btnActionTextColor;
  }

  &:hover {
    background-color: @btnActionBgColorHover;
  }

  &.selected, &:active {
    background-color: @btnActionBgColorActive;
  }

}

// Sub-action
.btn-sub-action {
  border: none;
  background-color: @btnSubActionBgColor;

  .btn-label {
    color: @btnSubActionTextColor;
  }

  &:hover {
    background-color: @btnSubActionBgColorHover;
  }
  &.selected, &:active {
    background-color: @btnSubActionBgColorActive;
  }
}

// Utility
.btn-utility {
  .border(a, @baseFontPx, @borderWidthBase, @inputBorderColor);
  background-color: @btnUtilityBgColor;

  .btn-label {
    color: @btnUtilityTextColor;
  }

  &:active, &.selected {
    .border(a, @baseFontPx, @borderWidthBase, @colorBlueMed);
  }
}

// Add
.btn-add {
  .border(a, @baseFontPx, @btnAddBorderWidth, @btnAddBorderColor, dashed);
  background-color: @btnAddBgColor;

  .btn-label {
    color: @btnUtilityTextColor;
  }

  &:hover {
    border-color: @btnUtilityHoverTextColor;

    .btn-label {
      color: @btnUtilityHoverTextColor;
    }
  }
}

// Text
.btn-text-action, .btn-text-sub-action {
  background: none;
  border: none;
}

.btn-text-action {
  .btn-label {
    color: @btnUtilityTextColor;
  }

  &:hover {
    .btn-label {
      color: @btnUtilityHoverTextColor;
    }
  }
}

.btn-text-sub-action {
  .btn-label {
    color: @btnSubActionBgColor;
  }

  &:hover {
    .btn-label {
      color: @btnSubActionBgColorHover;
    }
  }
}

// Round
.btn-round {
  .border-radius(a, @baseFontPx, @radiusFull);
}

//Price
.btn-wrapper {
  display: inline-block;
}

.btn-price {
  .margin(trbl, 15, @spaceLarge, @spaceLarge, 0, 0);
  #font.weight(medium);
  .leftUnitReturn(162, @baseFontPx);
  background: white;
  min-width: @btnPriceMinWidth;
  .border(a, @baseFontPx, @borderWidthBase, @colorGrayscale3);
  .border-radius(a, @baseFontPx, @btnPriceRadius);
  &:hover {
    border-color: @colorGrayscale4;

    .btn-label {
      color: @colorSlateDark;
    }
  }

  &:active {
    background: @colorGrayscale1;
    .border(a, @baseFontPx, @borderWidthBase, @colorGrayscale4);
  }

  .btn-label {
    color: @colorSlateLight;
    .padding(tr, 15, @btnPriceLabelPaddingTopBtm, @btnPriceLabelPaddingLeftRight);
  }

  // Cascading is taking affect here, so don't move
  &.out-of-policy {
    .icon {
      color: @colorRedMed;
    }
  }
}


// Close
.btn-close {
  margin: 0;
  border: none;
  background-color: transparent;
  #font.size(@baseFontPx);
  line-height: 1.45;
  color: inherit;

  &:active {
    margin-top: 0;
  }

  &:after {
    .padding(tr, @baseFontPx, 0, 3);
  }

  // Psuedo element to pad the touch target
  &:before {
    display: block;
    position: absolute;
    box-sizing: content-box;
    .pos(t, @baseFontPx, -3);
    .pos(l, @baseFontPx, -3);
    .width(@baseFontPx, 30);
    .height(@baseFontPx, 30);
    content: '';
  }

  .btn-label {
    padding: 0;
  }

  &.module-close {
    background-color: darken(@colorSlateDark, 36%);
    color: lighten(@colorSlateDark, 18%);
    &:focus,
    &:hover,
    &:active {
      background-color: @colorSlateDark;
      color: @btnTextColor;
    }
  }
}


// Disabled
.btn[disabled],
.btn[disabled]:hover,
.btn[disabled]:focus,
.btn[disabled].vtest-focus,
.btn.disabled,
.btn.disabled:hover,
.btn.disabled:focus,
.btn.disabled.vtest-focus {
  cursor: default;
  opacity: .8;
  pointer-events: none;
  background-color: @colorGrayscale4;
  background-image: none;
}


// Alert states
.btn {
  &.error {
    background-color: @btnErrorBg;
    &:hover {
      background-color: @btnErrorBgHover;
    }
    &.selected, &:active {
      background-color: @btnErrorBgActive;
    }
    &[disabled],
    &.disabled {
      background-color: @colorGrayscale4;
    }
  }
  &.success {
    background-color: @btnSuccessBg;
    &:hover {
      background-color: @btnSuccessBgHover;
    }
    &.selected, &:active {
      background-color: @btnSuccessBgActive;
    }
    &[disabled],
    &.disabled {
      background-color: @colorGrayscale4;
    }
  }
  &.warn {
    background-color: @btnWarnBg;
    &:hover {
      background-color: @btnWarnBgHover;
    }
    &.selected, &:active {
      background-color: @btnWarnBgActive;
    }
    &[disabled],
    &.disabled {
      background-color: @colorGrayscale4;
    }
  }
}


// ==========================================================================
// No margin style
// ==========================================================================
.btn.btn-no-margin {
  margin: 0;
}


// ==========================================================================
// Column style
// ==========================================================================
.col,
.col-flush {
  > .input-group > .btn {
    width: 100%;
  }
}

// ==========================================================================
// Button Bar
// ==========================================================================

.btn-group {
  display: inline-block;
  position: relative;

  > .btn {
    .margin(trbl, 15, 0, 0, 0, -6);
    border-radius: 0;

    &:first-child {
      margin-left: 0;
      .border-radius(tlrbrl, 15, 3, 0, 0, 3);
    }
    &:last-of-type {
      .border-radius(tlrbrl, 15, 0, 3, 3, 0)
    }
    &:only-of-type {
      .border-radius(a, 15, 3)
    }
  }
  .btn-med.btn-utility:active {
    margin-top: 0;
  }

  .icon {
    padding: 0;
  }
  &.open .btn-sub-action.dropdown-toggle, .btn-sub-action.selected {
    background-color: @colorBlueMed;
  }

  & + .btn-group {
    .margin(l, 15, @spaceLarge);
  }
}