analytics/webcontent/bi/js/cahome/ui/react/StartVideoModal/StartVideoModal.scss

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

.startVideoModal_dialog{
	
	& .ba-common-dialog__modal{
		padding-bottom: 24px !important;
	}

	& .mainVideoSection {
		& .largeVideoThumbnail{
			width: 756px;
			height: 424px; 
			position: relative;
			border: 1px solid;
			@include theming(border-color, ui-02);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 8px;
		}
	
		& .playIndicator{
			font-size: 28px;
			// color: $gray4;
			@include theming(color, text-02);
			position: absolute;
			left: 32px;
			bottom: 32px;
			cursor: pointer;
		}
	
		& .playIcon{
			margin-left: 8px;
			margin-bottom: -8px;
		}
	}
	
	& .videoOptionSection{
		margin-top: 24px;
		margin-bottom: -36px;
		margin-left: 8px;
        
		& .optionBlock{
			display: inline-block;
			vertical-align: top;
			cursor: pointer;
		}
	
		& .optionBlock:hover{
			& .smallVideoThumbnail{
				border: 1px solid #000000;
			}
		}
	
		& .optionBlock:active{
			& .smallVideoThumbnail{
				border: 2px solid;
				@include theming(border-color, interactive-01);
			}
			& .smallVideoDescription .videoTitle{
				font-size: 14px;
				font-weight: bolder;
			}
		}
	
		& .optionSelected{
			& .smallVideoThumbnail{
				border: 2px solid;
				@include theming(border-color, interactive-01);
			}
			& .smallVideoDescription .videoTitle{
				font-size: 14px;
				font-weight: bolder;
			}
		}
	
		& .optionBlockSeprator{
			margin-right: 24px;
		}
	
		& .smallVideoThumbnail{
			width: 236px;
			height: 133px; 
			border: 1px solid;
			@include theming(border-color, ui-02);
		}
	
		& .smallVideoDescription{
			width: 100%;
			display: block;
			margin-top: 16px;
	
			& .videoTitle{
				font-size: 14px;
			}
	
			& .videoLength{
				font-size: 12px;
				float: right;
			}
		}
	}
	
}