// Global CSS
@import './color';
@import './mixins';
@import './dimension';

html {
	font-size: 62.5%; // 10px = 1rem, 12px=1.2rem, 14px=1.4rem, 16px=1.6rem
}

input {
	border: 0.1rem solid $aeap-border;
	height: $input-value-height;
	&:focus {
		border: 0.1rem solid $aeap-color-primary;
		outline: none;
	}

	&.error {
		border: 0.1rem solid $aeap-color-danger;
	}

	&.disabled {
		opacity: 0.3;
		pointer-events: none;
	}
}

textarea {
	&:invalid {
		box-shadow: none;
	}
}

.root {
	background: $aeap-bg;
	color: $aeap-color-navy;
	font-family: NotosansFont;
	font-size: 1.6rem;
	overflow-y: auto;
	fa-icon {
		font-size: 1.8rem;
	}
}

.divider {
	border-left: 0.1rem solid $aeap-color-light-grey;
	height: 3.2rem;
}

.desktop-toggle {
	@include screen-tablet {
		display: none;
	}
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tablet-toggle {
	@include screen-tablet-above {
		display: none;
	}
}

.mobile-toggle {
	@include screen-mobile {
		display: none;
	}
}

.shadow {
	box-shadow: 0 0.4rem 0.4rem $aeap-shadow;
}

.side-filter-panel {
	.nav.nav-tabs {
		font-family: 'NunitoFont', Fallback, sans-serif;
		padding: 0 2.4rem;
	}

	.secondary-filters {
		.nav-link {
			&.active {
				background-color: $aeap-color-lighter-grey;
			}
		}
	}

	& ::-webkit-scrollbar {
		height: 1rem;
		width: 1rem;
	}

	& ::-webkit-scrollbar-thumb {
		background: $aeap-scroll-bar;
		border-radius: 1rem;
	}
}

.nav.nav-tabs {
	border: 0;
	font-family: 'NunitoFont', Fallback, sans-serif;

	.nav-item.tab-class {
		border: 0;
		border-right: thin solid $aeap-border-divider;
		left: -0.8rem;
		position: relative;

		.nav-link {
			border: 0;
			border-bottom: 0.4rem solid transparent;
			color: $aeap-title-primary;
			font-family: 'NunitoFont', Fallback, sans-serif;
			margin: 0 1.2rem;
			padding: 0.5rem 0;

			&.active {
				background: $aeap-transparent;
				border: 0;
				border-bottom: 0.4rem solid $aeap-color-blue;
				color: $aeap-title-primary;
				font-weight: bold;
			}

			&:hover {
				border: 0;
				border-bottom: 0.4rem solid $aeap-color-blue;
				color: $aeap-title-primary;
			}
		}

		&:last-child {
			border-right: 0;
		}
	}

	.nav-item.tab-class-menu {
		border: 0;
		border-right: 0;
		left: -0.8rem;
		position: relative;

		.nav-link {
			border: 0;
			border-bottom: 0.4rem solid transparent;
			color: $aeap-title-primary;
			font-family: 'NunitoFont', Fallback, sans-serif;
			margin: 0 1.2rem;
			padding: 0.5rem 0;

			&.active {
				border: 0;
				border-bottom: 0.4rem solid $aeap-color-primary;
				color: $aeap-title-primary;
				font-weight: bold;
			}

			&:hover {
				border: 0;
				border-bottom: 0.4rem solid $aeap-color-primary;
				color: $aeap-title-primary;
			}
		}

		&:last-child {
			border-right: 0;
		}
	}
}

.tabset {
	.nav.nav-tabs {
		flex-wrap: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
		.nav-item.tab-class {
			margin-bottom: 0.8rem;
			white-space: nowrap;
			.nav-link {
				&:focus {
					outline: none;
				}
			}
		}

		.nav-item.tab-class-menu {
			margin-bottom: 0.2rem;
			white-space: nowrap;
			.nav-link {
				&:focus {
					outline: none;
				}
			}
		}
	}
}

.tabset ::-webkit-scrollbar {
	height: 1rem;
	width: 1rem;
}

.tabset ::-webkit-scrollbar-thumb {
	background: $aeap-scroll-bar;
	border-radius: 1rem;
}

.multi-button-toast-container {
	&.details,
	&.compare-class-tertiary {
		background: $aeap-color-lemongreen;
	}

	&.compare-class-primary {
		background: $aeap-color-blue-dark;
	}

	&.compare-class-secondary {
		background: $aeap-color-orange1;
	}
}

.center {
	align-items: center;
	display: flex;
	justify-content: center;
}

.link-color {
	color: $aeap-color-primary;
}

.link {
	text-decoration: underline;
}

.btn-lg {
	font-size: 1.6rem;
	font-weight: 600;
	padding: 1.2rem 3.2rem;
}

.icon-wrap {
	height: $icon-wrap-height;
	width: $icon-wrap-width;
}

.icon-wrap-for-circular-background {
	height: $icon-wrap-circular-background-height;
	width: $icon-wrap-circular-background-width;
}

.icon-color-toolbar-active {
	color: $aeap-toolbar-icon-active-color;
	transition: color 0.5s ease-in-out;
}

.icon-color-toolbar-inactive {
	color: $aeap-toolbar-icon-inactive-color;
	transition: color 0.5s ease-in-out;
}

.icon-color-success {
	color: $aeap-color-success;
}

.icon-color-danger {
	color: $aeap-color-danger-icon;
}

.icon-color-toolbar-blue {
	color: $aeap-color-blue;
	transition: color 0.5s ease-in-out;
}

.icon-color-toolbar-on-off {
	background: $aeap-color-light-blue;
	color: $aeap-color-white;
	transition: background-color 0.5s ease-in-out;
}

button {
	&.fake-btn {
		&.icon-color-toolbar-notification {
			background: $aeap-color-blue;
			border-radius: 9.9rem;
			color: $aeap-color-white;
			height: 2.8rem;
			transition: background-color 0.5s ease-in-out;

			&::before {
				position: relative;
				top: 0.1rem;
			}
		}
	}
}

.seperator {
	border-left: 0.1rem solid $aeap-border-divider;
}

.active-color {
	color: $aeap-title-primary;
}

.edited-allocation {
	background: $aeap-cp-editable;
}

.white-color {
	color: $aeap-color-white;
}

.passive-color {
	color: $aeap-title-secondary;
}

.background-primary-active {
	background-color: $aeap-color-m-light-blue;
}

.background-light-blue {
	background-color: $aeap-lighter-blue;
}

.scrollbar {
	&::-webkit-scrollbar {
		width: 1rem;
	}

	&::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 0.1rem $aeap-scrollbar-box-shadow;
		box-shadow: inset 0 0 0.1rem $aeap-scrollbar-box-shadow;
	}

	&::-webkit-scrollbar-thumb {
		background-color: $aeap-scroll-bar;
		border-radius: 1rem;
		outline: 0.1rem solid $aeap-border-divider;
	}
}

​ .disable-layout {
	cursor: not-allowed;
	opacity: 0.5;
	pointer-events: none;
}

.success {
	color: $aeap-color-success;
}

.warning {
	color: $aeap-color-warning;
}

.amber {
	color: $aeap-color-amber;
}

.danger {
	color: $aeap-color-danger;
}

.scenario-table-title {
	color: $aeap-title-primary;
}

.blue-clock {
	color: $aeap-color-blue;
}

.title-color {
	color: $aeap-color-navy;
}

.sub-title-color-dark-grey {
	color: $aeap-color-dark-grey;
}

.title-color-black {
	color: $aeap-color-black;
}

.load-scenario-table-title {
	color: $aeap-title-primary;
}

// ToolBar Stylying since it would be common across toolbars

.toolbar-component {
	background: $aeap-color-white;
	border-top: 0.1rem solid $aeap-border-divider;
	padding-bottom: 1.25rem;
	padding-top: 1.25rem;

	&.filter-toolbar {
		padding-bottom: 0.8rem;
		padding-top: 0.8rem;
	}

	&.predictive-ordering {
		.left-side {
			.icon-panel {
				.product-count {
					display: flex;
				}
			}

			.title-panel {
				.main-title-panel {
					.reviewed {
						color: $aeap-color-pink;
					}
				}
			}

			.main-sub-title-panel {
				position: relative;
				top: 0.5rem;
				ul {
					&.main-sub-title {
						li {
							font-style: italic;
							padding-right: 2.5rem;
							&:first-child {
								list-style-type: none;
							}
						}
					}
				}
			}
		}
	}

	.icon-group-divider {
		border-left: 0.1rem solid $aeap-color-white-light;
		height: 4.8rem;
	}

	.left-side {
		.title-panel {
			.main-title-panel {
				list-style-type: none;
				.main-title li {
					color: $aeap-color-navy;
					&:not(.sub-title-color-dark-grey) {
						align-self: center;
						font-style: normal;
						font-weight: normal;
						list-style-type: none;

						&:first-child {
							align-self: center;
							font-size: 2.4rem;
							font-style: normal;
							font-weight: 600;
							line-height: 2.4rem;
						}

						&:nth-child(2) {
							padding-left: 1.6rem;
							padding-right: 1.2rem;
						}

						&:not(:first-child) {
							&:not(:nth-child(2)) {
								padding-left: 1.2rem;
								padding-right: 1.2rem;
							}
						}

						&:last-child {
							border-right: 0;
						}
					}
				}

				.main-title-no-compare {
					.main-sub-title-panel {
						.main-sub-title {
							font-style: italic;
							font-weight: normal;
							list-style-type: circle;
						}

						.main-sub-title li {
							margin-right: 2.4rem;

							&:first-child {
								list-style-type: none;
							}
						}
					}
				}
			}

			.main-title {
				.compare-tabs {
					cursor: pointer;
					margin-right: $input-value-height;
					position: relative;
					width: auto;
					.fas.fa-times {
						color: $aeap-color-light-grey;
					}

					.fas.fa-pointer {
						color: $aeap-color-light-grey;
					}

					&.selected {
						.compare-tabs-title {
							&::after {
								border-bottom: 0.4rem solid $aeap-color-blue;
								bottom: -1rem;
								content: '';
								position: absolute;
								width: 70%;
							}
						}
					}

					&.details,
					&.compare-class-tertiary {
						&::before {
							background: $aeap-color-lemongreen;
						}
					}

					&.compare-class-primary {
						&::before {
							background: $aeap-color-blue-dark;
						}
					}

					&.compare-class-secondary {
						&::before {
							background: $aeap-color-orange1;
						}
					}

					&::before {
						border-radius: 50%;
						content: '';
						height: 1rem;
						margin-right: 1.2rem;
						width: 1rem;
					}

					.compare-tabs-title {
						font-weight: bold;
						line-height: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.compare-tabs-subtitle {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						li {
							display: inline;
							&:first-child {
								font-size: 1.2rem;
								font-weight: normal;
							}
						}
					}
				}

				.multi-select-dropdown-container {
					margin-left: 0.6rem;
					margin-right: 1.4rem;
				}
			}
		}
	}

	.right-side {
		padding-left: 1.5rem;
		.icon-group {
			border-right: 0.1rem solid $aeap-color-white-light;

			.icon-group-title {
				padding-bottom: 0.5rem;

				.section-title {
					color: $aeap-color-very-dark-grey;
					font-style: normal;
					font-weight: normal;
				}

				&.no-padding {
					padding: 0;
				}
			}

			.loop {
				margin-right: 0.5rem;

				&:last-child {
					margin-right: 0;
				}
			}

			&:last-child {
				border: 0;
				margin-right: 0;
				padding-right: 0;
			}
		}
	}

	.icon-actions {
		height: 3rem;
		width: 3rem;

		&:last-child {
			margin-right: 0;
		}

		.icon-color-toolbar-inactive {
			cursor: default;
		}

		.icon-wrap {
			width: 3rem;
		}
	}

	.icon-panel {
		a {
			color: $aeap-color-primary;
			cursor: pointer;
			font-weight: 600;
			outline: none;
			width: 10rem;
		}
	}

	&.sense-check-detail {
		padding-bottom: 0.8rem;
		padding-top: 0.8rem;
		.icon-group-divider {
			height: 3rem;
		}

		.return-link {
			font-size: 1.2rem;
			width: 8rem;
		}
	}
}

// form elements

label,
.label {
	line-height: 1;
	text-transform: capitalize;
}

.multiselect-dropdown {
	cursor: pointer;

	&:disabled {
		opacity: 0.3;
		pointer-events: none;
	}
}

.dropdown-option {
	&:hover {
		background: $aeap-checkbox;
	}
}

.dropdown-label {
	border: 0.1rem solid $aeap-border;
	height: $input-value-height;
	line-height: $input-value-height;
	&.error {
		border: 0.1rem solid $aeap-color-danger-icon;
	}
}

.comment-text {
	border: 0.1rem solid $aeap-color-silver;
	font-size: 1.6rem;
	padding: 0.7rem 1.6rem;
	width: 100%;
}

.order-success {
	&.status-toast-container {
		border: 0.1rem solid $aeap-color-success;
		color: $aeap-color-success;
	}

	.order-success-icon {
		background-color: $aeap-color-success;
	}
}

.order-error {
	&.status-toast-container {
		border: 0.1rem solid $aeap-color-danger;
		color: $aeap-color-danger;
	}
}

.main-title-item {
	font-weight: 300;
	position: relative;
	&::before {
		background-color: $aeap-color-grey;
		border-radius: 50%;
		content: '';
		display: inline-block;
		height: 1rem;
		left: -0.8rem;
		position: absolute;
		top: 38%;
		width: 1rem;
	}
}

.div-percent-bar {
	background-color: $aeap-percent-bar-bg-color;
	display: inline-block;
	height: 1rem;
	left: 14.625rem;
	top: 4.25rem;
	width: 3.5rem;
}

.YOY-values {
	padding-left: 0.313rem;
	padding-top: 0.094rem;
	position: relative;
	text-align: center;
	z-index: 0;
}

.div-outer-div {
	display: inline-block;
	height: 100%;
	width: 50%;
}

.promotion-bar {
	background-color: $aeap-percent-bar-bg-color;
	display: inline-block;
	height: 2.5rem;
}

.promotion-bar-wrapper {
	display: inline-block;
	height: 100%;
	width: 100%;
}

.cp-tab-custom-css {
	align-items: center;
	color: $aeap-color-navy;
	display: flex;
	font-family: Nunito;
	font-style: normal;
	font-weight: 300;
	line-height: 1.6rem;
	padding-bottom: 1.5rem;
	padding-left: 2.3125rem;
	padding-top: 1rem;
}

.cp-dashboard {
	// % bar
	.left-percent-bar {
		height: 4.5rem;
		width: 8.8rem;
	}

	.right-percent-bar {
		float: right;
		height: 4.5rem;
		position: relative;
		width: 8.8rem;
	}

	.red-color {
		background-color: $aeap-cp-danger;
		border-right: 0.3rem solid $aeap-color-red;
		height: 100%;
		max-width: 8.8rem;
		position: relative;
	}

	.green-color {
		background-color: $aeap-cp-success;
		border-left: 0.3rem solid $aeap-color-green;
		height: 100%;
		max-width: 8.8rem;
		position: relative;
	}

	.left-percent-bar span,
	.right-percent-bar span {
		color: $aeap-color-black;
		font-family: 'NotoSansFont';
		font-size: 1.6rem;
		font-style: normal;
		font-weight: normal;
		line-height: 4.5rem;
		position: relative;
		text-align: right;
		top: -5rem;
		width: 4rem;
	}

	.left-percent-bar span {
		left: 100%;
	}
}

// need these styles for cp overlapping in ag-grid.scss
// .driver-analysis,
// .collaborative-planning,
// .cp-dashboard,
// .planning-workbook .ag-theme-alpine .ag-cell.ag-cell-last-left-pinned {
// 	&:not(.ag-cell-range-right) {
// 		&:not(.ag-cell-range-single-cell) {
// 		 border-right: 0.1rem solid $aeap-color-mostly-black;
// 		}
// 	}
// }

.legend-locked {
	background: $aeap-color-light-greyish-blue;
}

.autoHeight {
	height: calc(100% - 1.6rem);
}

.autoHeightVh {
	height: calc(100vh - 1.6rem);
}

.btn-toggle {
	border-radius: 0.8rem;
	height: 1.602rem;
	position: relative;
	width: 3.235rem;

	&.border-before {
		background: $aeap-grid-checked;
		border: 0;
	}

	&.border-after {
		background: $aeap-color-white;
		border: 0.1rem solid $aeap-color-light-bluish-grey;
		box-sizing: border-box;
	}

	&:focus {
		outline: 0;
	}
}

.btn-lrg {
	&:focus,
	&.focus {
		&,
		&.active {
			outline: none;
		}
	}

	&::after {
		opacity: 0.5;
	}

	> .handle {
		background: $aeap-grid-checked;
		border-radius: 1.875rem;
		bottom: 10.5%;
		height: 1.002rem;
		left: 9.38%;
		position: absolute;
		right: 53.12%;
		top: 10.5%;
		transition: left 0.25s;
		width: 1.013rem;
	}

	> .activated {
		background: $aeap-color-white;
		border-radius: 1.875rem;
		bottom: 10.5%;
		height: 1.102rem;
		left: 56.25%;
		position: absolute;
		right: 6.25%;
		top: 10.5%;
		transition: left 0.25s;
		width: 1.113rem;

		&::before {
			opacity: 0.5;
		}

		&::after {
			opacity: 1;
		}
	}
}