container[name="top-menu__container"]{
    container: top-menu / inline-size;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
}

.top-menu{
    inline-size: 100%;
    background: var(--_color-white);
    padding-inline: 12px;
    padding-block: 12px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    > .top-menu__actions{
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 4px;
    }

    > .top-menu__actions:nth-child(2), .top-menu__actions:nth-child(4){
        display: none;
    }

    > hr{
        border: 1px solid var(--_color-gray-2);
        block-size: 24px;
    }

    > .top-menu__search{
        inline-size: 100%;
    }
}

@container top-menu (min-width: 768px){
    .top-menu{
        padding-inline: 24px;

        gap: 36px;

        > .top-menu__actions:last-of-type{
            order: 6;
        }

        > hr{
            order: 4;
        }

        > .top-menu__search{
            inline-size: auto;
            flex: 1;
            order: 3;
        }
    }
}

@container top-menu (min-width: 1280px){
    .top-menu{
        padding-inline: 48px;
        
        > hr{
            order: 2;
        }

        > .top-menu__actions:nth-child(2){
            order: 3;
            display: flex;
        }

        > .top-menu__actions:nth-child(4){
            order: 5;
            display: flex;
        }
    }
}

@container top-menu (min-width: 1440px){
    .top-menu{
        padding-inline: calc(50% - 1344px / 2);
    }
}