/**
 * AppBuckets UI
 *
 * _Popup @ src/styles/modules/_popup.scss
 *
 * Defined at 25 giu 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 * Popup Style
 *
 */

.popup {
  display: none;

  position: absolute;
  top: 0;
  left: 0;
  z-index: $popup-z-index;

  border-radius: $popup-border-radius;
  background-color: $popup-background;
  color: $popup-color;

  // ----
  //  Not Basic Popup has a White Shade Border
  // ----
  &:not(.basic) {
    min-width: $popup-min-width;
    max-width: $popup-max-width;
    border: $popup-border;
    padding: $popup-content-padding;
    @include smoothShadow($popup-elevation);

    > .content {
      background-color: $popup-content-background;
      padding: $popup-content-padding $popup-content-padding * 1.5;
    }
  }

  // ----
  //  Visible Popup has FadeIn Entrance Transition
  // ----
  &.visible {
    display: block;
    @include fadeIn();
  }
}


/******
    Inverted Popup Color
******/
.inverted.popup {
  color: $popup-inverted-color;

  &:not(.basic) {
    background-color: $popup-inverted-background;

    > .content {
      background-color: transparentize($popup-inverted-color, .9);
    }
  }

  &.basic {
    background-color: transparentize($popup-inverted-background, 1 - $popup-inverted-background-opacity);
  }
}


/******
    Basic Popup
******/
.basic.popup {
  font-size: $popup-basic-font-size;
  min-width: $popup-basic-min-width;
  max-width: $popup-basic-max-width;
  line-height: $popup-basic-line-height;
  padding: $popup-basic-content-padding $popup-basic-content-padding * 1.5;
  border: $popup-basic-border;
  @include smoothShadow($popup-basic-elevation);
  font-style: normal;

  // ----
  //  Basic Popup must normalize header content
  // ----
  > .content > .header:first-child:last-child {
    margin: 0;

    > .header-content,
    > .header-content > .content,
    > .header-content > .subheader {
      font-size: 1em;
    }
  }

  // ----
  //  Header Disposition
  // ----
  &[data-popper-placement='top'],
  &[data-popper-placement='bottom'] {
    > .content > .header:first-child:last-child {
      > .header-content {
        text-align: center;
      }
    }
  }
}


/******
    Dropdown Menu Popup
******/
.dropdown-container.popup > .content {
  padding-top: 0;
  padding-bottom: 0;
}