@import '../../../theme/theme-default.less';

@notice-icon-prefix: ~'.notice-icon';

@{notice-icon-prefix} {
	width: 336px;

	&__btn {
		display: inline-block;
		cursor: pointer;
		transition: all 0.3s;
	}

	.@{ant-prefix}-popover-inner-content {
		padding: 0;
	}

	.@{ant-prefix}-tabs {
		&-bar {
			margin-bottom: 4px;
		}
	}

	&__tab-left {
		.@{ant-prefix}-tabs-nav-list {
			.@{ant-prefix}-tabs-tab:first-child {
				margin-left: @tabs-horizontal-gutter;
			}
		}
	}

	.@{ant-prefix}-list {
		max-height: 400px;
		overflow: auto;

		&-item {
			padding-right: 24px;
			padding-left: 24px;
			overflow: hidden;
			cursor: pointer;
			transition: all 0.3s;

			&:last-child {
				border-bottom: 0;
			}

			&:hover {
				background: @primary-1;
			}

			&-meta {
				width: 100%;

				&-title {
					margin-bottom: 8px;
					font-weight: normal;
				}
			}

			.@{ant-prefix}-avatar {
				margin-top: 4px;
				background: #fff;
			}
		}
	}

	&__notfound {
		padding: 73px 0 88px;
		color: @text-color-secondary;
		text-align: center;

		&-img {
			display: inline-block;
			height: 76px;
			margin-bottom: 16px;
		}
	}

	&__clear {
		height: 46px;
		color: @text-color;
		line-height: 46px;
		text-align: center;
		border-top: 1px solid @border-color-split;
		border-radius: 0 0 @border-radius-base @border-radius-base;
		cursor: pointer;
		transition: all 0.3s;

		&:hover {
			color: @heading-color;
		}
	}

	&__item {
		.@{ant-prefix}-badge-count {
			top: -10px;
		}

		&-read {
			opacity: 0.4;
		}

		&-desc {
			font-size: 12px;
			line-height: @line-height-base;
		}

		&-time {
			margin-top: 4px;
			font-size: 12px;
			line-height: @line-height-base;
		}

		&-extra {
			float: right;
			margin-top: -1.5px;
			margin-right: 0;
			color: @text-color-secondary;
			font-weight: normal;
		}
	}
}

.yz-widgets-notify {
	pointer-events: none;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1000;

	.ant-tabs-nav{
		padding: 0 32px;
		margin-bottom: 0 !important;
	}
	.ant-tabs-content-holder{
		padding: 16px;
		overflow-y: auto;
		height: 290px;
	}

	.cdk-overlay-connected-position-bounding-box {
		top: 54px;
		right: 175px;
		align-items: flex-end;
		justify-content: flex-start;
		position: absolute;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		min-width: 1px;
		min-height: 1px;

		.cdk-overlay-pane {
			//padding: 0 20px 20px 20px;
			min-width: 336px;
			position: static;
			pointer-events: auto;
			z-index: 1000;
			background-color: #ffffff;
			border-radius: 4px;
			box-shadow: darkgrey 10px 10px 30px 5px;
			overflow: hidden;
		}
	}
}