.au-slider.au-slider-container {
	@media (max-width: 576px) {
		width: 95%;
	}
}
.au-slider-handle {
	&.custom-handle {
		background-color: transparent;
		border: var(--bs-slider-handle-border);
		border-radius: 0;
		width: 2.8rem;
		height: 2.8rem;
		border-bottom: 0.15rem solid transparent;
		&:focus,
		&:focus-within {
			box-shadow: none;
			border-bottom: 0.15rem solid var(--bs-slider-handle-color);
		}
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: inherit;
			height: inherit;
			background-color: transparent;
		}
		&:not([disabled]):hover {
			border-bottom: 0.15rem solid var(--bs-slider-handle-color);
		}
	}
}
.au-slider-handle-horizontal {
	&.custom-handle {
		top: calc(50% - 2.8rem / 2) !important;
	}
}

.custom-slider {
	background-color: transparent;
	height: 210px !important;
	margin: 50px auto;
	display: flex;
	flex-direction: column;
}
.cup-container {
	width: 300px;
	@media (min-width: 576px) {
		width: 350px;
	}
	height: 400px;
}
.cup {
	padding: 0;
	height: 210px;
	width: 190px;
	border: 10px solid var(--bs-body-color);
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	border-radius: 20px 20px 60px 60px;
}
.cup-fill-parent {
	overflow: hidden;
	height: 100%;
	position: relative;
	border-radius: 0px 0px 50px 50px;
}
.cup-fill {
	background-image: url('data:image/svg+xml,%3Csvg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="210" viewBox="0 0 340 210"%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:url(%23linear-gradient);%7D%3C/style%3E%3ClinearGradient id="linear-gradient" x1="170" y1="0" x2="170" y2="220" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0" stop-color="%23faab2b"/%3E%3Cstop offset="1" stop-color="%23fb8b1b"/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath class="cls-1" d="M0,210V6Q42.5,-6,85,6T170,6T255,6T340,6V210"/%3E%3C/svg%3E'),
		url('data:image/svg+xml,%3Csvg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="210" viewBox="0 0 340 210"%3E%3Cdefs%3E%3Cstyle%3E.cls-2%7Bfill:%23fbd383;%7D%3C/style%3E%3C/defs%3E%3Cpath class="cls-2" d="M0,210V6Q42.5,18,85,6T170,6T255,6T340,6V210"/%3E%3C/svg%3E');
	background-position:
		0 0,
		0 0;
	background-repeat: repeat-x;
	background-clip: content-box;
	animation: coffee 3s infinite linear;
	position: absolute;
	bottom: 0;
	width: 100%;
	transition: height 0.6s ease;
	overflow-y: hidden;
}
@keyframes coffee {
	100% {
		background-position:
			-200% 0,
			-100% 0;
	}
}
.cup:before {
	content: '';
	position: absolute;
	height: 80px;
	width: 60px;
	border: 10px solid var(--bs-body-color);
	border-left: none;
	right: -70px;
	top: 30px;
	border-radius: 0 30px 80px 0;
}
.cup:after {
	position: absolute;
	content: '';
	height: 10px;
	width: 260px;
	background-color: var(--bs-body-color);
	left: -45px;
	bottom: -10px;
	border-radius: 10px;
}
.bubble {
	height: 15px;
	width: 15px;
	background-color: #fbbe08;
	border-radius: 50%;
	position: absolute;
	animation: bubbles forwards infinite;
	opacity: 0.6;
}
@keyframes bubbles {
	100% {
		bottom: calc(100% - 20px);
		opacity: 0;
	}
}
.bubble-1 {
	left: 30px;
	bottom: 10px;
	animation-delay: 0.5s;
	animation-duration: 3s;
}
.bubble-2 {
	left: 80px;
	bottom: 35px;
	animation-delay: 1.2s;
	animation-duration: 4s;
}
.bubble-3 {
	left: 140px;
	bottom: 30px;
	animation-duration: 4s;
}
.au-slider-handle {
	&.coffee-indicator {
		background-color: var(--bs-body-color);
		color: var(--bs-body-bg);
		border: var(--bs-slider-handle-border);
		border-radius: var(--bs-slider-handle-border-radius);
		outline: var(--bs-slider-handle-outline);
		position: absolute;
		width: 45px;
		height: 45px;
		font-size: 1rem;
		@media (min-width: 576px) {
			width: 60px;
			height: 60px;
			font-size: 1.5rem;
		}
		&::before {
			content: ' ';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			transform: translate(55%, -50%);
			border-left: 25px solid var(--bs-body-color);
			border-top: 18px solid transparent;
			border-bottom: 18px solid transparent;
			@media (min-width: 576px) {
				border-left: 35px solid var(--bs-body-color);
				border-top: 23px solid transparent;
				border-bottom: 23px solid transparent;
			}
		}
		&:focus {
			box-shadow: 0 0 1rem 0.5rem var(--bs-slider-handle-color);
		}
	}
}
