.header {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    padding: 1rem;
    background-color: var(--neutral-50);
    z-index: 998;
}

.header > nav {
    width: min(var(--max-width), 100%);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header > nav > a {
    display: flex;
}

.header > nav > a > img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.header > nav > form {
    display: flex;
}

.header > nav > form > :is(input, button) {
    padding-block: 12px;
    border: none;
    background-color: var(--neutral-100);
}

.header > nav > form > input {
    padding-left: 1rem;
    border-radius: 25px 0 0 25px;
    width: 100%;
}

.header > nav > form > button,
.header > nav > div > button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header > nav > form > button {
    border-radius: 0 25px 25px 0;
    padding-inline: 1rem;
}

.header > nav > div {
    position: relative;
    display: flex;
    margin-left: auto;
}

.header > nav > div > .logout__btn {
    display: none;
}

.header > nav > div > .open__search-btn,
.header > nav > div > .exit__search-btn {
    border: none;
    background-color: transparent;
    padding: 12px;
    display: none;
}

@media screen and (width <= 582px) {
    .header > nav > a {
        max-width: 150px;
    }

    .header > nav > form {
        position: absolute;
        left: 100%;
        top: 100%;
        width: 100%;
        padding: 0 1rem 1rem;
        background-color: var(--neutral-50);
        transition: left 0.3s ease-in-out;
    }

    .header.open > nav > form {
        left: 0;
    }

    .header > nav > div > .open__search-btn,
    .header > nav > div > .exit__search-btn {
        display: flex;
    }

    .header > nav > div > .open__search-btn {
        transition: transform 0.3s ease-in-out;
    }

    .header.open > nav > div > .open__search-btn {
        transform: translateY(-200%) rotate(360deg);
    }

    .header > nav > div > .exit__search-btn {
        position: absolute;
        right: 0;
        top: -200%;
        transition: top 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    .header.open > nav > div > .exit__search-btn {
        top: 0;
        transform: rotate(360deg);
    }
}