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

//------------------------------------------------------------------------------------ Main content

// categories

#categories {
	display: block;
	font-size: 0;
	padding-top: 9px;
	text-transform: uppercase;

	> li {
		border-bottom: 3px solid #3baa34;
		border-right: 1px solid #d8d8d8;
		box-sizing: border-box;
		display: inline-block;
		padding: 8px;
		font-size: 12px;
	}
}

// company-logo

.company.logo > a {
	background: white url('img/olympique-cycles.jpg') center -2px no-repeat;
	background-size: auto 100%;
}

body.min-left .company.logo > a {
	background: white url('img/olympique-cycles.jpg') 2px 0 no-repeat;
	background-size: auto 52px;
}

// features

.general.actions .sort > a {
	background-image: url('../../../../itrocks/framework/skins/default/img/sort-1-down-24.svg');
}

// html

strong {
	font-weight: 500;
}

// main

body {
	grid-template-areas:
		"title title-bar"
		"title categories"
		"menu main"
		"quick main";
	grid-template-columns: 232px 1fr;
	grid-template-rows: auto auto 1fr auto;

	#categories {
		grid-area: categories;
		min-height: 36px;
	}

	#title-bar {
		grid-area: title-bar;
		min-height: 36px;
	}
}

body.password.reset,
body.user.login,
body.user.register {
	grid-template-areas:
		"title main"
		"menu main";
	grid-template-columns: 232px 1fr;
	grid-template-rows: 72px 1fr;

	#categories {
		display: none;
	}

	#menu {
		display: none;
	}

	#title-bar {
		display: none;
	}
}

//------------------------------------------------------------------------------ article breadcrumb

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

	header > ol.breadcrumb > li:last-child {
		display: inline-block;

		> a {
			display: inline-block;
		}

		&:after {
			content: '>';
		}
	}
}

//-------------------------------------------------------------------------------------------- Cart

#modal article.cart.order {
	grid-template-areas: "header" "insufficient" "header2" "content" "footer";
	grid-template-rows: min-content min-content min-content min-content 1fr;
	height: 410px;
	left: calc(50% - 250px);
	top: calc(50% - 200px);
	width: 510px;

	> div {
		grid-area: footer;
	}

	> p {
		grid-area: content;
		margin: 10px;
	}

	> section.insufficient.stock.items {
		grid-area: insufficient;
		max-height: 214px;
		overflow-y: auto;
		padding: 4px;

		> h3 {
			font-weight: $medium;

			> span {
				color: #d04040;
				font-size: 1.2em;
			}

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

		> table {
			border: 1px solid #ddd;
			margin: 10px 0 0;
			padding: 2px;
			width: 100%;


			th[data-name=name] {
				min-width: 50%;
			}

			th {
				text-align: left;
			}

			td, th {
				padding: 4px;

				&[data-name=available_quantity], &[data-name=quantity] {
					max-width: 50px;
					text-align: right;
				}
			}
		}
	}

	> ul.actions {
		grid-area: header2;
	}
}

.download.pdf {
	margin-left: 250px;
}

.download.pdf,
.total.amount {
	font-size: 16px;
	font-weight: $medium;
	grid-area: footer;
	padding: 10px 10px 0;
}

//--------------------------------------------------------------------------------------- Title bar

#title-bar {
	font-size: 0;
	position: relative;

	> * {
		box-sizing: border-box;
		display: inline-block;
		font-size: $font-size;
		height: 36px;
		vertical-align: top;
	}

	> :not(:first-child) {
		margin-left: 1px;
	}

	> :nth-last-child(2) {
		margin-right: 36px;
	}

	> .business-hours {
		background: #444 url('img/calendar.svg') 8px center no-repeat;
		background-size: 16px;
		color: #4edb43;
		font-size: 14px;
		font-weight: $medium;
		padding: 10px 8px 0 32px;
	}

	> #business-hours.popup {
		background: #444;
		font-size: 14px;
		height: initial;
		padding: 4px;
		position: absolute;
		left: 491px;
		top: 34px;

		ul {
			color: white;
			display: block;

			li {
				display: block;
				padding: 8px;

				.day {
					color: #4edb43;
					font-weight: $medium;

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

	> .cart.mini {
		background: #444 url('img/shopping-cart.svg') 10px center no-repeat;
		background-size: 24px;
		color: #eee;
		display: inline-block;
		font-size: 16px;
		padding: 4px 4px 0 40px;

		> * {
			display: inline-block;
			padding: 4px 4px 0;
		}

		> h3 {
			font-size: 18px;
			font-weight: $medium;
			padding-left: 8px;
		}

		> p {
			color: #4edb43;
			font-weight: $medium;

			&:after {
				content: ')';
			}

			&:before {
				content: '(';
			}
		}
	}

	> .contact {
		background: #444;
		color: white;
		font-size: 14px;
		font-weight: $medium;
		padding: 10px 8px 0 8px;
	}

	> .phone-number {
		background: #444 url('img/phone.svg') left 8px center no-repeat;
		background-size: 16px;
		color: #4edb43;
		font-size: 14px;
		font-weight: $medium;
		padding: 10px 8px 0 32px;
	}

	> .search {
		background-color: #444;
		display: inline-block;
		font-size: 0;

		> button {
			background: #444 url('img/search.svg') center no-repeat;
			background-size: 16px;
			border: none;
			display: inline-block;
			margin: 0 !important;
			height: 36px;
			position: initial;
			vertical-align: top;
			width: 32px;
		}

		> input {
			border: 3px solid #444;
			font-size: $font-size;
			padding: 10px;
			width: 300px;
		}

		> label {
			display: none;
		}
	}

	> .user.mini {
		background: url('img/user.svg') center no-repeat;
		background-size: auto 24px;
		font-size: 0;
		position: absolute;
		right: 8px;
		top: 0;
		width: 24px;
	}

}

div.data {
	overflow: auto;
}

//--------------------------------------------------------------------------------- Item thumbnails

div.data > ul.items {
	display: inline-flex;
	flex-wrap: wrap;
	grid-auto-rows: 1fr auto;

	> li.item {
		border: 1px solid #ddd;
		border-radius: 2px;
		display: grid;
		margin: 10px;
		max-height: 218px;
		position: relative;
		text-align: center;
		width: 140px;

		> * {
			padding: 5px;
		}

		> a {
			min-height: 178px;
			position: relative;

			> img {
				height: 90px;
				margin: 8px 0;
				max-width: 130px;
				position: relative;

				&[src=""] {
					display: none;
				}
			}

			> .availability {
				border: 1px solid transparent;
				border-radius: 32px;
				font-size: 0;
				height: 16px;
				margin: -2px;
				position: absolute;
				right: 8px;
				top: 8px;
				width: 16px;

				&[data-value=available] {
					background: #3baa34;
					border-color: #40cf36;
				}

				&[data-value=await_reception] {
					background: #e09220;
					border-color: #f59e2c;
				}

				&[data-value=out_of_stock] {
					background: #b04020;
					border-color: #cf4322;
				}
			}

			> .code {
				font-style: italic;
				padding: 4px;
				text-align: left;

				&:before {
					content: 'Ref: ';
				}
			}

			> .description {
				max-height: 1.2em;
				width: 132px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			> .name {
				border-top: 1px solid #ddd;
				bottom: 1.75em;
				height: 2em;
				margin-top: 6px;
				overflow: hidden;
				padding-top: 6px;
				position: absolute;
				text-overflow: ellipsis;
				text-transform: uppercase;
				width: calc(100% - 12px);
			}

			> .amount {
				position: absolute;
				bottom: .25em;
				right: 6px;
				text-align: right;
				width: calc(100% - 16px);

				&:before {
					content: '= ';
				}

				&:empty {
					display: none;
				}
			}

			> .amount:not(:empty) + .price {
				text-align: left;
			}

			> .price {
				color: #d40;
				left: 10px;
				position: absolute;
				bottom: .25em;
				width: calc(100% - 20px);
			}
		}

		> .quantity {

			> label {
				display: none;
				font-size: 10px;
			}

			> button {
				height: 20px;
				width: 16px;
			}

			> input {
				padding: 4px !important;
				width: 32px !important;
			}

			> button.delete {
				position: absolute;
				right: 4px;
			}
		}
	}
}

//--------------------------------------------------------------------------------------- Item page

article.item.navigate {

	// layout
	div.data {
		display: grid;
		grid-template-areas:
			"pictures description description description"
			"pictures price availability quantity";
		grid-template-columns: auto auto auto auto;
		grid-template-rows: 1fr auto;
		overflow: hidden;

		> .availability {
			grid-area: availability;

			span:before {
				border: 1px solid transparent;
				border-radius: 16px;
				content: '';
				display: inline-block;
				height: 16px;
				margin-right: 8px;
				vertical-align: top;
				width: 16px;
			}

			&[data-value=available] span:before {
				background: #3baa34;
				border-color: #40cf36;
			}

			&[data-value=await_reception] span:before {
				background: #e09220;
				border-color: #f59e2c;
			}

			&[data-value=out_of_stock] span:before {
				background: #b04020;
				border-color: #cf4322;
			}
		}

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

		> .pictures {
			grid-area: pictures;
		}

		> .price {
			grid-area: price;
		}

		> .quantity {
			grid-area: quantity;
		}
	}

	// style
	div.data {

		> * {
			padding: 20px;
		}

		> .availability {
			text-align: center;

			> span {
				font-size: 18px;
				display: block;
				margin-top: 16px;
			}

			> h3 {
				color: #666;
				font-size: 16px;
				font-style: italic;
				font-weight: normal;
			}
		}

		> .description {
			padding: 20px;

			> h3 {
				margin-bottom: 2em;

				> * {
					display: block;
				}

				> .code {
					font-weight: normal;
				}

				> .name {
					font-size: 24px;
					font-weight: $medium;
				}
			}

			> div {
				margin-top: 1em;

				p {
					margin: 1em 0;
				}

				ul {
					margin: 1em 13px;
				}
			}
		}

		> .pictures {

			> h3 {
				display: none;
			}

			> img[src=""] {
				display: none;
			}

			li {
				cursor: pointer;
				display: inline-block;
				padding: 10px;
			}
		}

		> .price {
			text-align: center;

			> h3 {
				color: #666;
				font-size: 16px;
				font-style: italic;
				font-weight: normal;
			}

			> span {
				font-size: 18px;
				display: block;
				margin-top: 16px;

				&:after {
					content: '€ HT';
				}
			}
		}

		> .quantity {
			font-size: 16px;
			text-align: right;

			> h3 {
				display: none;
			}

			> label {
				margin: 0 60px 10px;

				&:first-letter {
					text-transform: uppercase;
				}
			}

			> button {
				height: 32px;
				width: 32px;
			}

			> input {
				font-size: 16px;
				width: 40px;
			}

			> button.bin {
				margin-left: 20px !important;
			}
		}
	}
}

//--------------------------------------------------------------------------------- Quantity widget

article div.quantity,
article section.quantity {

	> button {
		background-size: 24px;
		color: transparent;
		font-size: 0;
		margin: 0 !important;
		vertical-align: top;

		&.add {
			background: url('img/plus.png') center no-repeat;
			background-size: 8px;
			position: initial;
		}

		&.delete {
			background: url('../../../../itrocks/framework/skins/default/img/delete-24.svg') center no-repeat;
		}

		&.remove {
			background: url('img/minus.png') center no-repeat;
			background-size: 8px;
		}
	}

	> input {
		text-align: right;
	}

	> label {
		color: #666;
		display: block;
		font-style: italic;
		padding-bottom: 2px;
	}
}