:root {
  --wpjpf-cubic-bezier: cubic-bezier(0.165, 0.84, 0.44, 1);
}

body:not(.admin-bar) {
  --wp-admin--admin-bar--height: 0;
}

html {
  margin-top: var(--wp-admin--admin-bar--height) !important;
}

#wpjpf-overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
}

#wpjpf-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 300ms;
}

/*************************************** EFFECTS ****************************/

/* FADE EFFECT */

.fade {
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: var(--color-option);
  visibility: hidden;
  transition: all 700ms var(--wpjpf-cubic-bezier);
}

.fade--in {
  visibility: visible;
  opacity: 1;
  transition: all 700ms var(--wpjpf-cubic-bezier);
}

.fade--out {
  visibility: hidden;
  opacity: 0;
  transition: all 700ms var(--wpjpf-cubic-bezier);
}

/* SLIDE EFFECT */

.slide-top {
  height: 100%;
  width: 100%;
  background-color: var(--color-option);
}

@keyframes slideTopIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideTopOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

.slide-right {
  height: 100%;
  width: 100%;
  background-color: var(--color-option);
}

@keyframes slideRightIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideRightOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.slide-bottom {
  height: 100%;
  width: 100%;
  background-color: var(--color-option);
}

@keyframes slideBottomIn {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideBottomOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.slide-left {
  height: 100%;
  width: 100%;
  background-color: var(--color-option);
}

@keyframes slideLeftIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideLeftOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* GLASSMORPHISM EFFECT */

.glassmorphism {
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--color-option) 50%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: all 700ms var(--wpjpf-cubic-bezier);
}

.glassmorphism--in {
  visibility: visible;
  opacity: 1;
  transition: all 700ms var(--wpjpf-cubic-bezier);
}

.glassmorphism--out {
  visibility: hidden;
  opacity: 0;
  transition: all 700ms var(--wpjpf-cubic-bezier);
}

/******************************** LOADERS ******************************/

.spinner-basic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 9px solid var(--wpjpf-loader-color);
  animation:
    SpinnerBasic 0.8s infinite linear alternate,
    SpinnerBasic2 1.6s infinite linear;
}

@keyframes SpinnerBasic {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }

  12.5% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%
    );
  }

  25% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%
    );
  }

  50% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }

  62.5% {
    clip-path: polygon(
      50% 50%,
      100% 0,
      100% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }

  75% {
    clip-path: polygon(
      50% 50%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }

  100% {
    clip-path: polygon(
      50% 50%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      0% 100%
    );
  }
}

@keyframes SpinnerBasic2 {
  0% {
    transform: scaleY(1) rotate(0deg);
  }

  49.99% {
    transform: scaleY(1) rotate(135deg);
  }

  50% {
    transform: scaleY(-1) rotate(0deg);
  }

  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}

.dots-basic {
  width: 56px;
  height: 13.4px;
  background: radial-gradient(
      circle closest-side,
      var(--wpjpf-loader-color) 90%,
      #0000
    )
    0 0/33% 100% space;
  clip-path: inset(0 100% 0 0);
  animation: DotsBasic 1s steps(4) infinite;
}

@keyframes DotsBasic {
  to {
    clip-path: inset(0 -34% 0 0);
  }
}

.bars-basic {
  width: 50.4px;
  height: 67.2px;
  --color: linear-gradient(var(--wpjpf-loader-color) 0 0);
  background:
    var(--color) 0% 100%,
    var(--color) 50% 100%,
    var(--color) 100% 100%;
  background-size: 10.1px 65%;
  background-repeat: no-repeat;
  animation: BarsBasic 1s infinite linear;
}

@keyframes BarsBasic {
  20% {
    background-position:
      0% 50%,
      50% 100%,
      100% 100%;
  }

  40% {
    background-position:
      0% 0%,
      50% 50%,
      100% 100%;
  }

  60% {
    background-position:
      0% 100%,
      50% 0%,
      100% 50%;
  }

  80% {
    background-position:
      0% 100%,
      50% 100%,
      100% 0%;
  }
}

.progressbar-basic {
  width: 100px;
  height: 20px;
  background: linear-gradient(var(--wpjpf-loader-color) 0 0) left/0% 100%
    no-repeat color-mix(in srgb, var(--wpjpf-loader-color) 20%, transparent);
  animation: ProgressBarBasicAnimation 2s infinite linear;
}

@keyframes ProgressBarBasicAnimation {
  100% {
    background-size: 100% 100%;
  }
}

.pulse-basic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wpjpf-loader-color);
  box-shadow: 0 0 0 0 var(--wpjpf-loader-color);
  animation: PulseBasicAnimation 1s infinite;
}

@keyframes PulseBasicAnimation {
  100% {
    box-shadow: 0 0 0 30px #0000;
  }
}