.background {
    @mixin light {
        background-color: var(--color-light-gray-blue);
    }
    @mixin dark {
        background-color: var(--mantine-color-dark-7);
    }
}

.link {
    width: 100%;
    height: rem(50px);
    border-radius: var(--mantine-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    @mixin light {
        color: var(--mantine-color-gray-7);
    }
    @mixin dark {
        color: var(--mantine-color-dark-0);
    }

    &:hover {
        @mixin light {
            background-color: var(--mantine-color-gray-1);
        }
        @mixin dark {
            background-color: var(--mantine-color-dark-5);
        }
    }

    &[data-active] {
        &,
        &:hover {
            @mixin light {
                background-color: var(--color-light-aqua);
            }
            @mixin dark {
                background-color: var(--mantine-color-dark-6);
            }
            color: var(--mantine-color-blue-light-color);
        }
    }
}
