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

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

.option {
    padding: 12px 16px;

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

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

    @mixin dark {
        color: var(--mantine-color-dark-0);

        @mixin hover {
            background-color: var(--mantine-color-dark-4);
        }
    }

    &[aria-selected='true'] {
        background-color: var(--mantine-color-action-1);
        color: var(--mantine-color-action-6);

        @mixin hover {
            color: var(--mantine-color-action-6);
            background-color: rgb(237 246 255 / 65%);
        }
    }
}