/* Hexagon Container */
.single-hex {
	-webkit-user-select: none;
	user-select: none;

	color: var(--hex-font-color);
	
	height: var(--hex-height);
	width: var(--hex-width);
}


.single-hex A {
	color: var(--hex-link-color);
}

.single-hex A:hover {
	color: var(--hex-link-color--hover);
	cursor: pointer;
}

/* Hexagon Wrapper */
.single-hex .single-hex-wrapper {
	filter: var(--hex-shadow);
	width: 100%;
	height: 100%;

	transition-property: filter;
	transition-duration: var(--hex-transition-duration--in);
	transition-timing-function: var(--hex-transition-timing-function--in);
}

.single-hex .single-hex-wrapper:hover {
	filter: var(--hex-shadow--hover);

	transition-property: filter;
	transition-duration: var(--hex-transition-duration--out);
	transition-timing-function: var(--hex-transition-timing-function--out);
}

/* Hexagon Border + Outer*/
.single-hex .single-hex-border,
.single-hex .single-hex-outer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Hexagon Border */
.single-hex .single-hex-border {
	margin: var(--hex-spacing);

	background-color: var(--hex-border-color);
	
	clip-path: polygon(0 var(--hex-param),
			50% 0%,
			100% var(--hex-param),
			100% calc(100% - var(--hex-param)),
			50% 100%,
			0% calc(100% - var(--hex-param)));
	
	transition-property: background;
	transition-duration: var(--hex-transition-duration--in);
	transition-timing-function: var(--hex-transition-timing-function--in);
}

.single-hex .single-hex-wrapper:hover .single-hex-border {
	background-color: var(--hex-border-color--hover);
	
	transition-property: background;
	transition-duration: var(--hex-transition-duration--out);
	transition-timing-function: var(--hex-transition-timing-function--out);
}



/* Hexagon Outer */
.single-hex .single-hex-outer {
	margin: var(--hex-border-size);
}



/* Hexagon Inner */
.single-hex .single-hex-inner {
	height: 100%;

	/* Hexagon Clip Path Mask */
	clip-path: polygon(0 var(--hex-param),
			50% 0%,
			100% var(--hex-param),
			100% calc(100% - var(--hex-param)),
			50% 100%,
			0% calc(100% - var(--hex-param)));

	background-color: var(--hex-bg-color);
	
	transition-property: background;
	transition-duration: var(--hex-transition-duration--in);
	transition-timing-function: var(--hex-transition-timing-function--in);
}

.single-hex .single-hex-wrapper:hover .single-hex-inner {
	background-color: var(--hex-bg-color--hover);
	
	transition-property: background;
	transition-duration: var(--hex-transition-duration--out);
	transition-timing-function: var(--hex-transition-timing-function--out);
}



/* Hexagon Inner Image */
.single-hex .single-hex-inner .hex-img {
	height: var(--hex-img-height);
	
	background-repeat: no-repeat;
	background-position: var(--hex-img-position);
	background-size: var(--hex-img-size);
	background-color: var(--hex-img-bg-color);

	-webkit-filter: grayscale(75%);
	filter: grayscale(75%);

	transition-property: filter;
	transition-duration: var(--hex-transition-duration--out);
	transition-timing-function: var(--hex-transition-timing-function--out);
}

.single-hex .single-hex-wrapper:hover .hex-img {
	background-color: var(--hex-img-bg-color--hover);
	
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	
	transition-property: filter;
	transition-duration: var(--hex-transition-duration--in);
	transition-timing-function: var(--hex-transition-timing-function--in);
}