:root {
  --btn-outline-text-color:         currentColor;
  --btn-outline-bg-color:           transparent;
  --btn-outline-border-color:       currentColor;
  --btn-outline-text-color-hover:   color-mix(in srgb, var(--btn-outline-text-color) 70%, var(--wp--preset--color--base) 30%);
  --btn-outline-bg-color-hover:     var(--btn-outline-bg-color);
  --btn-outline-border-color-hover: var(--btn-outline-text-color-hover, var(--btn-outline-border-color));
}

.has-base-background-color {
  --text-color:                     var(--wp--preset--color--contrast);
  --btn-fill-text-color:            var(--wp--preset--color--base);
  --btn-fill-bg-color:              var(--wp--preset--color--contrast);
  --btn-fill-text-color-hover:      var(--btn-fill-text-color);
  --btn-fill-bg-color-hover:        color-mix(in srgb, var(--btn-fill-bg-color) 70%, var(--btn-fill-text-color) 30%);
  --btn-outline-text-color:         var(--wp--preset--color--contrast);
  --btn-outline-bg-color:           transparent;
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--contrast);
  --btn-outline-border-color-hover: var(--wp--preset--color--contrast);
}

.has-contrast-background-color {
  --text-color:                     var(--wp--preset--color--base);
  --btn-fill-text-color:            var(--wp--preset--color--contrast);
  --btn-fill-bg-color:              var(--wp--preset--color--base);
  --btn-fill-text-color-hover:      var(--btn-fill-text-color);
  --btn-fill-bg-color-hover:        color-mix(in srgb, var(--btn-fill-bg-color) 92%, var(--btn-fill-text-color) 8%);
  --btn-outline-text-color:         var(--wp--preset--color--base);
  --btn-outline-text-color-hover:   var(--wp--preset--color--contrast);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--base);
  --btn-outline-border-color-hover: var(--wp--preset--color--base);
}

.has-accent-1-background-color {
  --text-color:                     var(--wp--preset--color--base);
  --btn-fill-text-color:            var(--wp--preset--color--accent-1);
  --btn-fill-bg-color:              var(--wp--preset--color--base);
  --btn-fill-text-color-hover:      color-mix(in srgb, var(--btn-fill-text-color) 90%, var(--btn-fill-bg-color) 10%);
  --btn-fill-bg-color-hover:        color-mix(in srgb, var(--btn-fill-bg-color) 90%, var(--btn-fill-text-color) 10%);
  --btn-outline-text-color:         var(--wp--preset--color--base);
  --btn-outline-text-color-hover:   var(--wp--preset--color--accent-1);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--base);
  --btn-outline-border-color-hover: var(--wp--preset--color--base);
}

.has-accent-2-background-color {
  --text-color:                     var(--wp--preset--color--contrast);
  --btn-fill-text-color:            var(--wp--preset--color--base);
  --btn-fill-bg-color:              var(--wp--preset--color--contrast);
  --btn-fill-text-color-hover:      var(--btn-fill-text-color);
  --btn-fill-bg-color-hover:        color-mix(in srgb, var(--btn-fill-bg-color) 80%, var(--btn-fill-text-color) 20%);
  --btn-outline-text-color:         var(--wp--preset--color--contrast);
  --btn-outline-text-color-hover:   var(--wp--preset--color--accent-2);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--contrast);
  --btn-outline-border-color-hover: var(--wp--preset--color--contrast);
}

.has-accent-3-background-color {
  --text-color:                     var(--wp--preset--color--contrast);
  --btn-fill-text-color:            var(--wp--preset--color--base);
  --btn-fill-bg-color:              var(--wp--preset--color--contrast);
  --btn-fill-text-color-hover:      var(--btn-fill-text-color);
  --btn-fill-bg-color-hover:        color-mix(in srgb, var(--btn-fill-bg-color) 80%, var(--btn-fill-text-color) 20%);
  --btn-outline-text-color:         var(--wp--preset--color--contrast);
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--contrast);
  --btn-outline-border-color-hover: var(--wp--preset--color--contrast);
}

.has-accent-4-background-color {
  --text-color:                     var(--wp--preset--color--base);
  --btn-fill-text-color:            var(--wp--preset--color--contrast);
  --btn-fill-bg-color:              var(--wp--preset--color--base);
  --btn-fill-text-color-hover:      var(--btn-fill-text-color);
  --btn-fill-bg-color-hover:        color-mix(in srgb, var(--btn-fill-bg-color) 92%, var(--btn-fill-text-color) 8%);
  --btn-outline-text-color:         var(--wp--preset--color--base);
  --btn-outline-text-color-hover:   var(--wp--preset--color--accent-4);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--base);
  --btn-outline-border-color-hover: var(--wp--preset--color--base);
}

.has-accent-5-background-color {
  --text-color:                     var(--wp--preset--color--base);
  --btn-fill-text-color:            var(--wp--preset--color--accent-5);
  --btn-fill-bg-color:              var(--wp--preset--color--base);
  --btn-fill-text-color-hover:      color-mix(in srgb, var(--btn-fill-text-color) 90%, var(--btn-fill-bg-color) 10%);
  --btn-fill-bg-color-hover:        color-mix(in srgb, var(--btn-fill-bg-color) 90%, var(--btn-fill-text-color) 10%);
  --btn-outline-text-color:         var(--wp--preset--color--base);
  --btn-outline-text-color-hover:   var(--wp--preset--color--accent-5);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--base);
  --btn-outline-border-color-hover: var(--wp--preset--color--base);
}

.has-accent-6-background-color {
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--contrast);
  --btn-outline-border-color-hover: var(--wp--preset--color--contrast);
}

.has-base-color {
  --text-color: var(--wp--preset--color--base);
}

.has-contrast-color {
  --text-color:                     var(--wp--preset--color--contrast);
  --btn-outline-text-color:         var(--wp--preset--color--contrast);
  --btn-outline-bg-color:           transparent;
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--contrast);
  --btn-outline-border-color-hover: var(--wp--preset--color--contrast);
}

.has-accent-1-color {
  --text-color:                     var(--wp--preset--color--accent-1);
  --btn-outline-text-color:         var(--wp--preset--color--accent-1);
  --btn-outline-bg-color:           transparent;
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--accent-1);
  --btn-outline-border-color-hover: var(--wp--preset--color--accent-1);
}

.has-accent-2-color {
  --text-color:                     var(--wp--preset--color--accent-2);
  --btn-outline-text-color:         var(--wp--preset--color--accent-2);
  --btn-outline-bg-color:           transparent;
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--accent-2);
  --btn-outline-border-color-hover: var(--wp--preset--color--accent-2);
}

.has-accent-3-color {
  --text-color:                     var(--wp--preset--color--accent-3);
  --btn-outline-text-color:         var(--wp--preset--color--accent-3);
  --btn-outline-bg-color:           transparent;
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--accent-3);
  --btn-outline-border-color-hover: var(--wp--preset--color--accent-3);
}

.has-accent-4-color {
  --text-color:                     var(--wp--preset--color--accent-4);
  --btn-outline-text-color:         var(--wp--preset--color--accent-4);
  --btn-outline-bg-color:           transparent;
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--accent-4);
  --btn-outline-border-color-hover: var(--wp--preset--color--accent-4);
}

.has-accent-5-color {
  --text-color:                     var(--wp--preset--color--accent-5);
  --btn-outline-text-color:         var(--wp--preset--color--accent-5);
  --btn-outline-bg-color:           transparent;
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--accent-5);
  --btn-outline-border-color-hover: var(--wp--preset--color--accent-5);
}

.wp-element-button.has-base-background-color {
  --btn-fill-text-color:        var(--wp--preset--color--contrast);
  --btn-fill-bg-color:          var(--wp--preset--color--base);
  --btn-fill-text-color-hover:  var(--wp--preset--color--base);
  --btn-fill-bg-color-hover:    var(--wp--preset--color--contrast);
}

.wp-element-button.has-contrast-background-color {
  --btn-fill-text-color:        var(--wp--preset--color--base);
  --btn-fill-bg-color:          var(--wp--preset--color--contrast);
  --btn-fill-bg-color-hover:    color-mix(in srgb, var(--btn-fill-bg-color) 70%, var(--wp--preset--color--base) 30%);
}

.wp-element-button.has-accent-1-background-color {
  --btn-fill-text-color:        var(--wp--preset--color--base);
  --btn-fill-bg-color:          var(--wp--preset--color--accent-1);
  --btn-fill-bg-color-hover:    color-mix(in srgb, var(--btn-fill-bg-color) 70%, var(--wp--preset--color--contrast) 30%);
}

.wp-element-button.has-accent-2-background-color {
  --btn-fill-text-color:        var(--wp--preset--color--contrast);
  --btn-fill-bg-color:          var(--wp--preset--color--accent-2);
  --btn-fill-bg-color-hover:    color-mix(in srgb, var(--btn-fill-bg-color) 70%, var(--wp--preset--color--contrast) 30%);
}

.wp-element-button.has-accent-3-background-color {
  --btn-fill-bg-color:          var(--wp--preset--color--accent-3);
  --btn-fill-bg-color-hover:    color-mix(in srgb, var(--btn-fill-bg-color) 70%, var(--wp--preset--color--contrast) 30%);
}

.wp-element-button.has-accent-4-background-color {
  --btn-fill-text-color:        var(--wp--preset--color--base);
  --btn-fill-bg-color:          var(--wp--preset--color--accent-4);
  --btn-fill-bg-color-hover:    color-mix(in srgb, var(--btn-fill-bg-color) 70%, var(--wp--preset--color--base) 30%);
}

.wp-element-button.has-accent-5-background-color {
  --btn-fill-text-color:        var(--wp--preset--color--base);
  --btn-fill-bg-color:          var(--wp--preset--color--accent-5);
  --btn-fill-bg-color-hover:    color-mix(in srgb, var(--btn-fill-bg-color) 70%, var(--wp--preset--color--contrast) 30%);
}

.wp-block-button.is-style-outline .has-base-color.wp-element-button {
  --btn-outline-text-color:         var(--wp--preset--color--base);
  --btn-outline-text-color-hover:   var(--wp--preset--color--contrast);
  --btn-outline-border-color-hover: var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline .has-contrast-color.wp-element-button {
  --btn-outline-text-color:         var(--wp--preset--color--contrast);
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
  --btn-outline-bg-color-hover:     var(--wp--preset--color--contrast);
  --btn-outline-border-color-hover: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .has-accent-1-color.wp-element-button {
  --btn-outline-text-color:         var(--wp--preset--color--accent-1);
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline .has-accent-2-color.wp-element-button {
  --btn-outline-text-color:         var(--wp--preset--color--accent-2);
  --btn-outline-text-color-hover:   var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .has-accent-3-color.wp-element-button {
  --btn-outline-text-color:         var(--wp--preset--color--accent-3);
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline .has-accent-4-color.wp-element-button {
  --btn-outline-text-color:         var(--wp--preset--color--accent-4);
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline .has-accent-5-color.wp-element-button {
  --btn-outline-text-color:         var(--wp--preset--color--accent-5);
  --btn-outline-text-color-hover:   var(--wp--preset--color--base);
}

.wp-element-button {
  transition-property: color, border-color, background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.wp-block-button:not(.is-style-outline) .wp-element-button {
  background-color: var(--btn-fill-bg-color, var(--wp--preset--color--accent-1));
  color: var(--btn-fill-text-color, var(--wp--preset--color--base));

  &:hover,
  &:focus-visible {
    background-color: var(--btn-fill-bg-color-hover, var(--btn-fill-bg-color, var(--wp--custom--button-hover-color-background))) !important;
    color: var(--btn-fill-text-color-hover, var(--wp--custom--button-hover-color-text));
  }
}

.wp-block-button.is-style-outline .wp-element-button {
  color: var(--btn-outline-text-color, currentColor);
  border-color: var(--btn-outline-border-color, var(--btn-outline-text-color));
  background-color: var(--btn-outline-bg-color, transparent);

  &:hover,
  &:focus-visible {
    color: var(--btn-outline-text-color-hover, var(--btn-outline-text-color, color-mix(in srgb, currentColor 70%, var(--wp--preset--color--base) 30%))) !important;
    border-color: var(--btn-outline-border-color-hover, currentColor) !important;
    background-color: var(--btn-outline-bg-color-hover, var(--btn-outline-bg-color)) !important;
  }
}

.wp-block-heading,
p,
ul,
ol {
  color: var(--text-color, currentColor);
}