toasts.scss

// Toast

.Toast {
  display: flex;
  margin: var(--base-size-8);
  color: var(--fgColor-default, var(--color-fg-default));
  background-color: var(--bgColor-default, var(--color-canvas-default));
  // stylelint-disable-next-line primer/borders
  border-radius: $border-radius;
  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));

  @include breakpoint(sm) {
    width: max-content;
    max-width: 450px;
    margin: var(--base-size-16);
  }
}

.Toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--base-size-16) * 3);
  flex-shrink: 0;
  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
  background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
  // stylelint-disable-next-line primer/borders, primer/colors
  border: $border-width $border-style transparent;
  border-right: 0;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.Toast-content {
  padding: var(--base-size-16);
}

.Toast-dismissButton {
  max-height: 54px; // keeps button aligned to the top
  padding: var(--base-size-16);
  color: inherit;
  background-color: transparent;
  border: 0;

  &:hover {
    opacity: 0.7;
  }

  &:active {
    opacity: 0.5;
  }
}

// Modifier

.Toast--loading {
  color: var(--fgColor-default, var(--color-fg-default));
  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));

  .Toast-icon {
    background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis));
  }
}

.Toast--error {
  color: var(--fgColor-default, var(--color-fg-default));
  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));

  .Toast-icon {
    background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis));
  }
}

.Toast--warning {
  color: var(--fgColor-default, var(--color-fg-default));
  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));

  .Toast-icon {
    background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis));
  }
}

.Toast--success {
  color: var(--fgColor-default, var(--color-fg-default));
  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));

  .Toast-icon {
    background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis));
  }
}

// Animations

.Toast--animateIn {
  animation: Toast--animateIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@keyframes Toast--animateIn {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
}

.Toast--animateOut {
  animation: Toast--animateOut 0.18s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

@keyframes Toast--animateOut {
  100% {
    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);
  }
}

.Toast--spinner {
  animation: Toast--spinner 1000ms linear infinite;
}

@keyframes Toast--spinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}