:root {
	--v-inline-fields-top-padding-compact: 13px;
	--v-inline-fields-top-padding-comfortable: 17px;
	--v-inline-fields-top-padding-default: 21px;
	--v-inline-fields-input-height: 24px;
	--v-inline-fields-density-compact-height: 32px;
	--v-inline-fields-density-comfortable-height: 40px;
	--v-inline-fields-grey: #909090;
}

%clearable-icons {
	.v-field__clearable,
	.v-input__append {
		padding-top: 0 !important;

		.v-icon {
			font-size: 1rem !important;
		}
	}
}

.v-inline-fields {
	position: relative;

	// ------------------------------------------------ The Display Value Container //
	&--display {
		&-container {
			* {
				align-items: center;
				display: flex;
			}

			// ------------------------ Clickable Cell Displayed Value //
			&-cell {
				cursor: pointer;
				display: block;
				max-height: unset !important;

				> div {
					width: 100%;
				}

				&-underline-full-width {
					.v-inline-fields {
						&--display-value {
							width: 100%;
						}
					}
				}

				.v-inline-fields {
					&--selection-control {
						.v-inline-fields--display-value {
							justify-content: center;
						}
					}
				}

				&,
				.v-input,
				.v-inline-fields--display-wrapper,
				.v-selection-control__wrapper {
					height: 100% !important;
					width: 100%;
				}
			}
		}

		// ------------------------ Displayed Value //
		&-value {
			cursor: pointer;
			letter-spacing: 0.009375em !important;

			&-empty {
				color: var(--v-inline-fields-grey);
				font-style: italic;
			}

			&-checkbox,
			&-switch {
				padding-bottom: 2px;
				padding-top: 6px;
			}
		}

		// ------------------------ Prepend/Append Icons //
		&-append,
		&-prepend {
			&-icon {
				align-items: flex-end;
				display: inline-flex;
			}

			&-inner-icon {
				align-items: flex-end;
				display: inline-flex;
			}
		}
	}

	&--container {
		&-cell {
			height: 100%;
			width: 100%;
		}

		// ------------------------------------------------ Disabled //
		&-disabled {
			.v-inline-fields--display-value {
				cursor: default !important;
				opacity: var(--v-disabled-opacity);
			}
		}

		// ------------------------------------------------ Loading //
		&-loading {
			.v-inline-fields--display-value {
				cursor: wait !important;
			}
		}

		// ------------------------------------------------ Icon Set //
		&-icon-set {
			&-fa {
				.v-field {
					&__clearable {
						font-size: .8rem;
					}

					&__append-inner {
						align-items: flex-end;
						padding-bottom: 0 !important;
					}
				}
			}
		}

		// ------------------------------------------------ Fields //

		// ------------------------ VSelect, VTextField //
		&-v-select,
		&-v-text-field {
			// ----------- Compact //
			&-compact {
				&-plain,
				&-underlined {
					.v-input {
						height: var(--v-inline-fields-density-compact-height);
						max-height: var(--v-inline-fields-density-compact-height);

						&__control {
							@extend %clearable-icons;

							padding-bottom: 4px;
						}

						> div {
							height: inherit !important;
							max-height: inherit !important;
						}

						.v-field__input {
							padding-top: 0;

							input {
								padding-bottom: 10px;
							}
						}

						.v-select__selection {
							align-items: center;
							padding-bottom: 10px;
						}
					}
				}
			}

			// ----------- Comfortable //
			&-comfortable {
				&-plain,
				&-underlined {
					.v-input {
						height: var(--v-inline-fields-density-comfortable-height);
						max-height: var(--v-inline-fields-density-comfortable-height);

						&__control {
							@extend %clearable-icons;

							padding-bottom: 8px;
						}

						> div {
							height: inherit !important;
							max-height: inherit !important;
						}

						.v-field__input {
							padding-top: 0;

							input {
								padding-bottom: 6px;
							}
						}

						.v-select__selection {
							align-items: center;
							padding-bottom: 6px;
						}
					}
				}
			}
		}

		// ------------------------ VSelect //
		&-v-select {
			// ----------- Compact //
			&-compact {
				&-plain,
				&-underlined {
					.v-field__append-inner {
						padding-top: 4px !important;
					}
				}
			}

			// ----------- Comfortable //
			&-comfortable {
				&-plain,
				&-underlined {
					.v-field__append-inner {
						padding-top: 8px !important;
					}
				}
			}
		}

		// ------------------------ VTextarea //
		&-v-textarea {
			.v-inline-fields--save-fields-container {
				align-items: flex-end;
			}
		}

		// ------------------------ VSelect, VTextarea, VTextField //
		&-v-select,
		&-v-textarea,
		&-v-text-field {
			width: 100%;
		}

		// ------------------------ VCheckbox, VSwitch //
		&-v-checkbox,
		&-v-switch {
			.v-input {
				align-items: center;
				display: flex;
				padding-bottom: 0;

				&__append {
					margin-inline-start: 0 !important;
					margin-left: 0;
					padding-bottom: 0 !important;
				}
			}

			.v-selection-control {
				min-height: unset;
			}

			.v-inline-fields--save-fields-container {
				align-items: center !important;
			}
		}

		// ------------------------------------------------ Prepend/Append //
		.v-input__append,
		.v-input__prepend,
		.v-field__append-inner,
		.v-field__prepend-inner {
			padding-top: 0 !important;

			.v-icon {
				font-size: 1rem !important;
			}
		}

		.v-field__append-inner,
		.v-field__prepend-inner {
			padding-bottom: 10px !important;
		}

		&-compact {
			.v-input__append,
			.v-input__prepend,
			.v-field__append-inner,
			.v-field__prepend-inner {
				align-items: center !important;
			}

			.v-field__append-inner,
			.v-field__prepend-inner {
				padding-bottom: 10px !important;
			}
		}

		&-comfortable {
			.v-input__append,
			.v-input__prepend,
			.v-field__append-inner,
			.v-field__prepend-inner {
				align-items: center !important;
			}

			.v-field__append-inner,
			.v-field__prepend-inner {
				padding-bottom: 6px !important;
			}
		}

		&-default {
			.v-input__append,
			.v-input__prepend,
			.v-field__append-inner,
			.v-field__prepend-inner {
				align-items: flex-end !important;
				padding-bottom: 0 !important;

				.v-icon {
					font-size: calc(var(--v-icon-size-multiplier) * 1.5em) !important;
				}
			}

			.v-inline-fields--save-fields-container {
				align-items: flex-end !important;
			}
		}
	}

	&--card-container {
		height: fit-content;
		min-width: fit-content !important;
		position: absolute;

		.v-card {
			border: 1px solid hsl(0deg 0% 50% / 50%);

			.v-card-text {
				padding: 5px 10px;

				> div {
					align-items: center;
					display: flex;
				}
			}
		}

		&-checkbox {
			.v-card {
				.v-card-text {
					.v-input {
						&__append {
							margin-inline-start: 0;
						}
					}
				}
			}
		}
	}

	// ------------------------------------------------ Save Field Container //
	&--save-fields-container {
		align-items: center;
		display: flex;
		height: 100%;
		margin-left: .1rem;
	}

	// ------------------------------------------------ Boolean Icons //
	&--boolean-icons {
		font-size: calc(var(--v-icon-size-multiplier) * 1em);
	}

	// ------------------------------------------------ Truncate //
	.truncate {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 250px;
	}

	// ------------------------------------------------ Misc //
	.v-input__append {
		padding-top: 0;
	}
}