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

.btn {
  @include button-size( $btn-padding-vertical,
                        $btn-padding-horizontal,
                        $btn-font-size,
                        $btn-line-height,
                        $btn-border-radius);
  //border: 0; //Bootstrap override
  letter-spacing: $btn-letter-spacing;
  font-weight: $btn-font-weight;

  &:active,
  &.active {
    box-shadow: none; //Bootstrap override
  }

  &:not(.btn-icon):not(.btn-svg) {
    svg {
      margin-bottom: -6px;
      margin-top: -6px;

      &.icon-left {
        margin-left: -8px;
      }

      &.icon-right {
        margin-right: -8px;
      }
    }
  }
  
  svg {
    height: 20px;
    width: 20px;
    margin: 2px;
  }
}

.btn-primary {
  @include embla-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border, $btn-hover-primary-color, $btn-hover-primary-bg, $btn-hover-primary-border, $btn-active-primary-color, $btn-active-primary-bg, $btn-active-primary-border);
}

.btn-secondary,
.btn-default {
  @include embla-button-variant($btn-default-color, $btn-default-bg, $btn-default-border, $btn-default-color, $btn-hover-default-bg, $btn-hover-default-border, $btn-active-default-color, $btn-active-default-bg, $btn-active-default-border);
}

.btn-success {
  @include embla-button-variant($btn-success-color, $btn-success-bg, $btn-success-border, $btn-hover-success-color, $btn-hover-success-bg, $btn-hover-success-border, $btn-active-success-color, $btn-active-success-bg, $btn-active-success-border);
}

.btn-info {
  @include embla-button-variant($btn-info-color, $btn-info-bg, $btn-info-border, $btn-hover-info-color, $btn-hover-info-bg, $btn-hover-info-border, $btn-active-info-color, $btn-active-info-bg, $btn-active-info-border);
}

.btn-warning {
  @include embla-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border, $btn-hover-warning-color, $btn-hover-warning-bg, $btn-hover-warning-border, $btn-active-warning-color, $btn-active-warning-bg, $btn-active-warning-border);
}

.btn-danger {
  @include embla-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border, $btn-hover-danger-color, $btn-hover-danger-bg, $btn-hover-danger-border, $btn-active-danger-color, $btn-active-danger-bg, $btn-active-danger-border);
}

.btn-link {
  @include embla-button-variant($btn-link-color, $btn-link-bg, $btn-link-border, $btn-link-color, $btn-hover-link-bg, $btn-hover-link-border, $btn-active-link-color, $btn-active-link-bg, $btn-active-link-border);

  &:hover, &:active, &:focus {
    text-decoration: none;
  }

  &:focus {
    border-color: $btn-default-border;
  }

}

// Button Sizes
// --------------------------------------------------
.btn-lg {
  // line-height: ensure even-numbered height of button next to large input
  @include button-size($btn-large-padding-vertical, $btn-large-padding-horizontal, $font-size-small, $btn-line-height, $btn-border-radius);
}

.btn-icon, .btn-svg {
  line-height: 0;
  padding: 3px;
}


// Dropdown buttons
.dropdown-toggle {

  padding-right: 0;

  > svg {
    margin-right: 8px;
    margin-left: 8px;
  }
}

.btn-group .dropdown-toggle {

  padding-right: 0;

  > svg {
    margin-right: 4px;
    margin-left: 4px;
  }
}

.btn-group.open .dropdown-toggle {
  @include box-shadow(none);
}

.dropdown-menu {
  @include box-shadow($btn-dropdown-shadow);

  margin: $margin-s 0 0;
  padding: $padding-xs 0;

  > li > a {
    padding: $padding-xs $padding-s;
  }

  .dropdown-header {
    padding: $padding-xs $padding-s;
  }

  .divider {
    margin: 4px 0;
  }
}

.btn-group .btn-primary:not(:first-child), .btn-group > .btn-group:not(:first-child) .btn-primary.dropdown-toggle {
  border-left-color: $color-primary-dark;
}

.btn-group .btn-success:not(:first-child), .btn-group > .btn-group:not(:first-child) .btn-success.dropdown-toggle {
  border-left-color: $color-success-dark;
}

.btn-group .btn-danger:not(:first-child), .btn-group > .btn-group:not(:first-child) .btn-danger.dropdown-toggle {
  border-left-color: $color-danger-dark;
}

.btn-group .btn-warning:not(:first-child), .btn-group > .btn-group:not(:first-child) .btn-warning.dropdown-toggle {
  border-left-color: $color-warning-dark;
}
