@fieldsSpacing: 5px;

.header-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: 20px;
	width: 100%;
	flex-wrap: wrap;
	overflow: hidden;
	margin-bottom: 25px;
	max-height: 35px;

	/**
	 * The desired behavior would be to make .inner
	 * to nest elements (like .fields-row) after
	 * making its element wrapping on itself,
	 * but it seems there is not a way to specify the order...
	 * So, for now we won't make exceeding items wrap
	 * in .inner but just overflow
	 */

	& .inner {
		display: inline-flex;
		flex: auto;
		align-items: center;

		& > *:not(:last-child) {
			margin-right: @fieldsSpacing;
		}

		& > .image-field {
			display: flex;
			align-self: flex-end;

			& > img {
				max-height: 15px;
			}
		}

		& > .empty-field {
			height: 22px;

			&:first-child {
				border-top-left-radius: 2px;
				border-bottom-left-radius: 2px;

				// to give the element a static size
				flex-grow: 0;
				flex-basis: 50px;
			}

			&:nth-child(2) {
				flex-grow: 2;
			}
		}

		/**
		 * Known issue: when not all fields can fit, they
		 * will, on purpose, get wrapped but fields row will
		 * still try to take space they deserve (maybe it can
		 * solved with flex-basis: content, but it is pretty
		 * unsupported yet).
		 */

		& .fields-row {
			margin-top: 0;
			justify-content: flex-end;
			width: auto;
			flex-shrink: 1;

			&.can-grow {
				flex-grow: 1;
			}

			& .field:not(:last-child) {
				margin-right: @fieldsSpacing;
			}

			& .empty-field {
				border-radius: 0;
				border-top-right-radius: 2px;
				border-bottom-right-radius: 2px;

				// to give the element a static size
				flex-grow: 0;
				flex-basis: 50px;
			}
		}
	}
}
