@volverjs/style/dist/components/vv-button.css

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

:where(:host,:root,.theme){--vv-button-position: relative;--vv-button-background: var(--color-brand);--vv-button-border-radius: var(--rounded);--vv-button-border-style: solid;--vv-button-border-color: var(--color-brand);--vv-button-color: var(--color-white);--vv-button-font-family: var(--font-sans);--vv-button-font-weight: var(--font-semibold);--vv-button-gap: 1ch;--vv-button-padding-block: var(--spacing-7);--vv-button-padding-inline: var(--spacing-16);--vv-button-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-transition: var(--transition-all);--vv-button-will-change: all;--vv-button-min-width: 0;--vv-button-pointer-events: auto;--vv-button-state-focus-visible-outline-offset: var(--spacing-4);--vv-button-state-focus-visible-outline: var(--spacing-px) solid var(--color-brand);--vv-button-state-hover-background: var(--color-brand-darken-1);--vv-button-state-hover-border-color: var(--color-brand-darken-1);--vv-button-state-hover-text-decoration: none;--vv-button-state-active-background: var(--color-brand-darken-2);--vv-button-state-active-border-color: var(--color-brand-darken-2);--vv-button-state-pressed-background: var(--color-brand-darken-2);--vv-button-state-pressed-border-color: var(--color-brand-darken-2);--vv-button-state-disabled-opacity: var(--opacity-50);--vv-button-state-disabled-cursor: not-allowed;--vv-button-element-icon-block-size: 1.1em;--vv-button-element-icon-inline-size: 1.1em;--vv-button-element-icon-margin: 0;--vv-button-element-icon-flex-shrink: 0;--vv-button-element-label-white-space: nowrap;--vv-button-element-label-text-overflow: ellipsis;--vv-button-element-label-min-width: 0;--vv-button-element-label-overflow: hidden;--vv-button-modifier-icon-only-element-icon-margin-inline: calc(var(--spacing-6) * -1);--vv-button-modifier-primary-background: var(--color-gray-darken-3);--vv-button-modifier-primary-border-color: var(--color-gray-darken-3);--vv-button-modifier-primary-color: var(--color-white);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-darken-3);--vv-button-modifier-primary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-darken-4);--vv-button-modifier-primary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-darken-5);--vv-button-modifier-primary-state-pressed-background: var(--color-gray-darken-5);--vv-button-modifier-primary-state-pressed-border-color: var(--color-gray-darken-5);--vv-button-modifier-secondary-background: var(--color-white);--vv-button-modifier-secondary-border-style: solid;--vv-button-modifier-secondary-border-color: var(--color-gray-lighten-4);--vv-button-modifier-secondary-color: var(--color-word);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-lighten-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-lighten-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-lighten-3);--vv-button-modifier-secondary-state-pressed-background: var(--color-gray-lighten-4);--vv-button-modifier-danger-background: var(--color-danger);--vv-button-modifier-danger-border-color: var(--color-danger);--vv-button-modifier-danger-color: var(--color-white);--vv-button-modifier-danger-state-focus-visible-outline: var(--spacing-px) solid var(--color-danger);--vv-button-modifier-danger-state-hover-background: var(--color-danger-darken-1);--vv-button-modifier-danger-state-hover-border-color: var(--color-danger-darken-1);--vv-button-modifier-danger-state-active-background: var(--color-danger-darken-2);--vv-button-modifier-danger-state-active-border-color: var(--color-danger-darken-2);--vv-button-modifier-danger-state-pressed-background: var(--color-danger-darken-2);--vv-button-modifier-danger-state-pressed-border-color: var(--color-danger-darken-2);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray-darken-1);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-lighten-5);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-ghost-state-focus-visible-outline-offset: var(--spacing-0);--vv-button-modifier-ghost-state-hover-background: var(--color-gray-lighten-5);--vv-button-modifier-ghost-state-hover-color: var(--color-word-2);--vv-button-modifier-ghost-state-active-background: var(--color-gray-lighten-4);--vv-button-modifier-ghost-state-active-color: var(--color-word-2);--vv-button-modifier-ghost-state-pressed-background: var(--color-gray-lighten-4);--vv-button-modifier-ghost-state-pressed-color: var(--color-word-2);--vv-button-modifier-link-background: transparent;--vv-button-modifier-link-border-width: var(--border-0);--vv-button-modifier-link-padding: 0;--vv-button-modifier-link-color: var(--color-brand-darken-1);--vv-button-modifier-link-font-weight: inherit;--vv-button-modifier-link-text-shadow: none;--vv-button-modifier-link-state-focus-visible-outline: var(--spacing-px) solid var(--color-brand-lighten-4);--vv-button-modifier-link-state-focus-visible-outline-offset: var(--spacing-4);--vv-button-modifier-link-state-hover-text-decoration: underline;--vv-button-modifier-link-state-hover-text-underline-offset: var(--spacing-4);--vv-button-modifier-link-state-active-color: var(--color-brand-darken-3);--vv-button-modifier-link-element-icon-margin: var(--spacing-0);--vv-button-modifier-static-light-background: var(--color-white);--vv-button-modifier-static-light-border-color: var(--color-white);--vv-button-modifier-static-light-color: var(--color-black);--vv-button-modifier-static-light-text-shadow: 0 1px 0 var(--color-gray-lighten-5);--vv-button-modifier-static-light-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-hover-border-color: var(--color-gray-lighten-5);--vv-button-modifier-static-light-state-hover-background: var(--color-gray-lighten-5);--vv-button-modifier-static-light-state-active-border-color: var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-active-background: var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-pressed-border-color: var(--color-gray-lighten-4);--vv-button-modifier-static-light-state-pressed-background: var(--color-gray-lighten-4);--vv-button-modifier-static-dark-background: var(--color-black);--vv-button-modifier-static-dark-border-color: var(--color-black);--vv-button-modifier-static-dark-color: var(--color-white);--vv-button-modifier-static-dark-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-static-dark-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-darken-4);--vv-button-modifier-static-dark-state-hover-border-color: var(--color-gray-darken-4);--vv-button-modifier-static-dark-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-static-dark-state-active-border-color: var(--color-gray-darken-3);--vv-button-modifier-static-dark-state-active-background: var(--color-gray-darken-3);--vv-button-modifier-static-dark-state-pressed-border-color: var(--color-gray-darken-3);--vv-button-modifier-static-dark-state-pressed-background: var(--color-gray-darken-3);--vv-button-modifier-action-font-size: var(--text-14);--vv-button-modifier-action-background: var(--color-surface-1);--vv-button-modifier-action-color: var(--color-word-1);--vv-button-modifier-action-border-color: var(--color-word-5);--vv-button-modifier-action-font-weight: var(--font-normal);--vv-button-modifier-action-padding-inline: var(--spacing-6);--vv-button-modifier-action-padding-block: var(--spacing-4);--vv-button-modifier-action-text-shadow: none;--vv-button-modifier-action-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-action-state-hover-background: var(--color-surface-2);--vv-button-modifier-action-state-active-background: var(--color-surface-5);--vv-button-modifier-action-state-active-color: var(--color-word);--vv-button-modifier-action-state-pressed-color: var(--color-white);--vv-button-modifier-action-state-pressed-background: var(--color-gray-darken-1);--vv-button-modifier-action-state-pressed-border-color: var(--color-gray-darken-1);--vv-button-modifier-action-element-icon-margin-inline: -.125ch;--vv-button-modifier-action-element-icon-block-size: calc(1em * var(--leading-snug));--vv-button-modifier-action-element-icon-inline-size: calc(1em * var(--leading-snug));--vv-button-modifier-action-quiet-font-size: var(--text-14);--vv-button-modifier-action-quiet-background: transparent;--vv-button-modifier-action-quiet-color: var(--color-word-1);--vv-button-modifier-action-quiet-border-color: transparent;--vv-button-modifier-action-quiet-font-weight: var(--font-normal);--vv-button-modifier-action-quiet-padding-inline: var(--spacing-6);--vv-button-modifier-action-quiet-padding-block: var(--spacing-4);--vv-button-modifier-action-quiet-text-shadow: none;--vv-button-modifier-action-quiet-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray-lighten-4);--vv-button-modifier-action-quiet-state-focus-visible-outline-offset: var(--spacing-0);--vv-button-modifier-action-quiet-state-hover-background: var(--color-surface-2);--vv-button-modifier-action-quiet-state-hover-border-color: var(--color-surface-2);--vv-button-modifier-action-quiet-state-active-background: var(--color-surface-5);--vv-button-modifier-action-quiet-state-active-border-color: var(--color-surface-5);--vv-button-modifier-action-quiet-state-active-color: var(--color-word);--vv-button-modifier-action-quiet-state-pressed-color: var(--color-white);--vv-button-modifier-action-quiet-state-pressed-background: var(--color-gray-darken-1);--vv-button-modifier-action-quiet-state-pressed-border-color: var(--color-gray-darken-1);--vv-button-modifier-action-quiet-element-icon-margin-inline: -.125ch;--vv-button-modifier-action-quiet-element-icon-block-size: calc(1em * var(--leading-snug));--vv-button-modifier-action-quiet-element-icon-inline-size: calc(1em * var(--leading-snug));--vv-button-modifier-rounded-border-radius: var(--rounded-full);--vv-button-modifier-block-width: 100%;--vv-button-modifier-block-max-width: auto;--vv-button-modifier-reverse-element-label-order: -1;--vv-button-modifier-column-flex-direction: column;--vv-button-modifier-column-gap: var(--spacing-2);--vv-button-modifier-full-bleed-min-width: 20ch}:where(.vv-button):where(a[href],button,input[type=button],input[type=submit],input[type=reset]){-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;cursor:pointer;display:inline-flex;justify-content:center;text-align:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;--button-border-width: var(--border-2);--button-line-height: var(--leading-normal);border-width:var(--button-border-width);line-height:var(--button-line-height);position:var(--vv-button-position);background:var(--vv-button-background);border-radius:var(--vv-button-border-radius);border-style:var(--vv-button-border-style);border-color:var(--vv-button-border-color);color:var(--vv-button-color);font-family:var(--vv-button-font-family);font-weight:var(--vv-button-font-weight);gap:var(--vv-button-gap);padding-block:var(--vv-button-padding-block);padding-inline:var(--vv-button-padding-inline);text-shadow:var(--vv-button-text-shadow);transition:var(--vv-button-transition);will-change:var(--vv-button-will-change);min-width:var(--vv-button-min-width);pointer-events:var(--vv-button-pointer-events)}:where(.vv-button__icon,.vv-button>:where(svg,[data-icon])){block-size:var(--vv-button-element-icon-block-size);inline-size:var(--vv-button-element-icon-inline-size);margin:var(--vv-button-element-icon-margin);flex-shrink:var(--vv-button-element-icon-flex-shrink);min-height:calc(1em * var(--button-line-height))}:where(.vv-button__label){white-space:var(--vv-button-element-label-white-space);text-overflow:var(--vv-button-element-label-text-overflow);min-width:var(--vv-button-element-label-min-width);overflow:var(--vv-button-element-label-overflow)}:where(.vv-button--focus-visible,.vv-button.focus-visible,.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline-offset:var(--vv-button-state-focus-visible-outline-offset);outline:var(--vv-button-state-focus-visible-outline)}:where(.vv-button--hover,.vv-button.hover,.vv-button:not([disabled]):hover){--vv-button-background: var(--vv-button-state-hover-background);--vv-button-border-color: var(--vv-button-state-hover-border-color);-webkit-text-decoration:var(--vv-button-state-hover-text-decoration);text-decoration:var(--vv-button-state-hover-text-decoration)}:where(.vv-button--active,.vv-button.active,.vv-button:not([disabled]):active){--vv-button-background: var(--vv-button-state-active-background);--vv-button-border-color: var(--vv-button-state-active-border-color)}:where(.vv-button--pressed,.vv-button.pressed,.vv-button[aria-pressed=true]){--vv-button-background: var(--vv-button-state-pressed-background);--vv-button-border-color: var(--vv-button-state-pressed-border-color)}:where(.vv-button--disabled,.vv-button.disabled,.vv-button[disabled],.vv-button[aria-disabled=true]){opacity:var(--vv-button-state-disabled-opacity);cursor:var(--vv-button-state-disabled-cursor)}:where(.vv-button--icon-only .vv-button__icon,.vv-button--icon-only>:where(svg,[data-icon])){margin-inline:var(--vv-button-modifier-icon-only-element-icon-margin-inline)}:where(.vv-button--primary.vv-button){--vv-button-background: var(--vv-button-modifier-primary-background);--vv-button-border-color: var(--vv-button-modifier-primary-border-color);--vv-button-color: var(--vv-button-modifier-primary-color)}:where(.vv-button--primary.vv-button--focus-visible,.vv-button--primary.vv-button.focus-visible,.vv-button--primary.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-primary-state-focus-visible-outline)}:where(.vv-button--primary.vv-button--hover,.vv-button--primary.vv-button.hover,.vv-button--primary.vv-button:not([disabled]):hover){--vv-button-modifier-primary-background: var(--vv-button-modifier-primary-state-hover-background);--vv-button-modifier-primary-border-color: var(--vv-button-modifier-primary-state-hover-border-color)}:where(.vv-button--primary.vv-button--active,.vv-button--primary.vv-button.active,.vv-button--primary.vv-button:not([disabled]):active){--vv-button-modifier-primary-background: var(--vv-button-modifier-primary-state-active-background);--vv-button-modifier-primary-border-color: var(--vv-button-modifier-primary-state-active-border-color)}:where(.vv-button--primary.vv-button--pressed,.vv-button--primary.vv-button.pressed,.vv-button--primary.vv-button[aria-pressed=true]){--vv-button-modifier-primary-background: var(--vv-button-modifier-primary-state-pressed-background);--vv-button-modifier-primary-border-color: var(--vv-button-modifier-primary-state-pressed-border-color)}:where(.vv-button--secondary.vv-button){--vv-button-background: var(--vv-button-modifier-secondary-background);--vv-button-border-style: var(--vv-button-modifier-secondary-border-style);--vv-button-border-color: var(--vv-button-modifier-secondary-border-color);--vv-button-color: var(--vv-button-modifier-secondary-color);--vv-button-text-shadow: var(--vv-button-modifier-secondary-text-shadow)}:where(.vv-button--secondary.vv-button--focus-visible,.vv-button--secondary.vv-button.focus-visible,.vv-button--secondary.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-secondary-state-focus-visible-outline)}:where(.vv-button--secondary.vv-button--hover,.vv-button--secondary.vv-button.hover,.vv-button--secondary.vv-button:not([disabled]):hover){--vv-button-modifier-secondary-background: var(--vv-button-modifier-secondary-state-hover-background)}:where(.vv-button--secondary.vv-button--active,.vv-button--secondary.vv-button.active,.vv-button--secondary.vv-button:not([disabled]):active){--vv-button-modifier-secondary-background: var(--vv-button-modifier-secondary-state-active-background)}:where(.vv-button--secondary.vv-button--pressed,.vv-button--secondary.vv-button.pressed,.vv-button--secondary.vv-button[aria-pressed=true]){--vv-button-modifier-secondary-background: var(--vv-button-modifier-secondary-state-pressed-background)}:where(.vv-button--danger.vv-button){--vv-button-background: var(--vv-button-modifier-danger-background);--vv-button-border-color: var(--vv-button-modifier-danger-border-color);--vv-button-color: var(--vv-button-modifier-danger-color)}:where(.vv-button--danger.vv-button--focus-visible,.vv-button--danger.vv-button.focus-visible,.vv-button--danger.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-danger-state-focus-visible-outline)}:where(.vv-button--danger.vv-button--hover,.vv-button--danger.vv-button.hover,.vv-button--danger.vv-button:not([disabled]):hover){--vv-button-modifier-danger-background: var(--vv-button-modifier-danger-state-hover-background);--vv-button-modifier-danger-border-color: var(--vv-button-modifier-danger-state-hover-border-color)}:where(.vv-button--danger.vv-button--active,.vv-button--danger.vv-button.active,.vv-button--danger.vv-button:not([disabled]):active){--vv-button-modifier-danger-background: var(--vv-button-modifier-danger-state-active-background);--vv-button-modifier-danger-border-color: var(--vv-button-modifier-danger-state-active-border-color)}:where(.vv-button--danger.vv-button--pressed,.vv-button--danger.vv-button.pressed,.vv-button--danger.vv-button[aria-pressed=true]){--vv-button-modifier-danger-background: var(--vv-button-modifier-danger-state-pressed-background);--vv-button-modifier-danger-border-color: var(--vv-button-modifier-danger-state-pressed-border-color)}:where(.vv-button--ghost.vv-button){--vv-button-background: var(--vv-button-modifier-ghost-background);--vv-button-border-color: var(--vv-button-modifier-ghost-border-color);--vv-button-color: var(--vv-button-modifier-ghost-color);--vv-button-text-shadow: var(--vv-button-modifier-ghost-text-shadow)}:where(.vv-button--ghost.vv-button--focus-visible,.vv-button--ghost.vv-button.focus-visible,.vv-button--ghost.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-ghost-state-focus-visible-outline);outline-offset:var(--vv-button-modifier-ghost-state-focus-visible-outline-offset)}:where(.vv-button--ghost.vv-button--hover,.vv-button--ghost.vv-button.hover,.vv-button--ghost.vv-button:not([disabled]):hover){--vv-button-modifier-ghost-background: var(--vv-button-modifier-ghost-state-hover-background);--vv-button-modifier-ghost-color: var(--vv-button-modifier-ghost-state-hover-color)}:where(.vv-button--ghost.vv-button--active,.vv-button--ghost.vv-button.active,.vv-button--ghost.vv-button:not([disabled]):active){--vv-button-modifier-ghost-background: var(--vv-button-modifier-ghost-state-active-background);--vv-button-modifier-ghost-color: var(--vv-button-modifier-ghost-state-active-color)}:where(.vv-button--ghost.vv-button--pressed,.vv-button--ghost.vv-button.pressed,.vv-button--ghost.vv-button[aria-pressed=true]){--vv-button-modifier-ghost-background: var(--vv-button-modifier-ghost-state-pressed-background);--vv-button-modifier-ghost-color: var(--vv-button-modifier-ghost-state-pressed-color)}:where(.vv-button--link.vv-button){--vv-button-background: var(--vv-button-modifier-link-background);border-width:var(--vv-button-modifier-link-border-width);padding:var(--vv-button-modifier-link-padding);--vv-button-color: var(--vv-button-modifier-link-color);--vv-button-font-weight: var(--vv-button-modifier-link-font-weight);--vv-button-text-shadow: var(--vv-button-modifier-link-text-shadow)}:where(.vv-button--link .vv-button__icon,.vv-button--link>:where(svg,[data-icon])){margin:var(--vv-button-modifier-link-element-icon-margin)}:where(.vv-button--link.vv-button--focus-visible,.vv-button--link.vv-button.focus-visible,.vv-button--link.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-link-state-focus-visible-outline);outline-offset:var(--vv-button-modifier-link-state-focus-visible-outline-offset)}:where(.vv-button--link.vv-button--hover,.vv-button--link.vv-button.hover,.vv-button--link.vv-button:not([disabled]):hover){-webkit-text-decoration:var(--vv-button-modifier-link-state-hover-text-decoration);text-decoration:var(--vv-button-modifier-link-state-hover-text-decoration);text-underline-offset:var(--vv-button-modifier-link-state-hover-text-underline-offset)}:where(.vv-button--link.vv-button--active,.vv-button--link.vv-button.active,.vv-button--link.vv-button:not([disabled]):active){--vv-button-modifier-link-color: var(--vv-button-modifier-link-state-active-color)}:where(.vv-button--static-light.vv-button){--vv-button-background: var(--vv-button-modifier-static-light-background);--vv-button-border-color: var(--vv-button-modifier-static-light-border-color);--vv-button-color: var(--vv-button-modifier-static-light-color);--vv-button-text-shadow: var(--vv-button-modifier-static-light-text-shadow)}:where(.vv-button--static-light.vv-button--focus-visible,.vv-button--static-light.vv-button.focus-visible,.vv-button--static-light.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-static-light-state-focus-visible-outline)}:where(.vv-button--static-light.vv-button--hover,.vv-button--static-light.vv-button.hover,.vv-button--static-light.vv-button:not([disabled]):hover){--vv-button-modifier-static-light-border-color: var(--vv-button-modifier-static-light-state-hover-border-color);--vv-button-modifier-static-light-background: var(--vv-button-modifier-static-light-state-hover-background)}:where(.vv-button--static-light.vv-button--active,.vv-button--static-light.vv-button.active,.vv-button--static-light.vv-button:not([disabled]):active){--vv-button-modifier-static-light-border-color: var(--vv-button-modifier-static-light-state-active-border-color);--vv-button-modifier-static-light-background: var(--vv-button-modifier-static-light-state-active-background)}:where(.vv-button--static-light.vv-button--pressed,.vv-button--static-light.vv-button.pressed,.vv-button--static-light.vv-button[aria-pressed=true]){--vv-button-modifier-static-light-border-color: var(--vv-button-modifier-static-light-state-pressed-border-color);--vv-button-modifier-static-light-background: var(--vv-button-modifier-static-light-state-pressed-background)}:where(.vv-button--static-dark.vv-button){--vv-button-background: var(--vv-button-modifier-static-dark-background);--vv-button-border-color: var(--vv-button-modifier-static-dark-border-color);--vv-button-color: var(--vv-button-modifier-static-dark-color);--vv-button-text-shadow: var(--vv-button-modifier-static-dark-text-shadow)}:where(.vv-button--static-dark.vv-button--focus-visible,.vv-button--static-dark.vv-button.focus-visible,.vv-button--static-dark.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-static-dark-state-focus-visible-outline)}:where(.vv-button--static-dark.vv-button--hover,.vv-button--static-dark.vv-button.hover,.vv-button--static-dark.vv-button:not([disabled]):hover){--vv-button-modifier-static-dark-border-color: var(--vv-button-modifier-static-dark-state-hover-border-color);--vv-button-modifier-static-dark-background: var(--vv-button-modifier-static-dark-state-hover-background)}:where(.vv-button--static-dark.vv-button--active,.vv-button--static-dark.vv-button.active,.vv-button--static-dark.vv-button:not([disabled]):active){--vv-button-modifier-static-dark-border-color: var(--vv-button-modifier-static-dark-state-active-border-color);--vv-button-modifier-static-dark-background: var(--vv-button-modifier-static-dark-state-active-background)}:where(.vv-button--static-dark.vv-button--pressed,.vv-button--static-dark.vv-button.pressed,.vv-button--static-dark.vv-button[aria-pressed=true]){--vv-button-modifier-static-dark-border-color: var(--vv-button-modifier-static-dark-state-pressed-border-color);--vv-button-modifier-static-dark-background: var(--vv-button-modifier-static-dark-state-pressed-background)}:where(.vv-button--action.vv-button){--button-border-width: var(--border);--button-line-height: var(--leading-snug);font-size:var(--vv-button-modifier-action-font-size);--vv-button-background: var(--vv-button-modifier-action-background);--vv-button-color: var(--vv-button-modifier-action-color);--vv-button-border-color: var(--vv-button-modifier-action-border-color);--vv-button-font-weight: var(--vv-button-modifier-action-font-weight);--vv-button-padding-inline: var(--vv-button-modifier-action-padding-inline);--vv-button-padding-block: var(--vv-button-modifier-action-padding-block);--vv-button-text-shadow: var(--vv-button-modifier-action-text-shadow)}:where(.vv-button--action .vv-button__icon,.vv-button--action>:where(svg,[data-icon])){margin-inline:var(--vv-button-modifier-action-element-icon-margin-inline);block-size:var(--vv-button-modifier-action-element-icon-block-size);inline-size:var(--vv-button-modifier-action-element-icon-inline-size)}:where(.vv-button--action.vv-button--focus-visible,.vv-button--action.vv-button.focus-visible,.vv-button--action.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-action-state-focus-visible-outline)}:where(.vv-button--action.vv-button--hover,.vv-button--action.vv-button.hover,.vv-button--action.vv-button:not([disabled]):hover){--vv-button-modifier-action-background: var(--vv-button-modifier-action-state-hover-background)}:where(.vv-button--action.vv-button--active,.vv-button--action.vv-button.active,.vv-button--action.vv-button:not([disabled]):active){--vv-button-modifier-action-background: var(--vv-button-modifier-action-state-active-background);--vv-button-modifier-action-color: var(--vv-button-modifier-action-state-active-color)}:where(.vv-button--action.vv-button--pressed,.vv-button--action.vv-button.pressed,.vv-button--action.vv-button[aria-pressed=true]){--vv-button-modifier-action-color: var(--vv-button-modifier-action-state-pressed-color);--vv-button-modifier-action-background: var(--vv-button-modifier-action-state-pressed-background);--vv-button-modifier-action-border-color: var(--vv-button-modifier-action-state-pressed-border-color)}:where(.vv-button--action-quiet.vv-button){--button-border-width: var(--border);--button-line-height: var(--leading-snug);font-size:var(--vv-button-modifier-action-quiet-font-size);--vv-button-background: var(--vv-button-modifier-action-quiet-background);--vv-button-color: var(--vv-button-modifier-action-quiet-color);--vv-button-border-color: var(--vv-button-modifier-action-quiet-border-color);--vv-button-font-weight: var(--vv-button-modifier-action-quiet-font-weight);--vv-button-padding-inline: var(--vv-button-modifier-action-quiet-padding-inline);--vv-button-padding-block: var(--vv-button-modifier-action-quiet-padding-block);--vv-button-text-shadow: var(--vv-button-modifier-action-quiet-text-shadow)}:where(.vv-button--action-quiet .vv-button__icon,.vv-button--action-quiet>:where(svg,[data-icon])){margin-inline:var(--vv-button-modifier-action-quiet-element-icon-margin-inline);block-size:var(--vv-button-modifier-action-quiet-element-icon-block-size);inline-size:var(--vv-button-modifier-action-quiet-element-icon-inline-size)}:where(.vv-button--action-quiet.vv-button--focus-visible,.vv-button--action-quiet.vv-button.focus-visible,.vv-button--action-quiet.vv-button:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){outline:var(--vv-button-modifier-action-quiet-state-focus-visible-outline);outline-offset:var(--vv-button-modifier-action-quiet-state-focus-visible-outline-offset)}:where(.vv-button--action-quiet.vv-button--hover,.vv-button--action-quiet.vv-button.hover,.vv-button--action-quiet.vv-button:not([disabled]):hover){--vv-button-modifier-action-quiet-background: var(--vv-button-modifier-action-quiet-state-hover-background);--vv-button-modifier-action-quiet-border-color: var(--vv-button-modifier-action-quiet-state-hover-border-color)}:where(.vv-button--action-quiet.vv-button--active,.vv-button--action-quiet.vv-button.active,.vv-button--action-quiet.vv-button:not([disabled]):active){--vv-button-modifier-action-quiet-background: var(--vv-button-modifier-action-quiet-state-active-background);--vv-button-modifier-action-quiet-border-color: var(--vv-button-modifier-action-quiet-state-active-border-color);--vv-button-modifier-action-quiet-color: var(--vv-button-modifier-action-quiet-state-active-color)}:where(.vv-button--action-quiet.vv-button--pressed,.vv-button--action-quiet.vv-button.pressed,.vv-button--action-quiet.vv-button[aria-pressed=true]){--vv-button-modifier-action-quiet-color: var(--vv-button-modifier-action-quiet-state-pressed-color);--vv-button-modifier-action-quiet-background: var(--vv-button-modifier-action-quiet-state-pressed-background);--vv-button-modifier-action-quiet-border-color: var(--vv-button-modifier-action-quiet-state-pressed-border-color)}:where(.vv-button--rounded.vv-button){--vv-button-border-radius: var(--vv-button-modifier-rounded-border-radius)}:where(.vv-button--block.vv-button){width:var(--vv-button-modifier-block-width);max-width:var(--vv-button-modifier-block-max-width)}:where(.vv-button--reverse .vv-button__label){order:var(--vv-button-modifier-reverse-element-label-order)}:where(.vv-button--column.vv-button){flex-direction:var(--vv-button-modifier-column-flex-direction);--vv-button-gap: var(--vv-button-modifier-column-gap)}:where(.vv-button--full-bleed.vv-button){--vv-button-min-width: var(--vv-button-modifier-full-bleed-min-width)}