
// @require ../toast.scss
// @require ../queue/queue.scss

/* QUEUES */

.toast-queues {

  @include fixed ( false 0 false 0 );
  z-index: $toast-queues-z-index !important;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  pointer-events: none;

  /* TOP */

  &.top {

    top: 0;

    /* STICKY HEADER */

    .layout.vertical > .layout-header.sticky ~ & {
      top: $layout-sticky-header-height;
    }

    /* ROW */

    .toast-queues-row {
      align-items: flex-start;
    }

    /* QUEUE */

    .toast-queue {

      flex-direction: column;

      /* TOAST */

      .toast {
        margin-top: $gutter;
      }

      /* EXPANDED */

      &.expanded .toast {
        border-top-width: 0;
        border-bottom-width: $border-width;
        border-bottom-style: solid;
      }

    }

  }

  /* BOTTOM */

  &.bottom {

    bottom: 0;

    /* ROW */

    .toast-queues-row {
      align-items: flex-end;
    }

    /* QUEUE */

    .toast-queue {

      flex-direction: column-reverse;

      /* TOAST */

      .toast {
        margin-bottom: $gutter;
      }

      /* EXPANDED */

      &.expanded .toast {
        border-bottom-width: 0;
        border-top-width: $border-width;
        border-top-style: solid;
      }

    }

  }

  /* ROW */

  &-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

}
