:root{
    /* backgrounds */
    --bg: #FFFFFF;
    --bg-active: #404344;
    --bg-group: #74797C;
    --bg-subgroup: #C7C9CB;
    --bg-subsubgroup: #dfdfdf;
    --bg-layer: #FFFFFF;
    --bg-layer-off: #F0F1F2;
    --bg-empty: #E3E4E5;

    /* colors */
    --color: #0C0C0D;
    --color-active: #FFFFFF;
    --color-group: #FFFFFF;
    --color-subgroup: #404344;
    --color-subsubgroup: #404344;
    --color-layer: #404344;
    --color-layer-off: #74797C;
    --color-close: #262829;

    --color-radio: #1a71e2;

    --layer-icon-size: 1.2rem;
    --layer-options-icon-size: 1rem;
    --layer-panel-width: 28rem;
    --legend-height: 0.625rem;
    --legend-padding: 3rem;
}
.layer-panel{
    background-color: var(--bg-empty);
    min-width: 26rem;
    min-height: 10.313rem;
    max-height: 18rem;
    overflow-y: auto;

    ul, li{
        list-style: none;
        margin: unset;
        padding: unset;
    }

    li{
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 0.5rem 1rem;

        .panel-group-name{
            flex-grow: 1;
            padding: 0 0.6rem;
            padding-left: 0;
            pointer-events: none;
        }
        .arrow{
            pointer-events: none;
            display: flex;

            svg{
                width: 1rem;
                height: 1rem;
            }
        }
    }

    li.panel-basemap{
        padding: 0.5rem 1rem;
        padding-left: 1.5rem;
        font-size: 0.813rem;
        font-weight: 700;
        background-color: var(--bg-layer-off);
        color: var(--color-layer-off);
        border-bottom: 0.031rem solid var(--bg-empty);

        > div {
            pointer-events: none;
        }
        .basemap-status{
            margin: 0 0.5rem;
            width: 1.4rem;
            height: 1.4rem;
            border: 0.2rem solid var(--bg);
            background-color: var(--bg);
            box-shadow: 0 0 0 0.2rem var(--color-radio);
            border-radius: 100%;                            
        }
        .basemap-preview{
            border: 0.3rem solid transparent;
            border-radius: 1.1rem;
            margin: 0 0.5rem;
            width: 6rem;
            height: 6rem;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .basemap-name{
            flex-grow: 1;
        }
    }

    li.panel-basemap.active{
        background-color: var(--bg-layer);
        color: var(--color-layer);

        .basemap-preview{
            border-color: var(--color-radio);
        }

        .basemap-status{
            background-color: var(--color-radio);
        }
    }

    li.panel-layer{
        position: relative;
        flex-wrap: wrap;
        padding: 0.5rem 1rem;
        padding-left: 1.5rem;
        font-size: 0.813rem;
        font-weight: 700;
        background-color: var(--bg-layer-off);
        color: var(--color-layer-off);
        border-bottom: 0.031rem solid var(--bg-empty);

        > div {
            pointer-events: none;
        }

        .order{
            min-width: 1.2rem;
            pointer-events: all;
            width: var(--layer-icon-size);
            height: var(--layer-icon-size);
        }

        .layer-status{
            min-width: 1.2rem;
            margin: 0 0.5rem;
            width: var(--layer-icon-size);
            height: var(--layer-icon-size);
        }

        .layer-name{
            flex-basis: 64%;
            max-width: 64%;
            word-break: break-word;
        }

        .layer-options{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: right;
            flex-grow: 1;
            flex-basis: 22%;

            > div{
                position: relative;
                padding: 0.4rem;
                pointer-events: all;

                > svg{
                    width: var(--layer-options-icon-size);
                    height: var(--layer-options-icon-size);
                    pointer-events: none;
                }
            }

            > div:hover{
                background-color: var(--bg-layer-off);
                color: var(--color-close);
            }

            > div.active{
                background-color: var(--bg-active);
                color: var(--color-active);
            }

            .layer-delete{
                color: #ff0000;
            }
        }

        .layer-styles{
            display: none;
            flex-basis: 100%;

            .layer-legend{
                width: calc(var(--layer-panel-width) - var(--legend-padding));
                height: var(--legend-height);
                position: relative;
                overflow: hidden;

                .legend-img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: calc(var(--layer-panel-width) - var(--legend-padding));
                    width: var(--legend-height);
                    background-size: contain;
                    border-radius: 0.2rem;
                    transform-origin: 0 0;
                    -webkit-transform: rotate(90deg);
                    -moz-transform: rotate(90deg);
                    -ms-transform: rotate(90deg);
                    -o-transform: rotate(90deg);
                    transform: rotate(90deg);
                    margin-left: 100%;
                }
            }
            .layer-legend-range{
                display: flex;
                flex-wrap: wrap;
                width: calc(var(--layer-panel-width) - var(--legend-padding));
                margin: 0.4rem 0;

                input{
                    pointer-events: all;
                    cursor: pointer;
                    text-align: center;
                }

                div{
                    flex-grow: 1;
                }
                .reset-div{
                    .reset-values{
                        width: fit-content;
                        height: fit-content;
                        padding: 0.4rem 0.4rem 0.3rem;
                        border: 0.1rem solid #767676;
                        border-radius: 0.4rem;
                        margin-left: auto;
                        cursor: pointer;
                        background-color: var(--bg-layer);
                        color: var(--color-layer);
                        pointer-events: all;
                    }

                    .reset-values:hover {
                        background-color: var(--bg-layer-off);
                        color: var(--color-close);
                    }
                }
            }
            .layer-style-selector{
                text-align: center;
                padding-top: 0.5rem;
                width: calc(var(--layer-panel-width) - var(--legend-padding));
                
                select{
                    padding: 0.3rem 1rem;
                    pointer-events: all;
                    cursor: pointer;
                    width: 50%;
                }
            }
        }

        svg{
            width: 100%;
            height: 100%;
        }

        .layer-status svg:nth-child(1){
            display: none;
        }
        .layer-status svg:nth-child(2){
            display: inline;
        }
    }

    li.panel-layer.ignore-drag{
        .order{
            display: none;
        }
    }

    li.panel-layer.active{
        background-color: var(--bg-layer);
        color: var(--color-layer);

        .layer-status svg:nth-child(1){
            display: inline;
        }
        .layer-status svg:nth-child(2){
            display: none;
        }
        .layer-styles{
            display: inline-block;
        }
    }

    li.panel-layer.active.loading:before,
    li.panel-layer.active.loading:after{
        content: '';
        position: absolute;
        top: 0.8rem;
        left: 0.8rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(1);
    }
    li.panel-layer.active.loading:after{
        animation: radar  2s infinite ease-out;
    }

    li.panel-layer.active.loading-cache:before,
    li.panel-layer.active.loading-cache:after{
        background-color: #e96d34;
    }

    li.panel-layer.active.loading-current:before,
    li.panel-layer.active.loading-current:after{
        background-color: #ff0000;
    }

    > ul ul li.panel-group{
        background-color: var(--bg-subgroup);
        color: var(--color-subgroup);
        font-size: 0.813rem;
        font-weight: 700;
        border-bottom: 0.031rem solid var(--bg-empty);
    }

    > ul > li.panel-group{
        background-color: var(--bg-group);
        color: var(--color-group);
        font-size: 1rem;
        font-weight: 400;
        border-bottom: 0.063rem solid var(--bg-empty);
    }

    .sub-group > .sub-group:has(li.panel-group + ul) li.panel-group{
        background-color: var(--bg-subsubgroup);
        color: var(--color-subsubgroup);
    }

    > ul ul{
        display: none;
    }

    > ul li.active + ul{
        display: inline;
    }

    > ul li.active > div.arrow {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        transform-origin: center;
    }
}
.active-layer-panel{
    background-color: var(--bg-layer);
    color: var(--color-layer);
    border-top: 0.1rem solid var(--bg-group);
    border-bottom: 0.1rem solid var(--app-color-5);

    .active-layer{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.5rem 1rem;
        border-bottom: 0.031rem solid var(--bg-empty);

        >div{
            flex-basis: 1.5rem;
        }

        .layer-name{
            flex-grow: 1;
            padding: 0 1rem;
            font-size: 0.813rem;
            font-weight: 700;
        }

        .remove-active-layer:hover,
        .expand-active-layer:hover {
            cursor: pointer;
            background-color: var(--bg-layer-off);
        }
    }
}
@keyframes radar{
    0%{
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100%{
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

.highlight-layer::after {
    content: '';
    position: absolute;
    inset: 0.2rem;
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.80);
    background: rgba(220, 38, 38, 0.08);
    pointer-events: none;
    opacity: 1;
    animation: highlightFadeOut 1200ms ease-out forwards;
}
@keyframes highlightFadeOut {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.80);
    }
    100% {
        opacity: 0;
        box-shadow: 0 0 0 14px rgba(220, 38, 38, 0.00);
    }
}