/**
 * Canvas Feature: Link-button hover effects.
 *
 * Five effects a text-led button can carry, none of which touch the button
 * families the theme already styles: a rule that grows under the label
 * (underline), the same rule drawn through it (strike-through), a second label
 * that slides up over the first (change), an offset drop shadow that collapses
 * into the button on hover (shadow), and a trailing arrow that grows a tail
 * (scale). Loaded only for markup that carries one of these classes.
 *
 * @package Canvas
 * @since   1.0.0
 */

/* Underline and strike-through: one rule, drawn at the baseline or mid-height. */
.btn-underline::before,
.btn-strikethrough::before {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 1px;
	background: #111;
	transition: width 0.3s ease;
}

.btn-strikethrough::before {
	bottom: 50%;
}

.btn-strikethrough:hover {
	color: #aaa;
}

.btn-underline:hover::before,
.btn-strikethrough:hover::before {
	width: 100%;
}

/* Label swap: both labels stack in a fixed-height box that scrolls on hover. */
.button-change {
	--height: 2.375rem;

	height: var(--height);
	line-height: calc(var(--height) - 2px) !important;
	border-bottom: 1px solid #222 !important;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	display: inline-flex;
	flex-direction: column-reverse;
}

.button-change.btn-sm {
	--height: 2rem;
}

.button-change.btn-lg {
	--height: 3rem;
}

.button-change span {
	position: relative;
	display: block;
	transition: transform 0.35s ease;
	transform: translate3d(0px, 0%, 0px);
	transform-style: preserve-3d;
}

.button-change:hover span {
	transform: translate3d(0px, 100%, 0px);
}

/* Offset shadow: a flat shadow that slides back under the button on hover. */
.btn-shadow,
.btn-shadow.reverse:hover {
	--bg-color: #fff;
	--border-color: #666;
	--position: -5px -5px;

	box-shadow:
		var(--position) 0px 0px var(--bg-color),
		var(--position) 0px 1px var(--border-color);
	transition: all 0.3s ease-out !important;
}

.btn-shadow:hover,
.btn-shadow.reverse:not(:hover) {
	box-shadow:
		0px 0px 0px 0px var(--bg-color),
		0px 0px 0px 1px var(--bg-color);
}

.btn-shadow.top-right {
	--position: 5px -5px !important;
}

.btn-shadow.bottom-right {
	--position: 5px 5px !important;
}

.btn-shadow.bottom-left {
	--position: -5px 5px !important;
}

/* Scale: the trailing glyph grows a tail out of its own leading edge. */
.btn-scale i {
	--width: 30px;

	position: relative;
	margin-left: 6px;
	transition: padding 0.3s linear;
}

.btn-scale i::after {
	content: "";
	opacity: 0;
	position: absolute;
	right: 1px;
	top: 50%;
	width: 2px;
	height: 1px;
	background-color: #444;
	transition: all 0.3s linear;
}

.btn-scale:hover i {
	padding-left: var(--width);
}

.btn-scale:hover i::after {
	opacity: 1;
	width: var(--width);
}