@import '../settings/colors';
@import '../settings/core';
@import '../settings/fonts';
@import '../settings/popovers';
@import '../settings/z-index';
@import '../tools/mixins/reset-text';
@import '../tools/mixins/vendor-prefixes';
@import 'event-overlay';

@include exports('cui-popover') {
  .#{$prefix}-popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: $zindex-popover;
    display: none;
    max-width: $popover__max-width;
    padding: 0;
    font-size: $font-size-base;
    background-color: $popover__background;
    border: 1px solid $popover__border-color--fallback;
    border: 1px solid $popover__border-color;
    border-width: $popover-arrow__width;
    border-radius: $border-radius-large;
    content: '';
    background-clip: padding-box;

    @include reset-text;
    @include box-shadow(none);

    &.top {
      margin-top: -$popover-displacement;
    }

    &.right {
      margin-left: $popover-displacement;

      > .arrow {
        top: 50%;
        left: -$popover-outer-arrow__width;
        margin-top: -$popover-outer-arrow__width;
        border-right-color: $popover-outer-arrow__color--fallback; // IE8 fallback
        border-right-color: $popover-outer-arrow__color;
        border-left-width: 0;

        &:after {
          bottom: -$popover-arrow__width;
          left: 1px;
          border-right-color: $popover-arrow__color;
          border-left-width: 0;
          content: ' ';
        }
      }
    }

    &.bottom {
      margin-top: $popover-displacement;

      > .arrow {
        top: -$popover-outer-arrow__width;
        left: 50%;
        margin-left: -$popover-outer-arrow__width;
        border-bottom-color: $popover-outer-arrow__color--fallback; // IE8 fallback
        border-bottom-color: $popover-outer-arrow__color;
        border-top-width: 0;

        &:after {
          top: 1px;
          margin-left: -$popover-arrow__width;
          border-bottom-color: $popover-arrow__color;
          border-top-width: 0;
          content: ' ';
        }
      }
    }

    &.left {
      margin-left: -$popover-displacement;

      > .arrow {
        top: 50%;
        right: -$popover-outer-arrow__width;
        margin-top: -$popover-outer-arrow__width;
        border-left-color: $popover-outer-arrow__color--fallback; // IE8 fallback
        border-left-color: $popover-outer-arrow__color;
        border-right-width: 0;

        &:after {
          right: 1px;
          bottom: -$popover-arrow__width;
          border-left-color: $popover-arrow__color;
          border-right-width: 0;
          content: ' ';
        }
      }
    }

    &-title {
      padding: 8px 14px;
      margin: 0;
      font-family: $brand-font-extra-light;
      font-size: 16px;
      background-color: $popover-title__background;
      border-bottom: 1px solid $gray-3;
      border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
    }

    &-content {
      padding: 8px 14px;
      font-family: $brand-font-regular;
      font-size: 13px;
    }

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

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

    &.top > .arrow {
      bottom: -$popover-outer-arrow__width;
      left: 50%;
      margin-left: -$popover-outer-arrow__width;
      border-top-color: $popover-outer-arrow__color--fallback; // IE8 fallback
      border-top-color: $popover-outer-arrow__color;
      border-bottom-width: 0;

      &:after {
        bottom: 1px;
        margin-left: -$popover-arrow__width;
        border-top-color: $popover-arrow__color;
        border-bottom-width: 0;
        content: ' ';
      }
    }
  }
}


/*
* @component popover
* @section default
* @html
<div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--bottom">
  <div class="cui-event-overlay__arrow" style="left: 345px; top: 108px;"></div>
  <div class="cui-event-overlay__children" style="overflow: auto; top: 108px; left: 309px;">
    <div class="cui-list cui-list--vertical cui-list" role="list">
      <div aria-current="true" class="cui-list-item" id="cui-list-141__list-item" role="listItem" tabindex="0">
        <div class="cui-list-item__left">
          <i class="cui-icon icon icon-edit_20"></i>
        </div>
        <div class="cui-list-item__center">Edit space settings</div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-141__list-item" role="listItem" tabindex="-1">
        <div class="cui-list-item__left">
          <i class="cui-icon" name="favorite_20"></i>
        </div>
        <div class="cui-list-item__center">Add to favorites</div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-141__list-item" role="listItem" tabindex="-1">
        <div class="cui-list-item__left">
          <i class="cui-icon" name="alert_20"></i>
        </div>
        <div class="cui-list-item__center">Notifications</div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-141__list-item" role="listItem" tabindex="-1">
        <div class="cui-list-item__left">
          <i class="cui-icon" name="accessories_20"></i>
        </div>
        <div class="cui-list-item__center">Add Integrations &amp; Bots</div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-141__list-item" role="listItem" tabindex="-1">
        <div class="cui-list-item__left">
          <i class="cui-icon" name="stored-info_20"></i>
        </div>
        <div class="cui-list-item__center">View space policy</div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-141__list-item" role="listItem" tabindex="-1">
        <div class="cui-list-item__left">
          <i class="cui-icon" name="archive_20"></i>
        </div>
        <div class="cui-list-item__center">Archive space</div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-141__list-item" role="listItem" tabindex="-1">
        <div class="cui-list-item__left">
          <i class="cui-icon" name="cancel_20"></i>
        </div>
        <div class="cui-list-item__center">Remove space from team</div>
      </div>
      <div aria-current="false" class="cui-list-item" id="cui-list-141__list-item" role="listItem" tabindex="-1">
        <div class="cui-list-item__left">
          <i class="cui-icon" name="exit-room_20"></i>
        </div>
        <div class="cui-list-item__center">Leave space</div>
      </div>
    </div>
  </div>
</div>
*/


/**
* @component popover
* @section delay
* @html
<div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--bottom">
  <div class="cui-event-overlay__arrow" style="left: 325px; top: 243px;"></div>
  <div class="cui-event-overlay__children" style="overflow: auto; top: 243px; left: 285px;">
    <span style="padding: 10px;">Delayed</span>
  </div>
</div>
*/


/**
* @component popover
* @section direction
* @html
<div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--right">
  <div class="cui-event-overlay__arrow" style="left: 387.266px; top: 225px;"></div>
  <div class="cui-event-overlay__children" style="overflow: auto; top: 201.5px; left: 387.266px;">
    <span style="padding: 10px;">right-center</span>
  </div>
</div>
*/


/**
* @component popover
* @section arrow
* @html
<div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--right">
  <div class="cui-event-overlay__arrow" style="left: 405.297px; top: 225px;"></div>
  <div class="cui-event-overlay__children" style="overflow: auto; top: 201.5px; left: 405.297px;">
    <span style="padding: 10px;">Arrow</span>
  </div>
</div>
*/

/**
* @component popover
* @section offset
* @html
<div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--top">
  <div class="cui-event-overlay__arrow" style="left: 323.914px; top: 187px;"></div>
  <div class="cui-event-overlay__children" style="overflow: auto; top: 140px; left: 291.414px;">
    <span style="padding: 10px;">Offset</span>
  </div>
</div>
*/


/**
* @component popover
* @section contained
* @html
<div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--bottom">
  <div class="cui-event-overlay__arrow" style="left: 321px; top: 355px;"></div>
  <div class="cui-event-overlay__children" style="overflow: auto; top: 355px; left: 229px; bottom: 0px;">
    <span style="height: 3000px;">Popover(height: 3000px)</span>
  </div>
</div>
*/


/**
* @component popover
* @section overflow
* @html
<div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--bottom">
  <div class="cui-event-overlay__arrow" style="left: 448px; top: 180px; visibility: visible;"></div>
  <div class="cui-event-overlay__children" style="overflow: auto; top: 180px; left: 356px; bottom: -85px; max-height: 500px;">
    <span style="height: 3000px;">Popover(height: 3000px)</span>
  </div>
</div>
*/