

.Polaris-Filters-ConnectedFilterControl__Item {
    position: relative;
    z-index: 10;
}

.Polaris-Filters-ConnectedFilterControl__Item--focused {
    z-index: 20;
}

.Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer {
    position: absolute;
    display: flex;
    width: 100%;
    height: 0;
    visibility: hidden;
    >* {
        flex-shrink: 0;
    }
}

.Polaris-Filters-ConnectedFilterControl {
    display: flex;
    flex-grow: 1;

    .Polaris-Filters-ConnectedFilterControl__CenterContainer {
        flex: 1 1 auto;
        min-width: 10rem;
    }
}

.Polaris-Filters-ConnectedFilterControl.Polaris-Filters-ConnectedFilterControl--right {
    .Polaris-Filters-ConnectedFilterControl__CenterContainer {
        * {
            //border-top-right-radius: 0 !important;
            //border-bottom-right-radius: 0 !important;
        }
    }
}
.Polaris-Filters-ConnectedFilterControl {
    .Polaris-Filters-ConnectedFilterControl__CenterContainer + .Polaris-Filters-ConnectedFilterControl__RightContainer {
        margin-left: .8rem;
    }
}
.Polaris-Filters-ConnectedFilterControl__RightContainer {
    display: flex;

    .Polaris-Filters-ConnectedFilterControl__Item {
        >* {
            margin-left: -1px;
            border-radius: 0 !important;
            >* {
                margin-left: -1px;
                border-radius: 0 !important;
            }
        }

        &:first-child {
            >* {
                border-top-left-radius: 4px !important;
                border-bottom-left-radius: 4px !important;
                >* {
                    border-top-left-radius: 4px !important;
                    border-bottom-left-radius: 4px !important;
                }
            }
        }

        &:last-child {
            >* {
                border-top-right-radius: 4px !important;
                border-bottom-right-radius: 4px !important;
                >* {
                    border-top-right-radius: 4px !important;
                    border-bottom-right-radius: 4px !important;
                }
            }
        }
        flex-shrink: 0;
    }
}

.Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer {
    * {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        flex-shrink: 0;
        white-space: nowrap;
        >div {
            margin-left: -1px;
        }
    }
}

.Polaris-Filters-ConnectedFilterControl__Wrapper {
    display: flex;
}

.Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer {
    flex-grow: 0;
}

.Polaris-Filters {
    z-index: 11;
    position: relative;
}

.Polaris-Filters__FiltersContainer {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.Polaris-Filters__FiltersContainerHeader {
    top: 0;
    width: 100%;
    padding: 1.6rem 2rem;
    border-bottom: $filters-containerheader-border;
    height: 5.6rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Polaris-Filters__FiltersDesktopContainerContent {
    width: 100%;
    height: calc(100% - 12.6rem);
}

.Polaris-Filters__FiltersMobileContainerContent {
    width: 100%;
    height: calc(100% - 5.6rem);
}

.Polaris-Filters__FiltersContainerFooter {
    position: absolute;
    bottom: 0;
    border-top: $filters-containerheader-border;
    width: 100%;
    padding: 1.4rem 1.6rem;
    height: 7rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Polaris-Filters__FiltersMobileContainerFooter {
    width: 100%;
    padding: 1.4rem 1.6rem;
    height: 7rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Polaris-Filters__EmptyFooterState {
    border-top: $filters-containerheader-border;
    padding-top: 1.4rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.Polaris-Filters__FilterTriggerContainer {
    position: relative;
}

.Polaris-Filters__FilterTrigger {
    width: 100%;
    padding: 1.4rem 2rem;
    border: none;
    background: none;
    color: $filters-trigger-color;
    border-radius: 0.4rem;
    &:hover {
        cursor: pointer;
        background-color: $filters-trigger-hover-bgcolor;
        outline: 0.1rem solid transparent;
    }

    &:focus {
        outline: none;
        box-shadow: $filters-trigger-focus-box-shadow;
        &:not(:active)::after{
            box-shadow: $filters-trigger-focus-after-box-shadow;
            outline: 0.1rem solid transparent;
        }
    }
}

.Polaris-Filters__FilterTriggerTitle {
    font-size: $filters-trigger-title-font-size;
    font-weight: $filters-trigger-title-font-weight;
}

.Polaris-Filters__AppliedFilterBadgeContainer {
    padding-top: .4rem;
    display: flex;
}

.Polaris-Filters--open {
    .Polaris-Filters__AppliedFilterBadgeContainer {
        display: none;
    }

    &:after {
        content: "";
        position: relative;
        left: 1.6rem;
        width: calc(100% - 3.2rem);
        height: .1rem;
        background-color: $filters-open-after-bgcolor;
        display: block;
        bottom: 0;
    }

    &:before {
        content: "";
        position: relative;
        left: 1.6rem;
        width: calc(100% - 3.2rem);
        height: .1rem;
        background-color: $filters-open-before-bgcolor;
        display: block;
        top: 0;
    }
}

.Polaris-Filters__FilterTriggerLabelContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Polaris-Filters--open.Polaris-Filters--first {
    &:after {
        content: "";
        bottom: 0;
        position: relative;
        left: 1.6rem;
        width: calc(100% - 3.2rem);
        height: .1rem;
        background-color: $filters-open-first-after-bgcolor;
        display: block;
    }

    &:before {
        display: none;
    }
}

.Polaris-Filters--open~.Polaris-Filters--open {
    &:before {
        display: none;
    }
}

.Polaris-Filters--open.Polaris-Filters--last {
    &:before {
        content: "";
        top: 0;
        position: relative;
        left: 1.6rem;
        width: calc(100% - 3.2rem);
        height: .1rem;
        background-color: $filters-open-last-before-bgcolor;
        display: block;
    }

    &:after {
        display: none;
    }
}

.Polaris-Filters--open+.Polaris-Filters--last {
    &:before {
        display: none;
    }
}

.Polaris-Filters__FilterNodeContainer {
    padding: .8rem 2rem 2rem;
}

.Polaris-Filters__SearchIcon {
    fill: currentColor;
}

.Polaris-Filters__Backdrop {
    position: fixed;
    z-index: 518;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    opacity: 0;
}

.Polaris-Filters__HelpText {
    margin-top: 10px;
}

.Polaris-Filters__TagsContainer {
    display: flex;
    padding-top: .8rem;
    flex-wrap: wrap;

    >* {
        margin-right: .8rem;
        margin-bottom: .8rem;
    }
}

