.menu {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: var(--size-s);

    font-size: var(--font-size-second);
    list-style: none;

    /* NOT VERTICAL */
    flex-direction: row;
}

.vertical {
    flex-direction: column;
}

/* MENU ITEM */

.menuItem {
    display: flex;
    align-items: center;
    justify-content: center;

    user-select: none;
    background-color: var(--color-back-main);
    border-radius: var(--radius-small);
    transition: box-shadow 200ms ease-in, background-color 200ms ease-in;
    /* padding: var(--size-s) var(--size-s); */
    padding: 0 var(--size-s);

    height: var(--size-l);
}

.menuItem.active {
    cursor: pointer;
}

.menuItem.active:hover {
    box-shadow: var(--shadow);
    color: var(--color-hover);
    background-color: var(--color-hover-back);
}

.menuItem.active:hover a {
    color: var(--color-hover);
}

.menuItem.current {
    color: var(--color-text-opposite);
    background-color: var(--color-back-opposite);
}

.menuItem a {
    text-decoration: none;
    color: var(--color-text);
}

/* DARK THEME */
@media (prefers-color-scheme: dark) {
    .menuItem.active:hover {
        box-shadow: none;
        background-color: var(--color-back);
    }
}