@import '../../../../itrocks/framework/skins/default/colors.scss';

article.cart.navigate,
article.client-order.output {

	> .data {
		display: grid;
		grid-template-areas: "items" "comment";
		grid-template-rows: 1fr min-content;
		overflow: hidden;

		> .items {
			grid-area: items;
			overflow: auto;
		}

		> .comment {
			grid-area: comment;

			label:after {
				content: ' :';
			}

			label, textarea {
				display: block;
				width: calc(100% - 22px);
			}

			div.comment {
				padding: 8px;
			}
		}
	}
}

article.cart.navigate,
article.client.account,
article.client-order.output {

	> .general.actions {
		flex-direction: row-reverse;
		grid-area: footer;

		> .disconnect > a,
		> .empty > a {
			padding-left: 10px;
		}
	}
}

article.client-order.output,
article.navigate,
article.search {

	> header {
		display: grid;
		grid-template-areas: "breadcrumb title summary sort";
		grid-template-columns: auto 1fr auto auto;
		position: relative;

		> h2 {
			grid-area: title;
			font-size: 18px;
			padding-top: 6px;
		}

		> .breadcrumb {
			grid-area: breadcrumb;
		}

		> .sort {
			grid-area: sort;

			> label {
				display: inline-block;
				padding: 10px 4px;
			}

			> select {
				height: 31px;
				vertical-align: top;
			}
		}

		> .summary {
			grid-area: summary;
			white-space: nowrap;

			> h3 {
				display: none;
			}

			> p {
				font-weight: $medium;
				padding: 10px;
			}
		}
	}

	.only-first-100-displayed {
		font-weight: $medium;
		padding: 10px;
		text-align: center;

		&:after {
			content: ' ... ';
		}
		&:before {
			content: ' ... ';
		}
	}

}

#modal > article.big.item.picture {
	width: initial;
}