@layer components {
.dt-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-space-3);
  box-sizing: border-box;
  padding: var(--dt-space-3) var(--dt-space-4);
  border: 1px solid color-mix(in srgb, var(--dt-alert-accent) 30%, transparent);
  border-left: 3px solid var(--dt-alert-accent);
  border-radius: var(--dt-radius-md);
  background: color-mix(in srgb, var(--dt-alert-accent) 8%, var(--dt-color-surface));
  color: var(--dt-color-on-surface);
  font-family: var(--dt-font-family);
  font-size: var(--dt-typography-desktop-body-2);
  line-height: var(--dt-typography-line-height-body);
}

.dt-alert--success {
  border-color: color-mix(in srgb, var(--dt-color-success) 30%, transparent);
  border-left-color: var(--dt-color-success);
  background: color-mix(in srgb, var(--dt-color-success) 8%, var(--dt-color-surface));
}

.dt-alert--warning {
  border-color: color-mix(in srgb, var(--dt-color-warning) 30%, transparent);
  border-left-color: var(--dt-color-warning);
  background: color-mix(in srgb, var(--dt-color-warning) 8%, var(--dt-color-surface));
}

.dt-alert--danger {
  border-color: color-mix(in srgb, var(--dt-color-danger) 30%, transparent);
  border-left-color: var(--dt-color-danger);
  background: color-mix(in srgb, var(--dt-color-danger) 8%, var(--dt-color-surface));
}

.dt-alert--hidden {
  display: none;
}

.dt-alert__left {
  flex: none;
  display: inline-flex;
  color: var(--dt-alert-accent);
  font-size: var(--dt-icon-size);
  line-height: 1;
  margin-top: 1px;
}

.dt-alert--success .dt-alert__left {
  color: var(--dt-color-success);
}

.dt-alert--warning .dt-alert__left {
  color: color-mix(in srgb, var(--dt-color-warning) 72%, #000);
}

.dt-alert--danger .dt-alert__left {
  color: var(--dt-color-danger);
}

.dt-alert__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dt-alert__title {
  font-weight: var(--dt-font-weight-semibold);
}

.dt-alert__description {
  color: var(--dt-color-on-surface-muted);
}

.dt-alert__close {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--dt-color-on-surface-muted);
  font-size: var(--dt-icon-size);
  line-height: 1;
}

.dt-alert__close:hover {
  color: var(--dt-color-on-surface);
}

.dt-alert--toast {
  position: fixed;
  right: var(--dt-space-6);
  bottom: var(--dt-space-6);
  z-index: 110;
  width: min(92vw, 24rem);
  background: var(--dt-color-surface);
  box-shadow: var(--dt-elevation-card);
}

}