// 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) {
  color: $color;
  background-color: $background;
  border-color: $border;

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

    svg {
      fill: $color;
    }
  }

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

    svg {
      fill: $hover-color;
    }
  }

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

    svg {
      fill: $active-color;
    }

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

      svg {
        fill: $active-color;
      }
    }
  }

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








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

    svg {
      fill: $background;
    }

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

      svg {
        fill: $background;
      }
    }

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

      svg {
        fill: $background;
      }
    }

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

      svg {
        fill: $color;
      }

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

        svg {
          fill: $color;
        }
      }
    }
  }




}
