.alert{display:flex;justify-content:space-between;align-items:flex-start;border-radius:.375rem;border:1px solid transparent;transition:opacity .3s ease-out,transform .3s ease-out}.alert--exiting{opacity:0;transform:translateY(-.5rem)}.alert--xs{padding:.5rem;font-size:.75rem}.alert--sm{padding:.75rem;font-size:.875rem}.alert--md{padding:1rem;font-size:1rem}.alert--lg{padding:1.25rem;font-size:1.125rem}.alert--xl{padding:1.5rem;font-size:1.25rem}.alert--2xl{padding:1.75rem;font-size:1.5rem}.alert--success{background-color:var(--color-success-bg);border-color:var(--color-success-border);color:var(--color-success-text)}.alert--warn{background-color:var(--color-warn-bg);border-color:var(--color-warn-border);color:var(--color-warn-text)}.alert--error{background-color:var(--color-error-bg);border-color:var(--color-error-border);color:var(--color-error-text)}.alert__content{flex:1;align-self:center}.alert__title{margin-bottom:.5rem;font-weight:500}.alert__title:last-child{margin-bottom:0}.alert__details{margin:0;padding-left:1.5rem}.alert__details li{margin-bottom:.25rem}.alert__details li:last-child{margin-bottom:0}.alert__close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:.25rem;color:currentColor;margin-left:.5rem;flex-shrink:0;transition:opacity .2s ease-in-out}.alert__close svg{width:1.25rem;height:1.25rem}.alert__close:hover{opacity:.7}.alert__close:focus{outline:2px solid transparent;box-shadow:0 0 0 2px var(--color-focus-shadow-button);border-radius:.25rem}