@use '../utils/tokens.scss';
@use '../utils/constants.scss';

@import '@viasat/beam-tokens/components/Toast';

$toastBaseClass: '#{constants.$prefix}toast';
$toastContainerBaseClass: '#{$toastBaseClass}-container';
$toastCompBaseClass: '#{constants.$prefix}comp-toast';

.#{$toastContainerBaseClass} {
  padding: tokens.$bm-comp-toast-space-viewport-offset;
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  gap: tokens.$bm-comp-toast-space-stack;
  overflow: hidden;
  z-index: 9999;

  &--top-left {
    top: 0;
    left: 0;
  }

  &--top-right {
    top: 0;
    right: 0;
  }

  &--top-center {
    top: 0;
    left: 50%;
  }

  &--bottom-left {
    bottom: 0;
    left: 0;
  }

  &--bottom-right {
    bottom: 0;
    right: 0;
  }

  &--bottom-center {
    bottom: 0;
    left: 50%;
  }
}

@media (max-width: 720px) {
  .#{$toastContainerBaseClass} {
    width: 100%;

    &--top-left,
    &--top-right,
    &--top-center {
      top: tokens.$bm-comp-toast-space-viewport-offset;
      flex-direction: column;
    }

    &--bottom-left,
    &--bottom-right,
    &--bottom-center {
      bottom: tokens.$bm-comp-toast-space-viewport-offset;
      flex-direction: column-reverse;
    }
  }
}