@visa/nova-styles/components/toggle-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-toggle-background:var(--palette-default-surface-1);--v-toggle-foreground:var(--palette-default-text);--v-toggle-elevation:var(--elevation-inset);--v-toggle-input-appearance:none;--v-toggle-input-clip:rect(0, 0, 0, 0);--v-toggle-input-position:absolute;--v-toggle-padding-block-end:var(--size-scalable-10);--v-toggle-padding-block-end-active:calc(var(--size-scalable-10) - var(--v-toggle-indicator-size));--v-toggle-padding-block-start:var(--size-scalable-10);--v-toggle-padding-inline-end:var(--size-scalable-8);--v-toggle-padding-inline-start:var(--size-scalable-8);--v-toggle-padding:var(--v-toggle-padding-block-start) var(--v-toggle-padding-inline-end) var(--v-toggle-padding-block-end) var(--v-toggle-padding-inline-start);--v-toggle-icon-padding:var(--size-scalable-6);--v-toggle-icon-padding-block-end-active:calc(var(--size-scalable-6) - var(--v-toggle-indicator-size));--v-toggle-text-transform:none;--v-toggle-border-none:none;--v-toggle-border-inline-end:var(--size-responsive-1) solid var(--palette-default-active);--v-toggle-container-border:0 0 0 var(--size-responsive-1) var(--palette-default-active);--v-toggle-container-border-radius:var(--size-rounded-medium);--v-toggle-hover-background:var(--palette-default-surface-highlight);--v-toggle-hover-icon-color:var(--palette-default-active-hover);--v-toggle-focus-background:var(--palette-default-surface-highlight);--v-toggle-focus-icon-color:var(--palette-default-active-hover);--v-toggle-focus-offset:calc(-1 * var(--size-responsive-6));--v-toggle-indicator-color:var(--palette-default-active);--v-toggle-indicator-size:var(--size-responsive-2);--v-toggle-indicator-style:solid;--v-toggle-active-background:var(--palette-default-surface-3);--v-toggle-active-foreground:var(--palette-default-text);--v-toggle-active-icon-color:var(--palette-default-active);--v-toggle-pressed-background:var(--palette-default-surface-lowlight);--v-toggle-pressed-icon-color:var(--palette-default-active-pressed);--v-toggle-pressed-indicator-color:var(--palette-default-active-pressed);--v-toggle-disabled-background:var(--palette-default-surface-1);--v-toggle-disabled-border-color:var(--palette-default-disabled);--v-toggle-disabled-border-inline-end:var(--size-responsive-1) solid var(--palette-default-disabled);--v-toggle-disabled-container-border:0 0 0 var(--size-responsive-1) var(--palette-default-disabled);--v-toggle-disabled-foreground:var(--palette-default-disabled)}}@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 components{.v-toggle{--typography-font-family:var(--typography-label-font-family);--typography-font-size:var(--typography-label-font-size);--typography-font-weight:var(--typography-label-font-weight);--typography-letter-spacing:var(--typography-label-letter-spacing);--typography-line-height:var(--typography-label-line-height);--typography-text-decoration:var(--typography-label-text-decoration);--typography-text-transform:var(--typography-label-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:center;background-color:var(--v-toggle-background);block-size:var(--size-responsive-38);border-inline-end:var(--v-toggle-border-inline-end);color:var(--v-toggle-foreground);cursor:pointer;display:flex;flex-direction:row;inline-size:fit-content;padding-block-end:var(--v-toggle-padding-block-end);padding-block-start:var(--v-toggle-padding-block-start);padding-inline-end:var(--v-toggle-padding-inline-end);padding-inline-start:var(--v-toggle-padding-inline-start);text-transform:var(--v-toggle-text-transform)}@container (max-width: 768px){.v-toggle{border-block-end:var(--v-toggle-border-inline-end);border-inline-end:var(--v-toggle-border-none)}}.v-toggle:last-child{--v-toggle-border-inline-end:var(--v-toggle-border-none)}.v-toggle input{appearance:var(--v-toggle-input-appearance);clip:var(--v-toggle-input-clip);position:var(--v-toggle-input-position)}.v-toggle:has(input:checked),.v-toggle[aria-pressed=true]{--typography-font-family:var(--typography-label-active-font-family);--typography-font-size:var(--typography-label-active-font-size);--typography-font-weight:var(--typography-label-active-font-weight);--typography-letter-spacing:var(--typography-label-active-letter-spacing);--typography-line-height:var(--typography-label-active-line-height);--typography-text-decoration:var(--typography-label-active-text-decoration);--typography-text-transform:var(--typography-label-active-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-icon-primary:var(--v-toggle-active-icon-color);--v-icon-secondary:var(--v-toggle-active-icon-color);--v-toggle-background:var(--v-toggle-active-background);--v-toggle-foreground:var(--v-toggle-active-foreground);--v-toggle-padding-block-end:var(--v-toggle-padding-block-end-active);--typography-text-transform:var(--v-toggle-text-transform);border-block-end:var(--v-toggle-indicator-size) var(--v-toggle-indicator-style) var(--v-toggle-indicator-color);box-shadow:var(--v-toggle-elevation)}.v-toggle:has(input:checked):is(.v-toggle-icon),.v-toggle[aria-pressed=true]:is(.v-toggle-icon){--v-toggle-padding-block-end:var(--v-toggle-icon-padding-block-end-active)}.v-toggle:has(input:checked):hover,.v-toggle:has(input:checked):focus-visible,.v-toggle:has(input:checked):has(input[type=radio]:focus-visible),.v-toggle:has(input:checked):has(input[type=checkbox]:focus-visible),.v-toggle[aria-pressed=true]:hover,.v-toggle[aria-pressed=true]:focus-visible,.v-toggle[aria-pressed=true]:has(input[type=radio]:focus-visible),.v-toggle[aria-pressed=true]:has(input[type=checkbox]:focus-visible){--v-toggle-active-icon-color:var(--v-toggle-hover-icon-color);--v-toggle-active-background:var(--v-toggle-hover-background)}.v-toggle:has(input:checked):active,.v-toggle[aria-pressed=true]:active{--v-toggle-active-icon-color:var(--v-toggle-pressed-icon-color);--v-toggle-active-background:var(--v-toggle-pressed-background)}.v-toggle:hover,.v-toggle:focus-visible,.v-toggle:has(input[type=radio]:focus-visible),.v-toggle:has(input[type=checkbox]:focus-visible){--v-icon-primary:var(--v-toggle-hover-icon-color);--v-icon-secondary:var(--v-toggle-hover-icon-color);--v-toggle-background:var(--v-toggle-hover-background)}.v-toggle:focus-visible,.v-toggle:has(input[type=radio]:focus-visible),.v-toggle:has(input[type=checkbox]: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:var(--v-toggle-focus-offset)}.v-toggle:active{--v-icon-primary:var(--v-toggle-pressed-icon-color);--v-icon-secondary:var(--v-toggle-pressed-icon-color);--v-toggle-indicator-color:var(--v-toggle-pressed-indicator-color);--v-toggle-background:var(--v-toggle-pressed-background)}.v-toggle-container{align-items:center;border-radius:var(--v-toggle-container-border-radius);box-shadow:var(--v-toggle-container-border);display:flex;flex-direction:row;max-inline-size:fit-content;overflow:hidden;outline:1px solid rgba(0,0,0,0);flex-wrap:wrap}@container (max-width: 768px){.v-toggle-container{flex-direction:column}}.v-toggle-container:has(input):not(:has(input:not([disabled]))){--v-toggle-container-border:var(--v-toggle-disabled-container-border)}.v-toggle-container:has(input):not(:has(input:not([disabled]))) .v-toggle:not(:last-child){--v-toggle-border-inline-end:var(--v-toggle-disabled-border-inline-end)}.v-toggle-container:has(button):not(:has(button:not([disabled]))){--v-toggle-container-border:var(--v-toggle-disabled-container-border)}.v-toggle-container:has(button):not(:has(button:not([disabled]))) .v-toggle:not(:last-child){--v-toggle-border-inline-end:var(--v-toggle-disabled-border-inline-end)}.v-toggle:has(input[disabled]),.v-toggle[disabled]{--v-icon-primary:var(--v-toggle-disabled-foreground);--v-icon-secondary:var(--v-toggle-disabled-foreground);--v-toggle-background:var(--v-toggle-disabled-background);--v-toggle-foreground:var(--v-toggle-disabled-foreground);cursor:default;pointer-events:none}.v-toggle-icon{--v-toggle-padding-block-end:var(--v-toggle-icon-padding);--v-toggle-padding-block-start:var(--v-toggle-icon-padding);--v-toggle-padding-inline-end:var(--v-toggle-icon-padding);--v-toggle-padding-inline-start:var(--v-toggle-icon-padding);--v-icon-primary:var(--v-toggle-active-icon-color);--v-icon-secondary:var(--v-toggle-active-icon-color)}}