owl.knob.scss

$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
$black: #000;
$knob-size: 65px;
$knob-slide: 400px; // max width

.events-slider {
	.owl-knob {
		position: relative;
		width: 100%;
		max-width: $knob-slide;
		margin: 0 auto;
		height: $knob-size * 1.5;
		touch-action: none;
		
		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 1px;
			background: lighten($black, 10%);
		}
	}
	
	.owl-knob-klickbox {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: $knob-size / -2;
		margin-top: $knob-size / -2;
		
		.owl-knob-button {
			width: $knob-size;
			height: $knob-size;
			border-radius: 50%;
			background: $black;
			cursor: pointer;
			transform: scale(1);
			transform-origin: center center;
			transition: transform 200ms $easeInOutQuad;
		}
		
		&:hover {
			.owl-knob-button {
				animation: knob-breathe 400ms $easeInOutQuad 0s infinite alternate;
			}
		}
		
		&:active {
			.owl-knob-button {
				animation: none;
				transform: scale(0.9);
			}
		}
	}
}

@keyframes knob-breathe {
	from {
		transform: scale(1);
	} to {
		transform: scale(1.1);
	}
}