// Generic
@mixin custom-theme($colors, $property) {
  @each $color in $colors {
    &-#{$color} {
      @if $property == 'background-color' {
        #{$property}: var(--custom-theme-#{$color}, theme-color(#{$color}))!important;
        color: var(--custom-theme-#{$color}-contrast, white)!important;
      } @else {
        #{$property}: var(--custom-theme-#{$color}, theme-color(#{$color}))!important;
      }
    }
  }
}

// Button
@mixin custom-theme-btn($colors) {
  @each $color in $colors {
    &-#{$color} {
      background-color: var(--custom-theme-#{$color}, theme-color(#{$color}));
      border-color: var(--custom-theme-#{$color}, theme-color(#{$color}));
      color: var(--custom-theme-#{$color}-contrast, $white)!important;
      @include x-hover-focus-active() {
        background-color: var(--custom-theme-#{$color}-hover, darken(theme-color(#{$color}), 10%));
        border-color: var(--custom-theme-#{$color}-hover, darken(theme-color(#{$color}), 10%));
      }
      @include x-focus-active() {
        box-shadow: 0 0 0 0.2rem rgba(var(--custom-theme-#{$color}-rgb, theme-color(#{$color})), 0.5);
      }
    }
    &-outline-#{$color} {
      background-color: transparent;
      border-color: var(--custom-theme-#{$color}, theme-color(#{$color}));
      color: var(--custom-theme-#{$color}, theme-color(#{$color}));
      @include x-hover-focus-active() {
        background-color: var(--custom-theme-#{$color}, theme-color(#{$color}));
        border-color: var(--custom-theme-#{$color}, theme-color(#{$color}));
        color: var(--custom-theme-#{$color}-contrast, $white);
      }
      @include x-focus-active() {
        box-shadow: 0 0 0 0.2rem rgba(var(--custom-theme-#{$color}-rgb, theme-color(#{$color})), 0.5);
      }
    }
    &-inverted-#{$color} {
      background-color: $white;
      color: var(--custom-theme-#{$color}, theme-color(#{$color}));
      border-color: $border-color;

      @include x-hover() {
        background-color: rgba(var(--custom-theme-#{$color}-rgb, theme-color(#{$color})), 0.2);
      }
      @include x-focus-active() {
        background-color: var(--custom-theme-#{$color}, theme-color(#{$color}));
        border-color: var(--custom-theme-#{$color}, theme-color(#{$color}));
        box-shadow: 0 0 0 0.2rem rgba(var(--custom-theme-#{$color}-rgb, theme-color(#{$color})), 0.5);
        &,
        * {
          color: var(--custom-theme-#{$color}-contrast, white);
        }
      }
    }
  }
}