/*
  Wojo Framework 4.0 — Buttons
  Namespace prefix: .wf-btn
  Requires: wf-layout.css (defines CSS custom properties)

  Usage:
    <button class="wf-btn">Default</button>
    <button class="wf-btn wf-btn-primary">Brand</button>
    <button class="wf-btn wf-btn-success wf-btn-outlined">Outlined success</button>
    <button class="wf-btn wf-btn-sm wf-btn-pill">Small pill</button>
*/
.wf-btn {
   -webkit-user-select: none;
   user-select: none;
   outline: none;
   display: inline-flex;
   flex-flow: row;
   justify-content: center;
   align-items: center;
   gap: .5rem;
   position: relative;
   margin: 0;
   padding: .75rem 1.5rem;
   transition: all .2s ease-in-out;
   background-color: var(--wf-surface-subtle);
   cursor: pointer;
   border: 1px solid var(--wf-border);
   border-radius: var(--wf-radius-control, var(--wf-radius-4));
   font-size: 1rem;
   font-family: inherit;
   font-style: normal;
   font-weight: 500;
   line-height: 1rem;
   color: var(--wf-text);
   text-decoration: none;
   white-space: nowrap;
   vertical-align: middle;
}
.wf-btn:hover:not(:disabled):not([disabled]) {
   filter: brightness(.92);
   box-shadow: var(--wf-btn-color-shadow, 0 2px 6px var(--shadow-color));
}
.wf-btn:focus-visible {
   outline: 2px solid var(--primary-color, var(--wf-primary));
   outline-offset: 2px;
}
.wf-btn:active:not(:disabled):not([disabled]) {
   filter: brightness(.82);
   box-shadow: none;
}
.wf-btn:disabled,
.wf-btn[disabled] {
   pointer-events: none;
   opacity: .45;
   cursor: not-allowed;
}
.wf-btn:not(.wf-btn-labeled):has(span:not(.wf-badge)) {
   padding: .5rem 1.5rem;
}
.wf-btn:is(.wf-btn-link),
.wf-btn:is(.wf-btn-link):not(.wf-btn-labeled):has(span:not(.wf-badge)) {
   box-shadow: none;
   padding-inline-start: 0;
   padding-inline-end: 0;
   background: transparent;
   border: none;
}
.wf-btn.wf-btn-link:hover:not(:disabled):not([disabled]) {
   box-shadow: none;
}
.wf-btn-icon {
   padding: .5rem;
}
.wf-btn-xs {
   padding: .5rem 1.125rem;
   font-size: .75rem;
}
.wf-btn-xs:not(.wf-btn-icon) i.icon {
   font-size: 1rem;
}
.wf-btn-sm {
   padding: .625rem 1.25rem;
   font-size: .875rem;
}
.wf-btn-sm:not(.wf-btn-icon) i.icon {
   font-size: 1.25rem;
}
.wf-btn-sm:not(.wf-btn-labeled):has(span) {
   padding: .5rem 1.25rem;
}
.wf-btn-md {
   padding: .875rem 1.75rem;
   font-size: 1.125rem;
}
.wf-btn-md:not(.wf-btn-labeled):has(span) {
   padding: .625rem 1.75rem;
}
.wf-btn-lg {
   padding: 1rem 2rem;
   font-size: 1.25rem;
}
.wf-btn-lg:not(.wf-btn-labeled):has(span) {
   padding: .750rem 2rem;
}
.wf-btn-icon.wf-btn-xs {
   padding: .25rem;
}
.wf-btn-icon.wf-btn-sm {
   padding: .375rem;
}
.wf-btn-icon.wf-btn-md {
   padding: .625rem;
}
.wf-btn-icon.wf-btn-lg {
   padding: .750rem;
}
.wf-btn-labeled {
   gap: 0;
   overflow: hidden;
   padding: 0;
}
.wf-btn-labeled > i {
   padding-inline-start: .75rem;
   padding-inline-end: .75rem;
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
   align-self: stretch;
   background-color: rgba(0, 0, 0, .15);
   font-size: 1.5rem;
   line-height: 0;
}
.wf-btn-labeled > i:first-child:dir(ltr) {
   border-inline-end: 1px solid rgba(0, 0, 0, .12);
}
.wf-btn-labeled > i:first-child:dir(rtl) {
   border-inline-start: 1px solid rgba(0, 0, 0, .12);
}
.wf-btn-labeled > i:last-child:dir(ltr) {
   border-inline-start: 1px solid rgba(0, 0, 0, .12);
}
.wf-btn-labeled > i:last-child:dir(rtl) {
   border-inline-end: 1px solid rgba(0, 0, 0, .12);
}
.wf-btn-labeled > span {
   padding: .75rem 1.1rem;
}
.wf-btn-labeled.wf-btn-xs > span {
   padding: .5rem .9rem;
}
.wf-btn-labeled.wf-btn-sm > span {
   padding: .625rem 1rem;
}
.wf-btn-labeled.wf-btn-md > span {
   padding: .875rem 1.2rem;
}
.wf-btn-labeled.wf-btn-lg > span {
   padding: 1rem 1.25rem;
}
.wf-btn-labeled.wf-btn-outlined > i,
.wf-btn-labeled.wf-btn-plain > i {
   background-color: rgba(0, 0, 0, .06);
}
.wf-btn-pill {
   border-radius: 999rem;
}
.wf-btn-block {
   width: 100%;
}
.wf-btn-outlined {
   background-color: transparent;
   border-color: var(--wf-border);
   color: var(--wf-text);
}
.wf-btn-plain {
   --wf-btn-color-shadow: none;
   background-color: transparent;
   border-color: transparent;
   color: var(--wf-text);
}
.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: color-mix(in oklab, var(--wf-surface-subtle) 30%, transparent);
}
.wf-btn-primary {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--primary-color-shadow));
   background-color: var(--primary-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-primary:hover:not(:disabled) {
   filter: none;
   box-shadow: var(--wf-btn-color-shadow, 0 4px 12px var(--primary-color-shadow));
   background-color: var(--primary-color-hover);
}
.wf-btn-primary:active:not(:disabled) {
   filter: none;
   box-shadow: none;
   background-color: var(--primary-color-active);
}
.wf-btn-primary:focus-visible {
   outline-color: var(--primary-color);
}
.wf-btn-primary.wf-btn-outlined {
   box-shadow: none;
   background-color: transparent;
   border-color: var(--primary-color);
   color: var(--primary-color);
}
.wf-btn-primary.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--primary-color-inverted);
}
.wf-btn-primary.wf-btn-outlined:active:not(:disabled) {
   filter: brightness(.95);
   background-color: var(--primary-color-inverted);
}
.wf-btn-link.wf-btn-primary,
.wf-btn-primary.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--primary-color);
}
.wf-btn-primary.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--primary-color-inverted);
}
.wf-btn-primary.wf-btn-plain:active:not(:disabled) {
   filter: brightness(.95);
   background-color: var(--primary-color-inverted);
}
.wf-btn-secondary {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--secondary-color-shadow));
   background-color: var(--secondary-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-secondary:hover:not(:disabled) {
   filter: none;
   box-shadow: var(--wf-btn-color-shadow, 0 4px 12px var(--secondary-color-shadow));
   background-color: var(--secondary-color-hover);
}
.wf-btn-secondary:active:not(:disabled) {
   filter: none;
   box-shadow: none;
   background-color: var(--secondary-color-active);
}
.wf-btn-secondary:focus-visible {
   outline-color: var(--secondary-color);
}
.wf-btn-link.wf-btn-secondary,
.wf-btn-secondary.wf-btn-outlined {
   box-shadow: none;
   background-color: transparent;
   border-color: var(--secondary-color);
   color: var(--secondary-color);
}
.wf-btn-secondary.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--secondary-color-inverted);
}
.wf-btn-secondary.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--secondary-color);
}
.wf-btn-secondary.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--secondary-color-inverted);
}
.wf-btn-positive {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--positive-color-shadow));
   background-color: var(--positive-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-positive:hover:not(:disabled) {
   filter: none;
   box-shadow: var(--wf-btn-color-shadow, 0 4px 12px var(--positive-color-shadow));
   background-color: var(--positive-color-hover);
}
.wf-btn-positive:active:not(:disabled) {
   filter: none;
   box-shadow: none;
   background-color: var(--positive-color-active);
}
.wf-btn-positive:focus-visible {
   outline-color: var(--positive-color);
}
.wf-btn-link.wf-btn-positive,
.wf-btn-positive.wf-btn-outlined {
   box-shadow: none;
   background-color: transparent;
   border-color: var(--positive-color);
   color: var(--positive-color);
}
.wf-btn-positive.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--positive-color-inverted);
}
.wf-btn-positive.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--positive-color);
}
.wf-btn-positive.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--positive-color-inverted);
}
.wf-btn-negative {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--negative-color-shadow));
   background-color: var(--negative-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-negative:hover:not(:disabled) {
   filter: none;
   box-shadow: var(--wf-btn-color-shadow, 0 4px 12px var(--negative-color-shadow));
   background-color: var(--negative-color-hover);
}
.wf-btn-negative:active:not(:disabled) {
   filter: none;
   box-shadow: none;
   background-color: var(--negative-color-active);
}
.wf-btn-negative:focus-visible {
   outline-color: var(--negative-color);
}
.wf-btn-link.wf-btn-negative,
.wf-btn-negative.wf-btn-outlined {
   box-shadow: none;
   background-color: transparent;
   border-color: var(--negative-color);
   color: var(--negative-color);
}
.wf-btn-negative.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--negative-color-inverted);
}
.wf-btn-negative.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--negative-color);
}
.wf-btn-negative.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--negative-color-inverted);
}
.wf-btn-alert {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--alert-color-shadow));
   background-color: var(--alert-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-alert:hover:not(:disabled) {
   filter: none;
   box-shadow: var(--wf-btn-color-shadow, 0 4px 12px var(--alert-color-shadow));
   background-color: var(--alert-color-hover);
}
.wf-btn-alert:active:not(:disabled) {
   filter: none;
   box-shadow: none;
   background-color: var(--alert-color-active);
}
.wf-btn-alert:focus-visible {
   outline-color: var(--alert-color);
}
.wf-btn-link.wf-btn-alert,
.wf-btn-alert.wf-btn-outlined {
   box-shadow: none;
   background-color: transparent;
   border-color: var(--alert-color);
   color: var(--alert-color);
}
.wf-btn-alert.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--alert-color-inverted);
}
.wf-btn-alert.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--alert-color);
}
.wf-btn-alert.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--alert-color-inverted);
}
.wf-btn-info {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--info-color-shadow));
   background-color: var(--info-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-info:hover:not(:disabled) {
   filter: none;
   box-shadow: var(--wf-btn-color-shadow, 0 4px 12px var(--info-color-shadow));
   background-color: var(--info-color-hover);
}
.wf-btn-info:active:not(:disabled) {
   filter: none;
   box-shadow: none;
   background-color: var(--info-color-active);
}
.wf-btn-info:focus-visible {
   outline-color: var(--info-color);
}
.wf-btn-link.wf-btn-info,
.wf-btn-info.wf-btn-outlined {
   box-shadow: none;
   background-color: transparent;
   border-color: var(--info-color);
   color: var(--info-color);
}
.wf-btn-info.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--info-color-inverted);
}
.wf-btn-info.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--info-color);
}
.wf-btn-info.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--info-color-inverted);
}
.wf-btn-sage {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--sage-color-shadow));
   background-color: var(--sage-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-sage:hover:not(:disabled) {
   filter: none;
   background-color: var(--sage-color-hover);
}
.wf-btn-sage:active:not(:disabled) {
   filter: none;
   background-color: var(--sage-color-active);
}
.wf-btn-sage:focus-visible {
   outline-color: var(--sage-color);
}
.wf-btn-link.wf-btn-sage,
.wf-btn-sage.wf-btn-outlined {
   background-color: transparent;
   border-color: var(--sage-color);
   color: var(--sage-color);
}
.wf-btn-sage.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--sage-color-inverted);
}
.wf-btn-sage.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--sage-color);
}
.wf-btn-sage.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--sage-color-inverted);
}
.wf-btn-indigo {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--indigo-color-shadow));
   background-color: var(--indigo-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-indigo:hover:not(:disabled) {
   filter: none;
   background-color: var(--indigo-color-hover);
}
.wf-btn-indigo:active:not(:disabled) {
   filter: none;
   background-color: var(--indigo-color-active);
}
.wf-btn-indigo:focus-visible {
   outline-color: var(--indigo-color);
}
.wf-btn-link.wf-btn-indigo,
.wf-btn-indigo.wf-btn-outlined {
   background-color: transparent;
   border-color: var(--indigo-color);
   color: var(--indigo-color);
}
.wf-btn-indigo.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--indigo-color-inverted);
}
.wf-btn-indigo.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--indigo-color);
}
.wf-btn-indigo.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--indigo-color-inverted);
}
.wf-btn-earth {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--earth-color-shadow));
   background-color: var(--earth-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-earth:hover:not(:disabled) {
   filter: none;
   background-color: var(--earth-color-hover);
}
.wf-btn-earth:active:not(:disabled) {
   filter: none;
   background-color: var(--earth-color-active);
}
.wf-btn-earth:focus-visible {
   outline-color: var(--earth-color);
}
.wf-btn-link.wf-btn-earth,
.wf-btn-earth.wf-btn-outlined {
   background-color: transparent;
   border-color: var(--earth-color);
   color: var(--earth-color);
}
.wf-btn-earth.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--earth-color-inverted);
}
.wf-btn-earth.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--earth-color);
}
.wf-btn-earth.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--earth-color-inverted);
}
.wf-btn-forest {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--forest-color-shadow));
   background-color: var(--forest-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-forest:hover:not(:disabled) {
   filter: none;
   background-color: var(--forest-color-hover);
}
.wf-btn-forest:active:not(:disabled) {
   filter: none;
   background-color: var(--forest-color-active);
}
.wf-btn-forest:focus-visible {
   outline-color: var(--forest-color);
}
.wf-btn-link.wf-btn-forest,
.wf-btn-forest.wf-btn-outlined {
   background-color: transparent;
   border-color: var(--forest-color);
   color: var(--forest-color);
}
.wf-btn-forest.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--forest-color-inverted);
}
.wf-btn-forest.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--forest-color);
}
.wf-btn-forest.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--forest-color-inverted);
}
.wf-btn-plum {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--plum-color-shadow));
   background-color: var(--plum-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-plum:hover:not(:disabled) {
   filter: none;
   background-color: var(--plum-color-hover);
}
.wf-btn-plum:active:not(:disabled) {
   filter: none;
   background-color: var(--plum-color-active);
}
.wf-btn-plum:focus-visible {
   outline-color: var(--plum-color);
}
.wf-btn-link.wf-btn-plum,
.wf-btn-plum.wf-btn-outlined {
   background-color: transparent;
   border-color: var(--plum-color);
   color: var(--plum-color);
}
.wf-btn-plum.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--plum-color-inverted);
}
.wf-btn-plum.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--plum-color);
}
.wf-btn-plum.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--plum-color-inverted);
}
.wf-btn-lavender {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--lavender-color-shadow));
   background-color: var(--lavender-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-lavender:hover:not(:disabled) {
   filter: none;
   background-color: var(--lavender-color-hover);
}
.wf-btn-lavender:active:not(:disabled) {
   filter: none;
   background-color: var(--lavender-color-active);
}
.wf-btn-lavender:focus-visible {
   outline-color: var(--lavender-color);
}
.wf-btn-link.wf-btn-lavender,
.wf-btn-lavender.wf-btn-outlined {
   background-color: transparent;
   border-color: var(--lavender-color);
   color: var(--lavender-color);
}
.wf-btn-lavender.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--lavender-color-inverted);
}
.wf-btn-lavender.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--lavender-color);
}
.wf-btn-lavender.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--lavender-color-inverted);
}
.wf-btn-dusk {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--dusk-color-shadow));
   background-color: var(--dusk-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-dusk:hover:not(:disabled) {
   filter: none;
   background-color: var(--dusk-color-hover);
}
.wf-btn-dusk:active:not(:disabled) {
   filter: none;
   background-color: var(--dusk-color-active);
}
.wf-btn-dusk:focus-visible {
   outline-color: var(--dusk-color);
}
.wf-btn-link.wf-btn-dusk,
.wf-btn-dusk.wf-btn-outlined {
   background-color: transparent;
   border-color: var(--dusk-color);
   color: var(--dusk-color);
}
.wf-btn-dusk.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--dusk-color-inverted);
}
.wf-btn-dusk.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--dusk-color);
}
.wf-btn-dusk.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--dusk-color-inverted);
}
.wf-btn-light {
   background-color: var(--light-color);
   border-color: var(--wf-text-muted);
   color: var(--wf-text-muted);
}
.wf-btn-light:hover:not(:disabled) {
   filter: none;
   background-color: var(--light-color-hover);
}
.wf-btn-light:active:not(:disabled) {
   filter: none;
   background-color: var(--light-color-active);
}
.wf-btn-link.wf-btn-light,
.wf-btn-light.wf-btn-outlined {
   background-color: transparent;
   border-color: var(--wf-text-muted);
   color: var(--wf-text-muted);
}
.wf-btn-light.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--wf-text-muted);
}
.wf-btn-dark {
   box-shadow: var(--wf-btn-color-shadow, 0 2px 8px var(--dark-color-shadow));
   background-color: var(--dark-color);
   border-color: transparent;
   color: var(--white-color);
}
.wf-btn-dark:hover:not(:disabled) {
   filter: none;
   background-color: var(--dark-color-hover);
}
.wf-btn-dark:active:not(:disabled) {
   filter: none;
   background-color: var(--dark-color-active);
}
.wf-btn-link.wf-btn-dark,
.wf-btn-dark.wf-btn-outlined {
   background-color: transparent;
   border-color: var(--dark-color);
   color: var(--dark-color);
}
.wf-btn-dark.wf-btn-outlined:hover:not(:disabled) {
   filter: none;
   background-color: var(--grey-color-500);
}
.wf-btn-dark.wf-btn-plain {
   background-color: transparent;
   border-color: transparent;
   color: var(--dark-color);
}
.wf-btn-dark.wf-btn-plain:hover:not(:disabled) {
   filter: none;
   background-color: var(--grey-color-500);
}
/* ── Inverted style (generic, works without a color class) ─────────────────── */
.wf-btn-inverted {
   box-shadow: var(--wf-btn-inverted-shadow, 0 2px 8px rgba(0, 0, 0, .1));
   background-color: var(--wf-btn-inverted-bg, #fff);
   border-color: var(--wf-btn-inverted-border, transparent);
   color: var(--wf-text);
}
.wf-btn-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
/* ── Per-color inverted variants ───────────────────────────────────────────── */
.wf-btn-primary-inverted {
   background-color: var(--primary-color-inverted);
   border-color: transparent;
   color: var(--primary-color);
}
.wf-btn-primary-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-primary-inverted:focus-visible {
   outline-color: var(--primary-color);
}
.wf-btn-secondary-inverted {
   background-color: var(--secondary-color-inverted);
   border-color: transparent;
   color: var(--secondary-color);
}
.wf-btn-secondary-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-secondary-inverted:focus-visible {
   outline-color: var(--secondary-color);
}
.wf-btn-positive-inverted {
   background-color: var(--positive-color-inverted);
   border-color: transparent;
   color: var(--positive-color);
}
.wf-btn-positive-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-positive-inverted:focus-visible {
   outline-color: var(--positive-color);
}
.wf-btn-negative-inverted {
   background-color: var(--negative-color-inverted);
   border-color: transparent;
   color: var(--negative-color);
}
.wf-btn-negative-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-negative-inverted:focus-visible {
   outline-color: var(--negative-color);
}
.wf-btn-alert-inverted {
   background-color: var(--alert-color-inverted);
   border-color: transparent;
   color: var(--alert-color);
}
.wf-btn-alert-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-alert-inverted:focus-visible {
   outline-color: var(--alert-color);
}
.wf-btn-info-inverted {
   background-color: var(--info-color-inverted);
   border-color: transparent;
   color: var(--info-color);
}
.wf-btn-info-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-info-inverted:focus-visible {
   outline-color: var(--info-color);
}
.wf-btn-sage-inverted {
   background-color: var(--sage-color-inverted);
   border-color: transparent;
   color: var(--sage-color);
}
.wf-btn-sage-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-sage-inverted:focus-visible {
   outline-color: var(--sage-color);
}
.wf-btn-indigo-inverted {
   background-color: var(--indigo-color-inverted);
   border-color: transparent;
   color: var(--indigo-color);
}
.wf-btn-indigo-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-indigo-inverted:focus-visible {
   outline-color: var(--indigo-color);
}
.wf-btn-earth-inverted {
   background-color: var(--earth-color-inverted);
   border-color: transparent;
   color: var(--earth-color);
}
.wf-btn-earth-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-earth-inverted:focus-visible {
   outline-color: var(--earth-color);
}
.wf-btn-forest-inverted {
   background-color: var(--forest-color-inverted);
   border-color: transparent;
   color: var(--forest-color);
}
.wf-btn-forest-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-forest-inverted:focus-visible {
   outline-color: var(--forest-color);
}
.wf-btn-plum-inverted {
   background-color: var(--plum-color-inverted);
   border-color: transparent;
   color: var(--plum-color);
}
.wf-btn-plum-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-plum-inverted:focus-visible {
   outline-color: var(--plum-color);
}
.wf-btn-lavender-inverted {
   background-color: var(--lavender-color-inverted);
   border-color: transparent;
   color: var(--lavender-color);
}
.wf-btn-lavender-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-lavender-inverted:focus-visible {
   outline-color: var(--lavender-color);
}
.wf-btn-dusk-inverted {
   background-color: var(--dusk-color-inverted);
   border-color: transparent;
   color: var(--dusk-color);
}
.wf-btn-dusk-inverted:hover:not(:disabled):not([disabled]) {
   filter: brightness(var(--wf-btn-inverted-hover-brightness));
}
.wf-btn-dusk-inverted:focus-visible {
   outline-color: var(--dusk-color);
}
.wf-btn-transparent {
   background-color: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.5);
}
.wf-btn-group {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: stretch;
   max-width: 100%;
}
.wf-btn-group > .wf-btn {
   position: relative;
   border-radius: 0;
   min-width: 0;
}
.wf-btn-group > .wf-btn + .wf-btn:dir(ltr) {
   margin-inline-start: -1px;
}
.wf-btn-group > .wf-btn + .wf-btn:dir(rtl) {
   margin-inline-end: -1px;
}
.wf-btn-group > .wf-btn:hover,
.wf-btn-group > .wf-btn:focus-visible {
   z-index: 1;
}
.wf-btn-group > .wf-btn:first-child:dir(ltr) {
   border-start-start-radius: var(--wf-radius-3);
   border-end-start-radius: var(--wf-radius-3);
}
.wf-btn-group > .wf-btn:first-child:dir(rtl) {
   border-start-end-radius: var(--wf-radius-3);
   border-end-end-radius: var(--wf-radius-3);
}
.wf-btn-group > .wf-btn:last-child:dir(ltr) {
   border-start-end-radius: var(--wf-radius-3);
   border-end-end-radius: var(--wf-radius-3);
}
.wf-btn-group > .wf-btn:last-child:dir(rtl) {
   border-start-start-radius: var(--wf-radius-3);
   border-end-start-radius: var(--wf-radius-3);
}
.wf-btn-group.wf-btn-pill > .wf-btn:first-child:dir(ltr) {
   border-start-start-radius: 999rem;
   border-end-start-radius: 999rem;
}
.wf-btn-group.wf-btn-pill > .wf-btn:first-child:dir(rtl) {
   border-start-end-radius: 999rem;
   border-end-end-radius: 999rem;
}
.wf-btn-group.wf-btn-pill > .wf-btn:last-child:dir(ltr) {
   border-start-end-radius: 999rem;
   border-end-end-radius: 999rem;
}
.wf-btn-group.wf-btn-pill > .wf-btn:last-child:dir(rtl) {
   border-start-start-radius: 999rem;
   border-end-start-radius: 999rem;
}
.wf-btn-group-vertical {
   display: inline-flex;
   flex-direction: column;
   align-items: stretch;
}
.wf-btn-group-vertical > .wf-btn {
   position: relative;
   border-radius: 0;
}
.wf-btn-group-vertical > .wf-btn + .wf-btn {
   margin-block-start: -1px;
}
.wf-btn-group-vertical > .wf-btn:hover,
.wf-btn-group-vertical > .wf-btn:focus-visible {
   z-index: 1;
}
.wf-btn-group-vertical > .wf-btn:first-child:dir(ltr) {
   border-start-start-radius: var(--wf-radius-3);
   border-start-end-radius: var(--wf-radius-3);
}
.wf-btn-group-vertical > .wf-btn:first-child:dir(rtl) {
   border-start-end-radius: var(--wf-radius-3);
   border-start-start-radius: var(--wf-radius-3);
}
.wf-btn-group-vertical > .wf-btn:last-child:dir(ltr) {
   border-end-end-radius: var(--wf-radius-3);
   border-end-start-radius: var(--wf-radius-3);
}
.wf-btn-group-vertical > .wf-btn:last-child:dir(rtl) {
   border-end-start-radius: var(--wf-radius-3);
   border-end-end-radius: var(--wf-radius-3);
}
/* Screen breakpoints start at 30rem (480px) to target small devices. */
@media (max-width: 41.999rem) {
   .wf-btn-phone-block {
      width: 100%;
   }
   .wf-phone-stack > .wf-btn {
      width: 100%;
   }
   .wf-btn-group {
      display: flex;
      width: 100%;
   }
   .wf-btn-group > .wf-btn {
      flex: 1 1 100%;
      justify-content: start;
   }
   .wf-btn-group > .wf-btn:first-child:dir(ltr) {
      border-radius: var(--wf-radius-3);
   }
   .wf-btn-group > .wf-btn:last-child:dir(ltr) {
      border-radius: var(--wf-radius-3);
   }
}