// Widget configuration.

form.dashboard-widget-item {
	.fields-group {
		&.fields-group-description,
		&.fields-group-value,
		&.fields-group-time,
		&.fields-group-change-indicator {
			display: grid;
			grid-template-columns: minmax(100px, max-content) 1fr max-content minmax(95px, max-content);
			align-items: center;
			column-gap: 10px;
			row-gap: 5px;

			hr {
				grid-column: 1 / -1;
				margin: 0;
				width: 100%;
				border: solid $table-border-color;
				border-width: 1px 0 0 0;
			}

			.field-fluid {
				grid-column: 2 / -1;
			}

			.offset-3 {
				grid-column-start: 3;
			}

			.field-size {
				input {
					margin-right: 5px;
				}
			}

			.form-field {
				line-height: 24px;
			}
		}

		&.fields-group-description {
			.form-field:nth-child(1) {
				grid-column: 1 / -1;
			}
		}

		&.fields-group-value {
			.units-show {
				display: flex;

				label[for='units'] {
					width: 100%;
				}
			}
		}

		&.fields-group-change-indicator {
			grid-template-columns: repeat(3, max-content 96px);

			.input-color-picker {
				display: block;
			}
		}
	}
}

// Widget view.

div.dashboard-widget-item {
	.dashboard-grid-widget-body {
		$line-height: 1.14;

		a {
			position: relative;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			height: 100%;
			padding: 10px;
			overflow: hidden;
			color: inherit;

			@extend %webkit-scrollbar;

			&:focus,
			&:hover,
			&:visited {
				border: none;
			}

			> div {
				position: relative;
				display: flex;
				flex: 1 1 calc(100% / 3);
			}
		}

		.item-description,
		.item-value,
		.item-time {
			flex: 1 1 auto;
			max-width: 100%;
		}

		.item-value {
			display: flex;
			flex-wrap: wrap;
			margin: 0 5px;

			> .units {
				&:first-child,
				&:last-child {
					flex: 0 0 100%;
				}

				&:first-child {
					margin-bottom: -0.07em;
				}

				&:last-child {
					margin-top: -0.07em;
				}
			}

			&.type-text {
				min-width: 0;

				.item-value-content {
					min-width: 0;
				}
			}
		}

		.item-value-content {
			display: flex;
			align-items: baseline;
			overflow: hidden;
			white-space: nowrap;
		}

		.item-description,
		.item-time,
		.type-text .value {
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-description,
		.value,
		.decimals,
		.units,
		.item-time {
			font-size: calc(var(--content-height) * var(--widget-item-font) / #{$line-height});
			line-height: $line-height;
		}

		.units,
		.change-indicator {
			&:not(:last-child) {
				margin-right: 5px;
			}

			&:not(:first-child) {
				margin-left: 5px;
			}
		}

		.svg-arrow {
			height: calc(var(--content-height) * var(--widget-item-font) * 0.72 / #{$line-height});
		}

		z-sparkline {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 50%;
			width: 100%;
		}

		.item-value-no-data {
			color: $font-alt-color;
		}

		.left {
			justify-content: flex-start;
			max-width: max-content;
			margin-right: auto;
		}

		.center {
			justify-content: center;
		}

		.right {
			justify-content: flex-end;
			max-width: max-content;
			margin-left: auto;
		}

		.top {
			align-self: flex-start;
		}

		.middle {
			align-self: center;
		}

		.bottom {
			align-self: flex-end;
		}

		.bold {
			font-weight: bold;
		}
	}
}

.dashboard-widget-item {
	.svg-arrow-up {
		fill: $arrow-fill-up;
	}

	.svg-arrow-down {
		fill: $arrow-fill-down;
	}

	.svg-arrow-up-down {
		fill: $arrow-fill-up-down;
	}
}

// Modifications by themes.

@if $theme-name == 'hc-dark' or $theme-name == 'hc-light' {
	div.dashboard-widget-item {
		a {
			&:link {
				border-bottom: none;
			}
		}
	}
}
