@import 'settings';
@import '../../tools/mixins/reset-text';

@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: '';
    box-shadow: none;
    background-clip: padding-box;

    @include reset-text;

    &.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 $cui-gray-50;
      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: ' ';
      }
    }
  }
}