/* ! Список ссылок [[js/hrefs-map.js]] */

/* Шаблон для навбара */
/* <div class="navbar_wrapper"><!-- ?                                                              Navbar -->
<div class="outer">
    <div class="inner navbar">
        <nav aria-label="Навігаційне меню">
            <a data-href="home"><img src="./img/general/navbar/home_button.svg" alt=""></a>
            <div class="empty"></div>
        </nav>
    </div>
</div>
</div> */

.navbar_wrapper {
    margin: calc(30px * var(--scale_1200)) auto calc(30px * var(--scale_1200)) auto;

    background-color: #7cd7fe;
    background-color: var(--color-test);
}
        .navbar_wrapper[data-media="landscape__portrait--PC"] {
            max-width: 1200px;
        }
        .navbar_wrapper[data-media="portrait--mobile"] {
            max-width: 600px;
        }
    .navbar {
        height: 40px;
    }
            .navbar[data-media="landscape__portrait--PC"] {
                width: 1200px;
            }
            .navbar[data-media="portrait--mobile"] {
                width: 600px;
            }
        .navbar > nav {
            margin-left: auto;
            margin-right: auto;

            height: 40px;
            width: fit-content;

            font-size: 0;
        }
            .navbar > nav > a {
                position: relative;
                
                display: inline-block;

                transform: scale(1);
                transform-origin: center center;
                transition: all 0.25s ease-in-out;
            }
                    .navbar > nav > a:hover {
                        transform: scale(1.3);
                    }
            .navbar div.empty {
                display: inline-block;
                
                height: 40px;
                width: 80px;

                background-color: var(--color-test);
            }

                .navbar > nav > :not(:nth-child(1)) {
                    margin-left: 20px;
                }
            .navbar > nav > a > img {
                height: 40px;
                width: 80px;

                opacity: 0.8;

                transition: all 0.25s ease-in-out;
            }
                    .navbar > nav > a > img:hover {
                        opacity: 1;
                    }
                .navbar > nav > a::before {
                    content: "";
                    position: absolute;
                    z-index: 2;
                    top: 0;
                    left: 0;

                    height: 100%;
                    width: 100%;

                    transition: all 0.25s ease-in-out;
                    opacity: 0;

                    border-radius: 10px;
                    background: rgba(255, 0, 0, 0.75);

                    mix-blend-mode: overlay;
                    pointer-events: none;
                }
                    .navbar > nav > a[data-media="pointer--fine"]:hover::before {
                            opacity: 1;
                        }
                .navbar > nav > a::after {
                    position: absolute;
                    z-index: 3;
                    top: 0;
                    left: 0;

                    height: 50%;
                    width: 100%;
                    transform: translateY(100%);
                    border-radius: 0 0 10px 10px;

                    opacity: 0;
                    background-image: linear-gradient( -180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);

                    content: "";

                    pointer-events: none;

                    transition: all 0.25s ease-in-out;
                }
                    .navbar > nav > a[data-media="pointer--fine"]:hover::after {
                        opacity: 1;
                    }