/* Save status toast: sits above the tab bar, clear of the add item button */
.save-status {
  position: fixed;
  left: var(--space-md);
  right: calc(56px + 2 * var(--space-md));
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 1050;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.toast,
.toast:hover,
.toast:active {
  pointer-events: auto;
  max-width: 420px;
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--border-radius-md);
  background: var(--color-text);
  color: var(--color-bg-medium);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: left;
  box-shadow: 0 4px 12px var(--color-shadow);
  cursor: pointer;
}

.toast[hidden] {
  display: none;
}

.toast:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}