@layer design-system.components{.vds-alert{--alert-gap:var(--vds-space-3,.75rem);--alert-padding-inline:var(--vds-space-4,1rem);--alert-padding-block:var(--vds-space-3,.75rem);--alert-radius:var(--vds-radius-alert,.5rem);--alert-border-width:1px;--alert-font-family:var(--vds-font-sans,ui-sans-serif, system-ui, sans-serif);--alert-font-size:var(--vds-text-sm,.875rem);--alert-line-height:var(--vds-leading-normal,1.5);--alert-title-font-size:var(--vds-text-sm,.875rem);--alert-title-font-weight:var(--vds-font-weight-semibold,600);--alert-title-line-height:var(--vds-leading-snug,1.375);--alert-description-font-size:var(--vds-text-sm,.875rem);--alert-description-line-height:var(--vds-leading-normal,1.5);--alert-title-description-gap:var(--vds-space-1,.25rem);--alert-icon-size:1.25rem;--alert-icon-inset-block-start:.125rem;--alert-close-size:1.5rem;--alert-close-radius:var(--vds-radius-action,var(--vds-radius-control-action,.375rem));--alert-close-icon-size:1rem;--alert-close-bg:transparent;--alert-close-bg-hover:color-mix(in oklch, currentColor 12%, transparent);--alert-close-bg-active:color-mix(in oklch, currentColor 18%, transparent);--alert-transition-duration:var(--vds-duration-fast,.1s);--alert-transition-easing:var(--vds-ease-out,cubic-bezier(0, 0, .2, 1));--alert-focus-ring-color:var(--vds-color-ring,#6366f1);--alert-focus-ring-width:2px;--alert-focus-ring-offset:2px;--alert-background:var(--vds-surface-bg,var(--vds-color-surface,#fff));--alert-border-color:var(--vds-surface-border,var(--vds-color-border,#d1d5db));--alert-text-color:var(--vds-color-text,#111827);--alert-title-color:var(--vds-color-text,#111827);--alert-description-color:var(--vds-color-text-muted,#6b7280);--alert-icon-color:var(--vds-color-text,#111827)}.vds-alert[data-variant=info]{--alert-background:var(--vds-color-info-bg,#cffafe);--alert-border-color:color-mix(in oklch, var(--vds-color-info-solid,#06b6d4) 30%, transparent);--alert-text-color:var(--vds-color-info-text,#155e75);--alert-title-color:var(--vds-color-info-text,#155e75);--alert-description-color:var(--vds-color-info-text,#155e75);--alert-icon-color:var(--vds-color-info-solid,#06b6d4)}.vds-alert[data-variant=success]{--alert-background:var(--vds-color-success-bg,#dcfce7);--alert-border-color:color-mix(in oklch, var(--vds-color-success-solid,#22c55e) 30%, transparent);--alert-text-color:var(--vds-color-success-text,#166534);--alert-title-color:var(--vds-color-success-text,#166534);--alert-description-color:var(--vds-color-success-text,#166534);--alert-icon-color:var(--vds-color-success-solid,#22c55e)}.vds-alert[data-variant=warning]{--alert-background:var(--vds-color-warning-bg,#fef3c7);--alert-border-color:color-mix(in oklch, var(--vds-color-warning-solid,#f59e0b) 30%, transparent);--alert-text-color:var(--vds-color-warning-text,#78350f);--alert-title-color:var(--vds-color-warning-text,#78350f);--alert-description-color:var(--vds-color-warning-text,#78350f);--alert-icon-color:var(--vds-color-warning-solid,#f59e0b)}.vds-alert[data-variant=danger]{--alert-background:var(--vds-color-danger-bg,#fee2e2);--alert-border-color:color-mix(in oklch, var(--vds-color-danger-solid,#ef4444) 30%, transparent);--alert-text-color:var(--vds-color-danger-text,#991b1b);--alert-title-color:var(--vds-color-danger-text,#991b1b);--alert-description-color:var(--vds-color-danger-text,#991b1b);--alert-icon-color:var(--vds-color-danger-solid,#ef4444)}.vds-alert[data-appearance=solid][data-variant=info]{--alert-background:var(--vds-color-info-solid,#06b6d4);--alert-border-color:transparent;--alert-text-color:var(--vds-color-on-info,#fff);--alert-title-color:var(--vds-color-on-info,#fff);--alert-description-color:color-mix(in oklch, var(--vds-color-on-info,#fff) 88%, transparent);--alert-icon-color:var(--vds-color-on-info,#fff)}.vds-alert[data-appearance=solid][data-variant=success]{--alert-background:var(--vds-color-success-solid,#22c55e);--alert-border-color:transparent;--alert-text-color:var(--vds-color-on-success,#fff);--alert-title-color:var(--vds-color-on-success,#fff);--alert-description-color:color-mix(in oklch, var(--vds-color-on-success,#fff) 88%, transparent);--alert-icon-color:var(--vds-color-on-success,#fff)}.vds-alert[data-appearance=solid][data-variant=warning]{--alert-background:var(--vds-color-warning-solid,#f59e0b);--alert-border-color:transparent;--alert-text-color:var(--vds-color-on-warning,#111827);--alert-title-color:var(--vds-color-on-warning,#111827);--alert-description-color:color-mix(in oklch, var(--vds-color-on-warning,#111827) 88%, transparent);--alert-icon-color:var(--vds-color-on-warning,#111827)}.vds-alert[data-appearance=solid][data-variant=danger]{--alert-background:var(--vds-color-danger-solid,#ef4444);--alert-border-color:transparent;--alert-text-color:var(--vds-color-on-danger,#fff);--alert-title-color:var(--vds-color-on-danger,#fff);--alert-description-color:color-mix(in oklch, var(--vds-color-on-danger,#fff) 88%, transparent);--alert-icon-color:var(--vds-color-on-danger,#fff)}.vds-alert[data-appearance=outline]{--alert-background:transparent}.vds-alert[data-appearance=outline][data-variant=info]{--alert-border-color:var(--vds-color-info-solid,#06b6d4)}.vds-alert[data-appearance=outline][data-variant=success]{--alert-border-color:var(--vds-color-success-solid,#22c55e)}.vds-alert[data-appearance=outline][data-variant=warning]{--alert-border-color:var(--vds-color-warning-solid,#f59e0b)}.vds-alert[data-appearance=outline][data-variant=danger]{--alert-border-color:var(--vds-color-danger-solid,#ef4444)}.vds-alert[data-size=sm]{--alert-gap:var(--vds-space-2,.5rem);--alert-padding-inline:var(--vds-space-3,.75rem);--alert-padding-block:var(--vds-space-2,.5rem);--alert-font-size:var(--vds-text-xs,.75rem);--alert-title-font-size:var(--vds-text-xs,.75rem);--alert-description-font-size:var(--vds-text-xs,.75rem);--alert-icon-size:1rem;--alert-close-size:1.25rem;--alert-close-icon-size:.875rem}.vds-alert[data-size=lg]{--alert-gap:var(--vds-space-4,1rem);--alert-padding-inline:var(--vds-space-5,1.25rem);--alert-padding-block:var(--vds-space-4,1rem);--alert-font-size:var(--vds-text-base,1rem);--alert-title-font-size:var(--vds-text-base,1rem);--alert-description-font-size:var(--vds-text-sm,.875rem);--alert-title-description-gap:var(--vds-space-2,.5rem);--alert-icon-size:1.5rem;--alert-close-size:1.75rem;--alert-close-icon-size:1.125rem}}
@layer design-system.components{.vds-alert{align-items:start;column-gap:var(--alert-gap);padding-inline:var(--alert-padding-inline);padding-block:var(--alert-padding-block);background-color:var(--alert-background);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-radius);color:var(--alert-text-color);font-family:var(--alert-font-family);font-size:var(--alert-font-size);line-height:var(--alert-line-height);transition:background-color var(--alert-transition-duration) var(--alert-transition-easing), border-color var(--alert-transition-duration) var(--alert-transition-easing), color var(--alert-transition-duration) var(--alert-transition-easing);grid-template-columns:auto 1fr auto;display:grid}.vds-alert:not(:has(>.vds-alert-icon)){grid-template-columns:1fr auto}.vds-alert-icon{inline-size:var(--alert-icon-size);block-size:var(--alert-icon-size);color:var(--alert-icon-color);flex:none;justify-content:center;align-items:center;margin-block-start:var(--alert-icon-inset-block-start);display:inline-flex}.vds-alert-icon>svg{block-size:100%;inline-size:100%}.vds-alert-content{gap:var(--alert-title-description-gap);flex-direction:column;min-inline-size:0;display:flex}.vds-alert-title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);line-height:var(--alert-title-line-height);color:var(--alert-title-color);margin:0}.vds-alert-description{font-size:var(--alert-description-font-size);line-height:var(--alert-description-line-height);color:var(--alert-description-color);margin:0}.vds-alert-close{inline-size:var(--alert-close-size);block-size:var(--alert-close-size);background-color:var(--alert-close-bg);border-radius:var(--alert-close-radius);color:inherit;cursor:pointer;appearance:none;transition:background-color var(--alert-transition-duration) var(--alert-transition-easing);border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.vds-alert-close:hover{background-color:var(--alert-close-bg-hover)}.vds-alert-close:active{background-color:var(--alert-close-bg-active)}.vds-alert-close:focus-visible{outline:var(--alert-focus-ring-width) solid var(--alert-focus-ring-color);outline-offset:var(--alert-focus-ring-offset)}.vds-alert-close>svg{inline-size:var(--alert-close-icon-size);block-size:var(--alert-close-icon-size)}}