@import '../global.scss';

.wp-block-mobiloud-posts {
	padding-top: 1px;
}

.post-list {
	&--divider-true {
		.post-list__item {
			border-top: 1px solid $border-color;
			padding: #{$global-padding} #{$global-padding};
			
			&:first-child {
				border-top: none;
			}
		}
	}

	&__item {
		display: flex;
		flex-flow: row wrap;
		padding: #{$global-padding/2} #{$global-padding};

		&--highlight-true {
			display: block;
			position: relative;

			.ripple {
				z-index: 10;
			}

			.post-item__title {
				margin-top: 0.35rem;
				margin-bottom: 0.5rem;
			}

			.post-list__item-thumbnail-wrapper {
				position: relative;
				margin-right: 0;
				width: 100%;
				height: 0;
				padding-bottom: 56.25%;
				overflow: hidden;

				&--Mobile {
					width: 100% !important;
					height: auto !important;
				}
			}

			.post-list__item-thumbnail {
				display: block;
				width: 100%;
				height: auto;
			}
		}
	}
	
	&__item-thumbnail-wrapper {
		position: relative;
		margin-right: 1rem;
		overflow: hidden;
		width: 128px;
		height: 128px;

		@include from ( $tablet ) {
			width: 192px;
			height: 192px;
		}

		&--Mobile {
			width: 128px !important;
			height: 128px !important;
		}

		.post-list__item-thumbnail {
			display: block;
			position: absolute;
			object-fit: cover;
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
	
	&__item-text-wrapper {
		flex: 1;
	}
}