@keyframes ocs-spotlight-expand {
  0% {
    outline-offset: -4px;
    outline-width: 4px;
    opacity: 1;
  }
  100% {
    outline-offset: 21px;
    outline-width: 12px;
    opacity: 0;
  }
}

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

@keyframes ocs-spotlight-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ocs-spotlight {
  pointer-events: none;
  position: absolute;
  &__with-backdrop {
    mix-blend-mode: hard-light;
  }
  &__element-highlight-noanimate {
    border: var(--pf-global--BorderWidth--xl) solid var(--pf-global--palette--blue-100);
    background-color: var(--pf-global--palette--black-500);
    z-index: 9999;
  }
  &__element-highlight-animate {
    pointer-events: none;
    position: absolute;
    box-shadow: inset 0px 0px 0px 4px var(--pf-global--palette--blue-200);
    opacity: 0;
    animation: 0.4s ocs-spotlight-fade-in 0s ease-in-out,
      5s ocs-spotlight-fade-out 12.8s ease-in-out;
    animation-fill-mode: forwards;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      animation: 1.2s ocs-spotlight-expand 1.6s ease-out;
      animation-fill-mode: forwards;
      outline: 4px solid var(--pf-global--palette--blue-200);
      outline-offset: -4px;
    }
  }
}
