cunningham/packages/react/src/components/Toast/index.scss

@use "../../utils/responsive" as *;

.c__toast__container {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 3rem;
  padding-bottom: 3rem;
}

@include media(sm) {
  .c__toast__container {
    padding: 0.5rem;
    right: 0;

    .c__toast {
      width: 100%;
      min-width: auto;
      max-width: none;
    }
  }
}

.c__toast {
  border-radius: 4px;
  box-shadow: 0 2px 6px 2px #0C1A2B26;
  background-color: var(--c--components--toast--background-color);
  min-width: 18rem;
  max-width: 27rem;
  overflow: hidden;
  will-change: transform;
  color: var(--c--components--toast--color);
  font-weight: var(--c--components--toast--font-weight);

  &:not(.c__toast--no-animate) {
    animation: slide-in var(--c--components--toast--slide-in-duration) ease;
  }

  &--disappear:not(.c__toast--no-animate) {
    animation: slide-out var(--c--components--toast--slide-out-duration) ease forwards;
  }

  &__icon {
    display: flex;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    justify-content: center;
    flex-shrink: 0;

    span {
      font-size: var(--c--components--toast--icon-size);
    }
  }

  &__content {
    padding: 1rem;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.5rem;

    &__buttons {
      flex-shrink: 0;
    }

    &__children {
      flex-grow: 1;
    }
  }

  .c__progress-bar {
    --c--progress--color: var(--c--theme--colors--greyscale-600);
  }

  &--info {
    .c__progress-bar {
      --c--progress--color: var(--c--theme--colors--info-500);
    }

    .c__toast__icon {
      color: var(--c--theme--colors--info-600);
    }
  }

  &--success {
    .c__progress-bar {
      --c--progress--color: var(--c--theme--colors--success-500);
    }

    .c__toast__icon {
      color: var(--c--theme--colors--success-600);
    }
  }

  &--warning {
    .c__progress-bar {
      --c--progress--color: var(--c--theme--colors--warning-500);
    }

    .c__toast__icon {
      color: var(--c--theme--colors--warning-600);
    }
  }

  &--error {
    .c__progress-bar {
      --c--progress--color: var(--c--theme--colors--danger-500);
    }

    .c__toast__icon {
      color: var(--c--theme--colors--danger-600);
    }
  }

}

@keyframes slide-out {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0
  }
}

@keyframes slide-in {
  from {
    transform: translateY(200px)
  }
}

.c__progress-bar {
  height: var(--c--components--toast--progress-bar-height);
  --c--progress--color: var(--c--theme--colors--primary-500);

  &__content {
    height: 100%;
    background-color: var(--c--progress--color);
  }
}