@import "./variables";
@import "../shared";

.tumblr-preview__section.social-preview__section {
	width: clamp(200px, 100%, calc(#{$tumblr-preview-width + $tumblr-preview-avatar-size} + #{$tumblr-preview-card-inline-padding}));
}

.tumblr-preview__post {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.tumblr-preview__avatar {
	width: $tumblr-preview-avatar-size;
	height: $tumblr-preview-avatar-size;

	border-radius: $tumblr-preview-border-radius;

	@media (max-width: 660px) {
		display: none;
	}
}

.tumblr-preview__card {
	overflow-y: hidden;

	background-color: $tumblr-preview-background-color;
	border-radius: $tumblr-preview-border-radius;

	color: $tumblr-preview-text-color;
	font-family: $tumblr-preview-font-family;
	font-size: 1rem;

	:any-link {
		color: inherit;
		text-decoration: underline;
	}
}

.tumblr-preview__custom-text {
	margin: 0 0 1rem 0;
	padding: 0 $tumblr-preview-card-inline-padding;
}

.tumblr-preview__title {
	margin: 0 0 1rem 0;
	padding: 0 $tumblr-preview-card-inline-padding;

	/* stylelint-disable-next-line scales/font-sizes */
	font-size: 1.625rem; // 26px
	font-weight: 400;
	line-height: 1.3;
}

.tumblr-preview__description {
	margin: 0 0 1rem 0;
	padding: 0 $tumblr-preview-card-inline-padding;

	font-size: 1rem; // 16px
	line-height: 1.5;
}

.tumblr-preview__image {
	display: block;
	margin: 3.375rem 0 1rem;
	width: 100%;
	aspect-ratio: 16/9;
}

.tumblr-preview__url {
	display: inline-block;

	margin: 0 0 1rem 0;
	padding: 0 $tumblr-preview-card-inline-padding;
}

.tumblr-preview__site-name {
	color: $tumblr-preview-action-text-color;

	font-size: 0.75rem;
	text-transform: uppercase;
}

.tumblr-preview__window {
	margin: 0 $tumblr-preview-card-inline-padding 1.25rem;
}

.tumblr-preview__window-top {
	position: relative;

	border-top-left-radius: $tumblr-preview-window-border-radius;
	border-top-right-radius: $tumblr-preview-window-border-radius;

	.tumblr-preview__image {
		margin: 0;
		width: 100%;
		aspect-ratio: 16/9;
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
		object-fit: cover;
	}
}

.tumblr-preview__window-bottom {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	padding: 1rem 0.75rem;

	border: 1px solid rgba(0, 0, 0, 0.25);
	border-bottom-left-radius: $tumblr-preview-window-border-radius;
	border-bottom-right-radius: $tumblr-preview-window-border-radius;

	&.is-full {
		border-top-left-radius: $tumblr-preview-window-border-radius;
		border-top-right-radius: $tumblr-preview-window-border-radius;
	}

	> * {
		margin: 0;
		padding: 0;
	}
}

.tumblr-preview__overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 1rem 0.75rem;

	background-color: rgba(0, 0, 0, 0.4);
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	color: #fff;

	> * {
		margin: 0;
		padding: 0;
	}
}