@import "ansyn/less/common";
@import "ansyn/less/z-index-globals";

@popup-padding-bottom: 15px;

:host {
	display: inherit;
	padding: 5px;

	.block {
		min-width: 0;
		align-self: center;
		box-sizing: border-box;
		white-space: nowrap;
		text-overflow: ellipsis;
		vertical-align: middle;
		align-items: center;
		position: relative;
		display: flex;
		height: 24px;

		span {
			margin-left: 5px;
			line-height: 23px;
			overflow: hidden;
			text-overflow: ellipsis;

			&.show-overflow {
				width: 100%;
				overflow: unset;
			}
		}
	}

	.pop-content {
		visibility: hidden;
		opacity: 0;
		transition: .4s;
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
	}

	.pop-hover:hover {
		.pop-content {
			visibility: visible;
			opacity: 1;
			padding-bottom: @popup-padding-bottom;

			&.top {
				transform: translate(0, -100%);
			}

			&.bottom {
				transform: translate(0, 100%);
			}

			&.left {
				left: unset;
				right: 0;
			}
		}
	}
}

@media screen and (max-width: 1366px) {
	:host {
		.block {
			transform: translateX(0%);
		}
	}
}
