/*
Popovers

Popover menus are used to build the global navigation system, but can also be used when we want to reveal a custom menu and a standard Dropdown won't do.

Markup:
<div style="position: relative; height: 200px;">
    <div class="popover__container popover__container--settings-menu">
        <div class="popover__body">
            <ul class="popover__menu" role="menu">
                <li class="popover__item" role="menuitem">
                    <a class="popover__item-link">Properties</a>
                </li>
                <li class="popover__item" role="menuitem">
                    <a class="popover__item-link">Rent roll</a>
                </li>
                <li class="popover__item" role="menuitem">
                    <a class="popover__item-link">Tenants</a>
                </li>
                <li class="popover__item" role="menuitem">
                    <a class="popover__item-link popover__item-link--disabled">Rental owners</a>
                </li>
                <li class="popover__item" role="menuitem">
                    <a class="popover__item-link">Outstanding balances</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Name: popover

Styleguide 2.13
*/
.popover__container {
    z-index: @z-index-popover;
    position: absolute;
    min-width: 170px;
    max-width: 303px;
}

// This is needed for the ASPX version of popover that use jQuery show/hide
.popover__container--hidden {
    display: none;
}

.popover__container--settings-menu {
    left: 12px;
    width: 190px;
}

.popover__container--settings-menu-with-moving-soon {
    width: 208px;
}

.popover__container--profile-photo-menu {
    right: -12px;
    width: 190px;
}

.popover__container--help-menu {
    width: 255px;
}

.popover__container--medium {
    width: 300px;
}

.popover__container--large {
    width: 600px;
    .popover__container--no-max-width;
}

.popover__container--max-width-450 {
    max-width: 450px;
}

.popover__container--right {
    right: 0;
}

.popover__container--right-13 {
    right: 13px;
}

.popover__container--no-max-width {
    max-width: none;
}

.popover__container--lowered {
    margin-top: 3px;
}

.popover__container--bumped-left {
    margin-left: -10px;
}

.popover__container--nav {
    margin-left: 10px;
    max-width: none;
}

.popover__container--report-downloader {
    right: 3px;
}

.popover__container--filter-menu {
    left: 8px;
}

.popover__body {
    margin-left: -12px;
    margin-top: 1px;
    padding: 0;
    text-align: left;
    background-color: #FFFFFF;
    border-radius: @border-radius-default;
    border: 1px solid @color-border-popover;
    box-shadow: @popover-container-box-shadow;
}

.popover__body--help-support-menu {
    margin-left: 0px;
}

.popover__body--radius {
    border-radius: @border-radius-default;
}

.popover__body--padding-10 {
    padding: 10px;
}

//TODO Remove this and all uses of it after VisualRefreshRound2 goes live
.popover__pointer {
    display: none;
}

.popover__link:focus {
    outline: none;
    box-shadow: none;
    text-decoration: none;
}

.popover__link--header {
    font-size: 14px;
    color: rgba(255,255,255,0.35);
    .text-semibold;
}

.popover__link--header:hover,
.popover__link--header:focus {
    text-decoration: none;
}

.popover__link--arrow {
    position: relative;

    &:after {
        content: ' ';
        display: block;
        position: absolute;
        top: 50%;
        right: -17px;
        margin-top: -2px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 4px 0 4px;
        border-color: @color-border-popover-link-arrow transparent transparent transparent;
    }
}

.popover__menu {
    margin: 0;
    padding: 0;
}

.popover__item {
    list-style: none;
}

.popover__item--remove-padding {
    padding: 0px !important;
}
// This nesting is required to make sure the hover background doesn't extend pas tthe border-radius
.popover__item:first-child {
    .popover__item-link:hover {
        border-radius: @border-radius-default @border-radius-default 0 0;
    }
}

.popover__item:last-child {
    .popover__item-link:hover {
        border-radius: 0 0 @border-radius-default @border-radius-default;
    }
}

.popover__item--has-divider {
    border-top: 1px solid @color-popover-divider;
}

.popover__item--has-divider-bottom {
    border-bottom: 1px solid @color-popover-divider;
}

.popover__item--moving-soon-text,
.popover__item--new-text {
    .text-bold;
    color: @color-buildium-green;
}

.popover__item-link {
    display: block;
    padding: 9px 20px;
    cursor: pointer;
    border-color: transparent;
    border-style: solid;
    border-width: 1px 0;
    box-sizing: border-box;
    .text-semibold;
    line-height: 16px;
    color: @color-popover-link;
    font-size: @font-size-base;
    text-decoration: none;

    &:active,
    &:visited {
        color: @color-popover-link;
    }

    &:hover,
    &:focus{
        color: @color-popover-link;
        background-color: @color-popover-link-bg;
        text-decoration: none;
    }
}

.popover__item-link--signout {
    height: 40px;
    box-sizing: border-box;
    color: @sign-out-link;
    text-align: center;
    .text-semibold;
    text-shadow: none !important;

    &:active,
    &:focus,
    &:hover,
    &:visited {
        color: @sign-out-link;
    }
}

.popover__item-link--icon {
    padding-left: 27px;
}

.popover__item-link--icon-right {
    padding-right: 40px;
}

.popover__item-link--filter-icon {
    background-position: 90% center;
}

.popover__item-link--alternate {
    padding-left: 8px;
    color: @color-link-default;

    &:active,
    &:visited {
        color: @color-link-default;
    }
}

.popover__item-link--disabled {
    color: @disabled-font-color !important;
    pointer-events: none;
}

.popover__moved-item-header {
    padding: 8px 20px;
    border-top: 1px solid @theme-grey4;
    font-weight: bold;
    background-color: @color-bg-moved-item;
}

.popover__moved-item {
    padding: 8px 20px;
    background-color: @color-bg-moved-item;
    color: @theme-grey6;

    &:last-child {
        padding-bottom: 10px;
    }
}

.popover__item-separator {
    color: @theme-grey3;
    padding-left: 5px;
}

.popover__item-divider {
    height: 5px;
    margin: 5px 10px 0;
    border-top: 1px solid @color-popover-divider;
}

.popover__child-item {
    height: 37px;
    padding: 3px 20px;
    .text-semibold;
    line-height: 33px;
    color: @color-popover-link;
    font-size: @font-size-base;
}

.popover__group {
    border-top: 1px solid @color-popover-divider;

    &:first-child {
        border-top: none;
    }
}

.popover__group-title {
    padding: 10px 10px 2px 20px;
    font-size: @font-size--11;
    color: @color-popover-link;
    .text-semibold;
}

.popover__shortcuts-header {
    font-size: @font-size--13;
    .text-bold;
    padding: 10px 0 10px 20px;
    border-bottom: 1px solid @color-popover-divider;
}