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

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

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

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

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

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

  svg,
  svg.embla-icon {
    height: 20px;
    margin: 2px;
    width: 20px;
  }
}

.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-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-secondary {
  @include embla-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border, $btn-hover-secondary-color, $btn-hover-secondary-bg, $btn-hover-secondary-border, $btn-active-secondary-color, $btn-active-secondary-bg, $btn-active-secondary-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-sm {
  // line-height: ensure even-numbered height of button next to large input
  @include button-size($btn-small-padding-vertical, $btn-small-padding-horizontal, $font-size-small, $btn-line-height, $btn-small-border-radius);

  svg,
  svg.embla-icon {
    height: 16px;
    margin: 1px;
    width: 16px;
  }
}

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


// Dropdown buttons
.dropdown-toggle {

  padding-right: 0;

  > svg {
    margin-left: $margin-s;
    margin-right: $margin-s;
  }

  &::after {
    display: none;
  }
}

.btn-group .dropdown-toggle {

  padding-right: 0;

  > svg {
    margin-left: $margin-xs;
    margin-right: $margin-xs;
  }
}

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

.dropdown-menu {
  margin: $margin-s 0;
  padding: $padding-xs 0;

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

  .dropdown-divider {
    margin: $margin-xs 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;
}