.woocommerce-inbox-message {
	position: relative;
	color: $gray-text;
	background: $studio-white;
	border-radius: 2px;
	@include font-size( 13 );
	margin: 0 0 $gap-large;
	-ms-box-orient: horizontal;
	&.banner {
		-webkit-flex-direction: column;
		flex-direction: column;
		img {
			width: 100%;
		}
	}
	&.thumbnail {
		display: flex;
		-webkit-flex-direction: row-reverse;
		flex-direction: row-reverse;
		img {
			width: 128px;
			height: 100%;
		}
	}

	.woocommerce-homepage-column & {
		margin: 20px 0;
	}

	&:not(.is-placeholder) {
		border: 1px solid $gray-200;
	}

	.line {
		width: 100%;
	}

	.third-line {
		width: 33%;
	}

	.fifth-line {
		width: 20%;
	}

	.sixth-line {
		width: 16%;
	}
}

.woocommerce-inbox-message__content {
	.woocommerce-inbox-message__unread-indicator {
		height: 8px;
		width: 8px;
		background-color: var(--wp-admin-theme-color);
		border-radius: 100px;
		display: inline-block;
		margin-right: $gap-smaller;
	}

	.woocommerce-inbox-message__title {
		color: $gray-900;
		@include font-size( 16 );
		font-style: normal;
		line-height: 1.5;
		font-weight: bold;
		margin: $gap-smaller 0;

		.is-placeholder & {
			& > div {
				@include placeholder();
				margin: 5px 0;
			}
			margin-bottom: 10px;
		}
	}

	.woocommerce-inbox-message__date {
		color: $gray-700;
		@include font-size( 12 );
		margin-bottom: $gap;
		font-style: normal;
		font-weight: normal;
		line-height: 16px;
		.is-placeholder & {
			& > div {
				@include placeholder();
			}
			margin-bottom: 10px;
		}
	}
}

.woocommerce-inbox-message__text {
	color: $gray-700;
	font-style: normal;
	font-weight: normal;
	@include font-size( 14 );
	line-height: 20px;
	& > p:first-child {
		margin-top: 0;
	}

	& > p:last-child {
		margin-bottom: 0;
	}

	.is-placeholder & {
		& > div {
			@include placeholder();
			margin: 5px 0;
		}
	}
}

.woocommerce-inbox-message__actions {
	padding-top: $gap;
	border-top: 1px solid $gray-200;

	// Ensures any immediate child with a sibling has space between the items
	& > * + * {
		margin-left: 0.5em;
	}

	a,
	button {
		cursor: pointer;
	}
	.components-dropdown {
		display: inline;

		.components-popover__content {
			min-width: 195px;
			ul {
				text-align: center;
			}
			li {
				margin: 0;
				cursor: pointer;
			}
		}
	}

	.is-placeholder & {
		& > div {
			@include placeholder();
			float: left;
			height: 28px;
			margin-right: 8px;
		}
	}
}
.woocommerce-inbox-dismiss-confirmation_modal {
	text-align: left;
}
.woocommerce-inbox-dismiss-confirmation_wrapper {
	p {
		font-size: 16px;
		color: $gray-700;
	}
	.woocommerce-inbox-dismiss-confirmation_buttons {
		text-align: right;
		button {
			margin-left: 10px;
		}
	}
}

.woocommerce-inbox-message__wrapper > div {
	padding: $gap $gap-large;
	.is-placeholder & {
		padding: 10px 24px;
		display: flow-root;
	}
}

.woocommerce-homepage-notes-wrapper {
	padding-top: $gap-large;
}

#activity-panel-inbox {
	margin: 0 $gap-large;
}

.woocommerce-layout__inbox-panel-header {
	padding: $gap-large;

	.woocommerce-homepage-column & {
		padding: 0 24px;
	}
}

// Tweak to fix dropdown and placeholder in IE 11
@media all and ( -ms-high-contrast: none ), ( -ms-high-contrast: active ) {
	.woocommerce-admin-dismiss-dropdown {
		margin-top: 0;
	}

	.woocommerce-inbox-message__wrapper {
		.is-placeholder & {
			padding-bottom: 10px;
		}
	}
}

.woocommerce-inbox-message-enter {
	opacity: 0;
	max-height: 0;
	transform: translateX(50%);
}

.woocommerce-inbox-message-enter-active {
	opacity: 1;
	max-height: 100vh;
	transform: translateX(0%);
	transition: opacity 500ms, transform 500ms, max-height 500ms;
}

.woocommerce-inbox-message-exit {
	opacity: 1;
	max-height: 100vh;
	transform: translateX(0%);
}

.woocommerce-inbox-message-exit-active {
	opacity: 0;
	max-height: 0;
	transform: translateX(50%);
	transition: opacity 500ms, transform 500ms, max-height 500ms;
}