/* NOTE: This file was generated as an optimized version of "library.source.less" for the Theme Designer. */

/*!
 * ${copyright}
 */
@import "../base/library.less";
@import "../../../../../Base/baseLib/sap_bluecrystal/base.less"; /* ORIGINAL IMPORT PATH: "../../../../sap/ui/core/themes/sap_bluecrystal/base.less" */

@import "../../../../sap/ui/core/themes/sap_bluecrystal/global.less";
/* START "shared.less" */
/* This CSS inherits rules from default/shared.css */
/* END "shared.less" */


/* START "Notification.less" */
/* Desktop & Tablet ----------- */
.sapClbNotifCursorPointer
{
	cursor: pointer;
}

.sapUiMedia-Std-Desktop .sapClbNotifComponent, .sapUiMedia-Std-Tablet .sapClbNotifComponent
{
	width: 								23.5rem;
	height: 							11rem;
	background-color:					#FFFFFF;
	border-top-left-radius: 			8px;
	border-top-right-radius: 			8px;
	border-bottom-left-radius: 			8px;
	border-bottom-right-radius: 		8px;
	-moz-box-shadow: 					0px 0px 4px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 				0px 0px 4px rgba(0, 0, 0, 0.1);
	box-shadow: 						0px 0px 4px rgba(0, 0, 0, 0.1);
}

.sapUiMedia-Std-Desktop .sapClbNotifContainerBox, .sapUiMedia-Std-Tablet .sapClbNotifContainerBox
{
	width: 								23.5rem;
	height: 							11rem;
	background-color:					#FFFFFF;
	position:							relative;
}

/* This is a weird CSS style class. To get the loading animation of the tile to
   display correctly, the UI5 sap.m.Text control we use to display the loading
   animation must contain some text. However, we don't want the text to be visible.
   Therefore, this CSS class makes the text white so that it blends with the background
   color and is invisible to the user. */
.sapUiMedia-Std-Desktop .sapClbNotifLoadingText, .sapUiMedia-Std-Tablet .sapClbNotifLoadingText
{
	position: relative;
	color: white;
	font-size: 0.5em;
}

/* This class defines the styles for error messages displayed to users.
   The @sapUiNegative LESS variable is specified in the following 2 locations.
   1) "Tiles" page (SAPWIKI/wiki/display/fioridesign/Tiles)
   2) "Colors" page (SAPWIKI/wiki/display/visualcore/Colors)
      under the "Semantic Text" subsection under the "Font Colors" section.
   The remainder of the styles come from the UX team who designed the tile,
   with the exception of the width, which was obtained by experimenting with
   the width in the browser. */
.sapUiMedia-Std-Desktop .sapClbNotifErrorText, .sapUiMedia-Std-Tablet .sapClbNotifErrorText
{
	font-size: 			@sapMFontHeader6Size;	
	font-family:		@sapUiFontHeaderFamily;
	font-weight:		@sapUiFontHeaderWeight;
	color:				@sapUiNegative;
	width:              430px;
	white-space:        nowrap;
	text-overflow:      ellipsis;
	overflow:           hidden;
}

.sapUiMedia-Std-Desktop .sapClbNotifProfileImage, .sapUiMedia-Std-Tablet .sapClbNotifProfileImage 
{
	width: 				3.75rem;
	height: 			3.75rem;
	border-style:		solid;
	border-color: 		@sapUiExtraLightBorder;
	border-width:		1px;
	position:			absolute;
	left:				0.5rem; /* 16 for the padding and 1 px for the container box border*/	
	top:				0.5rem; /* 16 for the padding and 1 px for the container box border*/
}

.sapUiMedia-Std-Desktop .sapClbNotifProfileImageHidden, .sapUiMedia-Std-Tablet .sapClbNotifProfileImageHidden 
{
	visibility: hidden; 
}

.sapUiMedia-Std-Desktop .sapClbNotifNotificationTypeText, .sapUiMedia-Std-Tablet .sapClbNotifNotificationTypeText
{
	font-size: 			@sapMFontHeader6Size;	
	font-family:		@sapUiFontHeaderFamily;
	font-weight:		@sapUiFontHeaderWeight;
	color:				@sapUiHeaderText;
	white-space:        nowrap;
	text-overflow:      ellipsis;
	overflow:           hidden;
	height:             1rem; /* This magic number was discovered through experimentation. */
	position: 			absolute;
	top:				0.5rem;
	left:				4.75rem;
	right:				0.5rem;
}

.sapUiMedia-Std-Desktop .sapClbNotifNotificationMessageText, .sapUiMedia-Std-Tablet .sapClbNotifNotificationMessageText
{
	font-size: 			@sapMFontHeader6Size;	
	font-family:		@sapUiFontHeaderFamily;
	font-weight:		@sapUiFontHeaderWeight;
	color:				@sapUiHeaderText;
	overflow:           hidden;
	height:             5rem; /* This magic number was discovered through experimentation. */
	position: 			absolute;
	top:				2rem;
	right:				0.5rem;
	left:				4.75rem;
}

.sapUiMedia-Std-Desktop .sapClbNotifNotificationUnreadCountText, .sapUiMedia-Std-Tablet .sapClbNotifNotificationUnreadCountText
{
	font-size: 			56px;	
	font-family:		arial;
	font-weight:		bold;
	color:				#666666;
	width:              128px;
	white-space:        nowrap;
	text-overflow:      ellipsis;
	overflow:           hidden;
}

.sapUiMedia-Std-Desktop .sapClbNotifNewNotificationText, .sapUiMedia-Std-Tablet .sapClbNotifNewNotificationText
{
	font-size: 			@sapMFontHeader6Size;	
	font-family:		@sapUiFontHeaderFamily;
	font-weight:		@sapUiFontHeaderWeight;
	color:				@sapUiHeaderText;
	width:              128px;
	white-space:        nowrap;
	text-overflow:      ellipsis;
	overflow:           hidden;
}

.sapUiMedia-Std-Desktop .sapClbNotifNotificationAgeAndGroupText, .sapUiMedia-Std-Tablet .sapClbNotifNotificationAgeAndGroupText
{
	font-size: 			@sapMFontHeader6Size;	
	font-family:		@sapUiFontHeaderFamily;
	font-weight:		@sapUiFontHeaderWeight;
	color:				@sapUiHeaderText;
	white-space:        nowrap;
	text-overflow:      ellipsis;
	overflow:           hidden;
	width:              14rem;
}

.sapUiMedia-Std-Desktop .sapClbNotifNotificationAgeAndGroupContainer, .sapUiMedia-Std-Tablet .sapClbNotifNotificationAgeAndGroupContainer
{
	position:			absolute;
	bottom:				0.5rem;
	right:				0.5rem;
	width:              14rem;
}

.sapUiMedia-Std-Desktop .sapClbNotifNotificationUnreadContainer, .sapUiMedia-Std-Tablet .sapClbNotifNotificationUnreadContainer
{
	position:			absolute;
	bottom:				0.5rem;
	left:				0.5rem;
	width:              128px;
}

/* Smartphones ----------- */
.sapUiMedia-Std-Phone .sapClbNotifComponent
{
	width: 								304px;
	height: 							142px;
	background-color:					#FFFFFF;
	border-top-left-radius: 			6px;
	border-top-right-radius: 			6px;
	border-bottom-left-radius: 			6px;
	border-bottom-right-radius: 		6px;
	-moz-box-shadow: 					0px 0px 4px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 				0px 0px 4px rgba(0, 0, 0, 0.1);
	box-shadow: 						0px 0px 4px rgba(0, 0, 0, 0.1);
}

.sapUiMedia-Std-Phone .sapClbNotifContainerBox
{
	width: 								304px;
	height: 							142px;
	background-color:					#FFFFFF;
	position:							relative;
}

/* This is a weird CSS style class. To get the loading animation of the tile to
   display correctly, the UI5 sap.m.Text control we use to display the loading
   animation must contain some text. However, we don't want the text to be visible.
   Therefore, this CSS class makes the text white so that it blends with the background
   color and is invisible to the user. */
.sapUiMedia-Std-Phone .sapClbNotifLoadingText
{
	position: relative;
	color: white;
	font-size: 0.5em;
}

/* This class defines the styles for error messages displayed to users.
   The @sapUiNegative LESS variable is specified in the following 2 locations.
   1) "Tiles" page (SAPWIKI/wiki/display/fioridesign/Tiles)
   2) "Colors" page (SAPWIKI/wiki/display/visualcore/Colors)
      under the "Semantic Text" subsection under the "Font Colors" section.
   The remainder of the styles come from the UX team who designed the tile,
   with the exception of the width, which was obtained my experimenting with
   the width in the browser. */
.sapUiMedia-Std-Phone .sapClbNotifErrorText
{
	font-size: 			12px;	
	font-family:		@sapUiFontHeaderFamily;
	font-weight:		@sapUiFontHeaderWeight;
	color:				@sapUiNegative;
	white-space:        nowrap;
	text-overflow:      ellipsis;
	overflow:           hidden;
	width:              275px;
}

.sapUiMedia-Std-Phone .sapClbNotifProfileImage
{
	width: 				40px;
	height: 			40px;
	border-style:		solid;
	border-color: 		@sapUiExtraLightBorder;
	border-width:		1px;
	position:			absolute;
	left:				11px; /* 10 for the padding and 1 px for the container box border*/	
	top:				7px; /* 6 for the padding and 1 px for the container box border*/	
}

.sapUiMedia-Std-Phone .sapClbNotifProfileImageHidden
{
	visibility: hidden; 
}

.sapUiMedia-Std-Phone .sapClbNotifNotificationTypeText
{
	font-size: 			12px;	
	font-family:		@sapUiFontHeaderFamily;
	font-weight:		@sapUiFontHeaderWeight;
	color:				@sapUiHeaderText;
	white-space:        nowrap;
	text-overflow:      ellipsis;
	overflow:           hidden;
	height:             16px; /* This magic number was discovered through experimentation. */
	width:              230px;
	position: 			absolute;
	top:				7px;
	left:				63px;				
}

.sapUiMedia-Std-Phone .sapClbNotifNotificationMessageText
{
	font-size: 			12px;
	font-family:		@sapUiFontHeaderFamily;
	font-weight:		@sapUiFontHeaderWeight;
	color:				@sapUiHeaderText;
	overflow:           hidden;
	height:             62px;
	width:              230px;
	position: 			absolute;
	top:				27px;
	left:				63px;
}

.sapUiMedia-Std-Phone .sapClbNotifNotificationUnreadCountText
{
	font-size: 			32px;	
	font-family:		arial;
	font-weight:		bold;
	color:				#666666;
	white-space:        nowrap;
	text-overflow:      ellipsis;
	overflow:           hidden;
	width:              100px;
}

.sapUiMedia-Std-Phone .sapClbNotifNewNotificationText
{
	font-size: 			12px;	
	font-family:		@sapUiFontHeaderFamily;
	font-weight:		@sapUiFontHeaderWeight;
	color:				@sapUiHeaderText;
	white-space:        nowrap;
	text-overflow:      ellipsis;
	overflow:           hidden;
	width:              100px;
}

.sapUiMedia-Std-Phone .sapClbNotifNotificationAgeAndGroupText
{
	font-size: 			12px;	
	font-family:		@sapUiFontHeaderFamily;
	font-weight:		@sapUiFontHeaderWeight;
	color:				@sapUiHeaderText;
	white-space:        nowrap;
	text-overflow:      ellipsis;
	overflow:           hidden;
	width:              175px;
}

.sapUiMedia-Std-Phone .sapClbNotifNotificationAgeAndGroupContainer
{
	position:			absolute;
	bottom:				7px;
	right:				11px;
	width:              175px;
}

.sapUiMedia-Std-Phone .sapClbNotifNotificationUnreadContainer
{
	position:			absolute;
	bottom:				7px;
	left:				11px;
	width:              100px;
}
/* END "Notification.less" */