//
// WebUI Popovers
// --------------------------------------------------

.webui-popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $popover-z-index;
  display: none;
  min-width: $popover-min-width;
  min-height: $popover-min-height;
  text-align: left;
  white-space: normal;
  background-clip: padding-box;
  border-radius: $popover-border-radius;

  @include themes(background, dropdown-bg);
  @include box-shadow-themes(box-shadow-new-2);

  &.top,
  &.top-left,
  &.top-right {
    margin-top: -$popover-arrow-width;
  }
  &.right,
  &.right-top,
  &.right-bottom {
    margin-left: $popover-arrow-width;
  }
  &.bottom,
  &.bottom-left,
  &.bottom-right {
    margin-top: $popover-arrow-width;
  }
  &.left,
  &.left-top,
  &.left-bottom {
    margin-left: -$popover-arrow-width;
  }

  &.pop {
    @include transform(scale(0.8));
    @include transition(transform 0.15s cubic-bezier(0.3, 0, 0, 1.5));
    @include opacity(0);
  }
  &.pop-out {
    @include transition-property("opacity,transform");
    @include transition(0.15s linear);
    @include opacity(0);
  }

  &.fade,
  &.fade-out {
    @include transition(opacity 0.15s linear);
    @include opacity(0);
  }
  &.out {
    @include opacity(0);
  }

  &.in {
    @include transform(none);
    @include opacity(1);
  }

  &.top > .webui-arrow,
  &.top-right > .webui-arrow,
  &.top-left > .webui-arrow {
    bottom: -$popover-arrow-outer-width;
    left: 50%;
    margin-left: -$popover-arrow-outer-width;
    border-top-width: 0;
    border-bottom-width: 0;

    &:after {
      content: " ";
      bottom: 1px;
      margin-left: -$popover-arrow-width;
      border-bottom-width: 0;

      @include themes(border-top-color, popover-arrow-color);
    }
  }

  &.right > .webui-arrow,
  &.right-top > .webui-arrow,
  &.right-bottom > .webui-arrow {
    top: 50%;
    left: -$popover-arrow-outer-width;
    margin-top: -$popover-arrow-outer-width;
    border-left-width: 0;
    border-right-width: 0;

    &:after {
      content: " ";
      left: 1px;
      bottom: -$popover-arrow-width;
      border-left-width: 0;

      @include themes(border-right-color, popover-arrow-color);
    }
  }

  &.bottom > .webui-arrow,
  &.bottom-right > .webui-arrow,
  &.bottom-left > .webui-arrow {
    top: -$popover-arrow-outer-width;
    left: 50%;
    margin-left: -$popover-arrow-outer-width;
    border-bottom-width: 0;
    border-top-width: 0;

    &:after {
      content: " ";
      top: 1px;
      margin-left: -$popover-arrow-width;
      border-top-width: 0;

      @include themes(border-bottom-color, popover-arrow-color);
    }
  }

  &.left > .webui-arrow,
  &.left-top > .webui-arrow,
  &.left-bottom > .webui-arrow {
    top: 50%;
    right: -$popover-arrow-outer-width;
    margin-top: -$popover-arrow-outer-width;
    border-right-width: 0;
    border-left-width: 0;

    &:after {
      content: " ";
      right: 1px;
      border-right-width: 0;
      bottom: -$popover-arrow-width;

      @include themes(border-left-color, popover-arrow-color);
    }
  }

  & > .webui-arrow {
    border-width: $popover-arrow-outer-width;

    &:after {
      border-width: $popover-arrow-width;
      content: "";
    }

    &,
    &:after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }
  }

  &-content {
    display: none;
  }

  .webui-popover-content {
    padding: $padding-base-vertical $padding-base-horizontal;
    overflow: auto;
    display: block;
    font-size: $font-size-base;
    line-height: $grid-unit-y * 2;
    font-weight: $font-weight-regular;
    font-family: $font-family-proxima-sbold;

    @include themes(color, color-text-default);

    @include styled-scroll-vert();
  }

  .list-group {
    @include popover-list-group();
  }

  &-inner {
    .close {
      margin: $grid-unit-y $grid-unit-y * 2 0 0;
      float: right;
      font-size: $popover-close-size;
      font-weight: bold;
      line-height: $popover-close-size;
      text-shadow: 0 1px 0 $color-white;
      text-decoration: none;
      padding: $dropdown-padding;

      @include opacity(0.2);

      @include themes(color, popover-close-color);

      &:hover,
      &:focus {
        @include opacity(0.5);
      }

      &:after {
        content: "\00D7";
        width: 0.8em;
        height: 0.8em;
        padding: 4px;
        position: relative;
      }
    }
  }

  &-user {
    margin-bottom: $popover-padding;
    padding-bottom: $popover-padding;
    display: flex;
    align-items: center;
    font-family: $font-family-base;

    @include themes-border-bottom(color-new-border);

    &-desc {
      margin-left: $popover-padding;
    }

    &-title {
      line-height: $grid-unit-y * 2.5;
      font-size: $font-size-large;

      @include themes(color, color-new-heading);
    }

    &-subtitle {
      line-height: $grid-unit-y * 2.5;
      font-size: $font-size-base;

      @include themes(color, color-new-body-light);
    }
  }

  &-title {
    padding: $grid-unit-y $grid-unit-x * 2;
    margin: 0;
    font-size: $popover-font-size;
    font-weight: bold;
    line-height: $grid-unit-y * 2;
    border-radius: ($popover-border-radius - 1) ($popover-border-radius - 1) 0 0;

    @include themes(background-color, popover-bg);
    @include themes-border-bottom(popover-inner-border-color);
  }

  &-backdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: $popover-backdrop-z-index;

    @include themes(background-color, layout-fixed-sidebar-backdrop-bg);
  }

  // Style Variations
  // -----------------------------

  &-rtl {
    direction: rtl;
    text-align: right;
  }

  &-md {
    min-width: $grid-unit-x * 20;
  }

  &-one-string {
    .webui-popover-content {
      line-height: $grid-unit-y * 2;
      padding: $padding-xs-vertical $padding-base-horizontal;
    }
  }
}