.card:hover:not([disabled]) {
    @mixin light {
        background-color: var(--mantine-color-default-hover);
    }
}

.card {
    --radio-card-outline-color: var(--mantine-color-default-border);

    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: var(--mantine-spacing-sm);
    padding: var(--mantine-spacing-sm);
    border-radius: var(--mantine-radius-lg);
    border-color: var(--radio-card-outline-color);
    transition: border-color 150ms ease;

    &[data-checked] {
        --radio-card-outline-color: var(--mantine-primary-color-filled);
    }

    &[disabled],
    &[readonly] {
        --radio-card-outline-color: var(--mantine-color-default-border);
    }

    &[disabled] {
        cursor: not-allowed;

        .title,
        .description {
            color: var(--mantine-color-disabled-color);
        }
    }

    &[readonly] {
        pointer-events: none;

        .indicator[data-checked] {
            background-color: var(--mantine-color-default);
            color: var(--coveo-color-text-readonly);

            & > svg {
                color: inherit;
            }
        }
    }
}

.container {
    gap: var(--mantine-spacing-xs);
}

.title {
    line-height: 20px;
}

.title,
.description {
    flex: 1;
    overflow-wrap: anywhere;
}

.indicator {
    cursor: pointer;
    transition: border-color 150ms ease;

    &,
    &[data-disabled],
    &[data-checked] {
        border-color: var(--radio-card-outline-color);
    }
}