// Widget configuration.

form.dashboard-widget-tophosts {
	$width-small: 250px;

	#list_columns .text {
		@extend %overflow-ellipsis;
		max-width: $width-small;
	}

	#column {
		max-width: $width-small;
	}
}

// Widget view.

div.dashboard-widget-tophosts {
	$bar-gauge-height: 20px;
	$thumbnail-height: 56px;

	.list-table {
		&.show-thumbnail {
			tbody td {
				height: $thumbnail-height;
				vertical-align: middle;
			}
		}

		tr[data-hostid] {
			cursor: pointer;
		}
	}

	.btn-thumbnail {
		overflow: hidden;

		&:not(.btn-link) {
			width: 100px;
			height: 56px;
			background: transparent var(--thumbnail) no-repeat center;
			background-size: cover;
			border-color: transparent;
			text-indent: -9999px;

			&:not(.is-loading) {
				border: 1px solid $ui-border-color;
				border-radius: 3px;
			}
		}
	}

	td {
		height: 20px;
		padding-top: 5px;
		padding-bottom: 5px;
		line-height: $bar-gauge-height;
	}

	.link-action {
		white-space: nowrap;
	}

	z-bar-gauge {
		min-width: 64px;
		height: $bar-gauge-height;
	}

	z-sparkline {
		min-width: 64px;
		height: 20px;
	}
}

.dashboard-widget-tophosts-hintbox-image {
	.dashboard-widget-tophosts-hintbox {
		overflow: hidden;
	}

	&.is-loading {
		min-width: 100px;
		min-height: 56px;

		&::before {
			content: ' ';
		}

		img {
			opacity: 0;
		}
	}

	img {
		display: block;
		max-width: 50vw;
		max-height: 50vh;
		opacity: 1;

		@if $ui-transitions {
			transition: opacity $ui-transition-duration ease-out;
		}
	}
}
