@layer addon {

    .templateFilter {
        .filters {
            display: flex;
            background-color: var(--color4);
            padding: var(--button-padding);
            gap: var(--gutter);
            border-radius: var(--border-radius);
            .filterSearch,
            .filterCategory {
                width: 100%;
                fieldset {
                    background-color: transparent;
                    padding: 0;
                    width: 100%;
                }
            }
            .filterSearch {
                fieldset {
                    legend {
                        display: none;
                    }
                    button {
                        svg {
                            color: var(--color4);
                        }
                    }
                }
                .locationFieldset, .select {
                    display: none;
                }
            }
            .filterCategory {
                fieldset {
                    position: relative;
                    legend {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        
                        background-color: var(--color-light);
                        padding: var(--button-padding);
                        height: 100%;
                        @media (max-width: 56em) {
                            height: 55px;
                        }
                        @media (--max-fablet) {
                            height: 55px;
                        }
                        z-index: 999;
    
                        color: var(--font-color);
                        font-size: var(--xs-fontsize);
                        line-height: var(--xs-lineheight);
                        font-weight: 600;
                        border-radius: var(--border-radius);
                        &:after {
                            font-family: var(--symbol);
                            font-size: var(--symbol-size);
                            pointer-events: none;
                            content: "\e313";
                            position: relative;
                        }
                    }
                    .multiSelect {
                        @media (max-width: 56em) {
                            top: 39px;
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0;
                            justify-content: flex-start;
                            background-color: var(--color-light);
                            overflow-x: hidden;
                            overflow-y: scroll;
                            padding-top: calc(var(--padding) * 1.5);
                            border-radius: 0 0 var(--border-radius) var(--border-radius);
                            border: 1px solid var(--color1);
                            position: absolute;
                            z-index: 99;
                            opacity: 0;
                            height: 0px;
                            transition: all .5s ease;
                            label {
                                width: 100%;
                                height: fit-content;
                                padding: calc(var(--padding) / 2) var(--padding);
                                &[aria-selected="true"] {
                                    background-color: var(--color4);     
                                    border-top: 1px solid var(--color-light);          
                                }
                            }
                            &.open {
                                opacity: 1;
                                height: 200px;
                            }
                        }
                        @media (--max-fablet) {
                            top: 39px;
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0;
                            justify-content: flex-start;
                            background-color: var(--color-light);
                            overflow-x: hidden;
                            overflow-y: scroll;
                            padding-top: calc(var(--padding) * 1.5);
                            border-radius: 0 0 var(--border-radius) var(--border-radius);
                            border: 1px solid var(--color1);
                            position: absolute;
                            z-index: 99;
                            opacity: 0;
                            height: 0px;
                            transition: all .5s ease;
                            label {
                                width: 100%;
                                height: fit-content;
                                padding: calc(var(--padding) / 2) var(--padding);
                                &[aria-selected="true"] {
                                    background-color: var(--color4);     
                                    border-top: 1px solid var(--color-light);          
                                }
                            }
                            &.open {
                                opacity: 1;
                                height: 200px;
                            }
                        }

                    }
                }

            }
        }
        @media (min-width: 56em) {
            .filters {
                grid-column: span 12;
                flex-direction: row;
                .filterSearch,
                .filterCategory {
                    flex-direction: row;
                }
                .filterCategory {
                    fieldset {
                        width: 100%;
                        .multiSelect {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            justify-content: center;
                            gap: calc(var(--gutter) / 2);
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0;
                            justify-content: flex-start;
                            background-color: var(--color-light);
                            overflow-x: hidden;
                            overflow-y: scroll;
                            padding-top: calc(var(--padding) * 2);
                            border-radius: var(--border-radius) var(--border-radius);
                            border: 1px solid var(--color2);
                            position: absolute;
                            z-index: 99;
                            opacity: 0;
                            height: 0px;
                            transition: all .5s ease;
                            label {
                                width: 100%;
                                height: fit-content;
                                padding: calc(var(--padding) / 2) var(--padding);
                                &[aria-selected="true"] {
                                    background-color: var(--color4);
                                    color: var(--color-light);
                                }
                                background-color: transparent;
                                color: var(--font-color);
                                font-size: var(--xs-fontsize);
                                line-height: var(--xs-lineheight);
                                padding: var(--button-padding);
                                cursor: pointer;
                                transition: var(--transition);
                                &:hover {
                                    background-color: var(--color1);
                                }
                                input {
                                    display: none;
                                }
                                .text {
                                    flex: 1;
                                }
                                .count {
                                    background: var(--color4);
                                    color: var(--color-light);
                                    line-height: 1;
                                    font-size: var(--xs-fontsize);
                                    line-height: var(--xs-lineheight);
        
                                    padding: 4px 6px;
                                    border-radius: var(--border-radius);
                                }
                            }
                            &.open {
                                opacity: 1;
                                height: 350px;
                            }
                        }
                    }
                }
            }
            .filterGrid {
                grid-column: span 12;
            }
        }
        @media (--min-fablet) {
            .filters {
                grid-column: span 12;
                flex-direction: row;
                .filterSearch,
                .filterCategory {
                    flex-direction: row;
                }
                .filterCategory {
                    fieldset {
                        width: 100%;
                        .multiSelect {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            justify-content: center;
                            gap: calc(var(--gutter) / 2);
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0;
                            justify-content: flex-start;
                            background-color: var(--color-light);
                            overflow-x: hidden;
                            overflow-y: scroll;
                            padding-top: calc(var(--padding) * 2);
                            border-radius: var(--border-radius) var(--border-radius);
                            border: 1px solid var(--color2);
                            position: absolute;
                            z-index: 99;
                            opacity: 0;
                            height: 0px;
                            transition: all .5s ease;
                            label {
                                width: 100%;
                                height: fit-content;
                                padding: calc(var(--padding) / 2) var(--padding);
                                &[aria-selected="true"] {
                                    background-color: var(--color4);
                                    color: var(--color-light);
                                }
                                background-color: transparent;
                                color: var(--font-color);
                                font-size: var(--xs-fontsize);
                                line-height: var(--xs-lineheight);
                                padding: var(--button-padding);
                                cursor: pointer;
                                transition: var(--transition);
                                &:hover {
                                    background-color: var(--color1);
                                }
                                input {
                                    display: none;
                                }
                                .text {
                                    flex: 1;
                                }
                                .count {
                                    background: var(--color4);
                                    color: var(--color-light);
                                    line-height: 1;
                                    font-size: var(--xs-fontsize);
                                    line-height: var(--xs-lineheight);
        
                                    padding: 4px 6px;
                                    border-radius: var(--border-radius);
                                }
                            }
                            &.open {
                                opacity: 1;
                                height: 350px;
                            }
                        }
                    }
                }
            }
            .filterGrid {
                grid-column: span 12;
            }
        }
        .pagination {
            .symbol {
                &:after {display: none;}
            }
        }
        .filterGrid {
            .item {
                &.check-jobs, &.jobalert, &.open-sollicitatie {
                    .inner {
                        justify-content: center;
                        .content {
                            flex-grow: unset;
                        }
                    }
                }
                &.check-jobs, &.jobalert {
                    .block {
                        background-color: var(--color4);
                        .title, .content {
                            color: var(--color-light);
                        }
                    }
                }
                &.open-sollicitatie {
                    .block {
                        background-color: var(--color2);
                    }
                }
                
            }
        }
        &.filterJobPosting {
            .filterGrid {
                .item {
                    grid-column: span 6;
                }
            }
        }
        &.filterReview {
            .filterGrid {
                .item {
                    grid-column: span 3;
                    .header {
                        .tags {
                            display: none;
                        }
                    }
                }
            }
        }
        &.filterPerson {
            .filterGrid {
                .item {
                    grid-column: span 4;
                    .inner {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        justify-content: flex-end;
                        .header {
                            gap: 0;
                            align-items: flex-end;
                            .title, .subTitle {
                                color: var(--color-light);
                                border-radius: var(--border-radius);
                                font-size: var(--xs-fontsize);
                                line-height: var(--xs-lineheight);
                            }
                            .title {
                                padding: 10px;
                                text-transform: uppercase;
                                background-color: var(--color-dark);
                            }
                            .subTitle {
                                padding: 6px 12px;
                                background-color: var(--color4);
                            }
                        }
                    }
                    .footer {
                        display: none;
                    }
                }
            }
        }
    }
}