/*-------------------------------------------*/
/* CSS
/*-------------------------------------------*/
/*-------------------------------------------*/
/* .vk_icon
/*-------------------------------------------*/
.vk_icon {
	@media screen and (max-width: 991.98px) {
		margin-bottom: 1.5em;
	}
}
.wp-block-vk-blocks-icon { //編集画面で負けるので先頭に追加
	.vk_icon_frame {
		display: flex;
		line-height: 1;

		&.text-center {
			justify-content: center;
		}
		&.text-right {
			justify-content: right;
		}
	}
	.vk_icon {
		&_border {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80px;
			height: 80px;
			border-radius: 50%;
		}
		&_link {
			display: flex;
			&:hover {
				opacity: .85;
			}
		}
		&_font {
			// 中央寄せは親の flex で行うため transform を使わない
			// → fa-rotate-* / fa-flip-* など FA の transform がそのまま効く
			font-size: 36px;
			margin-right: 0;
			margin-left: 0;
		}
	}

	.is-style-outline {
		.vk_icon_border {
			background-color: transparent;
			border: 1px solid currentColor;
		}
	}

	.vk_icon_frame:where(:not(.is-style-outline)):where(:not(.is-style-noline)) {
		.vk_icon_font:where(:not([class*="has-vk-color-"])) { // x-t9で has-vk-color-* クラスに白がつくのでnotを追加
			color: #fff;
		}
	}

	// old class before key-color START >>>
	.vk_icon {
		&_align {
			&_center {
				justify-content: center;
			}
			&_right {
				justify-content: right;
			}
		}

		&_border {
			&_frame {
				background-color: transparent;
				border-width: 1px;
				border-style: solid;
			}
		}
	}

	div:where(:not(.is-style-outline)):where(:not(.is-style-noline)) {
		.vk_icon_border:where(:not(.vk_icon_border_frame)):where(:not(.vk_icon_border_none)) {
			.vk_icon_font:where(:not([class*="has-vk-color-"])) { // x-t9で has-vk-color-* クラスに白がつくのでnotを追加
				color: #fff;
			}
		}
	}
}


// デフォルトのカラー
.wp-block-vk-blocks-icon {
	.vk_icon_frame:not(.is-style-outline):not(.is-style-noline) {
		.vk_icon_border:not(.has-background) {
			background-color: #337ab7;
		}
	}

	.is-style-noline {
		.vk_icon_border:not(.has-text-color) {
			color: #337ab7;
		}
	}

	.is-style-outline {
		.vk_icon_border:not(.has-text-color) {
			color: #337ab7;
		}
	}
}