@layer components{[data-ui=banner]{justify-content:center;align-items:center;gap:var(--spacing-12);height:44px;padding-inline:var(--spacing-12);width:100%;display:flex}[data-ui=banner] [data-ui=banner-content]{font:var(--font-body-md)}[data-ui=banner] [data-slot=banner-icon]{flex-shrink:0;display:flex}[data-ui=banner] [data-slot=banner-icon] svg{color:var(--color-banner);width:20px;height:20px}[data-ui=banner][data-status=error]{--color-banner:var(--color-error);--color-on-banner:var(--color-on-error);--color-banner-container:var(--color-error-container);--color-on-banner-container:var(--color-on-error-container)}[data-ui=banner][data-status=warning]{--color-banner:var(--color-warning);--color-on-banner:var(--color-on-warning);--color-banner-container:var(--color-warning-container);--color-on-banner-container:var(--color-on-warning-container)}[data-ui=banner][data-status=feature]{--color-banner:var(--color-surface-variant);--color-on-banner:var(--color-on-surface-variant);--color-banner-container:var(--color-surface);--color-on-banner-container:var(--color-on-surface)}[data-ui=banner][data-status=success]{--color-banner:var(--color-success);--color-on-banner:var(--color-on-success);--color-banner-container:var(--color-success-container);--color-on-banner-container:var(--color-on-success-container)}[data-ui=banner][data-status=info]{--color-banner:var(--color-info);--color-on-banner:var(--color-on-info);--color-banner-container:var(--color-info-container);--color-on-banner-container:var(--color-on-info-container)}[data-ui=banner][data-variant=filled]{background-color:var(--color-banner);color:var(--color-on-banner)}[data-ui=banner][data-variant=filled] svg{color:currentColor}[data-ui=banner][data-variant=filled] [data-slot=banner-close][data-ui=button] svg{color:var(--color-on-banner)}@media (hover:hover) and (pointer:fine){[data-ui=banner][data-variant=filled] [data-slot=banner-close][data-ui=button]:hover{background-color:color-mix(in srgb, var(--color-on-banner) 12%, transparent)}}[data-ui=banner][data-variant=filled] [data-slot=banner-close][data-ui=button]:active{background-color:color-mix(in srgb, var(--color-on-banner) 20%, transparent)}[data-ui=banner][data-variant=light]{background-color:color-mix(in srgb, var(--color-banner-container), var(--color-banner) 24%);color:var(--color-on-banner-container)}[data-ui=banner][data-variant=light] svg{color:inherit}[data-ui=banner][data-variant=light] [data-slot=banner-close][data-ui=button] svg{color:var(--color-on-banner-container)}@media (hover:hover) and (pointer:fine){[data-ui=banner][data-variant=light] [data-slot=banner-close][data-ui=button]:hover{background-color:color-mix(in srgb, var(--color-on-banner-container) 12%, transparent)}}[data-ui=banner][data-variant=light] [data-slot=banner-close][data-ui=button]:active{background-color:color-mix(in srgb, var(--color-on-banner-container) 20%, transparent)}[data-ui=banner][data-variant=lighter]{background-color:var(--color-banner-container);color:var(--color-on-banner-container)}[data-ui=banner][data-variant=lighter] svg{color:inherit}[data-ui=banner][data-variant=lighter] [data-slot=banner-close][data-ui=button] svg{color:var(--color-on-banner-container)}@media (hover:hover) and (pointer:fine){[data-ui=banner][data-variant=lighter] [data-slot=banner-close][data-ui=button]:hover{background-color:color-mix(in srgb, var(--color-on-banner-container) 12%, transparent)}}[data-ui=banner][data-variant=lighter] [data-slot=banner-close][data-ui=button]:active{background-color:color-mix(in srgb, var(--color-on-banner-container) 20%, transparent)}[data-ui=banner][data-variant=stroke]{border-block-end:1px solid var(--color-surface-container-highest)}[data-ui=banner][data-variant=stroke] svg{color:inherit}[data-ui=banner][data-variant=stroke] [data-slot=banner-close][data-ui=button] svg{color:var(--color-banner)}@media (hover:hover) and (pointer:fine){[data-ui=banner][data-variant=stroke] [data-slot=banner-close][data-ui=button]:hover{background-color:color-mix(in srgb, var(--color-banner) 12%, transparent)}}[data-ui=banner][data-variant=stroke] [data-slot=banner-close][data-ui=button]:active{background-color:color-mix(in srgb, var(--color-banner) 20%, transparent)}}