@use "variables";

.vk_post {
	/*
	Basicly wright to without .vk_post.
	This additional is can't over wright only.
	 */
	&.media {
		// width: 100%; // ここに迂闊に幅指定するとカラム指定が効かなくなる
		display: flex;
		padding: 1em 0;
		margin: 0 15px;
		border-bottom: variables.$border_primary;
	}
}

/*-------------------------------------------*/
/* .media new type
/*-------------------------------------------*/
.media {
	&-img {
		border: variables.$border_image;
		padding: 1px;
		margin-right: 1rem;
	}
	.vk_post &-img {
		width: 35%;
	}
	.vk_post &-body {
		width: 65%;
	}
}
/* border-top control */

.media.vk_post {
	/* 
	もともと1カラムでの運用想定で最初は見出し直下なので上線は不要という理屈で上線無し下線デフォルトとなっている。
	しかしながら複数カラムでの使用が後からできるようになったので、
	基本 border-top にして :last-child にだけ追加した方がスマートなので変更したいが
	既存ユーザーへの影響が読めないので現状ママという状況。
	どこかのタイミングで要検討
	*/
	&:first-child {
		border-top: variables.$border_primary;
	}
}

.media.vk_post-col {
	@media (width <= variables.$xs-max) {
		&-xs-6:nth-child(2) {
			border-top: variables.$border_primary;
		}
	}
	@media (variables.$xs-max < width <= variables.$sm-max) {
		&-sm-6:nth-child(2),
		&-sm-4:nth-child(2),
		&-sm-4:nth-child(3),
		&-sm-3:nth-child(2),
		&-sm-3:nth-child(3),
		&-sm-3:nth-child(4) {
			border-top: variables.$border_primary;
		}
	}
	@media (variables.$sm-max < width <= variables.$md-max) {
		&-md-6:nth-child(2),
		&-md-4:nth-child(2),
		&-md-4:nth-child(3),
		&-md-3:nth-child(2),
		&-md-3:nth-child(3),
		&-md-3:nth-child(4) {
			border-top: variables.$border_primary;
		}
	}
	@media (variables.$md-max < width <= variables.$lg-max) {
		&-lg-6:nth-child(2),
		&-lg-4:nth-child(2),
		&-lg-4:nth-child(3),
		&-lg-3:nth-child(2),
		&-lg-3:nth-child(3),
		&-lg-3:nth-child(4) {
			border-top: variables.$border_primary;
		}
	}
	@media (variables.$lg-max < width) {
		&-xl-6:nth-child(2),
		&-xl-4:nth-child(2),
		&-xl-4:nth-child(3),
		&-xl-3:nth-child(2),
		&-xl-3:nth-child(3),
		&-xl-3:nth-child(4) {
			border-top: variables.$border_primary;
		}
    }
    @media (variables.$xl-max < width) {
		&-xxl-6:nth-child(2),
		&-xxl-4:nth-child(2),
		&-xxl-4:nth-child(3),
		&-xxl-3:nth-child(2),
		&-xxl-3:nth-child(3),
		&-xxl-3:nth-child(4) {
			border-top: variables.$border_primary;
		}
	}
}