@use '../../scss/font-mixins' as fonts;
@use 'sass:map';
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';

.toast {
  max-width: 40rem;
  width: fit-content;
  margin: 0 auto;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--core-color-kiwi-50);
  border: 2px solid var(--core-color-kiwi-900);
  pointer-events: auto;
  display: grid;
  grid-template:
    'check text close' 2.375rem
    '. text .' auto /
    calc(38px + 4px) auto calc(38px + 10px);

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    grid-template:
      'check text close' 2.75rem
      '. text .' auto /
      calc(48px + 4px) auto calc(48px + 9px);
  }

  &__icon {
    fill: var(--core-color-kiwi-900);
    align-self: center;

    &--check {
      grid-area: check;
    }

    &--close {
      grid-area: close;
      justify-self: end;
    }
  }

  &__text-container {
    --margin-top: 0;

    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-self: center;
    margin-top: var(--margin-top);

    &:has(.toast__description) {
      --margin-top: 0.5rem;

      @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
        --margin-top: 0.625rem;
      }
    }
  }

  &__title {
    @include fonts.title6;

    padding-top: 0.125rem;
  }

  &__description {
    @include fonts.compact-data;
  }
}