@use 'leaflet/dist/leaflet.css';
@use "leaflet.markercluster/dist/MarkerCluster.css";
@use "../partials/program";
@use '../theme/colors' as *;
@use "../theme/breakpoints" as *;

body, html {
    overflow: hidden;
}

#map {
    z-index: 0;

    @media screen and (max-width: $breakpoints-md) {
        display: none;
    }

    .cluster-icon {
        & img {
            width: 50px;
            height: 50px;
            margin-left: -25px;
            margin-top: -25px;
        }
    }

    .container--counter {
        left: 5px;
        top: -30px;
        width: 20px;
        height: 20px;
        background-color: red;
        line-height: 30px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        border-radius: 50%;
        position: absolute;

        span {
            color: #fff;
            text-align: center;
            font-size: 0.8rem;
            z-index: 2;
        }
    }

    .leaflet-popup-content {
        padding: unset;
        margin: unset;
        width: 250px !important;
        height: auto;

        .program-thumbnail {
            height: 170px;
            border-radius: 12px;

            .info-block {
                p {
                    margin: 5px 0;
                    font-size: 0.9rem;
                }
            }

            .preview {
                border-radius: 12px 12px 0 0;
                font-size: 1rem;
                padding: 0.3rem;
            }
        }
    }
}

#programs {
    padding: 80px 2rem 0;
    height: 100dvh;

    @media screen and (max-width: $breakpoints-md) {
        padding-top: 70px;
        width: 100vw;
        background: linear-gradient(to bottom,rgba(255,255,254,.51),rgba(55,55,55,.745),rgba(0,0,0,.745)),url("/public/assets/theme/map-background.png");
        background-repeat: no-repeat;
        background-size: cover;
    }

    * {
        color: white;
    }

    #search {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-self: center;
        position: relative;
        background: #131321FF;
        border-radius: 1rem;
        padding: 1rem 2rem;

        @media screen and (max-width: $breakpoints-md) {
            padding: 1rem;

            .search-title {
                flex-wrap: wrap;
                justify-content: center;

                h2 {
                    text-align: center;
                    flex: 1 1 100%;
                }
            }

            .filters-buttons {
                gap: 0.5rem;
            }
        }

        @media screen and (max-width: $breakpoints-sm) {

            padding: 1rem 0.5rem;
            .search-title {
                h2 {
                    margin: 0;
                }
                .btn {
                    min-width: unset;
                }
            }
        }

        &.opened {
            .filters-buttons {
                visibility: visible;
                height: auto;
                height: calc-size(auto, size);
                padding: 1rem 0;
                transition: visibility 100ms ease 200ms, height 300ms ease;
            }

            .search-title {
                i {
                    transform: rotate(180deg);
                }
            }
        }

        .search-title {
            display: flex;
            gap: 1rem;
            align-items: center;

            * {
                cursor: pointer;
            }

            i {
                font-size: 1.5rem;
                transition: transform 0.2s ease;
            }
        }

        .filters-buttons {
            transition: height 0.3s ease;
            height: 0;
            visibility: hidden;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: unset;

            label {
                font-weight: bold;
            }
        }

        #clear-search {
            display: none;
        }
    }

    #results {
        transition: height 0.2s ease;
        padding-bottom: 80px;

        .grid {
            max-height: 100%;
        }
    }
}