ux-popover {
  .popover {
    position: static;

    > .arrow {
      border-width: 8px;

      &:after {
        content: ' ';
      }
    }

    &.bottom {
      margin-top: 8px;
      position: relative;

      > .arrow {
        left: 50%;
        border-top-width: 0;
        border-bottom-color: rgba(0, 0, 0, 0.25);
        top: -8px;
        margin-left: 0;
        transform: translateX(-50%);

        &:after {
          margin-left: 0;
          top: 1px;
          border-top-width: 0;
          border-bottom-color: #fff;
          transform: translateX(-50%);
        }
      }
    }

    &.top {
      margin-top: -8px;
      transform: translateY(-8px);

      > .arrow {
        left: 50%;
        border-bottom-width: 0;
        border-top-color: rgba(0, 0, 0, 0.25);
        bottom: -8px;
        margin-left: 0;
        transform: translateX(-50%);

        &:after {
          margin-left: 0;
          bottom: 1px;
          border-bottom-width: 0;
          border-top-color: #fff;
          transform: translateX(-50%);
        }
      }
    }

    &.top,
    &.bottom {
      &.popover-align-start > .arrow {
        left: 23px;
      }

      &.popover-align-end > .arrow {
        left: auto;
        right: 0;
      }
    }

    &.left {
      transform: translateX(-8px);

      > .arrow {
        right: -8px;
      }
    }

    &.right {
      margin-left: 8px;
      transform: translateX(0);

      > .arrow {
        left: -8px;
      }
    }

    &.left,
    &.right {
      > .arrow {
        margin-top: 0;
        transform: translateY(-50%);
      }

      &.popover-align-start > .arrow {
        top: 15px;
      }

      &.popover-align-end > .arrow {
        top: auto;
        bottom: -5px;
      }
    }
  }

  .ux-popover-no-padding {
    padding: 0;

    .popover-content {
      padding: 0;
    }
  }
}