/*! minimo - Snackbar */

/* purgecss start ignore */

.snackbarOuter {
  position: fixed;
  inset-block: auto var(--size-md);
  /* inset-inline: 0 auto; */
  z-index: var(--z-index-snackbar);
  inline-size: 20dvw;
  min-inline-size: min(100%, 37ch);
  padding: var(--snackbar-outer-padding-block) var(--snackbar-outer-padding-inline);
  margin-inline: auto;
  background-color: var(--snackbar-outer-background-color);
  border: var(--snackbar-outer-border);
  border-radius: var(--snackbar-outer-border-radius);
  box-shadow: var(--snackbar-outer-drop-shadow);

  animation: slide-in .3s cubic-bezier(.34, 1.56, .64, 1) forwards;

  &.isHiding {
    animation: slide-out .25s ease-in forwards;
  }

}

.snackbar {
  display: flex;
  gap: var(--size-xs);
  align-items: center;
  justify-content: space-between;
  padding: var(--size-xs) var(--size-sm);
  font-size: var(--snackbar-font-size);
  color: var(--snackbar-text-color);
  background-color: var(--snackbar-background-color);
  border-radius: var(--snackbar-border-radius);

  &::backdrop {
    display: none;
  }

  * {
    overflow-wrap: break-word;
  }
}

/* .text {} */

.action {
  margin-inline-start: auto;
}
.closeBtn {
  --_icon-bar-width: var(--snackbar-btn-close-size); /* --_icon-bar-width is defined in buttons/btn-close.css */

  --btn-close-background-color: var(--snackbar-btn-close-background-color);
  --btn-close-icon-color: var(--snackbar-btn-close-icon-color);
  --btn-close-icon-bar-size: 2px;
  --btn-close-border-color: var(--snackbar-btn-close-border-color);
  --btn-close-border-width: var(--snackbar-btn-close-border-width);
  --btn-close-border-radius: var(--snackbar-btn-close-border-radius);

  --btn-close-hover-background-color: var(--snackbar-btn-close-hover-background-color);
  --btn-close-hover-border-color: var(--snackbar-btn-close-hover-border-color);
  --btn-close-hover-icon-color: var(--snackbar-btn-close-hover-icon-color);

  --btn-close-focus-outline-color: var(--snackbar-btn-close-focus-outline-color);
  --btn-close-focus-outline-offset: var(--snackbar-btn-close-focus-outline-offset);
  --btn-close-focus-outline-width: var(--snackbar-btn-close-focus-outline-width);

  --btn-close-active-background-color: var(--snackbar-btn-close-active-background-color);
  --btn-close-active-icon-color: var(--snackbar-btn-close-active-icon-color);

  flex-shrink: 0;
  border: none;

  &:active {
    scale: .6;
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    translate: 0 calc(100% + var(--size-md));
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes slide-out {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 0;
    translate: 0 calc(100% + var(--size-md));
  }
}

@media (prefers-reduced-motion: reduce) {
  .snackbarOuter,
  .snackbarOuter.isHiding {
    animation: none;
  }
}

/* purgecss end ignore */