:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }/** Typography */
:host {
  /**
   * @prop --border-radius: Defaults to var(--nano-layer-border-radius);
   * @prop --border-color: Defaults to var(--nano-layer-border-color);
   * @prop --border-width: Defaults to var(--nano-layer-border-width);
   * @prop --background: Defaults to var(--nano-layer-background-color);
   * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);
   * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);
   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);
   * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);
   */
  --border-radius: var(--nano-layer-border-radius);
  --border-color: var(--nano-layer-border-color);
  --border-width: var(--nano-layer-border-width);
  --icon-size: var(--nano-pictogram-size-large);
  --scrim-color: var(--nano-overlay-background-color);
  --close-button-color: var(--nano-color-neutral-800);
  --tint-color: var(--nano-color-primary-1100);
  --background: var(--nano-color-primary-50);
  display: block;
  container-type: inline-size;
}

:host([color=neutral]), :host([theme=neutral]) {
  --tint-color: var(--nano-color-neutral-1200);
  --background: var(--nano-color-neutral-75);
}

:host([color=success]), :host([theme=success]) {
  --tint-color: var(--nano-color-success-1100);
  --background: var(--nano-color-success-50);
}

:host([color=warning]), :host([theme=warning]) {
  --tint-color: var(--nano-color-warning-1100);
  --background: var(--nano-color-warning-75);
}

:host([color=danger]), :host([theme=danger]) {
  --tint-color: var(--nano-color-danger-1100);
  --background: var(--nano-color-danger-100);
}

.alert {
  position: relative;
  background-color: var(--background);
  border: solid var(--border-width) var(--border-color);
  border-inline-start: solid 4px var(--tint-color);
  border-radius: var(--border-radius);
  opacity: 0;
  transform: scale(0.9);
  transition: var(--nano-transition-medium) opacity ease, var(--nano-transition-fast) transform ease;
}
.alert:focus {
  outline: none;
}
.alert:not(.alert--showing) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.alert--open {
  opacity: 1;
  transform: none;
}
.alert--toasty, .alert--modal {
  box-shadow: var(--nano-shadow-l2);
  margin: var(--nano-spacing-md);
}
.alert--modal.alert--nodismiss {
  animation: cannotClose 0.25s ease-in-out 1;
}
@keyframes cannotClose {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.alert__main {
  display: flex;
  align-items: stretch;
}

.alert__content {
  font-size: var(--nano-font-size-sm);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
  flex: 1 1 auto;
  padding: var(--nano-spacing-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--nano-spacing-sm);
}

.alert__modal-wrap {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  z-index: var(--nano-z-index-alert);
}

.alert__heading {
  font-size: var(--nano-font-size-sm);
  line-height: var(--nano-line-height-normal);
  font-weight: var(--nano-font-weight-bold);
  color: var(--tint-color);
}

.alert__title {
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-md);
  line-height: var(--nano-line-height-dense);
  text-wrap: balance;
}

.alert__close {
  --color: var(--close-button-color);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-size: 1.1em;
  padding-inline: 0 var(--nano-spacing-md);
  padding-block: 0;
}

.alert__overlay {
  position: fixed;
  inset: 0;
  background-color: var(--scrim-color);
  opacity: 0;
  transition: var(--nano-transition-fast) opacity;
  z-index: var(--nano-z-index-alert);
  pointer-events: all;
}
.alert__overlay--open {
  opacity: 1;
}

.alert__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: start;
  font-size: var(--icon-size);
  padding-block: var(--nano-spacing-md);
}
.alert__icon ::slotted(*), .alert__icon::slotted(*) {
  color: var(--tint-color);
  margin-inline-start: var(--nano-spacing-md);
}
@container (width < 280px) {
  .alert__icon {
    display: none !important;
  }
}

.alert__countdown {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 4px;
  background-color: var(--nano-layer-border-color);
  display: flex;
  justify-content: flex-end;
}

.alert__countdown .alert__countdown-elapsed {
  block-size: 100%;
  inline-size: 0;
}

.alert__timer {
  clip-path: inset(50%);
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  inline-size: 1px;
}

.alert__countdown-elapsed {
  background-color: var(--tint-color);
}