@import "mixin";

.hostbanner {
	.container-hostbanner {
		position: relative;

		overflow: hidden;
		height: 1000px; /* allocate some height to be truncated by the flex :) */

		display: flex;
		flex-direction: column;
		justify-content: stretch;

		cursor: pointer;

		&:not(.no-background) {
			background-color: #2e2e2e;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
			padding-bottom: 5px;
		}

		&.disabled {
			padding-bottom: 0;
			height: 0;
		}

		@include transition(height 0.5s ease-in-out);

		.hostbanner-image-container {
			height: 100%;
			width: 100%;

			flex-grow: 1;
			flex-shrink: 1;
			min-height: 0;

			text-align: center;

			&.hostbanner-mode-0 {
				/* do not adjust */
				display: block;
			}

			&.hostbanner-mode-1 {
				/* do adjust and ignore ration */
				display: flex;

				height: 100%;
				width: 100%;

				> img {
					width: 100%;
					height: 100%;
				}
			}

			&.hostbanner-mode-2 {
				display: flex;
				flex-direction: row;
				justify-content: space-around;

				> img {
					object-fit: contain;
					max-height: 100%;

					/* "Normal" third more */
					//max-width: 100%;

					/* better adoptable mode */
					width: min-content;
				}
			}
		}
	}
}