.tb-results-filter__dropdown {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    visibility: hidden;
    overflow: hidden;
    height: 0;
    padding: $spacing-base;
    width: 0;
    background: theme('colors.white');

    [aria-expanded=true] + & {
        visibility: visible;
        overflow: auto;
        z-index: theme('zIndex.modal');
        margin-top: $spacing-8;
        height: 100%;
        width: 100%;
    }

    .tb-input-wrapper {
        margin: 0 0 $spacing-5;
    }

    /* stylelint-disable */
    // Range Slider in Filter
    .noUi-target {
        margin: 0 0 $spacing-5;
    }
    /* stylelint-enable */

    @media screen and (min-width: $mediaquery-lg) {
        position: absolute;
        top: 100%; // offset is 8px from filter button
        right: auto;
        border: 1px solid theme('colors.gray.200');
        padding: $spacing-5 0 0;
        border-radius: $radius-base;
        box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .16);
        transition: top $transition-base;

        [aria-expanded=true] + & {
            top: calc(100% + .5rem); // offset is 8px from filter button
            height: auto;
            margin-top: 0;
            width: 312px;
            max-height: 35.5rem; // 568px per Design
        }

        .tb-input-wrapper {
            margin: 0 $spacing-base $spacing-5;
        }

        /* stylelint-disable */
        // Range Slider in Filter
        .noUi-target {
            margin: 0 $spacing-base $spacing-5;
        }
        /* stylelint-enable */
    }
}

.tb-results-filter__dropdown-wrapper {
    padding-bottom: 8.6875rem; // height of fixed bottom and filter button

    @media screen and (min-width: $mediaquery-lg) {
        padding-bottom: 0;
    }
}

.tb-results-filter__backdrop {
    display: none;
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

@media screen and (min-width: $mediaquery-lg) {
    .tb-results-filter__dropdown.is-target + .tb-results-filter__backdrop {
        display: block;
    }
}
