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

Visa Product Design System Nova HTML+CSS library

/**
 *              Copyright (c) 2025 Visa, Inc.
 *
 * 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-switch-label-color:var(--palette-default-text);--v-switch-label-disabled-color:var(--palette-default-disabled);--v-switch-node-active-border-color:var(--palette-default-active-pressed);--v-switch-node-background-color:var(--palette-default-surface-1);--v-switch-node-block-size:var(--size-scalable-18);--v-switch-node-border-color:var(--palette-default-active-subtle);--v-switch-node-border-radius:var(--size-rounded-complete);--v-switch-node-border-style:solid;--v-switch-node-border-width:var(--size-scalable-1);--v-switch-node-margin-inline-start:0px;--v-switch-node-checked-border-color:var(--palette-default-surface-1);--v-switch-node-checked-margin-inline-start:calc(100% - var(--v-switch-track-padding) - var(--v-switch-node-inline-size));--v-switch-node-disabled-border-color:var(--palette-default-disabled);--v-switch-node-disabled-border-width:var(--size-scalable-1);--v-switch-node-focus-outline-glow-color:var(--palette-default-surface-highlight);--v-switch-node-focus-outline-offset:var(--size-scalable-7);--v-switch-node-focus-outline-width:var(--size-scalable-1);--v-switch-node-hover-border-color:var(--palette-default-active-hover);--v-switch-node-hover-border-width:var(--size-scalable-2);--v-switch-node-inline-size:var(--size-scalable-18);--v-switch-track-active-background-color:var(--palette-default-surface-lowlight);--v-switch-track-active-border-color:var(--palette-default-active-pressed);--v-switch-track-background-color:var(--palette-default-surface-3);--v-switch-track-block-size:var(--size-scalable-24);--v-switch-track-border-color:var(--palette-default-active-subtle);--v-switch-track-border-radius:var(--size-rounded-pill);--v-switch-track-border-size:var(--size-scalable-1);--v-switch-track-border-style:solid;--v-switch-track-checked-border-color:var(--palette-default-transparent);--v-switch-track-checked-border-radius:var(--size-rounded-pill);--v-switch-track-disabled-border-color:var(--palette-default-disabled);--v-switch-track-disabled-background-color:var(--palette-default-surface-3);--v-switch-track-hover-background-color:var(--palette-default-surface-highlight);--v-switch-track-hover-border-color:var(--palette-default-active-hover);--v-switch-track-inline-size:var(--size-scalable-44);--v-switch-track-inset-inline-end:0;--v-switch-track-margin:0;--v-switch-track-padding:var(--size-scalable-2);--v-switch-track-start-position:0;--v-switch-transition:margin-inline-start 0.25s ease}}@layer utilities{.v-screen-reader,.v-sr{clip:rect(0, 0, 0, 0);clip-path:inset(50%);height:1px;inset-inline-start:-100000px;overflow:hidden;position:absolute;inset-block-start:0;width:1px;z-index:-1;white-space:nowrap}}@layer abstracts{:root,.v-alternate{--v-action-primary-block-size:var(--size-scalable-38);--v-action-primary-font-size:var(--typography-label-font-size);--v-action-primary-font-weight:600;--v-action-primary-letter-spacing:0.25px;--v-action-primary-line-height:var(--typography-label-line-height);--v-action-primary-padding-block:calc(var(--size-scalable-10) - var(--v-action-primary-border-size));--v-action-primary-padding-inline:calc(var(--size-scalable-14) - var(--v-action-primary-border-size));--v-action-primary-background:var(--palette-default-active);--v-action-primary-border-color:var(--palette-default-active);--v-action-primary-border-radius:var(--size-rounded-medium);--v-action-primary-border-size:var(--theme-border-size);--v-action-primary-border-style:solid;--v-action-primary-foreground:var(--palette-default-text-on-active);--v-action-primary-hover-background:var(--palette-default-active-hover);--v-action-primary-hover-border-color:var(--palette-default-active-hover);--v-action-primary-hover-foreground:var(--palette-default-text-on-active);--v-action-primary-focus-background:var(--palette-default-active-hover);--v-action-primary-focus-border-color:var(--palette-default-active-hover);--v-action-primary-focus-foreground:var(--palette-default-text-on-active);--v-action-primary-active-background:var(--palette-default-active-pressed);--v-action-primary-active-border-color:var(--palette-default-active-pressed);--v-action-primary-active-foreground:var(--palette-default-text-on-active);--v-action-primary-disabled-background:var(--palette-default-disabled);--v-action-primary-disabled-border-color:var(--palette-default-transparent);--v-action-primary-disabled-foreground:var(--palette-default-text-on-active)}}@layer abstracts{.v-action-stateless{background-color:var(--v-action-primary-background);border-color:var(--v-action-primary-border-color);border-radius:var(--v-action-primary-border-radius);border-style:var(--v-action-primary-border-style);border-width:var(--v-action-primary-border-size);color:var(--v-action-primary-foreground);font-size:var(--v-action-primary-font-size);font-weight:var(--v-action-primary-font-weight);letter-spacing:var(--v-action-primary-letter-spacing);line-height:var(--v-action-primary-line-height)}}@layer abstracts{.v-switch:only-of-type:checked,.v-action{background-color:var(--v-action-primary-background);border-color:var(--v-action-primary-border-color);border-radius:var(--v-action-primary-border-radius);border-style:var(--v-action-primary-border-style);border-width:var(--v-action-primary-border-size);color:var(--v-action-primary-foreground);font-size:var(--v-action-primary-font-size);font-weight:var(--v-action-primary-font-weight);letter-spacing:var(--v-action-primary-letter-spacing);line-height:var(--v-action-primary-line-height);block-size:var(--v-action-primary-block-size);cursor:pointer;padding-block:var(--v-action-primary-padding-block);padding-inline:var(--v-action-primary-padding-inline)}.v-switch:hover:only-of-type:checked,.v-action:hover{--v-action-primary-background:var(--v-action-primary-hover-background);--v-action-primary-border-color:var(--v-action-primary-hover-border-color);--v-action-primary-foreground:var(--v-action-primary-hover-foreground)}.v-switch:focus-visible:only-of-type:checked,.v-action:focus-visible{--v-action-primary-background:var(--v-action-primary-focus-background);--v-action-primary-border-color:var(--v-action-primary-focus-border-color);--v-action-primary-foreground:var(--v-action-primary-focus-foreground)}.v-switch:active:only-of-type:checked,.v-action:active{--v-action-primary-background:var(--v-action-primary-active-background);--v-action-primary-border-color:var(--v-action-primary-active-border-color);--v-action-primary-foreground:var(--v-action-primary-active-foreground)}.v-switch:has(.v-checkbox:only-of-type):only-of-type:checked,.v-switch:has(.v-radio:only-of-type):only-of-type:checked,.v-action:has(.v-checkbox:only-of-type),.v-action:has(.v-radio:only-of-type){--v-action-primary-block-size:100%}.v-switch:has(.v-checkbox:only-of-type):has(.v-checkbox:focus-visible):only-of-type:checked,.v-switch:has(.v-checkbox:only-of-type):has(.v-radio:focus-visible):only-of-type:checked,.v-switch:has(.v-radio:only-of-type):has(.v-checkbox:focus-visible):only-of-type:checked,.v-switch:has(.v-radio:only-of-type):has(.v-radio:focus-visible):only-of-type:checked,.v-action:has(.v-checkbox:only-of-type):has(.v-checkbox:focus-visible),.v-action:has(.v-checkbox:only-of-type):has(.v-radio:focus-visible),.v-action:has(.v-radio:only-of-type):has(.v-checkbox:focus-visible),.v-action:has(.v-radio:only-of-type):has(.v-radio:focus-visible){outline-width:var(--theme-focus-outline-size);outline-style:dashed;outline-color:var(--palette-default-active-pressed);outline-offset:var(--theme-focus-outline-offset)}.v-switch:has(.v-checkbox:only-of-type):only-of-type:checked .v-label:only-of-type,.v-switch:has(.v-radio:only-of-type):only-of-type:checked .v-label:only-of-type,.v-action:has(.v-checkbox:only-of-type) .v-label:only-of-type,.v-action:has(.v-radio:only-of-type) .v-label:only-of-type{inline-size:100%}.v-switch:has(.v-checkbox:only-of-type):only-of-type:checked .v-checkbox:focus-visible,.v-switch:has(.v-checkbox:only-of-type):only-of-type:checked .v-radio:focus-visible,.v-switch:has(.v-radio:only-of-type):only-of-type:checked .v-checkbox:focus-visible,.v-switch:has(.v-radio:only-of-type):only-of-type:checked .v-radio:focus-visible,.v-action:has(.v-checkbox:only-of-type) .v-checkbox:focus-visible,.v-action:has(.v-checkbox:only-of-type) .v-radio:focus-visible,.v-action:has(.v-radio:only-of-type) .v-checkbox:focus-visible,.v-action:has(.v-radio:only-of-type) .v-radio:focus-visible{outline:none}.v-switch:has(.v-checkbox:only-of-type):only-of-type:checked .v-checkbox:focus-visible::after,.v-switch:has(.v-checkbox:only-of-type):only-of-type:checked .v-radio:focus-visible::after,.v-switch:has(.v-radio:only-of-type):only-of-type:checked .v-checkbox:focus-visible::after,.v-switch:has(.v-radio:only-of-type):only-of-type:checked .v-radio:focus-visible::after,.v-action:has(.v-checkbox:only-of-type) .v-checkbox:focus-visible::after,.v-action:has(.v-checkbox:only-of-type) .v-radio:focus-visible::after,.v-action:has(.v-radio:only-of-type) .v-checkbox:focus-visible::after,.v-action:has(.v-radio:only-of-type) .v-radio:focus-visible::after{display:none}[disabled].v-switch:only-of-type:checked,.v-switch:has(.v-checkbox:only-of-type:disabled):only-of-type:checked,.v-switch:has(.v-radio:only-of-type:disabled):only-of-type:checked,.v-action[disabled],.v-action:has(.v-checkbox:only-of-type:disabled),.v-action:has(.v-radio:only-of-type:disabled){--v-action-primary-background:var(--v-action-primary-disabled-background);--v-action-primary-border-color:var(--v-action-primary-disabled-border-color);--v-action-primary-foreground:var(--v-action-primary-disabled-foreground);--v-input-label:var(--v-action-primary-disabled-foreground);--v-input-message:var(--v-action-primary-disabled-foreground);cursor:default}}@layer components{.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio,.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:hover,.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:focus-visible,.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:active,.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox,.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:hover,.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:focus-visible,.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:active,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:hover,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:focus-visible,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:active,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:hover,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:focus-visible,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:active{--v-checkbox-glow-color:rgba(0,0,0,0)}.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type):hover,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type):hover{--v-checkbox-color:var(--v-checkbox-hover-color)}.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type):focus-visible,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type):focus-visible{--v-checkbox-color:var(--v-checkbox-focus-color)}.v-action-primary:not(.v-action-stateless):has(.v-checkbox:only-of-type):active,.v-action-primary:not(.v-action-stateless):has(.v-radio:only-of-type):active{--v-checkbox-color:var(--v-checkbox-active-color)}}@layer abstracts{:root,.v-alternate{--v-action-secondary-block-size:var(--size-scalable-38);--v-action-secondary-font-size:var(--typography-label-font-size);--v-action-secondary-font-weight:600;--v-action-secondary-gap:var(--size-scalable-2);--v-action-secondary-letter-spacing:0.5px;--v-action-secondary-line-height:var(--typography-label-line-height);--v-action-secondary-padding-block:calc(var(--size-scalable-10) - var(--v-action-secondary-border-size));--v-action-secondary-padding-inline:calc(var(--size-scalable-14) - var(--v-action-secondary-border-size));--v-action-secondary-background:var(--palette-default-surface-1);--v-action-secondary-border-color:var(--palette-default-active);--v-action-secondary-border-radius:var(--size-rounded-medium);--v-action-secondary-border-size:calc(var(--theme-border-size) / 2);--v-action-secondary-border-style:solid;--v-action-secondary-foreground:var(--palette-default-active);--v-action-secondary-hover-background:var(--palette-default-surface-highlight);--v-action-secondary-hover-border-color:var(--palette-default-active-hover);--v-action-secondary-hover-foreground:var(--palette-default-active-hover);--v-action-secondary-focus-background:var(--palette-default-surface-highlight);--v-action-secondary-focus-border-color:var(--palette-default-active-hover);--v-action-secondary-focus-foreground:var(--palette-default-active-hover);--v-action-secondary-active-background:var(--palette-default-surface-lowlight);--v-action-secondary-active-border-color:var(--palette-default-active-pressed);--v-action-secondary-active-foreground:var(--palette-default-active-pressed);--v-action-secondary-disabled-background:var(--palette-default-surface-1);--v-action-secondary-disabled-border-color:var(--palette-default-disabled);--v-action-secondary-disabled-foreground:var(--palette-default-disabled)}}@layer abstracts{.v-action-secondary.v-action-stateless{background-color:var(--v-action-secondary-background);border-color:var(--v-action-secondary-border-color);border-radius:var(--v-action-secondary-border-radius);border-style:var(--v-action-secondary-border-style);border-width:var(--v-action-secondary-border-size);color:var(--v-action-secondary-foreground);font-size:var(--v-action-secondary-font-size);font-weight:var(--v-action-secondary-font-weight);gap:var(--v-action-secondary-gap);letter-spacing:var(--v-action-secondary-letter-spacing);line-height:var(--v-action-secondary-line-height)}}@layer abstracts{.v-switch:not(.v-action-stateless),.v-action-secondary:not(.v-action-stateless){background-color:var(--v-action-secondary-background);border-color:var(--v-action-secondary-border-color);border-radius:var(--v-action-secondary-border-radius);border-style:var(--v-action-secondary-border-style);border-width:var(--v-action-secondary-border-size);color:var(--v-action-secondary-foreground);font-size:var(--v-action-secondary-font-size);font-weight:var(--v-action-secondary-font-weight);gap:var(--v-action-secondary-gap);letter-spacing:var(--v-action-secondary-letter-spacing);line-height:var(--v-action-secondary-line-height);block-size:var(--v-action-secondary-block-size);cursor:pointer;padding-block:var(--v-action-secondary-padding-block);padding-inline:var(--v-action-secondary-padding-inline)}.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type:hover),.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type:hover),.v-switch:not(.v-action-stateless):hover,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:hover),.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:hover),.v-action-secondary:not(.v-action-stateless):hover{--v-action-secondary-background:var(--v-action-secondary-hover-background);--v-action-secondary-border-color:var(--v-action-secondary-hover-border-color);--v-action-secondary-foreground:var(--v-action-secondary-hover-foreground)}.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type:focus-visible),.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type:focus-visible),.v-switch:not(.v-action-stateless):focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:focus-visible),.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:focus-visible),.v-action-secondary:not(.v-action-stateless):focus-visible{--v-action-secondary-background:var(--v-action-secondary-focus-background);--v-action-secondary-border-color:var(--v-action-secondary-focus-border-color);--v-action-secondary-foreground:var(--v-action-secondary-focus-foreground)}.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type:focus-visible) .v-label,.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type:focus-visible) .v-label,.v-switch:not(.v-action-stateless):focus-visible .v-label,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:focus-visible) .v-label,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:focus-visible) .v-label,.v-action-secondary:not(.v-action-stateless):focus-visible .v-label{color:var(--v-action-secondary-focus-foreground)}.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type:active),.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type:active),.v-switch:not(.v-action-stateless):active,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:active),.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:active),.v-action-secondary:not(.v-action-stateless):active{--v-action-secondary-background:var(--v-action-secondary-active-background);--v-action-secondary-border-color:var(--v-action-secondary-active-border-color);--v-action-secondary-foreground:var(--v-action-secondary-active-foreground)}.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type:active) .v-label,.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type:active) .v-label,.v-switch:not(.v-action-stateless):active .v-label,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:active) .v-label,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:active) .v-label,.v-action-secondary:not(.v-action-stateless):active .v-label{color:var(--v-action-secondary-active-foreground)}.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type),.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type),.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type),.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type){--v-action-secondary-block-size:100%}.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type):has(.v-checkbox:focus-visible),.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type):has(.v-radio:focus-visible),.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type):has(.v-checkbox:focus-visible),.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type):has(.v-radio:focus-visible),.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type):has(.v-checkbox:focus-visible),.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type):has(.v-radio:focus-visible),.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type):has(.v-checkbox:focus-visible),.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type):has(.v-radio:focus-visible){outline-width:var(--theme-focus-outline-size);outline-style:dashed;outline-color:var(--palette-default-active-pressed);outline-offset:var(--theme-focus-outline-offset);--theme-focus-outline-offset:0px}.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-label:only-of-type,.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type) .v-label:only-of-type,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-label:only-of-type,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-label:only-of-type{inline-size:100%}.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:focus-visible,.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:focus-visible,.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:focus-visible,.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:focus-visible{outline:none}.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:focus-visible::after,.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:focus-visible::after,.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:focus-visible::after,.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:focus-visible::after,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:focus-visible::after,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:focus-visible::after,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:focus-visible::after,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:focus-visible::after{display:none}.v-switch:not(.v-action-stateless)[disabled],.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type:disabled),.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type:disabled),.v-action-secondary:not(.v-action-stateless)[disabled],.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:disabled),.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:disabled){--v-action-secondary-background:var(--v-action-secondary-disabled-background);--v-action-secondary-border-color:var(--v-action-secondary-disabled-border-color);--v-action-secondary-foreground:var(--v-action-secondary-disabled-foreground);--v-label-color:var(--v-action-secondary-disabled-foreground);--v-input-message-color:var(--v-action-secondary-disabled-foreground);cursor:default}}@layer components{.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio,.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox,.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio,.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:hover,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:active,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:hover,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:active,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:hover,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:active,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:hover,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:active{--v-checkbox-glow-color:rgba(0,0,0,0)}.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type):hover,.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type):hover,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type):hover,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type):hover{--v-checkbox-color:var(--v-checkbox-hover-color)}.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type):focus-visible,.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type):focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type):focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type):focus-visible{--v-checkbox-color:var(--v-checkbox-focus-color)}.v-switch:not(.v-action-stateless):has(.v-checkbox:only-of-type):active,.v-switch:not(.v-action-stateless):has(.v-radio:only-of-type):active,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type):active,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type):active{--v-checkbox-color:var(--v-checkbox-active-color)}}@layer components{.v-switch{--v-action-secondary-background:var(--v-switch-track-background-color);--v-action-secondary-border-color:var(--v-switch-track-border-color);--v-action-secondary-border-radius:var(--v-switch-track-border-radius);--v-action-secondary-border-size:var(--v-switch-track-border-size);--v-action-secondary-padding-block:var(--v-switch-track-padding);--v-action-secondary-padding-inline:var(--v-switch-track-padding);--theme-focus-outline-size:0;align-items:center;appearance:none;block-size:var(--v-switch-track-block-size);border-style:var(--v-switch-track-border-style);content:"";display:inline-flex;flex-shrink:0;inline-size:var(--v-switch-track-inline-size);inset-inline-end:var(--v-switch-track-inset-inline-end);margin:var(--v-switch-track-margin);position:relative}.v-switch::after{background-color:var(--v-switch-node-background-color);block-size:var(--v-switch-node-block-size);border-color:var(--v-switch-node-border-color);border-radius:var(--v-switch-node-border-radius);border-style:var(--v-switch-node-border-style);border-width:var(--v-switch-node-border-width);content:"";display:block;inline-size:var(--v-switch-node-inline-size);margin-inline-start:var(--v-switch-node-margin-inline-start);transition:var(--v-switch-transition);position:absolute}.v-switch:hover,.v-switch:focus-visible{--v-switch-track-background-color:var(--v-switch-track-hover-background-color);--v-switch-track-border-color:var(--v-switch-track-hover-border-color)}.v-switch:hover::after,.v-switch:focus-visible::after{--v-switch-node-border-color:var(--v-switch-node-hover-border-color);--v-switch-node-border-width:var(--v-switch-node-hover-border-width)}.v-switch:active{--v-switch-track-background-color:var(--v-switch-track-active-background-color);--v-switch-track-border-color:var(--v-switch-track-active-border-color)}.v-switch:active::after{--v-switch-node-border-color:var(--v-switch-node-active-border-color)}.v-switch:focus-visible::after{outline-width:var(--theme-focus-outline-size);outline-style:dashed;outline-color:var(--palette-default-active-pressed);outline-offset:var(--theme-focus-outline-offset);--theme-focus-outline-offset:var(--v-switch-node-focus-outline-offset);--theme-focus-outline-size:var(--v-switch-node-focus-outline-width);box-shadow:0px 0px 0px var(--v-switch-node-focus-outline-offset) var(--v-switch-node-focus-outline-glow-color)}.v-switch:disabled{--v-switch-track-background-color:var(--v-switch-track-disabled-background-color);--v-switch-track-border-color:var(--v-switch-track-disabled-border-color)}.v-switch:disabled::after{--v-switch-node-border-color:var(--v-switch-node-disabled-border-color);--v-switch-node-border-width:var(--v-switch-node-disabled-border-width)}.v-switch:only-of-type:checked{--v-action-primary-border-color:var(--v-switch-track-checked-border-color);--v-action-primary-border-radius:var(--v-switch-track-checked-border-radius);--v-action-primary-padding-block:calc(var(--v-switch-track-padding) - (var(--v-action-primary-border-size) - var(--v-switch-track-border-size)));--v-action-primary-padding-inline:calc(var(--v-switch-track-padding) - (var(--v-action-primary-border-size) - var(--v-switch-track-border-size)))}.v-switch:only-of-type:checked::after{--v-switch-node-border-color:var(--v-switch-node-checked-border-color);--v-switch-node-margin-inline-start:var(--v-switch-node-checked-margin-inline-start);transition:var(--v-switch-transition)}@media(forced-colors: active){.v-switch:only-of-type:checked{background-color:currentColor}.v-switch:only-of-type:checked::after{border-width:calc(var(--v-switch-track-border-size)*2);border:calc(var(--v-switch-node-block-size)/4) solid var(--v-switch-track-checked-border-color)}}.v-switch-label{color:var(--v-switch-label-color)}.v-switch-label:has(+.v-switch:disabled){--v-switch-label-color:var(--v-switch-label-disabled-color);cursor:default}}