@import '../../styles/theme.less';

.myMessage {
	&-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&-tabs {
		background-color: #f2f3f5;
		display: flex;
		border-radius: 2px;
		padding: 4px;

		&-item {
			padding: 2px 12px;
			cursor: pointer;

			&-active {
				color: @main-color;
				background-color: #ffffff;
				border-radius: 2px;
			}
		}
	}

	&-main {
		flex: 1;
		overflow-y: auto;

		&-item {
			padding: 16px 8px 16px 8px;
			border-bottom: 1px dashed @divider-color;
			max-height: 140px;

			&-read {
				opacity: 0.6;
			}

			&-footer {
				color: @text-color-secondary;
			}

			&-color1 {
				color: #ff5500;
			}

			&-color2 {
				color: #02d1d1;
			}
		}

		.ant-typography,
		.ellipsis-text-2 {
			margin-bottom: 8px;
		}
	}

	&-empty {
		margin: auto;
	}

	&-modal {
		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 0;
			border-bottom: 1px solid @divider-color;
			margin-bottom: 12px;

			&-subtitle {
				color: @text-color-secondary;
			}

			h4 {
				margin-bottom: 0;
			}
		}

		&-main {
			max-height: 265px;
			overflow-y: auto;
		}
	}
}