.toast-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-toast);
  overflow: hidden;
  pointer-events: none;
}

.toast-root[hidden] {
  display: none;
}

.toast-root__region {
  position: absolute;
  inset-inline: max(var(--space-3), var(--safe-area-left)) max(var(--space-3), var(--safe-area-right));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--toast-gap);
}

.toast-root__region[data-position='top'] {
  top: max(var(--space-3), var(--safe-area-top));
}

.toast-root__region[data-position='bottom'] {
  bottom: max(var(--space-3), var(--safe-area-bottom));
  flex-direction: column-reverse;
}

.toast-root[data-navigation-visible='true'] .toast-root__region[data-position='bottom'] {
  bottom: calc(var(--bottom-navigation-height) + var(--safe-area-bottom) + var(--space-3));
}

.toast {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-1) minmax(0, 1fr) auto;
  width: min(100%, var(--toast-max-width));
  overflow: hidden;
  border: var(--control-border-width) solid var(--toast-border);
  border-radius: var(--toast-radius);
  background: var(--toast-background);
  color: var(--color-text-primary);
  box-shadow: var(--toast-shadow);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--toast-transition-duration) var(--overlay-easing), transform var(--toast-transition-duration) var(--overlay-easing);
}

.toast[data-state='opening'],
.toast[data-state='closing'] {
  opacity: 0;
  transform: translateY(var(--space-2));
}

.toast__accent {
  background: var(--toast-accent-info);
}

.toast[data-type='success'] .toast__accent {
  background: var(--toast-accent-success);
}

.toast[data-type='warning'] .toast__accent {
  background: var(--toast-accent-warning);
}

.toast[data-type='error'] .toast__accent {
  background: var(--toast-accent-error);
}

.toast__content {
  min-width: 0;
  padding: var(--space-3);
}

.toast__title {
  font-weight: var(--font-weight-control);
}

.toast__message {
  color: var(--color-text-secondary);
  font-size: var(--font-size-control-md);
}

.toast__controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
}

.toast__title[hidden],
.toast__message[hidden],
.toast__controls[hidden] {
  display: none;
}