/*
 * DSDILLON_RECIPIENT_AUTOCOMPLETE_CSS_V1
 */

.dsd-recipient-autocomplete-host{
    position:relative;
    min-width:0;
}

.dsd-recipient-suggestions{
    position:absolute;
    z-index:10080;

    left:8px;
    right:8px;
    top:calc(100% - 1px);

    box-sizing:border-box;

    max-height:280px;

    overflow-x:hidden;
    overflow-y:auto;

    border:1px solid #dfe4eb;
    border-radius:0 0 12px 12px;

    background:#fff;

    box-shadow:
        0 14px 34px
        rgba(15,25,45,.16);

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.dsd-recipient-suggestions[hidden]{
    display:none !important;
}

.dsd-recipient-suggestion{
    appearance:none;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    width:100%;

    min-width:0;

    padding:9px 11px;

    border:0;
    border-bottom:1px solid #edf0f5;

    background:#fff;

    color:#202735;

    text-align:left;

    cursor:pointer;
}

.dsd-recipient-suggestion:last-child{
    border-bottom:0;
}

.dsd-recipient-suggestion:hover,
.dsd-recipient-suggestion.is-active{
    background:#f3f6fb;
}

.dsd-recipient-suggestion-main{
    display:flex;
    flex-direction:column;

    min-width:0;

    gap:2px;
}

.dsd-recipient-suggestion-main strong{
    overflow:hidden;

    color:#1f2937;

    font-size:.75rem;
    font-weight:750;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.dsd-recipient-suggestion-main > span{
    overflow:hidden;

    color:#505a69;

    font-size:.69rem;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.dsd-recipient-suggestion small{
    flex:0 0 auto;

    max-width:42%;

    overflow:hidden;

    color:#8a93a0;

    font-size:.58rem;
    font-weight:650;

    text-overflow:ellipsis;
    white-space:nowrap;
}


@media (max-width:580px){

    .dsd-recipient-autocomplete-host{
        /*
         * Allows the results panel to sit cleanly under each
         * recipient field while remaining inside the bounded
         * composer introduced by the mobile stability layer.
         */
        overflow:visible !important;
    }

    .dsd-recipient-suggestions{
        left:4px;
        right:4px;

        max-height:min(280px,38dvh);

        border-radius:0 0 14px 14px;

        box-shadow:
            0 12px 30px
            rgba(15,25,45,.18);

        touch-action:pan-y;
    }

    .dsd-recipient-suggestion{
        min-height:48px;

        padding:
            8px
            10px;

        touch-action:manipulation;
    }

    .dsd-recipient-suggestion-main strong{
        font-size:.78rem;
    }

    .dsd-recipient-suggestion-main > span{
        font-size:.7rem;
    }

    .dsd-recipient-suggestion small{
        max-width:36%;
    }
}


@media (max-width:360px){

    .dsd-recipient-suggestion{
        align-items:flex-start;
        flex-direction:column;

        gap:4px;
    }

    .dsd-recipient-suggestion small{
        max-width:100%;
    }
}