$theme-colors: map-merge($theme-colors, $colors);

@mixin button-svg-icon-variant($background, $hover-background: darken($background, 7.5%), $active-background: darken($background, 10%)) {
  svg {
    fill: color-yiq($background);
  }

  @include hover() {
    svg {
      fill: color-yiq($hover-background);
    }
  }

  &:focus,
  &.focus {
    svg {
      fill: color-yiq($hover-background);
    }
  }

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

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    svg {
      fill: color-yiq($active-background);
    }
  }
}

@mixin button-outline-svg-icon-variant($value, $color-hover: $value) {
  svg {
    fill: $value;
  }
  @include hover() {
    svg {
      fill: $value;
    }
  }
  &.disabled,
  &:disabled {
    svg {
      fill: $value;
    }
  }
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    svg {
      fill: $value;
    }
  }
}

@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

@each $color, $value in $theme-colors {
  .border-#{$color} {
    border-color: $value !important;
  }
}

@each $color, $value in $theme-colors {
  @include text-emphasis-variant('.text-#{$color}', $value, true);
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
    @include button-svg-icon-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value, $color-hover: $value, $active-background: rgba($value, 0.1), $active-border: $value);
    @include button-outline-svg-icon-variant($value, $color-hover: $value);
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
      color: $value;
    }
  }
}

@each $theme-color, $color in $theme-colors {
  .custom-checkbox-#{$theme-color} {
    .custom-control-label::before {
      border-color: $input-border-color;
      transition: 0.3s ease-in-out;
    }
    .custom-control-input:checked + .custom-control-label::before {
      background-color: $color;
      border-color: $color;
    }
    .custom-control-input:checked + .custom-control-label::after {
      color: $bgcolor-global;
    }
    .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
      color: $bgcolor-global;
      background-color: $color;
      border-color: $color;
    }
    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
      color: $bgcolor-global;
      background-color: $bgcolor-global;
      border-color: $input-focus-border-color;
    }
  }
}

@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(
      theme-color-level($color, $alert-bg-level),
      theme-color-level($color, $alert-border-level),
      theme-color-level($color, $alert-color-level)
    );
  }
}

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
  a.badge-#{$color} {
    @include badge-variant($value);
  }
}
