@import 'mixins/toast';

@mixin toast-root {
  position: fixed;
  right: 20px;
  left: 20px;
  z-index: var(--#{$rd-prefix}zindex-max);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

##{$rd-prefix}toast-t-root {
  top: 20px;

  @include toast-root;
}

##{$rd-prefix}toast-b-root {
  bottom: 20px;

  @include toast-root;
}

@include b(toast) {
  @include component-toast;

  max-width: calc(100vw - 40px);
  padding: 10px 16px;
  margin: 0 auto 12px;
  pointer-events: all;
  background-color: var(--#{$rd-prefix}background-color);
  box-shadow: var(--#{$rd-prefix}shadow-dialog);
}