/**
* JQuery Bullly
* @see https://github.com/pixelgrade/rellax/blob/gh-pages/assets/css/bully.css
 */
[class*="c-bully"],
[class*="c-bully"]:before,
[class*="c-bully"]:after {
	box-sizing: border-box;
}

$bully_size: 16px;
$bully_size_s: 9px;

.c-bully {
	position: fixed;
	top: 50%;
	right: 28px;
	@include for(screens-medium) {
		right: 0px;
	}
	font-size: 12px;
	transform: translate(0, -50%);
	z-index: 600;
	color: #333;
	text-transform: uppercase;
	&.c-bully--inversed {
		color: #fff;
	}
	&.c-bully-hide-on-mobile {
		@include for(screens-medium) {
			display: none;
		} 
	}
	
}
.onepress-menu-mobile-opening {
	.c-bully { 
		z-index: 10; 
	}
}

.c-bully__ {
	&bullet {
		padding: $bully_size / 2;
		@include for(screens-medium) {
			padding: ( $bully_size / 2 ) 3px;
		}
		opacity: 0;
		cursor: pointer;
		position: relative;
		&:hover {
			.c-bully__title {
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	&title {
		position: absolute;
		right: 26px;
		top: 1px;
		left: auto;
		background: rgba(0, 0, 0, 0.7);
		padding: 1px 10px;
		border-radius: 2px;
		transition: all 0.2s ease-out;
		display: block;
		opacity: 0;
		white-space: nowrap;
		color: rgba(255, 255, 255, 0.8);
		transform: scale(0.6);

	}
}

.c-bully__bullet:after {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	@include for(screens-medium) {
		width: $bully_size_s;
		height: $bully_size_s;
	}
	border: 2px solid currentColor;
	border-radius: 50%;
	will-change: transform;
}

.c-bully__bullet--active {
	position: absolute;
	top: 0;
	left: 0;
	transition: top 0.2s ease-out;
}

.c-bully__bullet--active:before {
	content: "";
	width: 12px;
	height: 12px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	@include for(screens-medium) {
		width: $bully_size_s;
		height: $bully_size_s;
	}
	font-size: 14px;
	background: currentColor;
	border-radius: 50%;
}

.c-bully__bullet--active:after {
	border-color: transparent;
}

.c-bully__bullet--pop {
	animation: bully-pop 0.6s cubic-bezier(0.485, 1.63, 0.43, 2) forwards,
		fade-in 0.2s 0.2s ease-out forwards;
}

.c-bully__bullet--squash {
	opacity: 1;
	animation: bully-squash 0.2s ease-out forwards;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes bully-pop {
	50% {
		transform: scale(0.7);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes bully-squash {
	50% {
		transform: scale(0.6, 1.8);
	}
	100% {
		transform: scale(1);
	}
}