@function theme-color-value($key: "primary", $value: "#0E5FE3") {
  @return map-get($theme-colors, $value) !important;
}

// Generic
@mixin custom-theme($colors, $property) {
  @each $color in $colors {
    &-#{$color} {
      #{$property}: var(--custom-theme-#{$color}, theme-color(#{$color})) !important;
    }
  }
}


@mixin custom-theme-color($color, $property) {
  #{$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);
      @include x-hover-focus-active() {
        background-color: var(--custom-theme-#{$color}-hover, darken(theme-color(#{$color}) , 15%));
        border-color: var(--custom-theme-#{$color}-hover, darken(theme-color(#{$color}) , 15%));;
      }
      @include x-focus-active() {
        outline: 0;
        box-shadow: 0 0 0 .15rem var(--custom-theme-#{$color}-rgb, mix(theme-color(#{$color}), $white, 22%));
      }
    }
    &-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}-rgb, rgba(theme-color(#{$color}), 0.2));
        border-color: var(--custom-theme-#{$color}, theme-color(#{$color}));
        color: var(--custom-theme-#{$color}, theme-color(#{$color}));
      }

      @include x-focus-active() {
        outline: 0;
        box-shadow: 0 0 0 .15rem var(--custom-theme-#{$color}-rgb, mix(theme-color(#{$color}), $white, 22%));
      }
    }
    &-inverted-#{$color} {
      background-color: $white;
      color: var(--custom-theme-#{$color}, theme-color(#{$color}));
      border-color: $border-color;

      @include x-hover() {
        background-color: var(--custom-theme-#{$color}-rgb, rgba(theme-color(#{$color}), 0.08));
      }

      @include x-focus-active() {
        background-color: var(--custom-theme-#{$color}, theme-color(#{$color}));
        border-color: var(--custom-theme-#{$color}, theme-color(#{$color}));
        outline: 0;
        box-shadow: 0 0 0 .15rem var(--custom-theme-#{$color}, mix(theme-color(#{$color}), $white, 22%));
        color: var(--custom-theme-#{$color}-contrast, white);
      }
    }
  }
}