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

@mixin toast-variant($context) {
  .c__progress-bar {
    --c--progress--color: var(
      --c--contextuals--background--semantic--#{$context}--primary
    );
  }

  .c__toast__icon {
    color: var(--c--contextuals--content--semantic--#{$context}--primary);
  }
}

.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--contextuals--background--semantic--neutral--primary);
  }

  &--info {
    @include toast-variant("info");
  }

  &--success {
    @include toast-variant("success");
  }

  &--warning {
    @include toast-variant("warning");
  }

  &--error {
    @include toast-variant("error");
  }
}

@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--contextuals--background--semantic--brand--primary);

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