// main: ../style.scss
/********************************
*********************************
BUTTONS
*********************************
*********************************/
.btn {
  display: inline-flex;
  font-size: $btn-font-size;
  font-family: $btn-font-family;
  cursor: pointer;
  border-width: 2px;
  align-items: center;

  .btn-list & {
    margin-bottom: rem(10);
    margin-right: rem(10);
  }

  &.border-thick { border-width: 2px }
  &.border-thicker { border-width: 3px }
  &.text-uppercase { letter-spacing: 0.1em }

  .list-icon {
    font-size: rem(18);
    vertical-align: middle;
    position: relative;
    top: rem(-1);
    font-weight: 400;
  }

  .social-icons {
    font-size: rem(25);
  }

  &.btn-lg {
    .list-icon { font-size: rem(24) }
    .social-icons { font-size: rem(40) }
  }

  .caret {
    margin-left: rem(5);
  }

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

  &[class*="bg"][class*="contrast"]:hover {
    color: #fff;
  }
}

.btn-lg {
  min-height: em(56);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $input-btn-font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg);
  &:not(.btn-circle) { min-width: rem(140) }
}

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

.btn-xs {
  @include button-size( 0, rem(5), $input-btn-font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
}

.btn-rounded { border-radius: rem(100) }

.btn-circle {
  border-radius: 100%;
  @include size( rem(50) );
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  &.btn-lg { @include size( rem(70) ) }
  &.btn-sm { @include size( rem(30) ) }
}

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


/* Button Colors
========================*/
.btn:active {
  box-shadow: inset 0 2px 2px 2px rgba(0,0,0,0.02);
}

@include buttons-variant(default, #555, #e4e7ea, #e4e7ea);

.btn:focus {
  // box-shadow: inset 0 0 -4px 2px rgba(0,0,0,0.1);
  outline: 0;
  box-shadow: none !important;
}

.btn-outline-default { color: #555 }
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover {
  background: $primary;
  border-color: $primary;
}

// Alternative Button Variants
@each $col, $val in $theme-colors {
  .btn-#{$col} {
    @include theme-button-variant($val,$val,#fff);
  }
}
@each $col, $val in $colors {
  .btn-#{$col} {
    @include theme-button-variant($val,$val,#fff);
  }
}

@each $col, $val in $colors {
  .btn-outline-#{$col} {
    @include button-outline-variant($val);
  }
}

.btn-outline-white:hover {
  color: $color-scheme;
}


.btn-outline-inverse {
  color: #fff;
  border: 2px solid #fff;
  background: transparent;
  &:hover {
    color: $color-scheme !important;
    background-color: #fff;
  }
}

/* Justified button groups
========================*/

.btn-group-justified {
  display: flex;
  .btn,
  .btn-group {
    flex: 1;
    .btn { width: 100% }
    .dropdown-menu { left: auto }
  }
}