//
// Buttons
// --------------------------------------------------


// Base styles
// --------------------------------------------------

.btn {
  text-transform: none;
  @include button-size(9px, 20px, 16px, 20px, $btn-border-radius-base);
  transition: background 0.3s;
  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      outline: none;
      outline-offset: 0;
    }
  }

  &:active,
  &.active {
    @include box-shadow(none);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      cursor: $cursor-disabled;
      color: $btn-link-disabled-color;
      background-color: $btn-link-disabled-bg;
      border-color: $btn-link-disabled-color;
      @include opacity(1);
      @include box-shadow(none);
    }
  }
  &.inactive {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active,
    &.disabled,
    &[disabled] {
      cursor: wait;
    }
  }
  // [converter] extracted a& to a.btn
  //elementos del boton mientras carga
  .bt-txt {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
  }
  .loader-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    overflow: hidden;
    div {
      display: block;
    }
  }
}

a.btn {
  &.disabled,
  fieldset[disabled] & {
    pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
  }
}


// Alternate buttons
// --------------------------------------------------

.btn-default {
  @include button-sunrise-transparent($btn-default-color, $btn-default-bg, $btn-default-color, $btn-default-hover-txt, $btn-default-hover, $btn-transparent-border);
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      color: $brand-brown-medium;
      background-color: $colorBordes;
      border-color: $colorBordes;
      .icon, .icon * {
        fill: $brand-brown-medium;
      }
      .ball-clip-rotate div {
        border: 2px solid $brand-brown-medium;
        border-bottom-color: transparent;
      }
    }
  }
}
.btn-default.btn-transparent {
  @include button-sunrise-transparent($btn-default-color, transparent, $btn-default-color, $btn-default-hover-txt, transparent, $btn-transparent-border);
}
.btn-primary {
  @include button-sunrise($btn-primary-color, $btn-primary-bg, $btn-primary-border, $btn-primary-color, $btn-primary-hover);
}
.btn-primary.btn-transparent {
  @include button-sunrise-transparent($btn-primary-bg, transparent, $btn-primary-bg, $btn-primary-hover, transparent, $btn-primary-hover);
}

.btn-secondary {
  @include button-sunrise($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border, $btn-secondary-hover-txt, $btn-secondary-hover);
}
.btn-secondary.btn-transparent {
  @include button-sunrise-transparent($interactive-color, transparent, $interactive-color, $interactive-color-hover, transparent, $interactive-color-hover);
}
.btn-secondary.btn-transparent-blue {
  @include button-sunrise-transparent($brand-secondary, transparent, $btn-secondary-border, $btn-transparent-blue-hover-txt, transparent, $btn-transparent-blue-hover);
}
.btn-action {
  @include button-sunrise($btn-cta-color, $btn-cta-bg, $btn-cta-border, $btn-cta-hover-txt, $btn-cta-hover);
}
.btn-cta, .btn_generico_flecha {
  @include button-sunrise($btn-cta-color, $btn-cta-bg, $btn-cta-border, $btn-cta-hover-txt, $btn-cta-hover);
  &:after {
    @include arrow-cta;
  }
  &.btn-xl {
    &:after {
      top: 0;
      width: 20px;
      height: 20px;
    }
  }
  &.btn-lg {
    &:after {
      top: 0;
      width: 18px;
      height: 18px;
    }
  }
  &.btn-sm {
    &:after {
      top: 0;
      width: 14px;
      height: 14px;
    }
  }
  &.btn-xs {
    &:after {
      top: 0;
      width: 14px;
      height: 14px;
    }
  }
  &.loading, &.inactive {
    &:after {
      display: none;
    }
  }
}

.btn-white {
  @include button-variant($btn-white-color, #fff, #fff);
}
.btn-white.btn-transparent {
  @include button-sunrise-transparent(rgba(255,255,255,1), transparent, rgba(255,255,255,0.7), rgba(255,255,255,1), transparent, rgba(255,255,255,1));
}
.btn-green {
  @include button-variant(#fff, $brand-green, $brand-green);
}
.btn-green.btn-transparent {
  @include button-sunrise-transparent($brand-green, transparent, $brand-green, $brand-green, transparent, $brand-green);
}
// Botones con color interactivo igual para todos los entornos
.btn-interactive {
  @include button-sunrise(#fff, $interactive-color, $interactive-color, #fff, $interactive-color-hover);
}
.btn-interactive.btn-transparent {
  @include button-sunrise-transparent($interactive-color, transparent, $interactive-color, $interactive-color-hover, transparent, $interactive-color-hover);
}

// Link buttons
// -------------------------

// Make a button look and behave like a link
.btn-link {
  font-weight: 300;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus {
      border: 0 !important;
      background-color: transparent !important;
      color: $link-color;
      text-decoration: none;
    }
  }
  &.inactive {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active,
    &.disabled,
    &[disabled] {
      border: 0;
      color: $link-color;
      background-color: transparent;
      background-image: none !important;
      cursor: wait;
      transition: none;
      background-size: 0 !important;
    }
  }
}


// Button Sizes
// --------------------------------------------------
.btn-xl {
  // line-height: ensure even-numbered height of button next to large input
  @include button-size(11px, 30px, 20px, 26px, $btn-border-radius-base);
}
.btn-lg {
  // line-height: ensure even-numbered height of button next to large input
  @include button-size(9px, 20px, 18px, 25px, $btn-border-radius-large);
}
.btn-sm {
  // line-height: ensure proper height of button next to small input
  @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-base, 20px, $btn-border-radius-base);
}
.btn-xs {
  @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-base, 20px, $btn-border-radius-base);
}

.btn-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  &, & * {
    fill: currentcolor;
  }
}