/*-------------------------------------------*/
/* CSS
/*-------------------------------------------*/
/*-------------------------------------------*/
/* .vk_icon
/*-------------------------------------------*/
.vk_icon {
	@media screen and (max-width: 991.98px) {
		margin-bottom: 1.5em;
	}
}
.wp-block-vk-blocks-icon { //編集画面で負けるので先頭に追加
	.vk_icon_frame {
		line-height: 1;
	}
	.vk_icon {
		&_border {
			display: inline-block;
			position: relative;
			width: 80px;
			height: 80px;
			border-radius: 50%;
		}
		&_link {
			display: inline-block;
			&:hover {
				opacity: .85;
			}
		}
		&_font {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			font-size: 36px;
		}
	}

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

	.vk_icon_frame:not(.is-style-outline):not(.is-style-noline) {
		.vk_icon_font {
			color: #fff;
		}
	}

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

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

	div:not(.is-style-outline):not(.is-style-noline) {
		.vk_icon_border:not(.vk_icon_border_frame):not(.vk_icon_border_none) {
			.vk_icon_font {
				color: #fff;
			}
		}
	}
	// <<< END
}


.wp-block-vk-blocks-icon {

}

// デフォルトのカラー
.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;
		}
	}
}