.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-error {
  --hs-toaster-color: var(--hs-palette-highlight-error-main);
  --hs-toaster-color-contrast: var(--hs-palette-highlight-error-contrast);
  --hs-toaster-color-accent: var(--hs-palette-highlight-error-accent);
  --hs-toaster-color-highlight: var(--hs-palette-highlight-error-highlight);
}

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

.toaster--color-info {
  --hs-toaster-color: var(--hs-palette-highlight-info-main);
  --hs-toaster-color-contrast: var(--hs-palette-highlight-info-contrast);
  --hs-toaster-color-accent: var(--hs-palette-highlight-info-accent);
  --hs-toaster-color-highlight: var(--hs-palette-highlight-info-highlight);
}

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

.toaster--variant-outlined {
  background-color: var(--hs-palette-background);
  border: 1px solid var(--hs-toaster-color-accent);
  color: var(--hs-toaster-color-accent);
}

.toaster--variant-contained {
  background-color: var(--hs-toaster-color);
  border: 1px solid var(--hs-toaster-color);
  color: var(--hs-toaster-color-contrast);
}

.toaster--variant-outlined a {
  color: var(--hs-toaster-color-accent);
}

.toaster--variant-contained a {
  color: var(--hs-toaster-color-highlight);
}

.toaster--variant-outlined a:hover {
  color: var(--hs-toaster-color);
}

.toaster--variant-contained a:hover {
  color: var(--hs-toaster-color-accent);
}

.toaster--variant-outlined .button {
  color: var(--hs-toaster-color-accent);
  background-color: transparent;
  border: 1px solid var(--hs-toaster-color-accent);
}

.toaster--variant-contained .button {
  color: var(--hs-toaster-color-contrast);
  background-color: transparent;
  border: 1px solid var(--hs-toaster-color-contrast);
}

.toaster--variant-outlined .button:hover {
  background-color: color-mix(in srgb, var(--hs-toaster-color-accent) 10%, transparent);
}

.toaster--variant-contained .button:hover {
  background-color: color-mix(in srgb, var(--hs-toaster-color-contrast) 10%, transparent);
}