@use "../../common/breakpoints" as *;
@use "../../common/variables" as *;

//
// "News" widget
//-----------------

@use "sass:math";

.atum_news_widget {
	.widget-wrapper {
		overflow: hidden !important;
	}
}

.news-widget {
	
	.scroll-box {
		max-height: 310px;
		
		@include mobile-max {
			max-height: 250px;
		}
	}
	
	article {
		display: flex;
		align-items: flex-start;
		text-align: left;
		padding: 10px 0;
		transition: 0.3s ease-in-out;
		
		&:last-child {
			border-bottom: none;
		}
		
		&.active {
			a {
				color: $primary;
				pointer-events: none;
			}
		}
	}
	
	.post-thumb {
		position: relative;
		margin-right: math.div($grid-gutter-width, 2);
		
		.thumb {
			overflow: hidden;
			
			> div {
				background: {
					repeat: no-repeat;
					size: cover;
				}
				width: 123px;
				height: 70px;
				transition: 0.3s ease-in-out;
			}
		}
		
		&:hover {
			.thumb > div {
				transform: scale(1.4) rotate(5deg);
			}
		}
	}
	
	.post-title {
		font-size: 12px;
		color: $dark;
		font-weight: bold;
		display: block;
		line-height: 1;
		margin-bottom: 3px;
		transition: 0.2s ease-in-out;
		
		&:hover {
			color: var(--primary);
		}
	}
	
	.post-excerpt {
		color: var(--dash-next-text);
	}
	
	.post-meta {
		font-size: 9px;
		line-height: 1.1;
		margin-bottom: 5px;
		color: var(--atum-text-color-var1);
	}
	
	.post-excerpt {
		font-size: 10px;
		line-height: 1.4;
		display: block;
		overflow: hidden;
		max-height: 41px;
	}

}