@use "sass:math";
@use "global/common" as global;

/* ------------------------------
 ユニットグループ
------------------------------- */
/* ------------------------------
 フロート解除
------------------------------ */
// フロート解除(不可視)(予備)
.clearHidden {
	display: block;
	clear: both;
	height: 0;
	margin: 0;
	border: none;
	visibility: hidden;
}

/* ------------------------------
 動的フォーム
------------------------------ */
.entryFormOption {
}


/* ------------------------------
 エントリー内 主な要素
------------------------------ */
$text-unit-tags      : 'h2','h3','h4','h5','h6','dl','p'!default;
$unit-type           : 'image','file','map','yolp','street-view','youtube','video','eximage','media','quote','module';
$align               : 'left','right','center','auto'!default;
$unit-gutter         : 20px!default;
$_unit-margin-bottom : $unit-gutter!default;

$_hightlight-colors  : #FFFF66,#a0FFFF,#99FF99,#FF9999,#FF66FF,#880000!default;


.#{global.$entry-class} {
	[class*=#{global.$grid-column-name}] {
		padding: 0;
	}
}


/* ------------------------------
 テキストユニットの設定
------------------------------ */
.#{global.$entry-class} {
	@each $text-unit in $text-unit-tags {
		#{$text-unit} {
			margin-right: math.div($unit-gutter, 2);
			margin-left: math.div($unit-gutter, 2);
		}
	}
	blockquote {
		margin: 0 0 $unit-gutter 0;
		padding: 10px 20px;
		border-left: solid 5px #ccc;
	}
}

/* ------------------------------
各種ユニットの設定
------------------------------ */

	@each $unit in $unit-type {
		.#{global.$entry-class} [class*="column-#{$unit}"] {
			@if $unit == 'map' {
				border-right: math.div($unit-gutter, 2) solid transparent;
				border-left: math.div($unit-gutter, 2) solid transparent;
				box-sizing: border-box;
			} @else if $unit == 'quote' {
				margin-right: math.div($unit-gutter, 2);
				margin-left: math.div($unit-gutter, 2);
			} @else if $unit == 'street-view' {
				&:not(.column-street-view-inner) {
					padding-right: math.div($unit-gutter, 2);
					padding-left: math.div($unit-gutter, 2);
				}
			} @else {
				padding-left: math.div($unit-gutter, 2);
				padding-right: math.div($unit-gutter, 2);
				box-sizing: border-box;
			}
		}
	}

	@each $unit in $unit-type {
		[class*="column-#{$unit}"] {
			margin-bottom: $_unit-margin-bottom;
		}
	}

	/* 画像・メディア・画像URLの共通設定 */
	[class*="column-image"],
	[class*="column-media"],
	[class*="column-eximage"] {
		display: block;

		&.caption {
			margin-bottom: math.div($-unit-margin-bottom, 2);
		}

		a {
			display: block;
		}

		& img {
			max-width: 100%;
			height: auto;
			vertical-align: top;
		}
		.caption {
			margin: 5px 0 0 0;
		}
	}

	/* 画像ユニットの設定 */
	[class*="column-image"] {
		&[style*="width"] {
			max-width: 100%;
		}
	}

	/* メディアの種類がファイルだった時の設定 */
	[class*="column-media"] {
		a[href*="media-download"] {
			display: inline-block;
			width: 100%;
		}
	}

	/* 地図・Yahooo!地図の共通設定 */
	[class*="column-map"],
	[class*="column-yolp"] {
		> img {
			max-width: 100%;
		}
		// 地図ユニットのアイコンの調整
		img {
			width: auto;
			height: auto;
		}
	}

	[class*="column-map"] {
		> div {
			max-width: 100%;
		}
	}

	[class*="column-yolp"] {
		width: auto !important;
	}

	[class*="column-quote"] {
		blockquote {
			padding: 20px 10px 20px 20px;
		}
		/* 引用ユニット画像 */
		.quoteImageContainer {
			position: relative;
			float: left;
			max-width: 154px;
			margin-right: 25px;
		}

		.quoteImage {
			display: block;
			max-width: 100%;
			height: auto;
		}
		/* 引用ユニットテキスト */
		.quoteTitle {
			margin: 0 0 5px 0;
			padding: 0;
			line-height: 1.4;
			@include global.font-size(18);
		}

		.quoteTitleLink {
			color: #006cd8;
		}

		.quoteSiteName {
			margin: 0 0 10px 0;
			padding: 0;
			color: #666;
			@include global.font-size(11);
		}

		.quoteDescription {
			margin: 0;
			padding: 0;
			color: #333;
			line-height: 1.6;
			@include global.font-size(12);
		}
	}


	@each $unit in $unit-type {
		/* 配置のスタイル */
		@each $align-name in $align {
			.column-#{$unit}-#{$align-name} {
				@if $unit == 'file' {
					text-align: #{$align-name};
					& + .caption {
						text-align: #{$align-name};
					}
				} @else if $unit == 'media' {
					:not([href*="media-download"]):not([href*="storage"]) + .caption {
						/* 画像のキャプションを中央寄せにする記述(media-downloadは動的、storageは静的書き出しに対応しています) */
						text-align: center;
					}
				}

				@if $align-name == left {
					float: left;
					text-align: left;
				}

				@if $align-name == right {
					float: right;
					text-align: right;
				}

				@if $align-name == center {
					display: block;
					float: none;
					margin-right: auto;
					margin-left: auto;
					text-align: center;
				}

				@if $align-name == auto {
					float: none;
				}
			}
		}
	}

/* .acms-entry-unit-fullの設定 */
@each $unit in $unit-type {
	@if $unit == 'youtube' or $unit == 'video' {
		.acms-entry-unit-full:not(.acms-unit-size-inherit) [class*="column-#{$unit}"] {
			width: 100% !important;
		}
	} @else {
		.acms-entry-unit-full:not(.acms-unit-size-inherit) [class*="column-#{$unit}"] {
			width: auto !important;
			max-width: 100%;
		}
	}
}

// acms-col-クラスで表示サイズが指定されているときは
// 配置が右の時の要素の回り込みを防ぐ
@media (max-width : global.$breakpoint-sm-min)  {
	[class*="acms-col-"][class*="-right"] {
		float: left;
	}
	[class*="acms-col-"][class*="-right"] + * {
		clear: both;
	}
}


/* ------------------------------
 共通の要素
------------------------------ */
.entry-container {
	margin-right: math.div($unit-gutter, 2);
	margin-left: math.div($unit-gutter, 2);
}

/* PDFプレビュー */
.column-pdf-image {
	width: 100%;
	border: solid 1px #aaa;
}

/* ストリートビュー */
.column-inner-street-view {
	width: 100%;
	padding-bottom: 100%;
}

/* YouTube動画をレスポンシブ対応させるための記述 */
.column-youtube,
.column-iframe {
	position: relative;
	width: 100%;
	height: 100%;
	padding-top: 30px;
	padding-bottom: math.div(9, 16) *100%;
	overflow: hidden;

	iframe,
	object,
	embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}


/* ------------------------------
 検索
------------------------------ */

/* 検索結果のハイライト
------------------------------ */
@for $i from 1 to 6 {
	.highlight#{$i} {

	}
}

@each $hightlight-color in $_hightlight-colors {
	$index: index($_hightlight-colors, $hightlight-color);

	.highlight#{$index} {
		background-color: $hightlight-color;
	}
}
