@keyframes appear
{
    from  { opacity: 0; scale: 0.5; }
    to { opacity: 1; scale: 1; }
}

.menu
{
    z-index: 9998;

    display: flex;
    width: calc(100% - 2 * var(--layout-gap));
    height: var(--layout-menu-height);
    padding: var(--layout-gap);

    justify-content: space-between;
    align-items: center;
    align-self: stretch;

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

.menu-logo
{
    height: calc(100% - 2 * var(--layout-padding));
    aspect-ratio: 1/1;

    background-color: var(--color-background-secondary);
    border-radius: var(--layout-border-radius);
    border: 1px solid var(--color-purple);

    padding: var(--layout-padding);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.menu-logo:hover
{
    transform: scale(var(--animation-scale-adjust));
    transition: transform 0.4s ease;

    cursor: pointer;
}

.menu-tabs-group
{
    display: none;
    align-items: center;
    align-self: stretch;

    border-radius: calc(var(--layout-border-radius));
    border: 1px solid var(--color-purple);
}

.menu-tabs-entry
{
    display: flex;
    background: var(--color-background-secondary-III);

    gap: var(--layout-gap);
    border-radius: calc(var(--layout-border-radius));

    width: var(--layout-menu-tab-width);

    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.menu-tabs-entry.extended
{
    width: calc(var(--layout-menu-tab-width) * 1.1);
}
.menu-tabs-entry.shortend
{
    width: calc(var(--layout-menu-tab-width) * 0.7);
}

.menu-tabs-entry:hover
{
    text-decoration: 1px underline var(--color-purple);
    text-underline-offset: .4em;
    cursor: pointer;
}

.menu-tabs-entry.alternative
{
    background: var(--color-background-secondary);
}
.menu-tabs-entry.active
{
    background: var(--color-purple);
    border-radius: calc(var(--layout-border-radius));
}
.menu-tabs-entry.active:hover
{
    text-decoration: 1px underline var(--color-text-primary);
}

.menu-tabs-entry-inner
{
    margin: var(--layout-gap);
}

.menu-tabs-entry-icon
{
    height: calc(100% - 2 * var(--layout-gap));
    aspect-ratio: 1/1;
}
.menu-tabs-entry-label
{
    display: flex;
    width: fit-content;

    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;

    text-transform: uppercase;
}

.icon_1-1
{
    height: 100%;
    aspect-ratio: 1/1;
}

.flexibleSpacing
{
    min-height: calc(var(--layout-gap) * 4);
    width: 100%;
}