@import "./NotificationListItemBase.css";
@import "./NotificationStateIcon.css";

:host([collapsed]) .ui5-nli-group-items {
	display: none;
}

:host([read]) .ui5-nli-group-title-text {
	font-weight: normal;
}

.ui5-nli-group-root {
	width: 100%;
}

.ui5-nli-group-content-wrapper {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
}

[ui5-busy-indicator] {
	width: 100%;
}

.ui5-nli-group-header {
	height: 2.75rem;
	position: sticky;
	top: 0;
	z-index: 90; /* the z-index of the busy-indicator is 99 and the header shouldn't be over it */
	background: var(--sapList_GroupHeaderBackground);
	display: flex;
	align-items: center;

	padding-inline: var(--_ui5-notification_group_header-padding);
	width: 100%;
	border-bottom: var(--_ui5-notification_group_header-border-bottom-width) solid var(--sapList_GroupHeaderBorderColor);
	box-sizing: border-box;
	cursor: pointer;
	margin-bottom: var(--_ui5-notification_group_header-margin);
}

.ui5-nli-group-header-expanded {
	margin-bottom: var(--_ui5-notification_group_header-margin-expanded);
}

/* The focus is on the whole group but should be visualized on the Group Header */
:host([desktop]) .ui5-nli-focusable.ui5-nli-group-root:focus .ui5-nli-group-header::before,
.ui5-nli-focusable.ui5-nli-group-root:focus-visible .ui5-nli-group-header::before {
	content: "";
	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	position: absolute;
	top: var(--_ui5-notification_group_header-margin);
	bottom: var(--_ui5-notification_group_header-margin);
	left: 0;
	right: 0;
	pointer-events: none;
}

.ui5-nli-group-toggle-icon {
	min-width: 1rem;
	min-height: 1rem;
	margin-inline: 0.5rem;
	color: var(--sapContent_IconColor);
}

.ui5-nli-group-title-text {
	color: var(--sapGroup_TitleTextColor);
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontHeader5Size);
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 2rem;
	margin-inline-start:  0.75rem;
}

.ui5-nli-group-divider {
	flex: 1;
}

/* fix for blue background color on tap (touchscreen devices) */
:host([ui5-li-notification-group]) {
	-webkit-tap-highlight-color: transparent;
}

/* "More" button overrides follows */
[ui5-notification-group-list]::part(growing-button) {
	border: none;
}

[ui5-notification-group-list]::part(growing-button-inner) {
	margin: var(--_ui5-notification_item-margin);
	border: var(--_ui5-notification_item-border-top-left-right);
	border-radius: var(--_ui5-notification_item-border-radius);
}

[ui5-notification-group-list]::part(growing-button-inner) {
	border-radius: var(--_ui5-notification_item-border-radius);
	height: 3.125rem;
}

[ui5-notification-group-list]::part(growing-button-inner):focus,
[ui5-notification-group-list]::part(growing-button-inner):focus-visible {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);;
	outline-offset: var(--_ui5-notification_item-outline-offset);
}

[ui5-notification-group-list]::part(growing-button-inner):focus:active,
[ui5-notification-group-list]::part(growing-button-inner):focus-visible:active {
	background-color: var(--_ui5-notification_item-growing-btn-background-color-active);
	border-radius: var(--_ui5-notification_item-border-radius);
	border: var(--_ui5-notification_item-border-active);
}

[ui5-notification-group-list]::part(growing-button-busy-indicator) {
	padding: 0.875rem 0 1rem 0;
}