.opui-search-input {
    position: relative;

    .opui-search-input-options-loading {
        font-size: 13px;
        color: $color--opui-gray400;
        margin: 0;
        padding: 6px 15px 10px 15px;
    }

    .opui-input-group-text {
        background: $color--opui-white;

        a {
            color: $color--opui-gray500;
        }
    }
}

.opui-search-input-options {
    position: absolute;
    top: 52px;
    right: 0;
    min-width: 360px;
    background: $color--opui-white;
    border: 1px solid $color--opui-gray300;
    border-radius: 3px;
    padding: 15px 0 0 0;
    z-index: 999;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;


    > ul {
        max-height: 280px;
        overflow-y: auto;
    }

    ul, li {
        padding: 0;
        margin: 0;
    }

    .opui-form-group {
        padding: 0 15px;
    }

    .opui-search-input-option {
        display: block;
        font-size: 13px;
        color: $color--opui-gray500;
        padding: 12px 15px;

        &:hover {
            text-decoration: none;
            background: $color--opui-gray100;
        }
    }

    .opui-search-input-group-toggle {
        position: relative;

        .opui-search-input-group-arrow {
            position: absolute;
            top: 10px;
            right: 15px;
            padding: 0;
            margin: 0;

            .opui-fa-sort-up {
                position: relative;
                top: 4px;
            }
        }
    }

    .opui-search-input-group ul .opui-search-input-option {
        padding-left: 25px;
    }

    .opui-search-input-group > a {
        display: block;
        font-size: 14px;
        text-decoration: none;
        color: $color--opui-gray500;
        background: $color--opui-gray200;
        padding: 14px 15px;

        &:hover {
            color: $color--opui-gray600;
        }
    }
}