@layer master {
    .templateCollection {
    }
}
@layer master {
    [x-cloak] { display: none !important; }

    .templateFilter {
        .grid {
            @media (min-width: 56em) {
                .filters {grid-column: span 3;}
                .filterGrid {grid-column: span 9;}
            }
            @media (--min-fablet) {
                .filters {grid-column: span 3;}
                .filterGrid {grid-column: span 9;}
            }
        }
        &.topFilters {
            .grid {
                @media (min-width: 56em) {
                    .filters {grid-column: span 12;}
                    .filterGrid {grid-column: span 12;}
                }
                @media (--min-fablet) {
                    .filters {grid-column: span 12;}
                    .filterGrid {grid-column: span 12;}
                }
                .filters {
                    .filterCategory {
                        fieldset:has(.multiSelect.open) > legend {
                            z-index: 999;
                            position: relative;
                        }
                        fieldset {
                            position: relative;
                            padding: 0;
                            legend {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: calc(var(--padding) / 1.5);
                                height: 100%;
                                color: var(--font-color);
                                font-size: var(--xs-fontsize);
                                line-height: var(--xs-lineheight);
                                font-weight: 600;
                                border-radius: var(--border-radius);
                                cursor: pointer;
                                @media (max-width: 56em) {
                                    height: 55px;
                                }
                                @media (--max-fablet) {
                                    height: 55px;
                                }
                                &:after {
                                    font-family: var(--symbol);
                                    font-size: var(--symbol-size);
                                    pointer-events: none;
                                    content: "\e313";
                                    position: relative;
                                }
                            }
                            .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;
                                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;
                                    z-index: 999;
                                    background-color: transparent;
                                    color: var(--font-color);
                                    font-size: var(--xs-fontsize);
                                    line-height: var(--xs-lineheight);
                                    padding: calc(var(--padding) / 4) calc(var(--padding) / 1.5);
                                    cursor: pointer;
                                    &[aria-selected="true"] {
                                        background-color: var(--color4);
                                        color: var(--color-light);
                                    }
                                    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: 250px;
                                    padding-top: calc(var(--padding) * 1.5);
                                    border-bottom-left-radius: 0;
                                    border-bottom-right-radius: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
        article {
            display: flex;
        }
    }
}
@layer master {
    .templateFilter {
        .filters {
            display: flex;
            flex-direction: column;
            gap: var(--gutter);
            .filterBlock {
                display: flex;
                flex-direction: column;
                gap: var(--gutter);
                @media (max-width: 56em) {
                    padding: var(--padding);
                    position: fixed;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: white;
                    transition: var(--transition);
                    z-index: 999;
                    overflow-x: hidden;
                    overflow-y: auto;
                    overscroll-behavior: contain;
                    &.visible {
                        left: 0;
                    }
                    &.hidden {
                        left: -100%;
                    }
                }
                @media (--max-fablet) {
                    padding: var(--padding);
                    position: fixed;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: white;
                    transition: var(--transition);
                    z-index: 999;
                    overflow-x: hidden;
                    overflow-y: auto;
                    overscroll-behavior: contain;
                    &.visible {
                        left: 0;
                    }
                    &.hidden {
                        left: -100%;
                    }
                }
                .button.cancel {
                    width: fit-content;
                }
            }
            @media (min-width: 56em) {
                .filterButton {
                    display: none;
                }
            }
            @media (--min-fablet) {
                .filterButton {
                    display: none;
                }
            }
            @media (max-width: 56em) {
                .filterButton {
                    display: block;
                    position: fixed;
                    z-index: 8;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    width: 100%;
                    padding: var(--padding);
                }
            }
            @media (--max-fablet) {
                .filterButton {
                    display: block;
                    position: fixed;
                    z-index: 8;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    width: 100%;
                    padding: var(--padding);
                }
            }
            .filterSearch {
                display: flex;
                flex-direction: column;
                gap: var(--gutter);
                label {
                    svg {
                        width: 100%;
                        height: 100%;
                    }
                    .search, .pin, .close {
                        position: absolute;
                        right: var(--form-input-size);
                        top: 50%;
                        transform: translateY(-50%);
                        width: 32px;
                        height: 32px;
                        padding: 0;
                    }
                }
            }
            .filterCategory {
                display: flex;
                flex-direction: column;
                gap: var(--gutter);
                fieldset {
                    label {
                        cursor: pointer;
                        display: flex;
                        gap: 10px;
                        align-items: center;
                        width: 100%;
                        .text {
                            flex: 1;
                            -webkit-hyphens: auto;
                                    hyphens: auto;
                        }
                        .count {
                            background: var(--color2);
                            line-height: 1;

                            padding: 8px 12px;
                            border-radius: var(--border-radius);
                        }
                    }
                }

            }

            .tags {
                display: flex;
                gap: calc(var(--gutter) / 2);
                flex-direction: column;
                .content {
                    display: flex;
                    gap: calc(var(--gutter) / 2);
                    flex-wrap: wrap;
                }
            }
        }
    }
}
@layer master {
    .templateFilter {
        .filterGrid {
            display: flex;
            flex-direction: column;
            gap: var(--gutter);

            .filterSettings {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: var(--gutter);
                .views {
                    display: flex;
                    gap: var(--gutter);
                    justify-content: flex-end;
                    width: 100%;                    
                }
                .text {
                    flex: 1;
                }
                .sort {
                    .select {
                        flex-direction: row;
                        select {
                            width: auto;
                            padding-right: calc(var(--form-input-size) * 2 + 16px);
                        }
                    }
                }
                .tags {
                    width: 100%;
                }
            }
        }
    }
}