/* ===========================================================
   Breakpoints used in resource-filters.js

   < 601px
        • Filters button only settings icon visible
        • Filters controller = dropdown
   >= 601px
        • Filters controller = tab buttons
        • Filters controller = tab buttons
        • Search input always visible

   =========================================================== */

/* ===========================
   Main wrapper - contains filters row and results, all that HTMX replaces
   =========================== */

#cmw-y25-resources-filter-wrap {
    --_focus-outline-color: var(--cmw-primary-color);
    --_btn-hover-bg-color: #0084F1;
    --_label-color: #595959;
    --_border-color: #DCDCDC;
    --_invert-from-black-to-blue: invert(39%) sepia(63%) saturate(7079%) hue-rotate(192deg) brightness(93%) contrast(101%);
    --_active-selection-color: rgba(0, 132, 241, 0.10);
    
    min-height: 300px;
    position: relative;
    
    /* Make the wrapper that contains the form, sticky and full width */
    .cmw-pattern.default-container:has(form) {
        width: unset;
        margin-inline: unset;
        background: white;
        position: sticky;
        top:var(--menu-bar-normal-height);
        padding: 0;
        isolation: isolate;
        z-index: 10;
        
        /* Sticky top from offcanvas height */
        @media (max-width: 600px) {
            top:var(--menu-bar-offcanvas-height);
        }
    }
    
     /* Form  */
    .resource-filters-wrapper #resource-filters-form {
        width: var(--cmw-default-width);
        margin-inline: auto;
        padding: 0.5rem 0px;
        
        /* Inputs wrapper inside the form */
        .inputs {
            display: grid;
            /* if there are recap presents*/
        
            gap: clamp(1rem, 1.502vw + 0.648rem, 2rem);
            
            /* Funtionals icons */
            .cmw_icon,
            .cmw_icon .cmw-logo-picker,
            .cmw_icon .cmw-logo-picker img {
                width: 16px;
                height: 16px;
                display: flex;
                transition-duration: 0.35s;
                transition-property: transform;
            }
        
            @media (max-width: 1100px) {
                flex-direction: column;
            }
        }
    }
    
    /* Results or no results message wrapper */
    > .wp-block-group.cmw-pattern.default-container:last-child {
        margin-top: var(--cmw-pattern-m);
    }
    
	/* If there is pagination it means there is the grid with results */
    &:has(.cmw-pagination-htmx) .grid {
        margin-top: var(--cmw-pattern-m);
    }
    
    /* Pagination row */
    .cmw-pagination-htmx {
        width: var(--cmw-default-width);
        margin-inline: auto;
    }
	
    /* Grid with results */
    .cmw-dynamic-grid > div:hover .cmw-pattern.action-link a  {
        text-decoration: underline;
    }
    
    /* Cards grid should be on one column */
    @media (max-width: 600px) {
        .cmw-dynamic-grid {
            grid-template-columns: 1fr !important;
        }
    }
    
    /* ----------- Filters and Search wrapper ------------ */
    .filters-and-search-wrapper {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        
    }
    /* --------------------- Filters --------------------- */
    .filters {
        position: relative;
        display: flex;
        flex: 0 0 clamp(15rem, 13.2394rem + 7.5117vw, 20rem);
        
        /* Toggle button */
        .filters-toggle {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            background: transparent;
            border: 1px solid var(--_border-color);
            border-radius: 4px;
            padding: 1rem;
            width: 100%;
            cursor: pointer;
            
            
            .filters-label {
                color: var(--_label-color);
                font-size: clamp(1rem, 0.9560rem + 0.1878vw, 1.125rem);
                padding: 0 0.75rem;
            }
            
            .cmw_icon.down_icon {
                margin-left: auto;
            }
            
            /* When toggle expands, icons become blue */
            &[aria-expanded="true"] img {
                filter: var(--_invert-from-black-to-blue);
            }
            /* Arrow down should rotate 180deg */
            &.filters-toggle[aria-expanded="true"] .cmw_icon.down_icon img {
                transform: rotate(-180deg);
            }
            /* When focus */
            &:focus,
            &:focus-visible {
                outline: 1px solid var(--_focus-outline-color) !important;
            }
            
            @media only screen and (max-width: 834px) {
                padding: 0.785rem;
            }
        }
        
        @media only screen and (max-width: 600px) {
            width: fit-content;
            flex-basis: 0px;
                
            .filters-label,
            .cmw_icon.down_icon {
                display: none !important;
            }
            .filters-toggle {
                padding: 1rem;
            }
        }
        
        #filters-surface {
            position: absolute;
            left: 0;
            top:100%;
            background: white;
            padding: 24px 32px 32px 32px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--cmw-pattern-xs);
            min-width: 100%;
            margin-top: 16px;
            border-radius: 4px;
            border: 1px solid var(--_border-color);
            z-index: 1;
        }
        /* Buttons tabs wrapper */
        .filters-tabs {
            display: flex;
            flex-direction: row;
            gap:12px;
        
            /* Button */
            .filters-tab {
                padding: 16px 24px;
                align-items: center;
                text-wrap: nowrap;
                background: white;
                font-size: 1rem;
                font-weight: 700;
                line-height: 100%;
                border-radius: 200px;
                border: 1px solid #EEE;
                cursor: pointer;

                &.is-active,
                &:hover {
                    color: var(--cmw-primary-color);
                    box-shadow: 0 6px 24px 0 rgba(156, 149, 181, 0.30);
                }

                &:focus-visible {
                    outline: 1px solid var(--_focus-outline-color);
                }
            }
        }
        
        /* Dropdown filters, becomes visible under 600px ONLY */
        .filters-tabs-select-wrap {
            position: relative;
            display: flex;
            align-items: center;
            min-width: 100%;
            
            select {
                border: none;
                min-width: 100%;
                /* Hide the default dropdown arrow */
                -webkit-appearance: none;
                -moz-appearance: none;
                border-radius: var(--5xs, 4px);
                border: 1px solid var(--_border-color);
                padding:0.75rem 1rem;
                font-size: 1rem;
                
                &:focus-visible {
                    outline: 1px solid var(--_focus-outline-color) !important;
                }
            }
            
            > .cmw_icon.down_icon {
                position: absolute;
                display: flex !important;
                right: 16px;
            }
            
            &:has(select:open) .cmw_icon.down_icon img {
                transform: rotate(-180deg);
                filter: var(--_invert-from-black-to-blue);
            }
        }
        
        /* Filter panels */
        .filters-panels {
            min-width: 100%;
            fieldset.filters-panel {
                max-height: 300px;
                margin: 0;
                padding: 0;
                border: none;
                overscroll-behavior: contain;
                
                ul.filters-list {
                    margin: 0;
                    padding: 0;
                    display: grid;
                    gap:4px;
                    margin-bottom: 24px;
                    list-style: none;
                    
                    .filters-item .filters-item-wrapper {
                        display: flex;
                        flex-direction: row;
                        align-items: center;   
                        padding: 4px 8px;
                        display: inline-flex;
                        
                        /* Filter item own icon */
                        .individual_filter_icon {
                            margin-right: 8px;
                        }                   
                        
                        /* Filter item label */
                        label {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            cursor: pointer;
                            gap:8px;
                            font-size: 0.9375rem;
                            line-height: 140%;
                            color: black;
                            
                            /* Filter item close X icon */
                            .cmw-logo-picker,
                            .cmw-logo-picker img {
                                display: flex;
                                height: 12px;
                                width: 12px;
                            }
                            /* Close icon blue */
                            .cmw-logo-picker img {
                                display: none; /* initial hide the close button */
                                filter: var(--_invert-from-black-to-blue);
                            }
                        }
                    }
                }
            }
        }
        
        /* Hide icons for Market and Solution panel */
        [id*='panel-market'] .individual_filter_icon ,
        [id*='panel-solution'] .individual_filter_icon {
            display: none !important;
        }
        
        /* Grid layout for each panel */
        /* Content Type */
        [id*='panel-content-type'] ul.filters-list {
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        }
        /* Market */
        [id*='panel-market'] ul.filters-list {
            grid-template-columns: repeat(3, 225px);
        }
        /* Solution */
        [id*='panel-solution'] ul.filters-list {
            grid-template-columns: repeat(2, 300px);
        }
        
        /* Product panel is verry long, should have a vertical scroll enabled */ 
        [id*='panel-product'] {
            overflow-y: scroll;
            scrollbar-color: unset;
            scrollbar-width: thin;

            > .filters-list {
                grid-template-columns: repeat(3, 340px);
                max-height: 100%;
            }
        }
        
        
        @media only screen and (max-width: 1200px) {
            [id*='panel-product']  ul.filters-list {
                grid-template-columns: repeat(3, 225px);
            }
        }
        @media only screen and (max-width: 835px) {
            [id*='panel-product']  ul.filters-list {
                grid-template-columns: repeat(2, 300px);
            }
        }
        @media only screen and (max-width: 834px) and (min-width: 601px) {
            [id*='panel-market']  ul.filters-list,
            [id*='panel-solution']  ul.filters-list,
            [id*='panel-product']  ul.filters-list {
                grid-template-columns: repeat(2, 220px) !important;
            }
        }
        /* All panels should have vertical scrolling and filters in onw column */
        @media only screen and (max-width: 600px) {
            [id*="panel"] {
                overflow-x: hidden;
                overflow-y: scroll;
                scrollbar-color: unset;
                scrollbar-width: thin;
            }
            
            fieldset.filters-panel ul.filters-list {
                grid-template-columns: 1fr !important;
                width: min(375px, 72dvw) !important;
                
                .filters-item-wrapper {
                    display: flex;
                    min-width: 95%;
                    
                    .clickable-label-wrapper {
                        width: 100%;
                        
                        .cmw-logo-picker {
                            margin-left: auto;
                        }
                    }
                }
            }
        }
        
        /* Style for the Update filters button  */
        input[type='submit'] {
            background: var(--cmw-primary-color);
            color:white;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 700;
            line-height: 100%;
            padding: 0.85rem 1rem;
            border-radius: 4px;
            border:none;
            cursor: pointer;
            
            &:hover {
                background: var(--_btn-hover-bg-color);
            }
            &:focus-visible {
                background: var(--_btn-hover-bg-color);
                outline: 1px solid var(--_focus-outline-color);
                outline-offset: 2px;
            }
        }
        
        /* CHECKBOX hack to look and feel like a button */
        input[type='checkbox'] {
            /* Visually hide the checkbox */
            margin: 0;
            width: 0px !important;
            height: 0px !important;
        }
        /* When chekbox checked */
        .filters-panels > fieldset .filters-item:has(input:checked) .filters-item-wrapper {
            border-radius: 4px;
            background-color: var(--_active-selection-color);
            cursor: default;

            .clickable-label-wrapper label {
                cursor: default !important;

                .cmw-logo-picker img {
                    cursor: pointer !important;
                    display: flex !important;
                }
            }
        }
        /* When focus on checkbox */
        .filters-panels > fieldset .filters-item .filters-item-wrapper:has(input:focus-visible) {
            outline: 1px solid var(--_focus-outline-color) !important;

            input[type='checkbox'] {
                outline: none;
            }
        }
        
    }

    /* --------------------- SEARCH --------------------- */
    .search {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap:8px;
        border-radius: 4px;
        border: 1px solid var(--_border-color);
        padding: 0 1rem;
        position: relative;
        background-color: canvas;
        flex: 0 0 clamp(13.75rem, 5.854vw + 12.378rem, 17.5rem);
        
        input {
            border: none;
            font-size: clamp(1rem, 0.9560rem + 0.1878vw, 1.125rem);
            border: none;
            outline: none;
            padding: 0;
            width: 100%;
            background-color: canvas;

            /* Custom search close icon */
            &::-webkit-search-cancel-button {
                -webkit-appearance: none;
                -moz-appearance: none;
                cursor: pointer;
                height: 16px;
                width: 16px;
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.12668 8.00001L16 1.12668L14.8732 -0.00012207L7.99987 6.8732L1.12681 0.000137282L0 1.12694L6.87306 8.00001L0.000120327 14.873L1.12693 15.9998L7.99987 9.12681L14.8731 16L15.9999 14.8732L9.12668 8.00001Z" fill="black"/></svg>');
                margin-left: 10px;
            }
        }
        
        &:has(input:focus),
        &:has(input:focus-visible) {
            outline: 1px solid var(--_focus-outline-color) !important;

            /* When input focused, color the search icon */
            .cmw_icon.search_icon img {
                filter: var(--_invert-from-black-to-blue);
            }
        }

        @media (max-width: 600px) {
            flex-grow: 1;
        }
    }
    
    /* ------ Pagination and Sort Wrapper ------------- */
    .pagination-and-sort-wrapper {
        display: flex;
        flex-shrink: 0;
        gap:1rem;
        flex-grow: 1;
        align-items: center;
    }
    
    /* --------------------- Pagination --------------------- */
    .pagination-results p {
        margin: 0;
        white-space: nowrap;
        font-size: clamp(0.8125rem, 0.7905rem + 0.0939vw, 0.875rem);
    }
    /* --------------------- SORT --------------------- */
    .sort {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        margin-left: auto;
        gap: clamp(4px, calc(2.353px + 0.471vw), 8px);
        position: relative;
        
        .cmw_icon.sort_icon img {
            width: clamp(12px, calc(10.815px + 0.37vw), 16px) !important;
            height: clamp(12px, calc(10.815px + 0.37vw), 16px) !important;
        }

        .sort-label {
            color: var(--cmw-text-color);
            font-size: var(--cmw-small-font-size);
            font-weight: 700;
            line-height: 140%;
            text-wrap: nowrap;
        }
        select {
            border: none;
            color: var(--cmw-text-color);
            font-size: var(--cmw-small-font-size);
            line-height: normal;
            outline: none;
            cursor: pointer;
            padding-right: 30px;
            background-color: transparent;

            /* Hide the default dropdown arrow */
            -webkit-appearance: none;
            -moz-appearance: none;

            &:focus-visible {
                outline: 1px solid var(--_focus-outline-color) !important;
            }
        }
        &:has(select:open) .cmw_icon.sort_icon img {
            filter: var(--_invert-from-black-to-blue);
        }

        &:has(select:open) .cmw_icon.down_icon img {
            transform: rotate(-180deg);
            filter: var(--_invert-from-black-to-blue);
        }

        .cmw_icon.down_icon {
            position: absolute;
            right: 0;
            height: 100%;
            z-index: -1;
            display: flex;
            align-items: center;
            align-self: center;
            width: clamp(12px, calc(10.815px + 0.37vw), 16px) !important;
            height: clamp(12px, calc(10.815px + 0.37vw), 16px) !important;
        }
        
        /* Try to only visually show the dropdown arrow but keep the functionality */
        @media (max-width: 600px) {
            padding-right: 20px;
            
            select {
                position: absolute;
                color: transparent;
                padding-right: 48px;
            }
            select:focus option {
                color: black;
            }
        }
    }

    /* --------------------- FILTERS RECAP --------------------- */
    #resource-filters-recap {        
        ul.recap-list {
            margin: 0;
            list-style: none;
            padding: 0;
            display: flex;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            gap:8px;
             
            button.recap-chip {
                padding: 7px 8px;
                border-radius: 4px;
                background-color: var(--_active-selection-color);
                border: none;
                display: flex;
                flex-direction: row;
                align-items: baseline;
                gap:8px;

                &:focus-visible {
                    outline: 1px solid var(--_focus-outline-color) !important;
                }

                .recap-chip-icon,
                .recap-chip-icon .cmw-logo-picker,
                .recap-chip-icon .cmw-logo-picker img {
                    display: flex;
                    width: 12px;
                    height: 12px;
                }
                
                .recap-chip-label {
                    color: var(--cmw-primary-color);
                    cursor: default;
                    font-size: 0.875rem;
                    font-weight: 700;
                    line-height: 100%;
                }

                .recap-chip-close,
                .recap-chip-close .cmw-logo-picker,
                .recap-chip-close .cmw-logo-picker img {
                    width: 10px;
                    height: 10px;

                    /* Close icon */
                    img {
                        display: flex;
                        filter: var(--_invert-from-black-to-blue);
                        cursor: pointer;
                    }
                }
            }
            
            /* Hide icons for market and solution */
            button.recap-chip[data-qkey="solution-name"] .recap-chip-icon,
            button.recap-chip[data-qkey="market-name"] .recap-chip-icon {
                display: none !important;
            }
            
            .too-many-filters-msg {
                margin: 0;
                white-space: nowrap;
                font-size: 0.875rem;
                font-weight: 600;
                color: var(--cmw-primary-color);
                display: none;
            }
            
            .clear-filters {
                a {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 4px;

                    .trash,
                    .trash img {
                        display: flex;
                        width: 14px;
                        height: 14px;
                    }
                    .trash img {
                        filter: var(--_invert-from-black-to-blue);
                    }

                    &:focus-visible {
                        outline: 1px solid var(--_focus-outline-color);
                        outline-offset: 2px;
                    }
                }
                
                p {
                    margin: 0;
                    color: var(--_label-color);
                    font-size: 0.8125rem;
                    font-weight: 600;
                    text-decoration-line: underline;
                }
                :hover p {
                    color:var(--cmw-primary-color);
                }
            }
            
            li:last-of-type {
                margin-right: 12px;
            }
        } 
    }
    @media only screen and (max-width: 600px) {
        /* If more than 6 filters applied, show the message instead of the chips */
        /* We count 9 items here because the message and the clear filter, are also siblings to the li's */
        #resource-filters-recap .recap-list:has(li:nth-last-child(9)) {
            /* Hide the chips */
            li {
                display: none;
            }
             /* Show the message */
            .too-many-filters-msg {
                display: flex;
            }
        }
    }
}
    

/* ===========================
   LOADING ANIMATION
   =========================== */
/* Prevent page scroll while loading */
body:has(#cmw-loading-spinner.htmx-request) {
    overflow-y: hidden;
}
/* Put the loading indicator on top of everything */
body:has(#cmw-loading-spinner.htmx-request) #cmw-loading-spinner {
    z-index: 999;
    height: 100dvh;
}
/* Loading animation */
#cmw-loading-spinner {
    background: rgba(255,255,255,.8);
    height: 0px;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100dvw;
    z-index: -999;
    align-items: center;
}


/* Inputs layout based on recap beeing visible or not  */
@media (min-width: 1100px) {
    .inputs {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "top-left top-right";
        gap: 1rem;

        .filters-and-search-wrapper {
            grid-area: top-left;
        }
        .pagination-and-sort-wrapper {
            grid-area: top-right;
        }
    }

    /* If recap is present */
    .inputs:has(.filters-recap) {
        grid-template-areas:
            "top-left top-right"
            "bottom-recap bottom-recap";

        .filters-recap {
            grid-area: bottom-recap;
        }
    }
}

@media (max-width: 1099px) {
    .inputs {
        grid-template-areas: 
            "top"
            "bottom";

        .filters-and-search-wrapper {
            grid-area: top;
        }
        .pagination-and-sort-wrapper {
            grid-area: bottom;
        }
    }
    
    /* If recap is present */
    .inputs:has(.filters-recap) {
        grid-template-areas: 
            "top"
            "center"
            "bottom";
        
        .filters-and-search-wrapper {
            grid-area: top;
        }
        .pagination-and-sort-wrapper {
            grid-area: bottom;
        }
        .filters-recap {
            grid-area: center;
        }
    }
}