/* Products Page */
.filters-container {
    padding               : 6rem var(--side-padding) 1rem;
    display               : grid;
    grid-template-columns : var(--grid-columns);
    grid-gap              : var(--grid-gap);
    grid-template-areas   : "title title collections collections collections types types types";

    @media (width > 700px) {
        grid-template-areas : "collections collections collections collections collections collections types types types types types types";
        padding             : 17rem var(--side-padding) 1rem;
    }
}
/* The section title, only visible on mobile */
.filters-title {
    @media (width > 700px) {
        display : none; 
    }
}
/* The collections filters */
.filters-collection {
    grid-area : collections;
}
/* The product type filters */
.filters-type {
    grid-area : types;
}
/* The Radio container */
.filters-group {
    border  : none;
    display : flex;
    gap     : 0;
    @media (width <= 700px) {
        overflow       : hidden;
        flex-direction : column;
        height         : 1rem;
    }
}
/* The radio button */
.filters-group input[type="radio"] {
    appearance : initial;
    height     : 0;
    width      : 0
}
/* The Label for the radio control*/
@media (width > 700px) {    
    .filters-group label:not(:last-child)::after {
        content     : " — ";
        white-space : pre;
        color       : var(--gray);
    }
}
.filters-group label {
    color : var(--gray);
    cursor : pointer;
    &:hover {
        color : var(--black);
    }
}
.filters-group input[type="radio"]:checked + label {
    color : var(--black);
}
/* hide the legend on desk */
.filters-legend {
    display : none;
    cursor  : pointer;
}
/* On Mobile We need to perform some trickery in roder to make the filters work */
@media (width < 700px) { 

    /* Show the legend on mobile */
    .filters-group:not(.filters-are-open) .filters-legend { display : block; }

    /* Prevent the radio to be clicked when the filters are closed */
    .filters-group:not(.filters-are-open) * { }

    /* Filters are now open. That means we can expand the section and turn back on input events */
    .filters-group.filters-are-open{
        height : min-content;
    }
}