/*
Email search

Theses are styles used in our email search component for the send email modal for reports.

Markup:
<div style="width:100%; display: inline-block; height: 300px;"">
    <span style="display: inline-block; float: left; margin-top: 22px; margin-left: 20px;">To:</span>
    <div class="email-search__container">
        <ul class="email-search__list pull-left">
            <li class="email-search__recipient pull-left">
                <span title="mary@buildium.com">Mary Peterson</span>
                <button type="button" class="svgicon--btn email-search__remove-button">
                    <span class="screen-reader-only">remove email</span>
                </button>
            </li>
            <li class="email-search__recipient pull-left">
                <span title="john@buildium.com">John Smith</span>
                <button type="button" class="svgicon--btn email-search__remove-button">
                    <span class="screen-reader-only">remove email</span>
                </button>
            </li>
            <li class="email-search__recipient email-search__recipient--invalid pull-left">
                <span title="invalid@email">invalid@email</span>
                <button type="button" class="svgicon--btn email-search__remove-button">
                    <span class="screen-reader-only">remove email</span>
                </button>
            </li>
            <li class="email-search__search-input-container pull-left">
                <textarea rows="1"class="email-search__search-input">ale
                </textarea>
                <span class="email-search__hidden-input"></span>
                </li>
            </ul>
        </div>
        <div id="emailSearchResults" class="email-search__results-container" style="margin-top: 55px; margin-left: 100px;">
            <ul style="list-style: none; padding: 0; margin: 0;">
                <li class="email-search__search-result">
                    <div>
                        <span class="email-search__search-result-name"> <b>Ale</b>xander Petrov</span>
                        <span class="email-search__search-result-user-type">Maintenance Worker</span>
                    </div>
                    <div>
                        <span class="email-search__search-result-email">alexander@buildium.com</span>
                    </div>
                    <div>
                        <span class="email-search__search-result-description"></span>
                    </div>
                </li>
                <li class="email-search__search-result">
                    <div>
                        <span class="email-search__search-result-name"> B<b>ale</b>n Korogdova</span>
                        <span class="email-search__search-result-user-type">Rental Owner</span>
                    </div>
                    <div>
                        <span class="email-search__search-result-email">balen@greenproperties.com</span>
                    </div>
                    <div>
                        <span class="email-search__search-result-description">123 Cedar Lane - Unit 2</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Styleguide 2.23
*/

@email-search-result-hover-color: @theme-grey2;
@email-search-input-container-color: @theme-grey12;
@email-search-results-container-border-color: @theme-grey4;
@email-search-result-active-color: @theme-grey2;
@email-search-result-name-color: @theme-blue1;
@email-search-result-user-type-color: @theme-grey5;
@email-search-recipient-border-color: @theme-grey10;
@email-search-recipient-hover-border-color: @theme-grey12;
@email-search-invalid-recipient-color: @theme-red3;
@email-search-invalid-recipient-background-color: @theme-red1;
@email-search-invalid-recipient-border-color: @theme-red5;
@email-search-warning-recipient-color: @theme-yellow4;
@email-search-warning-recipient-background-color: @theme-yellow1;
@email-search-warning-recipient-border-color: @theme-yellow5;

.email-search__container {
    background: #FFFFFF;
    padding: 2px 5px;
}

.email-search__list {
    display: inline-block;
}

.email-search__popover {
    bd-popover .quick-menu-icon {
        top: 10px;
        right: 0;
    }

    .popover__body {
        margin-top: 11px;
    }
}

.email-search__search-input {
    display: list-item;
    float: left;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin-top: 5px;
    border: none;
    resize: none;
    outline: none;
}

.email-search__search-input-container {
    display: inline-block;
    margin: 8px 2px;
    padding: 0;
    background: #FFFFFF;
    border: none;
    border-radius: @border-radius-default;
    height: 30px;
    cursor: default;
    position: relative;
    color: @email-search-input-container-color;

    &:hover {
        background: #FFFFFF;
        border-color: none;
        cursor: default;
    }
}

.email-search__hidden-input {
    display: list-item;
    padding: 0 2px 0 2px;
    min-width: 100px;
    height: 1px;
    visibility: hidden;
}

.email-search__results-container {
    position: absolute;
    width: 400px;
    background: #FFFFFF;
    border: 1px solid @email-search-results-container-border-color;
    margin: -1px 0 0 15px;
    border-radius: @border-radius-default;
    box-shadow: @popover-container-box-shadow;
    z-index: @z-index-modal-dropdown;
}

.email-search__search-result {
    cursor: pointer;
    background: #FFFFFF;
    padding: 10px;
    word-wrap: break-word;

    &:hover {
        background: @email-search-result-hover-color;
    }

    &:first-child {
        border-top-right-radius: @border-radius-default;
        border-top-left-radius: @border-radius-default;
    }

    &:last-child {
        border-bottom-right-radius: @border-radius-default;
        border-bottom-left-radius: @border-radius-default;
    }
}

.email-search__search-result--active {
    background: @email-search-result-active-color;
}

.email-search__search-result-name {
    color: @email-search-result-name-color;
}

.email-search__search-result-user-type {
    color: @email-search-result-user-type-color;
    font-style: italic;

    &:before {
        padding-right: 5px;
        padding-left: 2px;
        content: '\2022';
    }
}

.email-search__recipient {
    display: inline-block;
    margin: 8px 2px 0 2px;
    padding: 5px;
    background: #FFFFFF;
    border: 1px solid @email-search-recipient-border-color;
    border-radius: @border-radius-default;
    cursor: pointer;
    position: relative;
    color: @color-input;

    &:hover {
        border: 1px solid @email-search-recipient-hover-border-color;

        .email-search__remove-button {
            background-image: url("@{icons}delete-grey-hover.svg");
        }
    }
}

.email-search__recipient--invalid {
    color: @email-search-invalid-recipient-color;
    background-color: @email-search-invalid-recipient-background-color;
    border-color: @email-search-invalid-recipient-border-color;

    &:hover {
        border-color: @email-search-invalid-recipient-border-color;
    }
}

.email-search__recipient--warning {
    color: @email-search-warning-recipient-color;
    background-color: @email-search-warning-recipient-background-color;
    border-color: @email-search-warning-recipient-border-color;

    &:hover {
        border-color: @email-search-warning-recipient-border-color;
    }
}

.email-search__remove-button {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 8px;
    height: 10px;
    width: 9px;
    margin-left: 10px;
    cursor: pointer;
}