// stylelint-disable declaration-no-important

//
// Background colors
//

@mixin bg-variant($parent, $color, $active-color: darken($color, $ui-colors-bg-darken)) {
  #{$parent} {
    @if ($solids) {
      background-color: $color;
    } @else {
      background-color: transparentize($color, $ui-colors-transparentize);
    }

    &.is-hoverable {
      &:active {
        background-color: $active-color;
        background-image: none; // Remove the gradient for the pressed/active state
      }

      &:hover {
        background-color: $active-color;
      }
    }

    // Disabled comes first so active can properly restyle
    &.disabled,
    &:disabled {
      background-color: $color;
    }
  }
}