@property --timeout{syntax:"<integer>";inherits:false;initial-value:5}@scope(.instui-alert){&{--timeout:0;min-inline-size:12rem;padding:var(--instui-component-alert-content-padding-vertical) var(--instui-component-alert-content-padding-horizontal);background:var(--instui-component-alert-info-background);color:var(--instui-component-text-base-on-color);border:var(--instui-component-alert-border-width) var(--instui-component-alert-border-style) var(--instui-component-alert-info-border-color);border-radius:var(--instui-component-alert-border-radius);box-shadow:0 4px 4px 0 var(--instui-color-drop-shadow-shadow-color1), 0 var(--instui-drop-shadow-y-elevation4-dropshadow1) var(--instui-drop-shadow-blur-elevation4-dropshadow1) var(--instui-drop-shadow-spread-elevation4-dropshadow1) var(--instui-color-drop-shadow-shadow-color1);font-family:var(--instui-component-alert-content-font-family);font-size:var(--instui-component-alert-content-font-size);font-weight:var(--instui-component-alert-content-font-weight);line-height:var(--instui-component-alert-content-line-height);--pantoken-alert-icon-color:var(--instui-color-icon-on-color);--pantoken-alert-glyph:var(--instui-icon-info);padding-inline-start:calc(.833rem + var(--instui-component-alert-icon-padding-left) + .75rem);position:relative;&>.instui-close-button:not([class*=-size-]){min-height:var(--instui-component-base-button-small-height)}&>.instui-close-button{color:var(--instui-color-icon-on-color);position:absolute;inset-block-start:var(--instui-spacing-space-xs);inset-inline-end:var(--instui-spacing-space-xs)}}&:after{content:"";background:var(--pantoken-alert-icon-color);block-size:.833rem;inline-size:.833rem;-webkit-mask:var(--pantoken-alert-glyph) center / .833rem no-repeat;mask:var(--pantoken-alert-glyph) center / .833rem no-repeat;position:absolute;inset-block-start:var(--instui-component-alert-icon-padding-vertical);inset-inline-start:var(--instui-component-alert-icon-padding-left)}&:has(>.instui-close-button){padding-inline-end:calc(var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs))}&.-screen-reader-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}&:is(.-variant-success,.-color-success){background:var(--instui-component-alert-success-background);border-color:var(--instui-component-alert-success-border-color);--pantoken-alert-glyph:var(--instui-icon-circle-check)}&:is(.-variant-warning,.-color-warning){background:var(--instui-component-alert-warning-background);border-color:var(--instui-component-alert-warning-border-color);color:var(--instui-color-text-base);--pantoken-alert-glyph:var(--instui-icon-triangle-alert);--pantoken-alert-icon-color:var(--instui-color-text-base);&>.instui-close-button{color:var(--instui-color-text-base)}}&:is(.-variant-error,.-color-danger,.-color-error){background:var(--instui-component-alert-danger-background);border-color:var(--instui-component-alert-danger-border-color);--pantoken-alert-glyph:var(--instui-icon-circle-x)}&[class*=-icon-]{--pantoken-alert-glyph:var(--pantoken-glyph)}&[class*=-icon-]:before{content:none}&.-timeout-1{--timeout:1000}&.-timeout-2{--timeout:2000}&.-timeout-3{--timeout:3000}&.-timeout-4{--timeout:4000}&.-timeout-5{--timeout:5000}&.-inline{background:var(--instui-component-alert-info-background-inline);border-color:var(--instui-component-alert-info-border-color-inline);box-shadow:none;color:var(--instui-color-text-base);--pantoken-alert-icon-color:var(--instui-color-icon-info);&>.instui-close-button{color:var(--instui-color-icon-base)}}&.-inline:is(.-variant-success,.-color-success){background:var(--instui-component-alert-success-background-inline);border-color:var(--instui-component-alert-success-border-color-inline);--pantoken-alert-icon-color:var(--instui-color-icon-success)}&.-inline:is(.-variant-warning,.-color-warning){background:var(--instui-component-alert-warning-background-inline);border-color:var(--instui-component-alert-warning-border-color-inline);--pantoken-alert-icon-color:var(--instui-color-icon-warning)}&.-inline:is(.-variant-error,.-color-danger,.-color-error){background:var(--instui-component-alert-danger-background-inline);border-color:var(--instui-component-alert-danger-border-color-inline);--pantoken-alert-icon-color:var(--instui-color-icon-error)}&>.instui-button:not(:has(+.instui-button)),&>.button-group{inline-size:fit-content;margin-block-start:var(--instui-component-shared-tokens-spacing-general-space-md);display:flex}&>.button-group{align-items:center;gap:var(--instui-component-shared-tokens-spacing-gap-buttons);flex-wrap:wrap}&>.instui-button:not([class*=-size-]),&>.button-group>.instui-button:not([class*=-size-]){min-height:var(--instui-component-base-button-small-height);padding-inline:var(--instui-component-base-button-small-padding-horizontal);font-size:var(--instui-component-base-button-small-font-size)}&>.instui-button:not(:has(+.instui-button)):not([class*=\ -]),&>.button-group>.instui-button:not(:has(+.instui-button)):not([class*=\ -]){background:var(--instui-component-base-button-primary-inverse-background);border-color:var(--instui-component-base-button-primary-inverse-border-color);color:var(--instui-component-base-button-primary-inverse-color);&:focus,&:hover{background:var(--instui-component-base-button-primary-inverse-hover-background);border-color:var(--instui-component-base-button-primary-on-color-hover-border-color);color:var(--instui-component-base-button-primary-on-color-hover-text-color)}&:active{background:var(--instui-component-base-button-primary-inverse-active-background);border-color:var(--instui-component-base-button-primary-on-color-active-border-color);color:var(--instui-component-base-button-primary-on-color-active-text-color)}&:is(:disabled,[aria-disabled=true]){background:var(--instui-component-base-button-primary-on-color-disabled-background-color);border-color:var(--instui-component-base-button-primary-on-color-disabled-border-color);color:var(--instui-component-base-button-primary-on-color-disabled-text-color);cursor:not-allowed}}&>.instui-button:has(+.instui-button):not([class*=\ -]),&>.button-group>.instui-button:has(+.instui-button):not([class*=\ -]){border-color:var(--instui-component-base-button-primary-inverse-ghost-border-color);color:var(--instui-component-base-button-primary-inverse-ghost-color);background:0 0;&:focus{background:var(--instui-component-base-button-primary-inverse-background);border-color:var(--instui-component-base-button-primary-inverse-border-color);color:var(--instui-component-base-button-primary-inverse-color)}&:hover{background:var(--instui-component-base-button-primary-inverse-ghost-hover-background);border-color:var(--instui-component-base-button-primary-on-color-hover-border-color);color:var(--instui-component-base-button-primary-on-color-hover-text-color)}&:active{background:var(--instui-component-base-button-primary-inverse-ghost-active-background);border-color:var(--instui-component-base-button-secondary-on-color-active-border-color);color:var(--instui-component-base-button-secondary-on-color-active-text-color)}&:is(:disabled,[aria-disabled=true]){border-color:var(--instui-component-base-button-secondary-on-color-disabled-border-color);color:var(--instui-component-base-button-secondary-on-color-disabled-text-color);cursor:not-allowed;background:0 0}}&:is(.-inline,.-variant-warning,.-color-warning)>.instui-button:not(:has(+.instui-button)):not([class*=\ -]),&:is(.-inline,.-variant-warning,.-color-warning)>.button-group>.instui-button:not(:has(+.instui-button)):not([class*=\ -]){background:var(--instui-color-background-interactive-action-primary-base);border-color:var(--instui-color-stroke-interactive-action-primary-base);color:var(--instui-color-text-interactive-action-primary-base);&:focus,&:hover{background:var(--instui-color-background-interactive-action-primary-hover);border-color:var(--instui-color-stroke-interactive-action-primary-hover)}&:active{background:var(--instui-color-background-interactive-action-primary-active);border-color:var(--instui-color-stroke-interactive-action-primary-active)}&:is(:disabled,[aria-disabled=true]){background:var(--instui-component-base-button-primary-disabled-background-color);border-color:var(--instui-component-base-button-primary-disabled-border-color);color:var(--instui-component-base-button-primary-disabled-text-color);cursor:not-allowed}}&:is(.-inline,.-variant-warning,.-color-warning)>.instui-button:has(+.instui-button):not([class*=\ -]),&:is(.-inline,.-variant-warning,.-color-warning)>.button-group>.instui-button:has(+.instui-button):not([class*=\ -]){border-color:var(--instui-component-base-button-primary-ghost-border-color);color:var(--instui-component-base-button-primary-ghost-color);background:0 0;&:focus,&:hover{background:var(--instui-component-base-button-primary-ghost-hover-background);border-color:var(--instui-component-base-button-tertiary-hover-border-color);color:var(--instui-component-base-button-tertiary-hover-text-color)}&:active{background:var(--instui-component-base-button-primary-ghost-active-background);border-color:var(--instui-component-base-button-tertiary-active-border-color);color:var(--instui-component-base-button-tertiary-active-text-color)}&:is(:disabled,[aria-disabled=true]){border-color:var(--instui-component-base-button-tertiary-disabled-border-color);color:var(--instui-component-base-button-tertiary-disabled-text-color);cursor:not-allowed;background:0 0}}&:is(.-has-shadow-false,.-without-shadow){box-shadow:none}}