/*
Grid multi-select filters

Component that allows a user to choose multiple items to filter

Markup:
<div class="grid-filter-multiselect data-grid-filters__facet data-grid-filters__facet--dropdown data-grid-filters__facet--multi-select">
    <a class="grid-filter-multiselect__trigger dropdown__control">
        <span class="dropdown__arrow icon-dropdown-arrow"></span>
        <span>(3) New, Undecided, Approved</span>
    </a>
    <div class="dropdown__menu-container" style="display: block;">
        <ul style="padding: 0; margin: 0;" role="menu">
            <li class="grid-filter-multiselect__option" role="menuitemcheckbox">
                <label for="grid-filter-multiselect--1" class="grid-filter-multiselect__option-label">
                    <input type="checkbox" id="grid-filter-multiselect--1" class="form-element__checkbox" checked>
                    <span class="form-element__checkbox-label form-element__checkbox-label--multi-select">New</span>
                </label>
            </li>
            <li class="grid-filter-multiselect__option" role="menuitemcheckbox">
                <label for="grid-filter-multiselect--2" class="grid-filter-multiselect__option-label">
                    <input type="checkbox" id="grid-filter-multiselect--2" class="form-element__checkbox">
                    <span class="form-element__checkbox-label form-element__checkbox-label--multi-select">Rejected</span>
                </label>
            </li>
            <li class="grid-filter-multiselect__option" role="menuitemcheckbox">
                <label for="grid-filter-multiselect--3" class="grid-filter-multiselect__option-label">
                    <input type="checkbox" id="grid-filter-multiselect--3" class="form-element__checkbox" checked>
                    <span class="form-element__checkbox-label form-element__checkbox-label--multi-select">Undecided</span>
                </label>
            </li>
            <li class="grid-filter-multiselect__option" role="menuitemcheckbox">
                <label for="grid-filter-multiselect--4" class="grid-filter-multiselect__option-label">
                    <input type="checkbox" id="grid-filter-multiselect--4" class="form-element__checkbox" checked>
                    <span class="form-element__checkbox-label form-element__checkbox-label--multi-select">Approved</span>
                </label>
            </li>
            <li class="grid-filter-multiselect__option" role="menuitemcheckbox">
                <label for="grid-filter-multiselect--5" class="grid-filter-multiselect__option-label">
                    <input type="checkbox" id="grid-filter-multiselect--5" class="form-element__checkbox">
                    <span class="form-element__checkbox-label form-element__checkbox-label--multi-select">Deferred</span>
                </label>
            </li>
            <li class="grid-filter-multiselect__option" role="menuitemcheckbox">
                <label for="grid-filter-multiselect--6" class="grid-filter-multiselect__option-label">
                    <input type="checkbox" id="grid-filter-multiselect--6" class="form-element__checkbox">
                    <span class="form-element__checkbox-label form-element__checkbox-label--multi-select">Cancelled</span>
                </label>
            </li>
        </ul>
    </div>
</div>
<div style="display: block; width: 100%; height: 350px;"></div>

Name: gridFilterMultiSelect

Styleguide 2.14.2
*/

@grid-filter-multiselect-width: 240px;

.grid-filter-multiselect {}

.grid-filter-multiselect__trigger {
    display: block;
    position: relative;
    min-width: @grid-filter-multiselect-width;
}

.grid-filter-multiselect__option {
    padding: 0 20px;
    list-style: none;

    &:hover {
        background-color: @color-popover-link-bg;
    }
}

.grid-filter-multiselect__option-label {
    line-height: normal;
}