@charset "UTF-8";

body {
    container-type: size;
}

.htest-1 {
    padding: 10px 30px;

    .container {
        max-width: 1200px;
    }

    .header-main {
        flex-wrap: nowrap;
    }

    .header-logo {
        width: 80px;
        margin: 0;
    }

    .header-nav {
        width: fit-content;
    }

    &:has(#menu-button:checked) {
        .header-nav {
            display: block;
            right: 0;
            opacity: 1;
        }
    }
}

.htest-2 * {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.htest-2 {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed;

    #pagetop.is-hide & {

        .header-logo {
            transform: scale(0.7);
            transform-origin: left;
        }

        .header-logo {
            transition: all 0.3s linear;
        }

    }
}

body:has(.htest-2) {
    overflow: visible;
}

@media (max-width: 899px) {
    #pagetop.is-hide {
        .htest-2 {
            padding-top: 0;
            padding-bottom: 0;
        }

        header-nav
    }
}

@container (width >=1260px) {
    .htest-1 {
        padding: 20px 0;
    }
}

@media (min-width: 900px) {
    .htest-1 {
        .header-main {
            align-items: center;
        }

        .header-nav {
            width: fit-content;
            margin-top: 0;

            &>ul>li {

                &>a,
                & label {
                    width: max-content;
                    padding: 0 1em;
                }
            }
        }

        .header-actions {
            display: flex;
        }

        .action-item {
            width: 60px;

            img {
                width: 100%;
            }
        }
    }

    #pagetop.is-hide header {
        top: -140px;
    }


}