/* Самостоятельный компонент. Цвет, размеры и отступы можно переопределять CSS-переменными. */
.snackbar {
  position: fixed;
  z-index: 2000;
  width: max-content;
  max-width: min(var(--snackbar-max-width, 600px), calc(100vw - 24px));
  --snackbar-background: var(--lilac);
  --snackbar-color: var(--ink);
  --snackbar-border: var(--purple-dark);
}
.snackbar[data-position="bottom-center"] {
  left: 50%; bottom: var(--snackbar-bottom, calc(90px + env(safe-area-inset-bottom, 0px))); transform: translateX(-50%);
}
.snackbar[data-position="top-center"] {
  left: 50%; top: var(--snackbar-top, max(16px, env(safe-area-inset-top))); transform: translateX(-50%);
}
.snackbar[data-position="bottom-left"] {
  left: max(16px, env(safe-area-inset-left)); bottom: var(--snackbar-bottom, calc(90px + env(safe-area-inset-bottom, 0px)));
}
.snackbar[data-position="bottom-right"] {
  right: max(16px, env(safe-area-inset-right)); bottom: var(--snackbar-bottom, calc(90px + env(safe-area-inset-bottom, 0px)));
}
.snackbar[data-kind="success"] { --snackbar-background: #ddf4e6; --snackbar-color: #24523c; --snackbar-border: #397552; }
.snackbar:is([data-kind="warning"], [data-kind="error"]) { --snackbar-background: #ffe1e4; --snackbar-color: #7c2135; --snackbar-border: #9d3a53; }
.snackbar-surface {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  padding: var(--snackbar-padding, 12px 14px);
  border: 2px solid var(--snackbar-border);
  border-radius: var(--snackbar-radius, 16px);
  background: var(--snackbar-background);
  color: var(--snackbar-color);
  box-shadow: 0 5px 0 var(--snackbar-color), 0 10px 28px #2b1b4b33;
  font-weight: 800;
  line-height: 1.4;
}
.snackbar-icon { grid-column: 1; grid-row: 1; width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 50%; text-align: center; }
.snackbar [data-snackbar-message] { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.snackbar button { min-height: 44px; padding: 4px 10px; border-color: var(--snackbar-border); color: var(--snackbar-color); background: var(--paper); box-shadow: none; }
.snackbar [data-snackbar-close] { grid-column: 3; grid-row: 1; width: 44px; padding: 4px; font-size: 24px; }
.snackbar [data-snackbar-action] { grid-column: 2; grid-row: 2; justify-self: start; max-width: 100%; overflow-wrap: anywhere; }