@import 'mixins/notification';

@mixin notification-root {
  position: fixed;
  z-index: var(--#{$rd-prefix}zindex-max);
  pointer-events: none;
}

##{$rd-prefix}notification-lt-root {
  top: 20px;
  left: 20px;

  @include notification-root;
}

##{$rd-prefix}notification-rt-root {
  top: 20px;
  right: 20px;

  @include notification-root;
}

##{$rd-prefix}notification-lb-root {
  bottom: 20px;
  left: 20px;

  @include notification-root;
}

##{$rd-prefix}notification-rb-root {
  right: 20px;
  bottom: 20px;

  @include notification-root;
}

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

  width: 380px;
  max-width: calc(100vw - 40px);
  padding: 16px 24px;
  margin-bottom: 20px;
  pointer-events: all;
  background-color: var(--#{$rd-prefix}background-color);
  outline: none;
  box-shadow: var(--#{$rd-prefix}shadow-dialog);
}