// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin embla-button-variant($color, $background, $border, $hover-color, $hover-background, $hover-border, $active-color, $active-background, $active-border) {
  background-color: $background;
  border-color: $border;
  box-shadow: none;
  color: $color;

  svg,
  svg.embla-icon {
    fill: $color;
    transition: fill $default-transition;
  }

  &:focus,
  &.focus {
    background-color: $background;
    border-color: $border;
    box-shadow: $outline-box-shadow rgba($border, $outline-border-opacity);
    color: $color;
    outline: 0;

    svg,
    svg.embla-icon {
      fill: $color;
    }
  }

  &:hover {
    background-color: $hover-background;
    border-color: $hover-border;
    color: $hover-color;

    svg,
    svg.embla-icon {
      fill: $hover-color;
    }
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    &:not(:disabled):not(.disabled) {
      background-color: $active-background;
      border-color: $active-border;
      color: $active-color;

      svg,
      svg.embla-icon {
        fill: $active-color;
      }

      &:hover,
      &:focus,
      &.focus {
        background-color: $active-background;
        border-color: $active-border;
        box-shadow: $outline-box-shadow rgba($active-border, $outline-border-opacity);
        color: $active-color;
        outline: 0;

        svg,
        svg.embla-icon {
          fill: $active-color;
        }
      }
    }

  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;
  }

  &.btn-outline {
    background-color: $btn-outline-background;
    border-color: $btn-outline-border;
    color: $background;

    svg,
    svg.embla-icon {
      fill: $background;
    }

    &:focus,
    &.focus {
      background-color: $btn-outline-background;
      border-color: $btn-outline-border;
      color: $background;

      svg,
      svg.embla-icon {
        fill: $background;
      }
    }

    &:hover {
      background-color: $btn-outline-background;
      border-color: $background;
      color: $active-background;

      svg,
      svg.embla-icon {
        fill: $active-background;
      }
    }
  }
}