.labelWrapper {
    display: flex;
    align-items: flex-start;

    &[data-disabled] {
        .label,
        .description {
            color: var(--mantine-color-disabled-color);
        }
    }
}

.radio {
    &:not(:checked, [readonly], :disabled, [data-error='true']) {
        border-color: var(--coveo-color-input-border);
    }

    &:disabled {
        background-color: var(--mantine-color-disabled);
        border-color: var(--mantine-color-default-border);

        & + .icon {
            color: var(--mantine-color-placeholder);
        }
    }

    /* mantine hardcodes disabled styles so we need to write custom styles */
    &[readonly] {
        border-color: var(--mantine-color-default-border);
        background-color: var(--coveo-color-bg-readonly);
        color: var(--coveo-color-text-readonly);

        & + .icon {
            color: var(--coveo-color-text-readonly);
        }
    }
}