@visa/nova-styles/components/button/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
@layer components{:root,.v-alternate{--v-button-default-align-items:center;--v-button-default-block-size:var(--size-scalable-38);--v-button-default-border-radius:var(--size-rounded-medium);--v-button-default-border-style:solid;--v-button-default-direction:row;--v-button-default-gap:var(--size-scalable-6);--v-button-default-inline-size:auto;--v-button-default-justify-content:center;--v-button-default-padding-block:var(--size-scalable-11);--v-button-default-padding-inline:var(--size-scalable-14);--v-button-default-text-transform:none;--v-button-default-stacked-padding-inline:var(--size-scalable-4);--v-button-default-stacked-icon-size:1.7142857143rem;--v-button-default-stacked-gap:var(--size-scalable-2);--v-button-default-stacked-block-size:calc(var(--typography-label-small-line-height) + var(--v-button-default-stacked-gap) + var(--v-button-default-stacked-icon-size) + var(--v-button-default-padding-block) * 2);--v-button-default-stacked-min-inline-size:62px;--v-button-default-border-radius-icon:var(--size-rounded-pill);--v-button-default-icon-size:1.1428571429rem;--v-button-default-icon-border-size:1px;--v-button-default-icon-padding-block:calc(var(--size-scalable-11) - var(--v-button-default-icon-border-size));--v-button-default-block-size-small:var(--size-scalable-32);--v-button-default-padding-block-small:var(--size-scalable-8);--v-button-default-padding-inline-small:var(--size-scalable-11);--v-button-default-small-icon-size:1.1428571429rem;--v-button-default-block-size-large:var(--size-scalable-46);--v-button-default-large-icon-size:1.7142857143rem;--v-button-default-large-text-icon-size:1.2857142857rem;--v-button-default-padding-block-large:var(--size-scalable-11);--v-button-default-padding-block-icon-large:calc(var(--v-button-default-padding-block-large) - 0.2142857143rem);--v-button-default-padding-inline-large:var(--size-scalable-14);--v-button-default-badge-offset-x:0.5;--v-button-default-small-badge-offset-x:0.6;--v-button-default-large-badge-offset-x:0.3;--v-button-default-badge-offset-y:0;--v-button-default-badge-inline-max:0.75;--v-button-default-border-size:0px;--v-button-default-icon-subtle-background:var(--palette-default-active-subtle);--v-button-default-icon-subtle-border-color:var(--palette-default-active-subtle);--v-button-default-icon-subtle-foreground:var(--palette-default-text-on-active);--v-button-default-background:var(--palette-default-active);--v-button-default-border-color:var(--palette-default-active);--v-button-default-foreground:var(--palette-default-text-on-active);--v-button-default-hover-background:var(--palette-default-active-hover);--v-button-default-hover-border-color:var(--palette-default-active-hover);--v-button-default-hover-foreground:var(--palette-default-text-on-active);--v-button-default-focus-background:var(--palette-default-active-hover);--v-button-default-focus-border-color:var(--palette-default-active-hover);--v-button-default-focus-foreground:var(--palette-default-text-on-active);--v-button-default-active-background:var(--palette-default-active-pressed);--v-button-default-active-border-color:var(--palette-default-active-pressed);--v-button-default-active-foreground:var(--palette-default-text-on-active);--v-button-default-disabled-background:var(--palette-default-disabled);--v-button-default-disabled-border-color:var(--palette-default-disabled);--v-button-default-disabled-foreground:var(--palette-default-text-on-active);--v-button-default-destructive-background:var(--palette-messaging-text-negative);--v-button-default-destructive-foreground:var(--palette-default-text-on-active);--v-button-default-destructive-border-color:var(--palette-messaging-text-negative);--v-button-default-destructive-focus-outline:var(--palette-messaging-text-pressed-negative);--v-button-default-destructive-hover-background:var(--palette-messaging-text-hover-negative);--v-button-default-destructive-hover-border-color:var(--palette-messaging-text-hover-negative);--v-button-default-destructive-hover-foreground:var(--palette-default-text-on-active);--v-button-default-destructive-focus-background:var(--palette-messaging-text-hover-negative);--v-button-default-destructive-focus-border-color:var(--palette-messaging-text-hover-negative);--v-button-default-destructive-focus-foreground:var(--palette-default-text-on-active);--v-button-default-destructive-active-background:var(--palette-messaging-text-pressed-negative);--v-button-default-destructive-active-border-color:var(--palette-messaging-text-pressed-negative);--v-button-default-destructive-active-foreground:var(--palette-default-text-on-active);--v-button-secondary-border-size:calc(var(--theme-border-size) / 2);--v-button-secondary-padding-block:calc(var(--size-scalable-11) - var(--v-button-secondary-border-size));--v-button-secondary-padding-inline:calc(var(--size-scalable-14) - var(--v-button-secondary-border-size));--v-button-secondary-icon-subtle-background:var(--palette-default-transparent);--v-button-secondary-icon-subtle-border-color:var(--palette-default-active-subtle);--v-button-secondary-icon-subtle-foreground:var(--palette-default-active-subtle);--v-button-secondary-background:var(--palette-default-transparent);--v-button-secondary-border-color:var(--palette-default-active);--v-button-secondary-foreground:var(--palette-default-active);--v-button-secondary-hover-background:var(--palette-default-surface-highlight);--v-button-secondary-hover-border-color:var(--palette-default-active-hover);--v-button-secondary-hover-foreground:var(--palette-default-active-hover);--v-button-secondary-focus-background:var(--palette-default-surface-highlight);--v-button-secondary-focus-border-color:var(--palette-default-active-hover);--v-button-secondary-focus-foreground:var(--palette-default-active-hover);--v-button-secondary-active-background:var(--palette-default-surface-lowlight);--v-button-secondary-active-border-color:var(--palette-default-active-pressed);--v-button-secondary-active-foreground:var(--palette-default-active-pressed);--v-button-secondary-disabled-background:var(--palette-default-transparent);--v-button-secondary-disabled-border-color:var(--palette-default-disabled);--v-button-secondary-disabled-foreground:var(--palette-default-disabled);--v-button-secondary-destructive-background:var(--palette-default-transparent);--v-button-secondary-destructive-foreground:var(--palette-messaging-text-negative);--v-button-secondary-destructive-border-color:var(--palette-messaging-text-negative);--v-button-secondary-destructive-hover-background:var(--palette-messaging-highlight-negative);--v-button-secondary-destructive-hover-border-color:var(--palette-messaging-text-hover-negative);--v-button-secondary-destructive-hover-foreground:var(--palette-messaging-text-hover-negative);--v-button-secondary-destructive-focus-background:var(--palette-messaging-highlight-negative);--v-button-secondary-destructive-focus-border-color:var(--palette-messaging-text-hover-negative);--v-button-secondary-destructive-focus-foreground:var(--palette-messaging-text-hover-negative);--v-button-secondary-destructive-active-background:var(--palette-messaging-lowlight-negative);--v-button-secondary-destructive-active-border-color:var(--palette-messaging-text-pressed-negative);--v-button-secondary-destructive-active-foreground:var(--palette-messaging-text-pressed-negative);--v-button-tertiary-icon-subtle-background:var(--palette-default-transparent);--v-button-tertiary-icon-subtle-border-color:var(--palette-default-transparent);--v-button-tertiary-icon-subtle-foreground:var(--palette-default-active-subtle);--v-button-tertiary-background:var(--palette-default-transparent);--v-button-tertiary-border-color:var(--palette-default-transparent);--v-button-tertiary-foreground:var(--palette-default-active);--v-button-tertiary-hover-background:var(--palette-default-surface-highlight);--v-button-tertiary-hover-border-color:var(--palette-default-surface-highlight);--v-button-tertiary-hover-foreground:var(--palette-default-active-hover);--v-button-tertiary-focus-background:var(--palette-default-surface-highlight);--v-button-tertiary-focus-border-color:var(--palette-default-surface-highlight);--v-button-tertiary-focus-foreground:var(--palette-default-active-hover);--v-button-tertiary-active-background:var(--palette-default-surface-lowlight);--v-button-tertiary-active-border-color:var(--palette-default-surface-lowlight);--v-button-tertiary-active-foreground:var(--palette-default-active-pressed);--v-button-tertiary-disabled-background:var(--palette-default-transparent);--v-button-tertiary-disabled-border-color:var(--palette-default-transparent);--v-button-tertiary-disabled-foreground:var(--palette-default-disabled);--v-button-tertiary-destructive-background:var(--palette-default-transparent);--v-button-tertiary-destructive-foreground:var(--palette-messaging-text-negative);--v-button-tertiary-destructive-border-color:var(--palette-default-transparent);--v-button-tertiary-destructive-hover-background:var(--palette-messaging-highlight-negative);--v-button-tertiary-destructive-hover-border-color:var(--palette-messaging-highlight-negative);--v-button-tertiary-destructive-hover-foreground:var(--palette-messaging-text-hover-negative);--v-button-tertiary-destructive-focus-background:var(--palette-messaging-highlight-negative);--v-button-tertiary-destructive-focus-border-color:var(--palette-messaging-highlight-negative);--v-button-tertiary-destructive-focus-foreground:var(--palette-messaging-text-hover-negative);--v-button-tertiary-destructive-active-background:var(--palette-messaging-lowlight-negative);--v-button-tertiary-destructive-active-border-color:var(--palette-messaging-lowlight-negative);--v-button-tertiary-destructive-active-foreground:var(--palette-messaging-text-pressed-negative)}}@layer utilities{.v-flex{display:flex}.v-flex-inline{display:inline-flex}.v-flex-col{flex-direction:column}.v-flex-col-reverse{flex-direction:column-reverse}.v-flex-row{flex-direction:row}.v-flex-row-reverse{flex-direction:row-reverse}.v-flex-wrap{flex-wrap:wrap}.v-flex-wrap-reverse{flex-wrap:wrap-reverse}.v-flex-nowrap{flex-wrap:nowrap}.v-flex-grow{flex-grow:1}.v-flex-shrink{flex-shrink:1}.v-align-content-center{align-content:center}.v-align-content-start{align-content:flex-start}.v-align-content-end{align-content:flex-end}.v-align-content-between{align-content:space-between}.v-align-content-around{align-content:space-around}.v-align-content-evenly{align-content:space-evenly}.v-align-items-start{align-items:flex-start}.v-align-items-end{align-items:flex-end}.v-align-items-center{align-items:center}.v-align-items-baseline{align-items:baseline}.v-align-items-stretch{align-items:stretch}.v-align-self-start{align-self:flex-start}.v-align-self-end{align-self:flex-end}.v-align-self-auto{align-self:auto}.v-align-self-center{align-self:center}.v-align-self-stretch{align-self:stretch}.v-align-self-baseline{align-self:baseline}.v-justify-content-start{justify-content:flex-start}.v-justify-content-end{justify-content:flex-end}.v-justify-content-center{justify-content:center}.v-justify-content-between{justify-content:space-between}.v-justify-content-around{justify-content:space-around}.v-justify-content-evenly{justify-content:space-evenly}}@layer utilities{.v-flex-0{flex:0}.v-flex-1{flex:1}.v-flex-2{flex:2}.v-flex-3{flex:3}.v-flex-4{flex:4}.v-flex-5{flex:5}.v-flex-6{flex:6}.v-flex-7{flex:7}.v-flex-8{flex:8}.v-flex-9{flex:9}.v-flex-10{flex:10}.v-flex-11{flex:11}.v-flex-12{flex:12}.v-flex-grow-0{flex-grow:0}.v-flex-grow-1{flex-grow:1}.v-flex-grow-2{flex-grow:2}.v-flex-grow-3{flex-grow:3}.v-flex-grow-4{flex-grow:4}.v-flex-grow-5{flex-grow:5}.v-flex-grow-6{flex-grow:6}.v-flex-grow-7{flex-grow:7}.v-flex-grow-8{flex-grow:8}.v-flex-grow-9{flex-grow:9}.v-flex-grow-10{flex-grow:10}.v-flex-grow-11{flex-grow:11}.v-flex-grow-12{flex-grow:12}.v-flex-shrink-0{flex-shrink:0}.v-flex-shrink-1{flex-shrink:1}.v-flex-shrink-2{flex-shrink:2}.v-flex-shrink-3{flex-shrink:3}.v-flex-shrink-4{flex-shrink:4}.v-flex-shrink-5{flex-shrink:5}.v-flex-shrink-6{flex-shrink:6}.v-flex-shrink-7{flex-shrink:7}.v-flex-shrink-8{flex-shrink:8}.v-flex-shrink-9{flex-shrink:9}.v-flex-shrink-10{flex-shrink:10}.v-flex-shrink-11{flex-shrink:11}.v-flex-shrink-12{flex-shrink:12}}@layer components{.v-button{--typography-font-family:var(--typography-button-medium-font-family);--typography-font-size:var(--typography-button-medium-font-size);--typography-font-weight:var(--typography-button-medium-font-weight);--typography-letter-spacing:var(--typography-button-medium-letter-spacing);--typography-line-height:var(--typography-button-medium-line-height);--typography-text-decoration:var(--typography-button-medium-text-decoration);--typography-text-transform:var(--typography-button-medium-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);align-items:var(--v-button-default-align-items);background-color:var(--v-button-default-background);block-size:var(--v-button-default-block-size);border:var(--v-button-default-border-size) var(--v-button-default-border-style) var(--v-button-default-border-color);border-radius:var(--v-button-default-border-radius);color:var(--v-button-default-foreground);cursor:pointer;display:inline-flex;flex-direction:var(--v-button-default-direction);gap:var(--v-button-default-gap);inline-size:var(--v-button-default-inline-size);justify-content:var(--v-button-default-justify-content);padding-block:var(--v-button-default-padding-block);padding-inline:var(--v-button-default-padding-inline);position:relative;text-transform:var(--v-button-default-text-transform);--v-icon-tiny-height:var(--v-button-default-icon-size);--v-icon-tiny-width:var(--v-button-default-icon-size);--v-icon-low-height:var(--v-button-default-icon-size);--v-icon-low-width:var(--v-button-default-icon-size);--v-icon-high-height:var(--v-button-default-icon-size);--v-icon-high-width:var(--v-button-default-icon-size)}@media(prefers-contrast: more)and (forced-colors: active){.v-button{--v-button-default-border-size:var(--v-button-secondary-border-size)}}.v-button:not(.v-icon-two-color):not(:has(.v-icon-two-color)),.v-button.v-alternate:not(.v-icon-two-color):not(:has(.v-icon-two-color)){--v-icon-primary:currentColor;--v-icon-secondary:currentColor}.v-button:not(.v-button-secondary):not(.v-button-tertiary),.v-button.v-alternate:not(.v-button-secondary):not(.v-button-tertiary){--v-icon-primary:currentColor}.v-button:hover{--v-button-default-background:var(--v-button-default-hover-background);--v-button-default-border-color:var(--v-button-default-hover-border-color);--v-button-default-foreground:var(--v-button-default-hover-foreground)}.v-button:focus-visible{--v-button-default-background:var(--v-button-default-focus-background);--v-button-default-border-color:var(--v-button-default-focus-border-color);--v-button-default-foreground:var(--v-button-default-focus-foreground)}.v-button:active{--v-button-default-background:var(--v-button-default-active-background);--v-button-default-border-color:var(--v-button-default-active-border-color);--v-button-default-foreground:var(--v-button-default-active-foreground)}a:is(.v-button)[aria-disabled=true][role=link],.v-button:disabled{--v-button-default-background:var(--v-button-default-disabled-background);--v-button-default-border-color:var(--v-button-default-disabled-border-color);--v-button-default-foreground:var(--v-button-default-disabled-foreground);cursor:default;user-select:none;pointer-events:none}a:is(.v-button)[aria-disabled=true][role=link] img,.v-button:disabled img{filter:grayscale(100%) brightness(0.8);opacity:.5;pointer-events:none}.v-button-small{--typography-font-family:var(--typography-button-small-font-family);--typography-font-size:var(--typography-button-small-font-size);--typography-font-weight:var(--typography-button-small-font-weight);--typography-letter-spacing:var(--typography-button-small-letter-spacing);--typography-line-height:var(--typography-button-small-line-height);--typography-text-decoration:var(--typography-button-small-text-decoration);--typography-text-transform:var(--typography-button-small-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);--typography-text-transform:var(--v-button-default-text-transform);--v-button-default-block-size:var(--v-button-default-block-size-small);--v-button-default-padding-block:var(--v-button-default-padding-block-small);--v-button-default-padding-inline:var(--v-button-default-padding-inline-small);--v-button-default-badge-offset-x:var(--v-button-default-small-badge-offset-x);--v-button-default-icon-size:var(--v-button-default-small-icon-size)}.v-button-large{--typography-font-family:var(--typography-button-large-font-family);--typography-font-size:var(--typography-button-large-font-size);--typography-font-weight:var(--typography-button-large-font-weight);--typography-letter-spacing:var(--typography-button-large-letter-spacing);--typography-line-height:var(--typography-button-large-line-height);--typography-text-decoration:var(--typography-button-large-text-decoration);--typography-text-transform:var(--typography-button-large-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);--typography-text-transform:var(--v-button-default-text-transform);--v-button-default-block-size:var(--v-button-default-block-size-large);--v-button-default-padding-block:var(--v-button-default-padding-block-large);--v-button-default-padding-inline:var(--v-button-default-padding-inline-large);--v-button-default-icon-size:var(--v-button-default-large-text-icon-size);--v-button-default-badge-offset-x:var(--v-button-default-large-badge-offset-x)}.v-button-secondary{--v-button-default-padding-block:var(--v-button-secondary-padding-block);--v-button-default-padding-inline:var(--v-button-secondary-padding-inline);--v-button-default-border-size:var(--v-button-secondary-border-size);--v-button-default-icon-subtle-background:var(--v-button-secondary-icon-subtle-background);--v-button-default-icon-subtle-border-color:var(--v-button-secondary-icon-subtle-border-color);--v-button-default-icon-subtle-foreground:var(--v-button-secondary-icon-subtle-foreground);--v-button-default-background:var(--v-button-secondary-background);--v-button-default-border-color:var(--v-button-secondary-border-color);--v-button-default-foreground:var(--v-button-secondary-foreground);--v-button-default-hover-background:var(--v-button-secondary-hover-background);--v-button-default-hover-border-color:var(--v-button-secondary-hover-border-color);--v-button-default-hover-foreground:var(--v-button-secondary-hover-foreground);--v-button-default-focus-background:var(--v-button-secondary-focus-background);--v-button-default-focus-border-color:var(--v-button-secondary-focus-border-color);--v-button-default-focus-foreground:var(--v-button-secondary-focus-foreground);--v-button-default-active-background:var(--v-button-secondary-active-background);--v-button-default-active-border-color:var(--v-button-secondary-active-border-color);--v-button-default-active-foreground:var(--v-button-secondary-active-foreground);--v-button-default-disabled-background:var(--v-button-secondary-disabled-background);--v-button-default-disabled-border-color:var(--v-button-secondary-disabled-border-color);--v-button-default-disabled-foreground:var(--v-button-secondary-disabled-foreground);--v-button-default-destructive-background:var(--v-button-secondary-destructive-background);--v-button-default-destructive-foreground:var(--v-button-secondary-destructive-foreground);--v-button-default-destructive-border-color:var(--v-button-secondary-destructive-border-color);--v-button-default-destructive-hover-background:var(--v-button-secondary-destructive-hover-background);--v-button-default-destructive-hover-border-color:var(--v-button-secondary-destructive-hover-border-color);--v-button-default-destructive-hover-foreground:var(--v-button-secondary-destructive-hover-foreground);--v-button-default-destructive-focus-background:var(--v-button-secondary-destructive-focus-background);--v-button-default-destructive-focus-border-color:var(--v-button-secondary-destructive-focus-border-color);--v-button-default-destructive-focus-foreground:var(--v-button-secondary-destructive-focus-foreground);--v-button-default-destructive-active-background:var(--v-button-secondary-destructive-active-background);--v-button-default-destructive-active-border-color:var(--v-button-secondary-destructive-active-border-color);--v-button-default-destructive-active-foreground:var(--v-button-secondary-destructive-active-foreground)}.v-button-tertiary{--v-button-default-icon-subtle-background:var(--v-button-tertiary-icon-subtle-background);--v-button-default-icon-subtle-border-color:var(--v-button-tertiary-icon-subtle-border-color);--v-button-default-icon-subtle-foreground:var(--v-button-tertiary-icon-subtle-foreground);--v-button-default-background:var(--v-button-tertiary-background);--v-button-default-border-color:var(--v-button-tertiary-border-color);--v-button-default-foreground:var(--v-button-tertiary-foreground);--v-button-default-hover-background:var(--v-button-tertiary-hover-background);--v-button-default-hover-border-color:var(--v-button-tertiary-hover-border-color);--v-button-default-hover-foreground:var(--v-button-tertiary-hover-foreground);--v-button-default-focus-background:var(--v-button-tertiary-focus-background);--v-button-default-focus-border-color:var(--v-button-tertiary-focus-border-color);--v-button-default-focus-foreground:var(--v-button-tertiary-focus-foreground);--v-button-default-active-background:var(--v-button-tertiary-active-background);--v-button-default-active-border-color:var(--v-button-tertiary-active-border-color);--v-button-default-active-foreground:var(--v-button-tertiary-active-foreground);--v-button-default-disabled-background:var(--v-button-tertiary-disabled-background);--v-button-default-disabled-border-color:var(--v-button-tertiary-disabled-border-color);--v-button-default-disabled-foreground:var(--v-button-tertiary-disabled-foreground);--v-button-default-destructive-background:var(--v-button-tertiary-destructive-background);--v-button-default-destructive-foreground:var(--v-button-tertiary-destructive-foreground);--v-button-default-destructive-border-color:var(--v-button-tertiary-destructive-border-color);--v-button-default-destructive-hover-background:var(--v-button-tertiary-destructive-hover-background);--v-button-default-destructive-hover-border-color:var(--v-button-tertiary-destructive-hover-border-color);--v-button-default-destructive-hover-foreground:var(--v-button-tertiary-destructive-hover-foreground);--v-button-default-destructive-focus-background:var(--v-button-tertiary-destructive-focus-background);--v-button-default-destructive-focus-border-color:var(--v-button-tertiary-destructive-focus-border-color);--v-button-default-destructive-focus-foreground:var(--v-button-tertiary-destructive-focus-foreground);--v-button-default-destructive-active-background:var(--v-button-tertiary-destructive-active-background);--v-button-default-destructive-active-border-color:var(--v-button-tertiary-destructive-active-border-color);--v-button-default-destructive-active-foreground:var(--v-button-tertiary-destructive-active-foreground)}.v-button-destructive:not(:disabled){--v-button-default-background:var(--v-button-default-destructive-background);--v-button-default-border-color:var(--v-button-default-destructive-border-color);--v-button-default-foreground:var(--v-button-default-destructive-foreground);outline-color:var(--v-button-default-destructive-focus-outline)}.v-button-destructive:not(:disabled):hover{--v-button-default-background:var(--v-button-default-destructive-hover-background);--v-button-default-border-color:var(--v-button-default-destructive-hover-border-color);--v-button-default-foreground:var(--v-button-default-destructive-hover-foreground)}.v-button-destructive:not(:disabled):focus-visible{--v-button-default-background:var(--v-button-default-destructive-focus-background);--v-button-default-border-color:var(--v-button-default-destructive-focus-border-color);--v-button-default-foreground:var(--v-button-default-destructive-focus-foreground)}.v-button-destructive:not(:disabled):active{--v-button-default-background:var(--v-button-default-destructive-active-background);--v-button-default-border-color:var(--v-button-default-destructive-active-border-color);--v-button-default-foreground:var(--v-button-default-destructive-active-foreground)}.v-button-icon{--v-button-default-block-size:fit-content;--v-button-default-border-radius:var(--v-button-default-border-radius-icon);--v-button-default-padding-inline:var(--v-button-default-padding-block);--v-button-default-inline-size:fit-content}.v-button-icon.v-button-large{--v-button-default-icon-size:var(--v-button-default-large-icon-size)}.v-button-icon:not(.v-button-secondary){--v-button-default-border-size:var(--v-button-default-icon-border-size);--v-button-default-border-color:var(--palette-default-transparent);--v-button-default-padding-inline:var(--v-button-default-icon-padding-block);--v-button-default-padding-block:var(--v-button-default-icon-padding-block)}.v-button-icon.v-button-small{--v-button-default-padding-block:calc(var(--v-button-default-padding-block-small) - var(--v-button-default-border-size));--v-button-default-padding-inline:calc(var(--v-button-default-padding-block-small) - var(--v-button-default-border-size))}.v-button-subtle{--v-button-default-background:var(--v-button-default-icon-subtle-background);--v-button-default-border-color:var(--v-button-default-icon-subtle-border-color);--v-button-default-foreground:var(--v-button-default-icon-subtle-foreground)}.v-button .v-badge-number{--v-badge-number-max-inline:calc(var(--v-button-default-block-size)*var(--v-button-default-badge-inline-max));position:absolute}.v-button .v-badge-number,.v-button .v-badge-number.v-badge-top-right{right:calc(var(--v-badge-number-size)*-1*var(--v-button-default-badge-offset-x));top:calc(var(--v-badge-number-size)*-1*var(--v-button-default-badge-offset-y))}.v-button .v-badge-number.v-badge-top-left{left:calc(var(--v-badge-number-size)*-1*var(--v-button-default-badge-offset-x));right:auto}.v-button .v-badge-number.v-badge-bottom-right{bottom:calc(var(--v-badge-number-size)*-1*var(--v-button-default-badge-offset-y));top:auto}.v-button .v-badge-number.v-badge-bottom-left{bottom:calc(var(--v-badge-number-size)*-1*var(--v-button-default-badge-offset-y));left:calc(var(--v-badge-number-size)*-1*var(--v-button-default-badge-offset-x));right:auto;top:auto}.v-button:has(.v-avatar){--v-avatar-size:var(--v-avatar-small-size);--v-button-default-padding-block:calc((var(--v-button-default-block-size) - var(--v-avatar-size))/2 - var(--v-button-default-border-size))}.v-button:has(.v-avatar):has(.v-avatar .v-icon),.v-button:has(.v-avatar):has(.v-avatar.v-icon){--v-button-default-padding-block:calc((var(--v-button-default-block-size) - var(--v-avatar-small-icon-size))/2 - var(--v-button-default-border-size))}.v-button:has(.v-avatar) .v-avatar{--typography-font-family:var(--typography-button-small-font-family);--typography-font-size:var(--typography-button-small-font-size);--typography-font-weight:var(--typography-button-small-font-weight);--typography-letter-spacing:var(--typography-button-small-letter-spacing);--typography-line-height:var(--typography-button-small-line-height);--typography-text-decoration:var(--typography-button-small-text-decoration);--typography-text-transform:var(--typography-button-small-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform)}.v-button-stacked{min-inline-size:var(--v-button-default-stacked-min-inline-size);--typography-font-family:var(--typography-label-small-font-family);--typography-font-size:var(--typography-label-small-font-size);--typography-font-weight:var(--typography-label-small-font-weight);--typography-letter-spacing:var(--typography-label-small-letter-spacing);--typography-line-height:var(--typography-label-small-line-height);--typography-text-decoration:var(--typography-label-small-text-decoration);--typography-text-transform:var(--typography-label-small-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);--v-button-default-block-size:var(--v-button-default-stacked-block-size);--v-button-default-direction:column;--v-button-default-gap:var(--v-button-default-stacked-gap);--v-button-default-icon-size:var(--v-button-default-stacked-icon-size);--v-button-default-padding-inline:var(--v-button-default-stacked-padding-inline)}}