ronantakizawa/codereview-bench huggingface dataset:
Repository: directus/directus
File: tests/blackbox/tests/db/routes/files/tus.test.ts (TypeScript)

Code before:
					fields: ['*'],
				},
			],
			policyName: 'TUS',
		});

		policies.set(vendor, response.id);
	}
});

afterAll(async () => {
	for (const vendor of vendors) {
		if (!policies.has(vendor)) continue;

		await DeletePermission(vendor, {
			policyId: policies.get(vendor),
		});
	}
});

describe('/files/tus', () => {
	describe('POST /files/tus', () => {
		it.each(vendors)('%s', async (vendor) => {
			// Action
			const response = await new Promise<Response>((resolve, reject) => {
				const upload = new Upload(Buffer.from(file.content), {
					headers: {
						Authorization: `Bearer ${USER.APP_ACCESS.TOKEN}`,
					},
					endpoint: getUrl(vendor) + `/files/tus`,
					chunkSize: Buffer.from(file.content).byteLength,
					metadata: { filename_download: file.name, type: file.type },
					removeFingerprintOnSuccess: true,
					onError(error) {
						reject(error);
					},
					async onSuccess() {
						const response = await request(getUrl(vendor))
							.get('/files')
							.query({
								filename_download: { _eq: file.name },
								fields: ['id'],
								limit: 1,
							})
							.set('Authorization', `Bearer ${USER.APP_ACCESS.TOKEN}`);

						resolve(response);
					},
					onShouldRetry() {
						return false;
					},

Review comment (refactor):
Perhaps we could create a helper function for the upload process to eliminate duplication and centralize the logic?

Code after:

				const response = await request(getUrl(vendor))
					.get('/files')
					.query(query)
					.set('Authorization', `Bearer ${USER.APP_ACCESS.TOKEN}`);

				resolve(response);
			},
			onShouldRetry() {
				return false;
			},
		});

		upload.start();
	});
}

beforeAll(async () => {
	for (const vendor of vendors) {
		const response = await CreatePermission(vendor, {
			role: USER.APP_ACCESS.KEY,
			permissions: [
				{
					collection: 'directus_files',
					action: 'create',
					permissions: {},
					fields: ['*'],
				},
				{
					collection: 'directus_files',
					action: 'read',
					permissions: {},
					fields: ['*'],
				},
				{
					collection: 'directus_files',
					action: 'update',
					permissions: {},
					fields: ['*'],
				},
				{
					collection: 'directus_files',
					action: 'delete',
					permissions: {},
					fields: ['*'],
				},
			],
			policyName: 'TUS',
		});

		policies.set(vendor, response.id);
Repository: directus/directus
File: tests/blackbox/common/functions.ts (TypeScript)

Code before:
		.patch(`/policies/${policyId}`)
		.set('Authorization', `Bearer ${USER.ADMIN.TOKEN}`)
		.send({
			permissions: {
				create: options.permissions.map((p) => ({ ...p, policy: policyId })),
				update: [],
				delete: [],
			},
		});

	return response.body.data;
}

export type OptionsDeletePermission = {
	policyId: string;
};

export async function DeletePermission(vendor: Vendor, options: OptionsDeletePermission) {
	const policyId = options.policyId;

	const response = await request(getUrl(vendor))
		.delete(`/policies/${policyId}`)
		.set('Authorization', `Bearer ${USER.ADMIN.TOKEN}`);

	return response.body;
}

// TODO
// export async function UpdatePermission() {}


Review comment (security):
```suggestion
export async function DeletePermission(vendor: Vendor, { policyId }: OptionsDeletePermission) {
	const response = await request(getUrl(vendor))
		.delete(`/policies/${policyId}`)
		.set('Authorization', `Bearer ${USER.ADMIN.TOKEN}`);

	return response.body;
}
```

Code after:
		.patch(`/policies/${policyId}`)
		.set('Authorization', `Bearer ${USER.ADMIN.TOKEN}`)
		.send({
			permissions: {
				create: options.permissions.map((p) => ({ ...p, policy: policyId })),
				update: [],
				delete: [],
			},
		});

	return response.body.data;
}

export type OptionsDeletePermission = {
	policyId: string;
};

export async function DeletePermission(vendor: Vendor, { policyId }: OptionsDeletePermission) {
	const response = await request(getUrl(vendor))
		.delete(`/policies/${policyId}`)
		.set('Authorization', `Bearer ${USER.ADMIN.TOKEN}`);

	return response.body;
}

// TODO
// export async function UpdatePermission() {}
Repository: directus/directus
File: app/src/modules/settings/routes/flows/overview.vue (Vue)

Code before:
		description: null,
	},
]);

const internalSort = ref<Sort>({ by: 'name', desc: false });

const flowsStore = useFlowsStore();

const flows = computed(() => {
	const sortedFlows = sortBy(flowsStore.flows, [internalSort.value.by]);
	return internalSort.value.desc ? sortedFlows.reverse() : sortedFlows;
});

function updateSort(sort: Sort | null) {
	internalSort.value = sort ?? { by: 'name', desc: false };
}

function navigateToFlow({ item: flow, event }: { item: FlowRaw; event: MouseEvent }) {
	const route = `/settings/flows/${flow.id}`;

	if (event.ctrlKey || event.metaKey || event.button === 1) {
		event.preventDefault();
		window.open(router.resolve(route).href, '_blank');
	} else {
		router.push(route);
	}
}

async function deleteFlow() {
	if (!confirmDelete.value || deletingFlow.value) return;

	deletingFlow.value = true;

	try {
		await api.delete(`/flows/${confirmDelete.value.id}`);
		await flowsStore.hydrate();
		confirmDelete.value = null;
	} catch (error) {
		unexpectedError(error);
	} finally {
		deletingFlow.value = false;
	}
}

async function toggleFlowStatusById(id: string, value: string) {
	try {
		await api.patch(`/flows/${id}`, {
			status: value === 'active' ? 'inactive' : 'active',
		});

		await flowsStore.hydrate();

Review comment (bug):
Let’s revert this change since Copilot was wrong 🙈

```suggestion
function navigateToFlow({ item: flow, event }: { item: FlowRaw; event: MouseEvent }) {
	const route = `/settings/flows/${flow.id}`;

	if (event.ctrlKey || event.metaKey || event.button === 1) {
		window.open(router.resolve(route).href, '_blank');
	} else {
		router.push(route);
	}
}
```

Code after:
		description: null,
	},
]);

const internalSort = ref<Sort>({ by: 'name', desc: false });

const flowsStore = useFlowsStore();

const flows = computed(() => {
	const sortedFlows = sortBy(flowsStore.flows, [internalSort.value.by]);
	return internalSort.value.desc ? sortedFlows.reverse() : sortedFlows;
});

function updateSort(sort: Sort | null) {
	internalSort.value = sort ?? { by: 'name', desc: false };
}

function navigateToFlow({ item: flow, event }: { item: FlowRaw; event: MouseEvent }) {
	const route = `/settings/flows/${flow.id}`;

	if (event.ctrlKey || event.metaKey || event.button === 1) {
		window.open(router.resolve(route).href, '_blank');
	} else {
		router.push(route);
	}
}

async function deleteFlow() {
	if (!confirmDelete.value || deletingFlow.value) return;

	deletingFlow.value = true;

	try {
		await api.delete(`/flows/${confirmDelete.value.id}`);
		await flowsStore.hydrate();
		confirmDelete.value = null;
	} catch (error) {
		unexpectedError(error);
	} finally {
		deletingFlow.value = false;
	}
}

async function toggleFlowStatusById(id: string, value: string) {
	try {
		await api.patch(`/flows/${id}`, {
			status: value === 'active' ? 'inactive' : 'active',
		});

		await flowsStore.hydrate();
	} catch (error) {
Repository: directus/directus
File: app/src/interfaces/translations/translation-form.vue (Vue)

Code before:
			</template>

			<template #controls="{ active, toggle }">
				<v-remove
					v-if="item && !(nonEditable && item.$type !== 'deleted')"
					:class="{ disabled: activatorDisabled }"
					:disabled="activatorDisabled"
					:item-type="item.$type"
					:item-info="relationInfo"
					:item-is-local="isLocalItem(item)"
					:item-edits="getItemEdits(item)"
					@action="onToggleDelete(item, itemInitial)"
				/>

				<slot name="split-view" :active :toggle />
			</template>
		</language-select>

		<v-form
			v-if="selectedLanguage"
			:key="selectedLanguage.value"
			:primary-key="
				relationInfo?.junctionPrimaryKeyField.field
					? (itemInitial?.[relationInfo?.junctionPrimaryKeyField.field] ?? '+')
					: null
			"
			:class="{ unselected: !item }"
			:disabled="disabled || !saveAllowed || item?.$type === 'deleted'"
			:non-editable
			:loading="loading"
			:fields="fields"
			:model-value="item"
			:initial-values="itemInitial"
			:badge="selectedLanguage.text"
			:direction="selectedLanguage.direction"
			:autofocus="autofocus"
			inline
			@update:model-value="updateValue($event, lang)"
		/>

		<v-divider />
	</div>
</template>

<style lang="scss" scoped>
.activator-loading-placeholder {
	--size: 24px;

	display: inline-block;
	inline-size: var(--size);
	block-size: var(--size);

Review comment (refactor):
Let’s simplify this condition for better readability.

```suggestion
			:primary-key="itemPrimaryKey ?? '+'"
```

Code after:
			</template>

			<template #controls="{ active, toggle }">
				<v-remove
					v-if="item && !(nonEditable && item.$type !== 'deleted')"
					:class="{ disabled: activatorDisabled }"
					:disabled="activatorDisabled"
					:item-type="item.$type"
					:item-info="relationInfo"
					:item-is-local="isLocalItem(item)"
					:item-edits="getItemEdits(item)"
					@action="onToggleDelete(item, itemInitial)"
				/>

				<slot name="split-view" :active :toggle />
			</template>
		</language-select>

		<v-form
			v-if="selectedLanguage"
			:key="selectedLanguage.value"
			:primary-key="itemPrimaryKey ?? '+'"
			:class="{ unselected: !item }"
			:disabled="disabled || !saveAllowed || item?.$type === 'deleted'"
			:non-editable
			:loading="loading"
			:fields="fields"
			:model-value="item"
			:initial-values="itemInitial"
			:badge="selectedLanguage.text"
			:direction="selectedLanguage.direction"
			:autofocus="autofocus"
			inline
			@update:model-value="updateValue($event, lang)"
		/>

		<v-divider />
	</div>
</template>

<style lang="scss" scoped>
.activator-loading-placeholder {
	--size: 24px;

	display: inline-block;
	inline-size: var(--size);
	block-size: var(--size);
}

.v-icon.disabled {
	--v-icon-color: var(--theme--primary-subdued);
Repository: directus/directus
File: app/src/composables/use-flows.ts (TypeScript)

Code before:
			isCustomDialogConfirmed,
		} = currentFlowConfirmations.value;

		if (
			(isUnsavedChangesConfirmationRequired && !isUnsavedChangesConfirmed) ||
			(isCustomDialogConfirmationRequired && !isCustomDialogConfirmed)
		) {
			return;
		}

		if (!primaryKeyField.value) return;

		runningFlows.value = [...runningFlows.value, flowId];

		try {
			if (
				location === 'collection' &&
				currentFlow.value.options?.requireSelection === false &&
				selection.value.length === 0
			) {
				await api.post(`/flows/trigger/${flowId}`, {
					...(confirmValues.value ?? {}),
					collection: collection.value,
				});
			} else {
				const keys = unref(primaryKey) ? [unref(primaryKey)] : selection.value || [];

				await api.post(`/flows/trigger/${flowId}`, {
					...confirmValues.value,
					collection: collection.value,
					keys,
				});
			}

			onRefreshCallback();

			notify({
				title: t('trigger_flow_success', { flow: currentFlow.value.name }),
			});

			await notificationStore.refreshUnreadCount();

			resetConfirm();
		} catch (error) {
			unexpectedError(error);
		} finally {
			runningFlows.value = runningFlows.value.filter((runningFlow) => runningFlow !== flowId);
		}
	}

	return {

Review comment (refactor):
Kind of a nit, but you can prevent the duplicate unref call.
```suggestion
				const pk = unref(primaryKey);
				const keys = pk ? [pk] : selection.value || [];
```

Code after:
			isCustomDialogConfirmed,
		} = currentFlowConfirmations.value;

		if (
			(isUnsavedChangesConfirmationRequired && !isUnsavedChangesConfirmed) ||
			(isCustomDialogConfirmationRequired && !isCustomDialogConfirmed)
		) {
			return;
		}

		if (!primaryKeyField.value) return;

		runningFlows.value = [...runningFlows.value, flowId];

		try {
			if (
				location === 'collection' &&
				currentFlow.value.options?.requireSelection === false &&
				selection.value.length === 0
			) {
				await api.post(`/flows/trigger/${flowId}`, {
					...(confirmValues.value ?? {}),
					collection: collection.value,
				});
			} else {
				const pk = unref(primaryKey);
				const keys = pk ? [pk] : selection.value || [];

				await api.post(`/flows/trigger/${flowId}`, {
					...confirmValues.value,
					collection: collection.value,
					keys,
				});
			}

			onRefreshCallback();

			notify({
				title: t('trigger_flow_success', { flow: currentFlow.value.name }),
			});

			await notificationStore.refreshUnreadCount();

			resetConfirm();
		} catch (error) {
			unexpectedError(error);
		} finally {
			runningFlows.value = runningFlows.value.filter((runningFlow) => runningFlow !== flowId);
		}
	}
Repository: directus/directus
File: app/src/views/private/private-view/stores/nav-bar.ts (TypeScript)

Code before:
import { useLocalStorage, createEventHook, useBreakpoints } from '@vueuse/core';
import { defineStore } from 'pinia';
import { watch } from 'vue';
import { useRoute } from 'vue-router';
import { BREAKPOINTS } from '@/constants';

export const useNavBarStore = defineStore('nav-bar-store', () => {
	const collapsed = useLocalStorage('nav-bar-collapsed', false);
	const size = useLocalStorage('nav-bar-size', 250);

	const route = useRoute();
	const breakpoints = useBreakpoints(BREAKPOINTS);

	watch(
		() => route.fullPath,
		() => {
			if (breakpoints.smaller('lg').value) collapse();
		},
	);

	const collapseHook = createEventHook();
	const expandHook = createEventHook();

	const collapse = () => {
		if (collapsed.value === true) return;
		collapsed.value = true;
		collapseHook.trigger();
	};

	const expand = () => {
		if (collapsed.value === false) return;
		collapsed.value = false;
		expandHook.trigger();
	};

	const toggle = () => {
		if (collapsed.value === true) expand();
		else collapse();
	};

	return {
		collapsed,
		size,
		collapse,

Review comment (suggestion):
Great improvement. The nav bar doesn't display inline when the sidebar is expanded, so we need to add a check for this case.

Let’s not forget to add the imports.

```suggestion
	const { lg, xl } = useBreakpoints(BREAKPOINTS);
	const sidebarStore = useSidebarStore();

	const inlineNav = computed(() => {
		return sidebarStore.collapsed ? lg.value : xl.value;
	});

	watch(
		() => route.fullPath,
		() => {
			if (!inlineNav.value) collapse();
		},
	);
```

Code after:
import { useLocalStorage, createEventHook, useBreakpoints } from '@vueuse/core';
import { defineStore } from 'pinia';
import { computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { BREAKPOINTS } from '@/constants';
import { useSidebarStore } from '@/views/private/private-view/stores/sidebar';

export const useNavBarStore = defineStore('nav-bar-store', () => {
	const collapsed = useLocalStorage('nav-bar-collapsed', false);
	const size = useLocalStorage('nav-bar-size', 250);

	const route = useRoute();
	const { lg, xl } = useBreakpoints(BREAKPOINTS);
	const sidebarStore = useSidebarStore();

	const inlineNav = computed(() => {
		return sidebarStore.collapsed ? lg.value : xl.value;
	});

	watch(
		() => route.fullPath,
		() => {
			if (!inlineNav.value) collapse();
		},
	);

	const collapseHook = createEventHook();
	const expandHook = createEventHook();

	const collapse = () => {
		if (collapsed.value === true) return;
		collapsed.value = true;
		collapseHook.trigger();
	};

	const expand = () => {
		if (collapsed.value === false) return;
		collapsed.value = false;
		expandHook.trigger();
	};

	const toggle = () => {
		if (collapsed.value === true) expand();
		else collapse();
Repository: directus/directus
File: app/src/interfaces/collection-item-dropdown/collection-item-dropdown.vue (Vue)

Code before:

			<div v-if="!nonEditable" class="item-actions">
				<v-remove v-if="displayItem" deselect @action="value = null" />

				<v-icon v-else class="expand" name="expand_more" />
			</div>
		</v-list-item>

		<drawer-collection
			v-model:active="selectDrawerOpen"
			:collection="selectedCollection"
			:selection="value?.key ? [value.key] : []"
			:filter="filter!"
			@input="onSelection"
			@update:active="selectDrawerOpen = false"
		/>
	</div>
</template>

<style lang="scss" scoped>
@use '@/styles/mixins';

.v-list-item {
	&.disabled:not(.non-editable) {
		--v-list-item-color: var(--theme--foreground-subdued);
		--v-list-item-background-color: var(--theme--form--field--input--background-subdued);
		--v-list-item-border-color: var(--v-input-border-color, var(--theme--form--field--input--border-color));
	}

	&:focus-within:not(.disabled),
	&:focus-visible:not(.disabled) {
		--v-list-item-border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
		--v-list-item-border-color-hover: var(--v-list-item-border-color);

		box-shadow: var(--theme--form--field--input--box-shadow-focus);
	}
}

.placeholder {
	color: var(--v-input-placeholder-color, var(--theme--foreground-subdued));
}

.item-actions {
	@include mixins.list-interface-item-actions;
}

.preview {
	display: block;
	flex-grow: 1;
	block-size: calc(100% - 16px);
	overflow: hidden;

Review comment (suggestion):

```suggestion
	&.disabled:not(.non-editable) {
		--v-list-item-background-color: var(--theme--form--field--input--background-subdued);
	}
```

Code after:

			<div v-if="!nonEditable" class="item-actions">
				<v-remove v-if="displayItem" deselect :disabled @action="value = null" />

				<v-icon v-else class="expand" name="expand_more" />
			</div>
		</v-list-item>

		<drawer-collection
			v-model:active="selectDrawerOpen"
			:collection="selectedCollection"
			:selection="value?.key ? [value.key] : []"
			:filter="filter!"
			@input="onSelection"
			@update:active="selectDrawerOpen = false"
		/>
	</div>
</template>

<style lang="scss" scoped>
@use '@/styles/mixins';

.v-list-item {
	&.disabled:not(.non-editable) {
		--v-list-item-background-color: var(--theme--form--field--input--background-subdued);
	}

	&:focus-within,
	&:focus-visible {
		--v-list-item-border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
		--v-list-item-border-color-hover: var(--v-list-item-border-color);

		box-shadow: var(--theme--form--field--input--box-shadow-focus);
	}
}

.placeholder {
	color: var(--v-input-placeholder-color, var(--theme--foreground-subdued));
}

.item-actions {
	@include mixins.list-interface-item-actions;
}

.preview {
	display: block;
	flex-grow: 1;
	block-size: calc(100% - 16px);
	overflow: hidden;
}
</style>
Repository: directus/directus
File: app/src/interfaces/collection-item-dropdown/collection-item-dropdown.vue (Vue)

Code before:
			</div>
		</v-list-item>

		<drawer-collection
			v-model:active="selectDrawerOpen"
			:collection="selectedCollection"
			:selection="value?.key ? [value.key] : []"
			:filter="filter!"
			@input="onSelection"
			@update:active="selectDrawerOpen = false"
		/>
	</div>
</template>

<style lang="scss" scoped>
@use '@/styles/mixins';

.v-list-item {
	&.disabled:not(.non-editable) {
		--v-list-item-color: var(--theme--foreground-subdued);
		--v-list-item-background-color: var(--theme--form--field--input--background-subdued);
		--v-list-item-border-color: var(--v-input-border-color, var(--theme--form--field--input--border-color));
	}

	&:focus-within:not(.disabled),
	&:focus-visible:not(.disabled) {
		--v-list-item-border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
		--v-list-item-border-color-hover: var(--v-list-item-border-color);

		box-shadow: var(--theme--form--field--input--box-shadow-focus);
	}
}

.placeholder {
	color: var(--v-input-placeholder-color, var(--theme--foreground-subdued));
}

.item-actions {
	@include mixins.list-interface-item-actions;
}

.preview {
	display: block;
	flex-grow: 1;
	block-size: calc(100% - 16px);
	overflow: hidden;
}
</style>


Review comment (suggestion):
Let’s add the disabled prop to v-remove instead — see https://github.com/directus/directus/pull/26365/files#r2609725376.

```suggestion
	&:focus-within
	&:focus-visible {
```

Code after:
			</div>
		</v-list-item>

		<drawer-collection
			v-model:active="selectDrawerOpen"
			:collection="selectedCollection"
			:selection="value?.key ? [value.key] : []"
			:filter="filter!"
			@input="onSelection"
			@update:active="selectDrawerOpen = false"
		/>
	</div>
</template>

<style lang="scss" scoped>
@use '@/styles/mixins';

.v-list-item {
	&.disabled:not(.non-editable) {
		--v-list-item-background-color: var(--theme--form--field--input--background-subdued);
	}

	&:focus-within,
	&:focus-visible {
		--v-list-item-border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
		--v-list-item-border-color-hover: var(--v-list-item-border-color);

		box-shadow: var(--theme--form--field--input--box-shadow-focus);
	}
}

.placeholder {
	color: var(--v-input-placeholder-color, var(--theme--foreground-subdued));
}

.item-actions {
	@include mixins.list-interface-item-actions;
}

.preview {
	display: block;
	flex-grow: 1;
	block-size: calc(100% - 16px);
	overflow: hidden;
}
</style>
Repository: directus/directus
File: app/src/interfaces/datetime/datetime.vue (Vue)

Code before:
			:use-24
			:model-value="value"
			@update:model-value="$emit('input', $event)"
			@close="dateTimeMenu?.deactivate"
		/>
	</v-menu>
</template>

<style lang="scss" scoped>
.v-list-item {
	--v-list-item-color-active: var(--v-list-item-color);
	--v-list-item-background-color-active: var(
		--v-list-item-background-color,
		var(--v-list-background-color, var(--theme--form--field--input--background))
	);

	&.disabled:not(.non-editable) {
		--v-list-item-color: var(--theme--foreground-subdued);
		--v-list-item-background-color: var(--theme--form--field--input--background-subdued);
		--v-list-item-border-color: var(--v-input-border-color, var(--theme--form--field--input--border-color));
	}

	&.active:not(.disabled),
	&:focus-within:not(.disabled),
	&:focus-visible:not(.disabled) {
		--v-list-item-border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
		--v-list-item-border-color-hover: var(--v-list-item-border-color);

		offset: 0;
		box-shadow: var(--theme--form--field--input--box-shadow-focus);
	}
}

.v-icon {
	&.today-icon {
		&:hover,
		&.active {
			--v-icon-color: var(--theme--primary);
		}
	}

	&.clear-icon {
		&:hover,
		&.active {
			--v-icon-color: var(--theme--danger);
		}
	}
}
</style>


Review comment (suggestion):

```suggestion
	&.disabled:not(.non-editable) {
		--v-list-item-background-color: var(--theme--form--field--input--background-subdued);
	}

	&.active,
	&:focus-within
	&:focus-visible {
		--v-list-item-border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
		--v-list-item-border-color-hover: var(--v-list-item-border-color);

```

Code after:
			:use-24
			:model-value="value"
			@update:model-value="$emit('input', $event)"
			@close="dateTimeMenu?.deactivate"
		/>
	</v-menu>
</template>

<style lang="scss" scoped>
.v-list-item {
	--v-list-item-color-active: var(--v-list-item-color);
	--v-list-item-background-color-active: var(
		--v-list-item-background-color,
		var(--v-list-background-color, var(--theme--form--field--input--background))
	);

	&.disabled:not(.non-editable) {
		--v-list-item-background-color: var(--theme--form--field--input--background-subdued);
	}

	&.active,
	&:focus-within,
	&:focus-visible {
		--v-list-item-border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
		--v-list-item-border-color-hover: var(--v-list-item-border-color);

		offset: 0;
		box-shadow: var(--theme--form--field--input--box-shadow-focus);
	}
}

.v-icon {
	&.today-icon {
		&:hover,
		&.active {
			--v-icon-color: var(--theme--primary);
		}
	}

	&.clear-icon {
		&:hover,
		&.active {
			--v-icon-color: var(--theme--danger);
		}
	}
}
</style>