@charset "UTF-8";

/**
 * Theme  : Neutral
 * Version: 1.0.0
 * Author : hybrid.
 *
 * icons.css
 *
 * SVG sprite icons (base, size variants) and CSS animated icons
 * (expand, close/more, play/pause).
 * Animated icons use ::before/::after pseudo-elements with box-shadow
 * to reproduce glyphs without SVG or images.
 *
 * ANIMATED ICONS
 * .icon-expand  — hamburger → cross (toggle .expanded on parent)
 * .icon-close   — fixed cross
 * .icon-more    — fixed plus
 * .icon-play    — play → pause (toggle .is-playing/.is-paused on parent)
 *
 * HOVER
 * Handled via @media (hover: hover) for true pointer devices.
 * .hover class available for mobile (added via JS).
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */

:root {
	--icon-stroke-width: var(--stroke-width, 2px);
}


/* ========================================================= */
/* ==================== MASK-IMAGE BASE ==================== */
/* ========================================================= */

/**
 * Base for ::before pseudo-element icons via mask-image.
 * Each icon selector (.icon-search:before, etc.) is auto-generated
 * in icons-vars.css by tool-icons.php.
 * Works with <span class="icon-search"></span> — same as IcoMoon.
 */

[class^="icon-"],
[class*=" icon-"] {
	height: 1em;
	aspect-ratio: 1/1;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: currentColor;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}


/* ========================================================= */
/* ==================== SVG INLINE BASE ==================== */
/* ========================================================= */

/**
 * Base for inline SVG icons via get_icon() / the_icon().
 * Supports stroke-width animation and currentColor.
 */

svg[class^="icon-"],
svg[class*=" icon-"] {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

svg[class^="icon-"].filled,
svg[class*=" icon-"].filled {
	fill: currentColor;
	stroke: none;
}


/* ======================================================= */
/* ==================== SIZE VARIANTS ==================== */
/* ======================================================= */

.icon-xs { width: 0.75em; height: 0.75em; }
.icon-sm { width: 0.875em; height: 0.875em; }
.icon-lg { width: 1.25em; height: 1.25em; }
.icon-xl { width: 1.5em; height: 1.5em; }


/* ================================================== */
/* ==================== ANIMATED ==================== */
/* ================================================== */

/**
 * Animated icons: expand, close, more, play/pause.
 * The SVG icon is hidden, replaced by pseudo-elements.
 * box-shadow inset simulates the stroke without SVG.
 */


/* ========== DEFAULT ========== */

[class^="icon-"].animated {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 1em;
	width: 1em;
	color: inherit;
	text-shadow: inherit;
	transform-origin: center center;
	background: transparent;
	fill: none;
	stroke: none;
}
[class^="icon-"].animated::before,
[class^="icon-"].animated use {
	display: none;
}

[class^="icon-"].animated .label,
[class^="icon-"].animated .label:before,
[class^="icon-"].animated .label:after {
	position: absolute;
	display: block;
	height: var(--icon-stroke-width);
	font-size: inherit !important;
	line-height: inherit;
	color: inherit;
	text-shadow: inherit;
	box-shadow: inset 0 0 0 calc(var(--icon-stroke-width) * 2);
}

[class^="icon-"].animated .label:before,
[class^="icon-"].animated .label:after {
	content: "";
	transform-origin: center center;
}

/* Disable transitions on page load */

.icon-expand.animated,
body.onload .icon-expand.animated .label,
body.onload .icon-expand.animated .label:before,
body.onload .icon-expand.animated .label:after {
	transition: none;
}


/* ================================================ */
/* ==================== EXPAND ==================== */
/* ================================================ */

/**
 * 3 strokes → cross. Toggle via .expanded on parent.
 */


/* ========== DEFAULT ========== */

.icon-expand.animated .label,
.icon-expand.animated .label:before,
.icon-expand.animated .label:after {
	left: 0;
}

.icon-expand.animated .label,
.icon-expand.animated .label:before,
.icon-expand.animated .label:after {
	width: 1em;
}

.icon-expand.animated .label {
	margin: auto;
	overflow: visible;
}


/* ========== NOT EXPANDED ========== */

.icon-expand.animated .label:before {
	transform: translate(0, -.375em);
}

.icon-expand.animated .label:after {
	transform: translate(0, .375em);
}


/* ========== EXPANDED ========== */

.expanded .icon-expand.animated .label {
	width: 0;
	transform: translate(.5em, 0);
}

.expanded .icon-expand.animated .label:before {
	transform: translate3d(-50%, 0, 0) rotate(-45deg);
}

.expanded .icon-expand.animated .label:after {
	transform: translate3d(-50%, 0, 0) rotate(45deg);
}

.expanded .icon-expand .label:before,
.expanded .icon-expand .label:after {
	transform: translate(-.125em, 0);
	width: 1.289em;
}


/* ====================================================== */
/* ==================== CLOSE / MORE ==================== */
/* ====================================================== */

.icon-close.animated .label,
.icon-more.animated .label {
	left: 0;
	height: 1em;
	width: 1em;
	box-shadow: none !important;
}

.icon-close.animated .label:before,
.icon-close.animated .label:after,
.icon-more.animated .label:before,
.icon-more.animated .label:after {
	top: 50%;
	left: 50%;
}

.icon-more.animated .label:before,
.icon-more.animated .label:after {
	width: 1em;
}

.icon-close.animated .label:before,
.icon-close.animated .label:after {
	width: 1.289em;
}

.icon-close.animated .label:before {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.icon-close.animated .label:after {
	transform: translate(-50%, -50%) rotate(45deg);
}

.icon-more.animated .label:before {
	transform: translate(-50%, -50%) rotate(0deg);
}

.icon-more.animated .label:after {
	transform: translate(-50%, -50%) rotate(90deg);
}


/* ====================================================== */
/* ==================== PLAY / PAUSE ==================== */
/* ====================================================== */

/**
 * Via clip-path.
 * Toggle via .is-playing / .is-paused on parent or .mediaplayer-container.
 */

.icon-play.animated .label {
	height: 1em;
	width: 1em;
	box-shadow: none;
}

.icon-play.animated .label:before,
.icon-play.animated .label:after {
	height: 1em;
	width: 1em;
	box-shadow: inset 0 0 0 1em;
}

.icon-play.animated .label:before {
	clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
}

.icon-play.animated .label:after {
	clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
}


/* ================================================ */
/* ==================== @MEDIA ==================== */
/* ================================================ */


/* ========== @HOVER ========== */

@media (hover: hover) {

	/* expand */

	a:not(.expanded):hover .icon-expand.animated .label:before {
		transform: translate(0, -.25em);
	}
	a:not(.expanded):hover .icon-expand.animated .label:after {
		transform: translate(0, .25em);
	}
	a.expanded:hover .icon-expand .label:before,
	a.expanded:hover .icon-expand .label:after {
		width: 1em;
	}

	/* more, close */

	a:hover .icon-more.animated .label:before,
	a:hover .icon-more.animated .label:after {
		width: .75em;
	}
	a:hover .icon-close.animated .label:before,
	a:hover .icon-close.animated .label:after {
		width: 1em;
	}

	/* pause */

	.mediaplayer-container.is-paused .play-button .icon-play.animated .label:before,
	.mediaplayer-container.is-playing .play-button:hover .icon-play.animated .label:before,
	a.is-paused .icon-play.animated .label:before,
	a.is-playing:hover .icon-play.animated .label:before {
		clip-path: polygon(0% 0%, 33% 0, 33% 100%, 0% 100%);
	}
	.mediaplayer-container.is-paused .play-button .icon-play.animated .label:after,
	.mediaplayer-container.is-playing .play-button:hover .icon-play.animated .label:after,
	a.is-paused .icon-play.animated .label:after,
	a.is-playing:hover .icon-play.animated .label:after {
		clip-path: polygon(66% 0, 100% 0, 100% 100%, 66% 100%);
	}

	/* play */

	.mediaplayer-container.is-paused .play-button:hover .icon-play.animated .label:before,
	.mediaplayer-container.is-playing .play-button .icon-play.animated .label:before,
	a.is-paused:hover .icon-play.animated .label:before,
	a.is-playing .icon-play.animated .label:before {
		clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
	}
	.mediaplayer-container.is-paused .play-button:hover .icon-play.animated .label:after,
	.mediaplayer-container.is-playing .play-button .icon-play.animated .label:after,
	a.is-paused:hover .icon-play.animated .label:after,
	a.is-playing .icon-play.animated .label:after {
		clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
	}
}


/* ========== .HOVER FOR MOBILE JS ========== */

@media (min-width: 0px) {

	/* expand */

	a:not(.expanded).hover .icon-expand.animated .label:before {
		transform: translate(0, -.25em);
	}
	a:not(.expanded).hover .icon-expand.animated .label:after {
		transform: translate(0, .25em);
	}
	a.expanded.hover .icon-expand .label:before,
	a.expanded.hover .icon-expand .label:after {
		width: 1em;
	}

	/* more, close */

	a.hover .icon-more.animated .label:before,
	a.hover .icon-more.animated .label:after {
		width: .75em;
	}
	a.hover .icon-close.animated .label:before,
	a.hover .icon-close.animated .label:after {
		width: 1em;
	}

	/* pause */

	a.is-paused .icon-play.animated .label:before {
		clip-path: polygon(0% 0%, 33% 0, 33% 100%, 0% 100%);
	}
	a.is-paused .icon-play.animated .label:after,
	a.is-playing.hover .icon-play.animated .label:after {
		clip-path: polygon(66% 0, 100% 0, 100% 100%, 66% 100%);
	}

	/* play */

	a.is-paused.hover .icon-play.animated .label:before {
		clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
	}
	a.is-paused.hover .icon-play.animated .label:after {
		clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
	}
}


/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */

/* here for custom icon overrides */