.btn {
  font-size: inherit;
  padding: 8px 20px;
  border-radius: $btn-border-radius;
  text-decoration: none;
  border-width: $border-width;

  &:disabled,
  &.disabled {
    cursor: not-allowed;
    opacity: initial;
  }
}

// Used to include hidden buttons on forms that react to return - see SHOP-7156
.btn-hidden-default {
  overflow: visible !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  display: block !important;
}

// repeat styles to fix wrong order in CSS otherwise
.btn-lg {
  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}

.btn-sm {
  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
}


.btn-primary,
.btn-default {
  @include et-button(
                  $colorButtonPrimary, $colorButtonPrimaryBorder, $colorButtonPrimaryFont,
                  $colorButtonPrimaryHover, $colorButtonPrimaryHoverBorder, $colorButtonPrimaryHoverFont,
                  $colorButtonPrimaryActive, $colorButtonPrimaryActiveBorder, $colorButtonPrimaryActiveFont,
                  $colorButtonPrimaryDisabled, $colorButtonPrimaryDisabledBorder, $colorButtonPrimaryDisabledFont
  );
}

.btn-outline-primary,
.btn-outline-default {
  @include et-button-outline(
                  $colorButtonPrimaryBorder,
                  $colorButtonPrimaryHoverBorder,
                  $colorButtonPrimaryActiveBorder,
                  $colorButtonPrimaryDisabledBorder
  );
}

.btn-secondary {
  @include et-button(
                  $colorButtonSecondary, $colorButtonSecondaryBorder, $colorButtonSecondaryFont,
                  $colorButtonSecondaryHover, $colorButtonSecondaryHoverBorder, $colorButtonSecondaryHoverFont,
                  $colorButtonSecondaryActive, $colorButtonSecondaryActiveBorder, $colorButtonSecondaryActiveFont,
                  $colorButtonSecondaryDisabled, $colorButtonSecondaryDisabledBorder, $colorButtonSecondaryDisabledFont
  );
}

.btn-outline-secondary {
  @include et-button-outline(
                  $colorButtonSecondaryBorder,
                  $colorButtonSecondaryHoverBorder,
                  $colorButtonSecondaryActiveBorder,
                  $colorButtonSecondaryDisabledBorder
  );
}


.btn-cart {
  @include et-button(
                  $colorButtonCart, $colorButtonCartBorder, $colorButtonCartFont,
                  $colorButtonCartHover, $colorButtonCartHoverBorder, $colorButtonCartHoverFont,
                  $colorButtonCartActive, $colorButtonCartActiveBorder, $colorButtonCartActiveFont,
                  $colorButtonCartDisabled, $colorButtonCartDisabledBorder, $colorButtonCartDisabledFont
  );
}

.btn-outline-cart {
  @include et-button-outline(
                  $colorButtonCartBorder,
                  $colorButtonCartHoverBorder,
                  $colorButtonCartActiveBorder,
                  $colorButtonCartDisabledBorder
  );
}

.btn-checkout {
  @include et-button(
                  $colorButtonCheckout, $colorButtonCheckoutBorder, $colorButtonCheckoutFont,
                  $colorButtonCheckoutHover, $colorButtonCheckoutHoverBorder, $colorButtonCheckoutHoverFont,
                  $colorButtonCheckoutActive, $colorButtonCheckoutActiveBorder, $colorButtonCheckoutActiveFont,
                  $colorButtonCheckoutDisabled, $colorButtonCheckoutDisabledBorder, $colorButtonCheckoutDisabledFont
  );
}

.btn-outline-checkout {
  @include et-button-outline(
                  $colorButtonCheckoutBorder,
                  $colorButtonCheckoutHoverBorder,
                  $colorButtonCheckoutActiveBorder,
                  $colorButtonCheckoutDisabledBorder
  );
}

.btn-danger {
  @include et-button(
                  $colorDanger, $colorDangerBorder, $colorDangerFont,
                  darken($colorDanger, 10%), darken($colorDangerBorder, 10%), darken($colorDangerFont, 10%),
                  darken($colorDanger, 15%), darken($colorDangerBorder, 15%), darken($colorDangerFont, 15%),
                  lighten($colorDanger, 20%), lighten($colorDangerBorder, 20%), lighten($colorDangerFont, 20%),
  );
}

.btn-outline-danger {
  @include et-button-outline(
                  $colorDangerFont,
                  darken($colorDangerFont, 10%),
                  darken($colorDangerFont, 15%),
                  lighten($colorDangerFont, 20%),
  );
}

.btn-info {
  @include et-button(
                  $colorInfo, $colorInfoBorder, $colorInfoFont,
                  darken($colorInfo, 10%), darken($colorInfoBorder, 10%), darken($colorInfoFont, 10%),
                  darken($colorInfo, 15%), darken($colorInfoBorder, 15%), darken($colorInfoFont, 15%),
                  lighten($colorInfo, 20%), lighten($colorInfoBorder, 20%), lighten($colorInfoFont, 20%),
  );
}

.btn-outline-info {
  @include et-button-outline(
                  $colorInfoFont,
                  darken($colorInfoFont, 10%),
                  darken($colorInfoFont, 15%),
                  lighten($colorInfoFont, 20%),
  );
}

.btn-warning {
  @include et-button(
                  $colorWarning, $colorWarningBorder, $colorWarningFont,
                  darken($colorWarning, 10%), darken($colorWarningBorder, 10%), darken($colorWarningFont, 10%),
                  darken($colorWarning, 15%), darken($colorWarningBorder, 15%), darken($colorWarningFont, 15%),
                  lighten($colorWarning, 20%), lighten($colorWarningBorder, 20%), lighten($colorWarningFont, 20%),
  );
}

.btn-outline-warning {
  @include et-button-outline(
                  $colorWarningFont,
                  darken($colorWarningFont, 10%),
                  darken($colorWarningFont, 15%),
                  lighten($colorWarningFont, 20%),
  );
}

.btn-success {
  @include et-button(
                  $colorSuccess, $colorSuccessBorder, $colorSuccessFont,
                  darken($colorSuccess, 10%), darken($colorSuccessBorder, 10%), darken($colorSuccessFont, 10%),
                  darken($colorSuccess, 15%), darken($colorSuccessBorder, 15%), darken($colorSuccessFont, 15%),
                  lighten($colorSuccess, 20%), lighten($colorSuccessBorder, 20%), lighten($colorSuccessFont, 20%),
  );
}

.btn-outline-success {
  @include et-button-outline(
                  $colorSuccessFont,
                  darken($colorSuccessFont, 10%),
                  darken($colorSuccessFont, 15%),
                  lighten($colorSuccessFont, 20%),
  );
}

.btn-light {
  @include et-button(
                  $colorFontLight, $colorFontLight, $colorFontDark,
                  darken($colorFontLight, 10%), darken($colorFontLight, 10%), darken($colorFontDark, 10%),
                  darken($colorFontLight, 15%), darken($colorFontLight, 15%), darken($colorFontDark, 15%),
                  lighten($colorFontLight, 20%), lighten($colorFontLight, 20%), lighten($colorFontDark, 20%)
  )
}

.btn-outline-light {
  @include et-button-outline(
                  $colorFontLight,
                  darken($colorFontLight, 10%),
                  darken($colorFontLight, 15%),
                  lighten($colorFontLight, 20%)
  )
}

.btn-dark {
  @include et-button(
                  $colorFontDark, $colorFontDark, $colorFontLight,
                  lighten($colorFontDark, 10%), lighten($colorFontDark, 10%), lighten($colorFontLight, 10%),
                  lighten($colorFontDark, 15%), lighten($colorFontDark, 15%), lighten($colorFontLight, 15%),
                  lighten($colorFontDark, 20%), lighten($colorFontDark, 20%), lighten($colorFontLight, 20%)
  )
}

.btn-outline-dark {
  @include et-button-outline(
                  $colorFontDark,
                  lighten($colorFontDark, 10%),
                  lighten($colorFontDark, 15%),
                  lighten($colorFontDark, 20%)
  )
}

// NOVA helper classes
.btn-row {
  margin-top: 30px;
}

.btn-scale-small .btn {
  min-width: 25px;
  width: 25px;
  height: 25px;
  font-size: 12px;
}

.btn-filter-box {
  text-decoration: none;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  @include text-truncate;
}

// NOVA check mark on add to cart button
#add-to-cart .btn {
  position: relative;
  overflow: hidden;

  .btn-basket-check {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    white-space: nowrap;

    span {
      margin-right: 5px;
      display: inline-block;
    }
  }

  svg {
    /* this is the check icon */
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    /* move the icon on the right - outside the button */
    //transform: translateX(50%) translateY(-50%);
  }

  &.is-added .btn-basket-check {
    /* product added to the cart - hide text message on the left with no transition*/
    color: transparent;
    top: 50%;
    transform: translateY(-50%);
  }

  &.is-added svg {
    /* product added to the cart - move the svg back inside the button */
    top: 50%;
    transform: translateY(-50%);
  }
}

// NOVA-specific button classes
.btn-icon {
  @include button-size($btn-padding-x / 1.4, $btn-padding-x / 1.4, $btn-font-size * 1.15, 1, 50%);
  border-width: rem($btn-border-width);

  > [class*='fa-'] {
    width: 1.25em;
    height: 1.25em;
    line-height: 1.25em;
  }

  &.btn-sm {
    @include button-size($btn-padding-x-sm / 1.4, $btn-padding-x-sm / 1.4, $btn-font-size-sm * 1.15, 1, 50%);
  }

  &.btn-lg {
    @include button-size($btn-padding-x-lg / 1.4, $btn-padding-x-lg / 1.4, $btn-font-size-lg * 1.15, 1, 50%);
  }
}

.btn-icon-primary {
  @include et-button-outline(
                  $colorButtonPrimaryBorder,
                  $colorButtonPrimaryHoverBorder,
                  $colorButtonPrimaryActiveBorder,
                  $colorButtonPrimaryDisabledBorder
  );
}

.btn-icon-secondary {
  @include et-button-outline(
                  $colorButtonSecondaryBorder,
                  $colorButtonSecondaryHoverBorder,
                  $colorButtonSecondaryActiveBorder,
                  $colorButtonSecondaryDisabledBorder
  );
}

.btn-file {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  background-color: $light;
  color: color-yiq($light);

  &:not(:disabled):not(.disabled):not(.et-hover-underline):hover {
      background-color: darken($light, 10%);
      color: darken(color-yiq($light), 10%);
  }

  > span {
    margin-left: 5px;
  }
}