/* =============================================== */
/* CSS for control sap.collaboration/Notification  */
/* Base theme                                      */
/* =============================================== */

/* Desktop & Tablet ----------- */
.sapClbNotifCursorPointer {
	cursor: pointer;
}

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

.sapUiMedia-Std-Desktop .sapClbNotifContainerBox,
.sapUiMedia-Std-Tablet .sapClbNotifContainerBox {
	width: 23.5rem;
	height: 11rem;
	background-color: var(--sapGroup_ContentBackground);
	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: var(--sapFontHeader6Size);
	font-family: var(--sapFontHeaderFamily);
	font-weight: @sapUiFontHeaderWeight;
	color: var(--sapNegativeTextColor);
	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: var(--sapList_TableGroupHeaderBorderColor);
	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: var(--sapFontHeader6Size);
	font-family: var(--sapFontHeaderFamily);
	font-weight: @sapUiFontHeaderWeight;
	color: var(--sapGroup_TitleTextColor);
	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: var(--sapFontHeader6Size);
	font-family: var(--sapFontHeaderFamily);
	font-weight: @sapUiFontHeaderWeight;
	color: var(--sapGroup_TitleTextColor);
	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: var(--sapPageHeader_TextColor);
	width: 128px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.sapUiMedia-Std-Desktop .sapClbNotifNewNotificationText,
.sapUiMedia-Std-Tablet .sapClbNotifNewNotificationText {
	font-size: var(--sapFontHeader6Size);
	font-family: var(--sapFontHeaderFamily);
	font-weight: @sapUiFontHeaderWeight;
	color: var(--sapGroup_TitleTextColor);
	width: 128px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.sapUiMedia-Std-Desktop .sapClbNotifNotificationAgeAndGroupText,
.sapUiMedia-Std-Tablet .sapClbNotifNotificationAgeAndGroupText {
	font-size: var(--sapFontHeader6Size);
	font-family: var(--sapFontHeaderFamily);
	font-weight: @sapUiFontHeaderWeight;
	color: var(--sapGroup_TitleTextColor);
	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: var(--sapGroup_ContentBackground);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

.sapUiMedia-Std-Phone .sapClbNotifContainerBox {
	width: 304px;
	height: 142px;
	background-color: var(--sapGroup_ContentBackground);
	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: var(--sapHighlightTextColor);
	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: var(--sapFontHeaderFamily);
	font-weight: @sapUiFontHeaderWeight;
	color: var(--sapNegativeTextColor);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 275px;
}

.sapUiMedia-Std-Phone .sapClbNotifProfileImage {
	width: 40px;
	height: 40px;
	border-style: solid;
	border-color: var(--sapList_TableGroupHeaderBorderColor);
	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: var(--sapFontHeaderFamily);
	font-weight: @sapUiFontHeaderWeight;
	color: var(--sapGroup_TitleTextColor);
	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: var(--sapFontHeaderFamily);
	font-weight: @sapUiFontHeaderWeight;
	color: var(--sapGroup_TitleTextColor);
	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: var(--sapPageHeader_TextColor);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 100px;
}

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

.sapUiMedia-Std-Phone .sapClbNotifNotificationAgeAndGroupText {
	font-size: 12px;
	font-family: var(--sapFontHeaderFamily);
	font-weight: @sapUiFontHeaderWeight;
	color: var(--sapGroup_TitleTextColor);
	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;
}