@import './node_modules/@waca/ca-ui-toolkit/essentials/essentials';

.homeView {
	display: flex;
	position: relative;
	flex: 1 1 0%;

	a {
		@include highContrast {
			@include theming(color, ui-background);
		}
	}

	*:not(html)  {
		-webkit-overflow-scrolling: touch;
	}

	.homeViewReactRoot {
		flex: 1;
		overflow-y: auto;
		@include theming(background-color, ui-background);

		//min-width: 1248px !important;

		.homeViewWrapper {
			display: block;
			pointer-events: auto;
			z-index: 1000;
			position: absolute;
			width: 100%;
			transition: opacity 150ms ease-in-out;
			opacity: 0;
			height: 0; 
			overflow: hidden;
			@include theming(background-color, ui-background, 0.75);

			&.dragging {
				opacity: 1;
				height: 100%;
			}
		}

		// Begin - Style for Refactoring //
		.welcomeToggleWrapper{
			margin-right: 24px;
			float: right;
			margin-top: 24px; 
			z-index: 999;
			// Uncomment the follow two lines to fix the welcome toggle horizontally and vertically
			// Bug: will overlap with other components while scrolling 
			//position: fixed;
			//right: 0;
			transform-style: preserve-3d;
			z-index: 2;
			position: relative
		}

		.welcomeToggleLabel{
			margin-right: 16px;
			font-size: 14px;
			@include theming(color, text-02);
		}

		.homeViewContent{
			padding: 0px 96px;
			width: 100%;
		}

		.homeViewBody{
			padding: 0px 32px;
			// Based on the design spec: 1248 is the suggested min-width
			// But set 0 here to avoid the horizontal scrolling
			min-width: 0px !important;
		}

		.recentTitleWrapper{
			margin-top: 8px;
			font-size: 28px;
			@include theming(color, text-02);
			display: inline-block;
		}

		.recentModeSwitchWrapper{
			display: inline;
			width: 66px;
		}

		.recentViewButton{
			width: 32px;
			height: 32px;
			@include theming(color, text-02);
			@include theming(background-color, ui-01, 1, !important);
			display: inline;
			cursor: pointer;

			&.recentViewButtonLeft {
				border-radius: 4px 0 0 4px;
			}
			&.recentViewButtonRight {
				border-radius: 0 4px 4px 0;
			}
		}

		.recentViewButton:hover{
			@include theming(background-color, hover-ui, 1, !important);
			@include theming(color, text-01, 1, !important);
		}

		.recentViewButton:disabled{
			@include theming(background-color, disabled-01, 1, !important);
			@include theming(color, disabled-02, 1, !important);
		}

		.recentViewButton:active{
			@include theming(background-color, ui-03);
			border-bottom: 2px solid;
			@include theming(border-color, focus);
		}

		.recentViewButtonIsActive {
			@include theming(color, text-04, 1, !important);
			@include theming(background-color, ui-05, 1, !important);
			@include theming(border-color, focus);
			border-bottom: 2px solid;
		}

		#viewRecentTile{
			float: left;
		}

		#viewRecentList{
			float: right;
			display: inline;
			margin-left: 2px;
		}

		div.recentViewHeader{
			margin-bottom: 20px;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: flex-end;
		}

		div.recentViewFooter{
			text-align: center;
			padding-top: 18px;
			font-size: 14px; 
			height: 54px;
			width: 100%;
		}

		.recentTileContainer{
			margin-top: 24px
		}

		.recentListContainer{
			margin-top: 20px;
		}

		.recentNoneContainer{
			margin-top: 96px;
			text-align: center
		}

		.recentBrandTitle{
			display: inline-flex;
			margin-left: 128px;
			margin-top: 56px;
	
			.recentBrandTitleIcon{
				// Mode 'middle' doesn't align correctly
				vertical-align: top;
				height: 64px;
				width: 64px;
			}
	
			.recentBrandTitleText{
				margin-left: 8px;
				display: inline;
				font-size: 36px;
				max-width: 957px;
				padding-top:5px;
			}
		}
		// End - Style for Refactoring //

		@media only screen and (max-width: 1100px) {

			.homeViewContent{
				padding: 0px;
			}

			.homeViewBody{
				min-width: 0px !important;
			}

			.recentBrandTitle{
				margin-left: 32px;
			}
		}

		@media only screen and (max-width: 996px) {
			.homeViewContent{
				padding: 0px;
			}

			.homeViewBody{
				min-width: 0px !important;
			}

			.recentBrandTitle{
				margin-left: 32px;
			}
		}

		@media only screen and (max-width: 700px) {
			.homeViewContent{
				padding: 0px;
			}

			.homeViewBody{
				min-width: 0px !important;
			}

			.recentBrandTitle{
				margin-left: 32px;
			}
		}

		@media only screen and (max-height: 700px) {
			.recentViewFooter {
				margin-bottom: 11px !important;
			}
		}
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .homeViewReactRoot {
        overflow-y: auto;
    }
}