@use "variables";

/**
* 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;
  font-size: 12px;
  transform: translate(0, -50%);
  z-index: 600;
  color: #333;
  text-transform: uppercase;
  @include variables.for(screens-medium) {
    right: 0px;
  }
  &.c-bully--inversed {
    color: #fff;
  }
  &.c-bully-hide-on-mobile {
    @include variables.for(screens-medium) {
      display: none;
    }
  }
}
.onepress-menu-mobile-opening {
  .c-bully {
    z-index: 10;
  }
}

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

  &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;
  border: 2px solid currentColor;
  border-radius: 50%;
  will-change: transform;
	@include variables.for(screens-medium) {
    width: $bully_size_s;
    height: $bully_size_s;
  }
}

.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%);
  font-size: 14px;
  background: currentColor;
  border-radius: 50%;
	@include variables.for(screens-medium) {
    width: $bully_size_s;
    height: $bully_size_s;
  }
}

.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);
  }
}