@layer addon {
    .templateFilter {
        &.filterJobPosting {
            padding-bottom: var(--section);
            z-index: 3;
            &:has(.filterBlock.visible) {
                z-index: 11;
            }
            .container {
                padding-left: var(--padding);
                padding-right: var(--padding);
                .grid {
                    gap: calc(var(--gutter) * 2);
                    @media (min-width: 56em) {
                        .filters {grid-column: span 4;}
                        .filterGrid {grid-column: span 8;}
                    }
                    @media (--min-fablet) {
                        .filters {grid-column: span 4;}
                        .filterGrid {grid-column: span 8;}
                    }
                    .filters {
                        padding: var(--section) 0 var(--padding) var(--padding);
                    }
                    .filterGrid {
                        padding: var(--section) var(--padding) var(--padding) 0;
                    }
                    @media (max-width: 56em) {
                        transform: unset!important;
                        .filters {
                            transform: unset!important;
                            position: absolute;
                        }
                        .filterGrid {
                            padding: var(--section) var(--padding) var(--padding) var(--padding);
                        }
                    }
                    @media (--max-fablet) {
                        transform: unset!important;
                        .filters {
                            transform: unset!important;
                            position: absolute;
                        }
                        .filterGrid {
                            padding: var(--section) var(--padding) var(--padding) var(--padding);
                        }
                    }
                }
            }
        }
        .inner:has(.grid) {
            grid-column: span 12;
        }
        

        .grid:not(:has(.filters)) {
            .filterGrid {
                grid-column: span 12;
            }
        }
        .views {
            display: flex;
            justify-content: flex-end;
            gap: var(--gutter);
            .textLink {
                text-underline-offset: 6px;
                text-decoration-color: color-mix(in srgb, currentColor, transparent 75%);
                color: var(--color-light);
                .text {
                    text-decoration: none;
                }
                .icon {
                    color: #fff;
                    width: 24px;
                    height: 24px;
                    transform: none;
                }
                &:hover {
                    @media (hover: hover) {
                        .text {
                            text-decoration: underline;
                        }
                    }
                }
                &.active {
                    .text {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .pagination {
        .button {
            color: var(--color-light);
            border-radius: 50px;
        }
    }
    .tags {
        .tag {
            color: var(--color-light);
            font-weight: normal;
            .icon {width: 16px;height: 16px;}
            &:hover {
                @media (hover: hover) {
                    background-color: var(--button-hover);
                }
            }
        }
    }
    .filterBlock {
        gap: var(--padding);
        fieldset {
            background: none;
            padding: 0;
            input[type="text"] {
                padding-right: var(--padding);
            }
            button {
                position: absolute;
                top: 50%;
                right: var(--form-input-size);
                transform: translateY(-50%);
                width: 24px;
                height: 24px;
                .icon {
                    all: unset;
                    color: var(--color2);
                    width: 24px;
                    height: 24px;
                }
                &.close {
                    .icon {
                        color: var(--color1);
                    }
                }
            }
        }
        .filterSearch {
            gap: 10px;
            fieldset {
                &.keyword {
                    display: none;
                }
                gap: 10px;
                
                legend {
                    display: none;
                }
            }
        }
        .filterCategory {
            gap: var(--padding);
            fieldset {
                gap: 10px;
                legend {
                    padding-bottom: 10px;
                    font-size: var(--s-fontsize);
                    line-height: var(--s-lineheight);
                    color: var(--color5);
                    font-weight: 600;
                    &::first-letter {
                        text-transform: capitalize;
                    }
                }
                .count {display: none}
            }
        }
        
    }

    .filterGrid {
        .filterSelection {
            flex-direction: row;
            flex-wrap: wrap;
            .text {
                span {
                    display: inline-flex;
                    color: var(--color-light);
                    background: var(--color2);
                    line-height: 1;
                    margin: 0 5px;
                    padding: 8px 12px;
                    border-radius: var(--border-radius);
                }
            }
            .tags {
                .button.delete {
                    display: none;
                }

            }
        }
        .grid {
            .item {
                grid-column: span 12;
            }
        }
    }
    .map {
        grid-column: span 8;
        height: 100%;
        border-top-right-radius: var(--section-radius);
        overflow: hidden;
        .mapboxgl-map {
            width: 100%;
            height: 100%;
        }
        
        .grid {
            .item {
                grid-column: span 12;
            }
        }
        dialog {
            margin-right: 0;
            min-height: 100vh;
            background: var(--color4);
            .item {
                border-bottom: 3px solid #E0E3DE;
                .inner {
                    .header {
                        align-items: flex-start;
                    }
                }
            }
        }
    }
}