@visa/nova-styles/abstracts/action-primary/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 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-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-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-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-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-action:has(.v-checkbox:only-of-type),.v-action:has(.v-radio:only-of-type){--v-action-primary-block-size:100%}.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-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-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-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}.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)}}