/* * {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
} */

:root {
	--hue_custom: 223;
	--bg_custom: hsl(var(--hue_custom), 90%, 90%);
	--fg_custom: hsl(var(--hue_custom), 90%, 10%);
	--danger_custom: hsl(0, 100%, 68%, 1);
	--danger-down_custom: hsl(3, 90%, 65%);
	--white_custom: hsl(0, 0%, 100%);
	--trans-dur_custom: 0.3s;
	/* font-size: calc(20px + (40 - 20) * (100vw - 320px) / (2560 - 320)); */
}


.custom_del-btn {
	/* font: 0.7em/1.5 "DM Sans", sans-serif; */
	font-family: "DM Sans", sans-serif;
	font-size: 1em;
}
/* body {
	background-color: var(--bg_custom);
	color: var(--fg_custom);
	display: flex;
	height: 100vh;
	transition: background-color var(--trans-dur_custom), color var(--trans-dur_custom);
} */
.custom_del-btn {
	background-color: var(--danger_custom);
	border-radius: 0.2em;
	color: var(--white_custom);
	cursor: pointer;
	display: flex;
	align-items: center;
	/* margin: auto; */
	outline: transparent;
	padding: 0.55em 0.7em;
	-webkit-tap-highlight-color: #0000;
	transition: background-color var(--trans-dur_custom);
    border: none;
}
.custom_del-btn:not(:disabled):focus-visible,
.custom_del-btn:not(:disabled):hover {
	background-color: var(--danger-down_custom);
}
.del-btn__icon {
	display: block;
	margin: -0.75em 0 -0.75em -0.75em;
	pointer-events: none;
	width: 3em;
	height: 3em;
}
.del-btn__icon-lid {
	transform-origin: 12px 5px;
}
.del-btn__icon-can {
	transform-origin: 12px 18px;
}
.del-btn__letters {
	display: flex;
}
.del-btn__letter,
.del-btn__letter-box {
	display: inline-block;
}
.custom_del-btn[data-running="false"] .del-btn__letters {
	animation: fadeIn 0.3s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
.custom_del-btn[data-running="true"] .del-btn__icon-lid,
.custom_del-btn[data-running="true"] .del-btn__icon-can,
.custom_del-btn[data-running="true"] .del-btn__icon-can-fill,
.custom_del-btn[data-running="true"] .del-btn__letter,
.custom_del-btn[data-running="true"] .del-btn__letter-box {
	animation: trashLid 3s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
.custom_del-btn[data-running="true"] .del-btn__icon-can {
	animation-name: trashCan;
}
.custom_del-btn[data-running="true"] .del-btn__icon-can-fill {
	animation-name: trashCanFill;
}
.custom_del-btn[data-running="true"] .del-btn__letter-box {
	animation-name: letterDrop;
	animation-timing-function: cubic-bezier(0.77, 0, 1, 1);
}
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(1)
	.del-btn__letter {
	animation-name: letter1;
}
.custom_del-btn[data-running="true"] .del-btn__letter-box:nth-child(2),
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(2)
	.del-btn__letter {
	animation-delay: 0.06s;
}
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(2)
	.del-btn__letter {
	animation-name: letter2;
}
.custom_del-btn[data-running="true"] .del-btn__letter-box:nth-child(3),
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(3)
	.del-btn__letter {
	animation-delay: 0.10s;
}
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(3)
	.del-btn__letter {
	animation-name: letter3;
}
.custom_del-btn[data-running="true"] .del-btn__letter-box:nth-child(4),
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(4)
	.del-btn__letter {
	animation-delay: 0.14s;
}
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(4)
	.del-btn__letter {
	animation-name: letter4;
}
.custom_del-btn[data-running="true"] .del-btn__letter-box:nth-child(5),
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(5)
	.del-btn__letter {
	animation-delay: 0.18s;
}
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(5)
	.del-btn__letter {
	animation-name: letter5;
}
.custom_del-btn[data-running="true"] .del-btn__letter-box:nth-child(6),
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(6)
	.del-btn__letter {
	animation-delay: 0.22s;
}
.custom_del-btn[data-running="true"]
	.del-btn__letter-box:nth-child(6)
	.del-btn__letter {
	animation-name: letter6;
}

/* Dark theme */
/* @media (prefers-color-scheme: dark) {
	:root {
		--bg_custom: hsl(var(--hue_custom), 90%, 10%);
		--fg_custom: hsl(var(--hue_custom), 90%, 90%);
	}
} */

/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes trashLid {
	from,
	86%,
	to {
		transform: translate(0, 0) rotate(0);
	}
	33.33%,
	46% {
		animation-timing-function: cubic-bezier(0.77, 0, 1, 1);
		transform: translate(-2px, -4px) rotate(-40deg);
	}
	54%,
	70% {
		animation-timing-function: linear;
		transform: translate(0, 0) rotate(0);
	}
	62% {
		animation-timing-function: linear;
		transform: translate(0, -2px) rotate(9deg);
	}
	78% {
		animation-timing-function: cubic-bezier(0, 0, 0.18, 1);
		transform: translate(0, -1px) rotate(-6deg);
	}
}
@keyframes trashCan {
	from,
	86%,
	to {
		transform: translate(0, 0) rotate(0);
	}
	33.33%,
	46% {
		animation-timing-function: cubic-bezier(0.77, 0, 1, 1);
		transform: translate(-8px, 3px) rotate(40deg);
	}
	54%,
	70% {
		animation-timing-function: linear;
		transform: translate(0, 0) rotate(0);
	}
	62% {
		animation-timing-function: linear;
		transform: translate(-1px, 0) rotate(-4deg);
	}
	78% {
		animation-timing-function: cubic-bezier(0, 0, 0.18, 1);
		transform: translate(0, 0) rotate(2deg);
	}
}
@keyframes trashCanFill {
	from,
	25%,
	to {
		y: 24px;
	}
	66.67%,
	83.33% {
		y: 12px;
	}
}
@keyframes letterDrop {
	from,
	33.33% {
		transform: translate(0, 0);
	}
	41.67%,
	to {
		transform: translate(0, 0.625em);
	}
}
@keyframes letter1 {
	from {
		transform: translate(0, 0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em, 0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-2.375em, 0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-2.375em, 0) rotate(-135deg) scale(0);
	}
}
@keyframes letter2 {
	from {
		transform: translate(0, 0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em, 0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-3em, 0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-3em, 0) rotate(-135deg) scale(0);
	}
}
@keyframes letter3 {
	from {
		transform: translate(0, 0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em, 0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-3.375em, 0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-3.375em, 0) rotate(-135deg) scale(0);
	}
}
@keyframes letter4 {
	from {
		transform: translate(0, 0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em, 0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-3.75em, 0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-3.75em, 0) rotate(-135deg) scale(0);
	}
}
@keyframes letter5 {
	from {
		transform: translate(0, 0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em, 0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-4.125em, 0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-4.125em, 0) rotate(-135deg) scale(0);
	}
}
@keyframes letter6 {
	from {
		transform: translate(0, 0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em, 0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-4.75em, 0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-4.75em, 0) rotate(-135deg) scale(0);
	}
}