/**
 * AppBuckets UI
 *
 * _Backdrop @ src/styles/modules/_backdrop.scss
 *
 * Defined at 16 giu 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 * Backdrop Modules
 *
 */

/******
    Base Backdrop Style
******/
.backdrop {
  // ----
  //  Backdrop Disposition
  // ----
  display: flex;
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  height: 100%;
  z-index: $backdrop-z-index;

  background-color: transparentize($backdrop-color, 1 - $backdrop-opacity);

  // ----
  //  Content Disposition
  // ----
  text-align: center;
  vertical-align: middle;
  line-height: inherit;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  @include unselectable;

  // ----
  //  Content could be aligned on top or on bottom
  //  or could be stretched taking all space
  //  only if Backdrop is not in loading state
  // ----
  &:not(.loading) {
    &.content-on-top {
      justify-content: flex-start;
    }

    &.content-on-bottom {
      justify-content: flex-end;
    }

    &.content-center {
      justify-content: center;
    }

    &.content-stretched {
      justify-content: stretch;
    }
  }

  // ----
  //  A Page Backdrop is full size
  // ----
  &.page {
    position: fixed;
    transform-style: initial;
    perspective: 2000px;
    transform-origin: center center;
  }
}


/******
    Style the Backdrop Content
******/
.backdrop > .content {
  padding: $backdrop-padding;
  color: $backdrop-content-color;
}


/******
    Dimmable Container Style
******/
body.dimmed.dimmable {
  overflow: hidden;
}

body.dimmable > .backdrop {
  position: fixed;
}