.dtk-hover {
	transition:
		color var(--dtk-hover-duration, 200ms) ease,
		box-shadow var(--dtk-hover-duration, 200ms) ease,
		transform var(--dtk-hover-duration, 200ms) ease;
}

.dtk-hover:hover {
	color: var(--dtk-hover-color, inherit);
}

.dtk-hover--has-shadow:hover {
	box-shadow: var(--dtk-hover-shadow);
}

.dtk-hover--has-border {
	position: relative;
}

.dtk-hover--has-border::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	box-sizing: border-box;
	border-radius: var(--dtk-hover-brr, inherit);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dtk-hover-duration, 200ms) ease;
}

.dtk-hover--has-border:hover::after {
	opacity: 1;
}

.dtk-hover--has-border:not(.dtk-hover--has-border-gradient)::after {
	border-style: solid;
	border-width: var(--dtk-hover-bdw);
	border-color: var(--dtk-hover-bdc, currentColor);
}

.dtk-hover--has-border-gradient::after {
	padding: var(--dtk-hover-bdw);
	background: var(--dtk-hover-bdg);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
}

.dtk-hover--has-bar {
	position: relative;
}

/* Barra: overlay a caja completa recortada al radius; la pintura es una franja. */
.dtk-hover--has-bar:not(.dtk-hover--has-border)::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	overflow: hidden;
	border-radius: var(--dtk-hover-brr, inherit);
	background-image: var(--dtk-hover-brp);
	background-repeat: no-repeat;
	background-clip: border-box;
	transition:
		opacity var(--dtk-hover-duration, 200ms) ease,
		background-position var(--dtk-hover-duration, 200ms) ease;
}

.dtk-hover--has-bar:not(.dtk-hover--has-border):hover::after,
.dtk-hover--has-bar.dtk-hover--bar-always:not(.dtk-hover--has-border)::after {
	opacity: 1;
}

.dtk-hover--has-bar.dtk-hover--bar-top:not(.dtk-hover--has-border)::after {
	background-size: 100% var(--dtk-hover-brw);
	background-position: top;
}

.dtk-hover--has-bar.dtk-hover--bar-bottom:not(.dtk-hover--has-border)::after {
	background-size: 100% var(--dtk-hover-brw);
	background-position: bottom;
}

.dtk-hover--has-bar.dtk-hover--bar-left:not(.dtk-hover--has-border)::after {
	background-size: var(--dtk-hover-brw) 100%;
	background-position: left;
}

.dtk-hover--has-bar.dtk-hover--bar-right:not(.dtk-hover--has-border)::after {
	background-size: var(--dtk-hover-brw) 100%;
	background-position: right;
}

.dtk-hover--bar-enter-bottom:not(.dtk-hover--has-border):not(.dtk-hover--bar-always)::after {
	background-position-y: calc(100% + var(--dtk-hover-brw));
	opacity: 1;
}

.dtk-hover--bar-enter-top:not(.dtk-hover--has-border):not(.dtk-hover--bar-always)::after {
	background-position-y: calc(0% - var(--dtk-hover-brw));
	opacity: 1;
}

.dtk-hover--bar-enter-left:not(.dtk-hover--has-border):not(.dtk-hover--bar-always)::after {
	background-position-x: calc(0% - 100%);
	opacity: 1;
}

.dtk-hover--bar-enter-right:not(.dtk-hover--has-border):not(.dtk-hover--bar-always)::after {
	background-position-x: calc(100% + var(--dtk-hover-brw));
	opacity: 1;
}

.dtk-hover--bar-enter-bottom:not(.dtk-hover--has-border):hover::after {
	background-position-y: bottom;
}

.dtk-hover--bar-enter-top:not(.dtk-hover--has-border):hover::after {
	background-position-y: top;
}

.dtk-hover--bar-enter-left:not(.dtk-hover--has-border):hover::after {
	background-position-x: left;
}

.dtk-hover--bar-enter-left.dtk-hover--bar-bottom:not(.dtk-hover--has-border):hover::after,
.dtk-hover--bar-enter-left.dtk-hover--bar-top:not(.dtk-hover--has-border):hover::after {
	background-position-x: center;
}

.dtk-hover--bar-enter-right:not(.dtk-hover--has-border):hover::after {
	background-position-x: right;
}

.dtk-hover--bar-enter-right.dtk-hover--bar-bottom:not(.dtk-hover--has-border):hover::after,
.dtk-hover--bar-enter-right.dtk-hover--bar-top:not(.dtk-hover--has-border):hover::after {
	background-position-x: center;
}

.dtk-hover--has-border.dtk-hover--has-bar.dtk-hover--bar-top::after {
	box-shadow: inset 0 var(--dtk-hover-brw) 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-border.dtk-hover--has-bar.dtk-hover--bar-bottom::after {
	box-shadow: inset 0 calc(-1 * var(--dtk-hover-brw)) 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-border.dtk-hover--has-bar.dtk-hover--bar-left::after {
	box-shadow: inset var(--dtk-hover-brw) 0 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-border.dtk-hover--has-bar.dtk-hover--bar-right::after {
	box-shadow: inset calc(-1 * var(--dtk-hover-brw)) 0 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-border.dtk-hover--bar-always.dtk-hover--bar-top {
	box-shadow: inset 0 var(--dtk-hover-brw) 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-border.dtk-hover--bar-always.dtk-hover--bar-bottom {
	box-shadow: inset 0 calc(-1 * var(--dtk-hover-brw)) 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-border.dtk-hover--bar-always.dtk-hover--bar-left {
	box-shadow: inset var(--dtk-hover-brw) 0 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-border.dtk-hover--bar-always.dtk-hover--bar-right {
	box-shadow: inset calc(-1 * var(--dtk-hover-brw)) 0 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-shadow.dtk-hover--has-border.dtk-hover--bar-always.dtk-hover--bar-top:hover {
	box-shadow: var(--dtk-hover-shadow), inset 0 var(--dtk-hover-brw) 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-shadow.dtk-hover--has-border.dtk-hover--bar-always.dtk-hover--bar-bottom:hover {
	box-shadow: var(--dtk-hover-shadow), inset 0 calc(-1 * var(--dtk-hover-brw)) 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-shadow.dtk-hover--has-border.dtk-hover--bar-always.dtk-hover--bar-left:hover {
	box-shadow: var(--dtk-hover-shadow), inset var(--dtk-hover-brw) 0 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--has-shadow.dtk-hover--has-border.dtk-hover--bar-always.dtk-hover--bar-right:hover {
	box-shadow: var(--dtk-hover-shadow), inset calc(-1 * var(--dtk-hover-brw)) 0 0 0 var(--dtk-hover-brc, transparent);
}

.dtk-hover--scale:hover {
	transform: scale(1.03);
}

.dtk-hover--lift:hover {
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.dtk-hover,
	.dtk-hover--has-border::after,
	.dtk-hover--has-bar:not(.dtk-hover--has-border)::after {
		transition: none;
	}

	.dtk-hover--scale:hover,
	.dtk-hover--lift:hover {
		transform: none;
	}
}