.toaster {
  position: fixed;
  visibility: hidden;
  display: flex;
  transform: translate(-50%, 0);
  left: 50%;
  gap: var(--hs-spacing-base);
  padding: var(--hs-spacing-large);
  border-radius: var(--hs-radius-boxes);
  top: 100%;
  align-items: center;
  justify-content: space-between;
  min-width: 300px;
  max-width: calc(100vw - var(--hs-spacing-base));
  box-shadow: var(--hs-shadow-dark);
}

.toaster--state-enabled {
  transition-property: top, transform;
  transition-duration: var(--hs-transitions-duration-base);
  transition-timing-function: var(--hs-transitions-easing);
}

.toaster--state-open {
  visibility: visible;
  top: calc(100% - var(--hs-spacing-large));
  transform: translate(-50%, -100%);
}

.toaster--color-primary {
  background-color: var(--hs-palette-primary-main);
  color: var(--hs-palette-primary-contrast);
}

.toaster--color-primary a {
  color: var(--hs-palette-primary-highlight);
}

.toaster--color-secondary {
  background-color: var(--hs-palette-secondary-main);
  color: var(--hs-palette-secondary-contrast);
}

.toaster--color-secondary a {
  color: var(--hs-palette-secondary-highlight);
}

.toaster--color-error {
  background-color: var(--hs-palette-error-main);
  color: var(--hs-palette-error-contrast);
}

.toaster--color-error a {
  color: var(--hs-palette-error-highlight);
}

.toaster--color-success {
  background-color: var(--hs-palette-success-main);
  color: var(--hs-palette-success-contrast);
}

.toaster--color-success a {
  color: var(--hs-palette-success-highlight);
}

.toaster--color-action {
  background-color: var(--hs-palette-action-main);
  color: var(--hs-palette-action-contrast);
}

.toaster--color-action a {
  color: var(--hs-palette-action-highlight);
}

.toaster--color-warning {
  background-color: var(--hs-palette-warning-main);
  color: var(--hs-palette-warning-contrast);
}

.toaster--color-warning a {
  color: var(--hs-palette-warning-highlight);
}

.toaster--color-primary a:hover {
  color: var(--hs-palette-primary-accent);
}

.toaster--color-secondary a:hover {
  color: var(--hs-palette-secondary-accent);
}

.toaster--color-error a:hover {
  color: var(--hs-palette-error-accent);
}

.toaster--color-success a:hover {
  color: var(--hs-palette-success-accent);
}

.toaster--color-action a:hover {
  color: var(--hs-palette-action-accent);
}

.toaster--color-warning a:hover {
  color: var(--hs-palette-warning-accent);
}