:host { display: block; container: snackbar / inline-size; }
.fds-snackbar-lane { box-sizing: border-box; position: fixed; display: flex; flex-direction: column; gap: var(--fds-spacing-200); width: calc(100% - var(--fds-spacing-400)); max-width: 376px; margin: var(--fds-spacing-200) 0; z-index: var(--fds-z-index-const-priority, 9999); pointer-events: none; }
.fds-snackbar-lane.y-top { top: 0px; }
.fds-snackbar-lane.y-bottom { bottom: 0px; flex-direction: column-reverse; }
.fds-snackbar-lane.y-offset { top: calc(52px + var(--fds-spacing-300)); }
.fds-snackbar-lane.x-left { left: 0px; }
.fds-snackbar-lane.x-right { right: 0px; }
.fds-snackbar-lane.x-center { left: 0px; right: 0px; margin-inline: auto; }
.fds-snackbar-stack { position: relative; display: block; }
.fds-snackbar-peek-card { position: absolute; inset: 0px; z-index: -1; pointer-events: none; border-radius: var(--border-radius-large); box-shadow: rgba(0, 0, 0, 0.15) 0px 6px 6px 0px; background-color: var(--fds-info-surface, var(--fds-info)); opacity: calc(1 - var(--peek-depth, 1) * 0.15); transition: transform 200ms; }
.fds-snackbar-peek-card[data-type="info"] { background-color: var(--fds-info-surface, var(--fds-info)); }
.fds-snackbar-peek-card[data-type="warn"] { background-color: var(--fds-alert-surface, var(--fds-alert)); }
.fds-snackbar-peek-card[data-type="success"] { background-color: var(--fds-success-surface, var(--fds-success)); }
.fds-snackbar-peek-card[data-type="error"] { background-color: var(--fds-error-surface, var(--fds-error)); }
.fds-snackbar-lane.y-top .fds-snackbar-peek-card, .fds-snackbar-lane.y-offset .fds-snackbar-peek-card { transform: translate(calc(var(--peek-depth, 1) * 6px), calc(var(--peek-depth, 1) * 8px)); }
.fds-snackbar-lane.y-bottom .fds-snackbar-peek-card { transform: translate(calc(var(--peek-depth, 1) * 6px), calc(var(--peek-depth, 1) * -8px)); }
.fds-snackbar-lane.x-left .fds-snackbar-peek-card { transform: translate(calc(var(--peek-depth, 1) * -6px), var(--peek-y, 0)); }
.fds-snackbar-lane.x-left.y-top .fds-snackbar-peek-card, .fds-snackbar-lane.x-left.y-offset .fds-snackbar-peek-card { transform: translate(calc(var(--peek-depth, 1) * 6px), calc(var(--peek-depth, 1) * 8px)); }
.fds-snackbar-lane.x-left.y-bottom .fds-snackbar-peek-card { transform: translate(calc(var(--peek-depth, 1) * 6px), calc(var(--peek-depth, 1) * -8px)); }
@container snackbar (width >= 768px) {
  .fds-snackbar-lane { width: calc(100% - 64px); }
}