@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$toast: () !default;
$toast: map.merge(
  (
    z-index: value('z-index-masker'),
    min-width: 100px,
    max-width: 90%,
    min-height: 100px,
    v-padding: 16px,
    h-padding: 16px,
    color: value('color-white'),
    bg-color: value('color-black'),
    radius: value('radius-large'),
    opacity: 70%
  ),
  $toast
);

.#{$namespace}-toast {
  &-vars {
    @include define-preset-values('toast', $toast);
  }

  @include basis {
    position: fixed;
    inset: 0;
    z-index: value('z-index-masker');
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  &--text-only {
    @include define-preset-values(
      'toast',
      (
        min-height: 0,
        v-padding: 8px
      )
    );
  }

  & > * {
    pointer-events: auto;
  }

  &__mask {
    position: absolute;
    inset: 0;
    background-color: transparent;
  }

  &__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: value('toast-min-width');
    max-width: value('toast-max-width');
    min-height: value('toast-min-height');
    padding: value('toast-v-padding') value('toast-h-padding');
    color: value('toast-color');
    user-select: none;
    background-color: transparent;
    border-radius: value('toast-radius');
    transition: value('transition-color'), value('transition-background');

    &--top {
      position: absolute;
      top: 30px;
    }

    &--bottom {
      position: absolute;
      bottom: 30px;
    }

    &--closable {
      cursor: pointer;
    }

    &::before {
      @include inner-fixed {
        z-index: -1;
        pointer-events: none;
        content: '';
        background-color: value('toast-bg-color');
        border-radius: value('toast-radius');
        opacity: value('toast-opacity');
      }
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }

  &__content {
    width: fit-content;
    word-break: break-all;
    white-space: pre-wrap;
  }
}