.label {
    margin-bottom: 5px !important;
    color: light-dark(var(--mantine-color-appGray-8), white) !important;
    font-size: 14px !important;
}
.input {
    border-color: light-dark(var(--mantine-color-appGray-2), white) !important;
    background-color: var(--color-background);
    color: var(--color-text-pri) !important;
    &:focus {
        border-color: var(--color-text-pri) !important;
    }
}

.options {
    .option {
        color: var(--color-text-pri) !important;
        font-size: 14px !important;
        /* applies styles to selected item */
        &[data-checked] {
            background-color: var(--color-text-pri) !important;
            &, &:hover {
                background-color: var(--color-text-acc) !important;
                color: white !important;
            }
        }

        /* applies styles to hovered item (with mouse or keyboard) */
        &:hover {
            background-color: var(--color-text-acc) !important;
            color: var(--color-text-pri) !important;
        }
    }
}