@import "@styles/vars.less";

html {
    &.mobile {
        .navmenu_wrapper {
            .navmenu_item {
                &.active {
                    color: var(--colorPrimary) !important;
                    background-color: var(--background-color-primary);
                }

                .icon {
                    font-size: 1.5rem;
                }
            }
        }
    }
}

.navmenu_wrapper {
    display: flex;
    flex-direction: row;

    justify-content: space-evenly;

    width: 100%;

    .ant-btn-primary:not(.ant-btn-dangerous) {
        .label {
            p {
                color: var(--background-color-primary);
            }
        }
    }

    .navmenu_item {
        display: flex;
        flex-direction: row;

        align-items: center;

        height: fit-content;

        gap: 4px;

        padding: 8px 10px;

        &.active {
            color: var(--colorPrimary);
            background-color: var(--background-color-primary);
        }

        p {
            margin: 0;
            color: var(--text-color);
        }

        svg {
            color: currentColor;
        }

        .icon {
            margin: 0;
            line-height: 1rem;
            font-size: 1rem;
        }

        .label {
            height: fit-content;
            line-height: 1rem;
            font-size: 0.8rem;
        }
    }
}