
menuheader
{
    display: flex;
    pointer-events: all;
    justify-content: center;
    width: 100%;
    background-color: #181b26dd;
    backdrop-filter: blur( 20px );
    border-bottom: 1px solid #2e344b;
    box-shadow: 0px 0px 200px #000f;
}

menuheader > .container > .left,
menuheader > .container > .right
{
    
}

menuheader > .container
{
    width: 1800px;
    margin: 0px 32px;
    gap: 32px;
}

menuheader > .container > .links
{
    flex-grow: 1;
    justify-content: center;
}

menuheader > .container > .right
{
    padding-right: 50px;
    align-items: center;
    gap: 1rem;
}

.branding
{
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-left: 32px;

    > .label
    {
        background-color: #477fe7;
        border-radius: 4px;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
        font-family: Poppins;
        padding: 4px 8px;
        text-shadow: 1px 1px 6px #000a;
    }

    &:hover
    {
        > .label
        {
            box-shadow: 0px 0px 30px #467de544, 0px 0px 80px #467de511;
        }


        transform: scale(1.1);
    }

    &.active
    {
        > .label
        {
            box-shadow: 0px 0px 30px #467de555, 0px 0px 80px #467de522;
        }
    }
}

button.circle
{
    align-items: center;
    color: #70788b;
    font-size: 28px;
    padding: 0;

    &:hover
    {
        color: #fff;

        > .inner
        {
            background-color: #272b34;
        }
    }
}

button.circle IconPanel
{
    background-color: #171b24;
    border: 1px solid #70788b11;
    padding: 8px;
    border-radius: 1000px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

menuheader > .container > .links button
{
    color: #8086a3;
    text-transform: lowercase;
    font-weight: 600;
    font-size: 1.5rem;
    font-family: Poppins;
    white-space: nowrap;

    .icon
    {
        color: #515560;
    }

    &:active
    {
        color: #08f;
    }

    &:hover, &.active, &:has(.active)
    {
        color: white;

        .icon
        {
            color: #08f;
        }
    }

    .button-hover-menu
    {
        margin-top: -20px;
        background-color: #1d1f27ee;
        backdrop-filter: blur( 8px );
        border: 1px solid #2e344b;
        min-width: 100%;
        border-radius: 10px;
        box-shadow: 2px 2px 16px #0005;
        transition: all 0.1s ease;

        &.hidden
        {
            transform: translateY( -20px );
        }
    }
}

.textentry.search
{
    background-color: red;
    border-radius: 40px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(115, 115, 115, .2);
    background-color: rgba(0, 0, 0, .1);
    color: #a5c3f9;
    height: 48px;
    flex-grow: 1;
    font-size: 1.2rem;
    font-family: Poppins;
    opacity: 0.6;
    width: 250px;

    &:focus
    {
        border: 1px solid rgba(50, 115, 235, .2);
        opacity: 1;
    }
}
