@visa/nova-styles/components/accordion/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-accordion-align-items:flex-start;--v-accordion-block-size:var(--size-scalable-46);--v-accordion-button-padding-block-large:calc((var(--v-button-default-block-size-large) - var(--v-accordion-icon-size)) / 2);--v-accordion-button-padding-block-medium:calc((var(--v-button-default-block-size) - var(--v-accordion-icon-size)) / 2);--v-accordion-button-padding-block-small:calc((var(--v-button-default-block-size-small) - var(--v-accordion-icon-size)) / 2);--v-accordion-icon-color:var(--palette-default-active);--v-accordion-icon-margin:var(--size-scalable-3);--v-accordion-icon-size:var(--size-scalable-22);--v-accordion-items-gap:var(--size-scalable-6);--v-accordion-justify-content:flex-start;--v-accordion-padding-block:0px;--v-accordion-padding-inline:var(--size-scalable-12);--v-accordion-toggle-icon-size:var(--size-scalable-16);--v-accordion-background:var(--palette-default-surface-1);--v-accordion-border-color:var(--palette-default-border);--v-accordion-border-size:calc(var(--theme-border-size) / 2);--v-accordion-border-radius:var(--size-rounded-medium);--v-accordion-border-style:solid;--v-accordion-foreground-initial:var(--palette-default-text);--v-accordion-expanded-foreground:var(--palette-default-active);--v-accordion-panel-background-color:var(--v-accordion-background);--v-accordion-panel-border-color:var(--v-accordion-border-color);--v-accordion-panel-border-radius:var(--size-rounded-medium);--v-accordion-panel-border-size:calc(var(--theme-border-size) / 2);--v-accordion-panel-border-style:solid;--v-accordion-panel-padding-block:var(--size-scalable-8) var(--size-scalable-16);--v-accordion-panel-padding-inline:var(--size-scalable-40)}}@layer components{.v-accordion{display:flex;flex-direction:column}.v-accordion .v-accordion-heading:not(.v-button)[aria-expanded=true],.v-accordion .v-accordion-heading:not(.v-button):has(.v-button[aria-expanded=true]),details.v-accordion[open] .v-accordion-heading{--v-accordion-foreground-initial:var(--v-accordion-expanded-foreground);--v-button-secondary-foreground:var(--v-accordion-expanded-foreground);--v-button-tertiary-foreground:var(--v-accordion-expanded-foreground);border-bottom-left-radius:0;border-bottom-right-radius:0}details.v-accordion:not([open])>.v-accordion-heading .v-accordion-toggle-icon-open{display:none}details.v-accordion:not([open])>.v-accordion-heading .v-accordion-toggle-icon-closed{display:inherit}details.v-accordion[open]>.v-accordion-heading .v-accordion-toggle-icon-open{display:inherit}details.v-accordion[open]>.v-accordion-heading .v-accordion-toggle-icon-closed{display:none}.v-accordion-heading{list-style:none}.v-accordion-heading>.v-icon-tiny{margin:var(--v-accordion-icon-margin)}.v-accordion-heading:not(:first-child){margin-block-start:var(--v-accordion-items-gap)}.v-accordion-heading,.v-accordion-heading.v-button{--typography-font-family:var(--typography-subtitle-2-font-family);--typography-font-size:var(--typography-subtitle-2-font-size);--typography-font-weight:var(--typography-subtitle-2-font-weight);--typography-letter-spacing:var(--typography-subtitle-2-letter-spacing);--typography-line-height:var(--typography-subtitle-2-line-height);--typography-text-decoration:var(--typography-subtitle-2-text-decoration);--typography-text-transform:var(--typography-subtitle-2-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-low-height:var(--v-accordion-icon-size);--v-icon-low-width:var(--v-accordion-icon-size)}.v-accordion-heading .v-icon,.v-accordion-heading.v-button .v-icon{flex-shrink:0}.v-accordion-heading .v-accordion-toggle-icon,.v-accordion-heading.v-button .v-accordion-toggle-icon{--v-icon-tiny-height:var(--v-accordion-toggle-icon-size);--v-icon-tiny-width:var(--v-accordion-toggle-icon-size);--v-icon-primary:var(--v-accordion-icon-color);--v-icon-secondary:var(--v-accordion-icon-color)}.v-accordion-heading:not(.v-button){align-items:var(--v-accordion-align-items);background-color:var(--v-accordion-background);block-size:100%;border:var(--v-accordion-border-size) var(--v-accordion-border-style) var(--v-accordion-border-color);border-radius:var(--v-accordion-border-radius);color:var(--v-accordion-foreground-initial);display:flex;gap:var(--v-accordion-items-gap);justify-content:var(--v-accordion-justify-content);min-block-size:var(--v-accordion-block-size);padding-block:var(--v-accordion-padding-block);padding-inline:var(--v-accordion-padding-inline);text-align:start}.v-accordion-heading.v-button{block-size:calc(100% - var(--v-button-default-border-size)*2);min-block-size:var(--v-button-default-block-size);text-align:start;--v-button-default-align-items:var(--v-accordion-align-items);--v-button-default-justify-content:var(--v-accordion-justify-content);--v-button-default-padding-block:calc(var(--v-accordion-button-padding-block-medium) - var(--v-button-default-border-size));--v-button-default-padding-inline:calc(var(--v-accordion-padding-inline) - var(--v-button-default-border-size))}.v-accordion-heading.v-button.v-button-secondary:not(.v-icon-two-color),.v-accordion-heading.v-button.v-button-tertiary:not(.v-icon-two-color){--v-button-default-border-color:var(--v-accordion-border-color);--v-button-secondary-foreground:var(--v-accordion-foreground-initial);--v-button-tertiary-foreground:var(--v-accordion-foreground-initial);--v-icon-primary:var(--v-accordion-icon-color);--v-icon-secondary:var(--v-accordion-icon-color);--v-button-secondary-background:var(--v-accordion-background)}.v-accordion-heading.v-button.v-button-secondary:not(.v-icon-two-color):hover,.v-accordion-heading.v-button.v-button-secondary:not(.v-icon-two-color):focus-visible,.v-accordion-heading.v-button.v-button-secondary:not(.v-icon-two-color):active,.v-accordion-heading.v-button.v-button-secondary:not(.v-icon-two-color):disabled,.v-accordion-heading.v-button.v-button-tertiary:not(.v-icon-two-color):hover,.v-accordion-heading.v-button.v-button-tertiary:not(.v-icon-two-color):focus-visible,.v-accordion-heading.v-button.v-button-tertiary:not(.v-icon-two-color):active,.v-accordion-heading.v-button.v-button-tertiary:not(.v-icon-two-color):disabled{--v-icon-primary:currentColor;--v-icon-secondary:currentColor}.v-accordion-heading.v-button.v-button-secondary:has(>.v-accordion-toggle-icon)[aria-expanded=true],.v-accordion-heading.v-button.v-button-tertiary:has(>.v-accordion-toggle-icon)[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0;--v-button-secondary-foreground:var(--v-accordion-expanded-foreground);--v-button-tertiary-foreground:var(--v-accordion-expanded-foreground)}.v-accordion-heading.v-button.v-button-small{--v-button-default-padding-block:calc(var(--v-accordion-button-padding-block-small) - var(--v-button-default-border-size))}.v-accordion-heading.v-button.v-button-large{--v-button-default-padding-block:calc(var(--v-accordion-button-padding-block-large) - var(--v-button-default-border-size))}.v-accordion-heading.v-button>span{align-items:var(--v-accordion-align-items);display:flex;gap:var(--v-accordion-items-gap);justify-content:var(--v-accordion-justify-content);text-align:start}.v-accordion-heading.v-button::marker,.v-accordion-heading.v-button::-webkit-details-marker{display:none}.v-accordion-heading.v-button[disabled],.v-accordion-heading.v-button[aria-disabled=true]{--v-accordion-border-color:var(--v-button-default-disabled-border-color);--v-accordion-foreground-initial:var(--v-button-default-disabled-foreground);cursor:default;pointer-events:none}.v-accordion-heading.v-button[disabled] .v-accordion-toggle-icon,.v-accordion-heading.v-button[aria-disabled=true] .v-accordion-toggle-icon{--v-icon-primary:currentColor;--v-icon-secondary:currentColor}.v-accordion-heading.v-button .v-accordion-toggle-icon{align-self:flex-start;display:inline-flex}.v-accordion-panel{background-color:var(--v-accordion-panel-background-color);border-bottom-left-radius:var(--v-accordion-panel-border-radius);border-bottom-right-radius:var(--v-accordion-panel-border-radius);border-color:var(--v-accordion-panel-border-color);border-style:var(--v-accordion-panel-border-style);border-width:var(--v-accordion-panel-border-size);border-top-width:0;padding-block:var(--v-accordion-panel-padding-block);padding-inline:var(--v-accordion-panel-padding-inline)}.v-accordion-panel[aria-hidden=true]{display:none}}