@charset 'utf-8';
@use './global' as *;

// サイト表示タイプ

// セパレートタイプ
body:where([data-site-display="separate"]) {
	@include mq('sm', '<'){
		--container-spacing--x: .5rem; // 8px相当
	}

	.l-content-sidebar:where(:not(.l-content-sidebar--full-width)) .l-article,
	.post-list__item,
	.sidebar .widget,
	.comments {
		box-shadow: var(--contents-box-shadow);
		border: var(--content-border);
		background-color: var(--contents-bg-color, #fff);
	}


	.l-content-sidebar:where(:not(.l-content-sidebar--full-width)) .l-article,
	.sidebar .widget,
	.comments {
		--contents-inner-spacing: #{px-to-rem(16px)};
		padding: var(--contents-inner-spacing);
		@include mq('md', '>=') {
			--contents-inner-spacing: #{px-to-rem(24px)};
		}
	}

	.alignwide,
	.alignfull {
		width: calc(100% + var(--contents-inner-spacing) * 2);
		margin-inline: calc(-1 * var(--contents-inner-spacing));
	}

	.alignfull {
		@include mq('lg', '<'){
			max-width: none;
			width: 100vw;
			margin-inline: calc(-50vw + 50%);
		}
	}


	.post-list {
		--contents-inner-spacing: #{px-to-rem(16px)};
	}
	// loop
	.post-list__article {
		padding: var(--contents-inner-spacing);
	}
	.post-list__thumb {
		margin-inline: calc(-1 * var(--contents-inner-spacing));
	}

	.post-list__thumb:first-child {
		margin-block: calc(-1 * var(--contents-inner-spacing)) 0;
	}

	.post-list--list,
	.post-list--alternating_list {
		.post-list__article {
			padding: 0;
			@include mq('sm', '>='){
				gap: 0;
			}
		}
		.post-list__contents {
			padding: var(--contents-inner-spacing);
		}
	}
	.post-list.post-list--list .post-list__thumb,
	.post-list.post-list--alternating_list .post-list__thumb {
		margin: 0;
	}
}