.snaploader-interactive-embed {
  --snaploader-skeleton-width: 25%;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  border-radius: 8px;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #f2f2f2;
    transition: opacity 0.25s ease-in-out;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1 * var(--snaploader-skeleton-width));
    z-index: 5;
    width: var(--snaploader-skeleton-width);
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 80%
    );
    animation: snaploaderInteractiveEmbedSkeleton 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transition: opacity 0.25s ease-in-out;
  }

  &.is-loaded {
    &::before {
      background: #ffffff;
      opacity: 0;
      pointer-events: none;
    }

    &::after {
      opacity: 0;
      pointer-events: none;
    }
  }

  & .embedOverlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    isolation: isolate;
    opacity: 1;
    overflow: hidden;
    transition: opacity 0.25s ease-in-out;

    &:hover > .overlayBg {
      transform: scale(1.01);
    }

    &.overlay-transition {
      opacity: 0;
      pointer-events: none;
    }

    &.has-play-btn {
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        width: 100px;
        height: 100px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
        transform: translate(-50%, -50%) scale(1);
        transition: transform 0.25s ease-in-out;
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(50% + 4px);
        z-index: 4;
        width: 0;
        height: 0;
        border-top: 18px solid transparent;
        border-bottom: 18px solid transparent;
        border-left: 28px solid #0c2340;
        transform: translate(-50%, -50%) scale(1);
        transition: transform 0.25s ease-in-out;
      }

      &:hover {
        &::before,
        &::after {
          transform: translate(-50%, -50%) scale(1.05);
        }
      }

      &:active {
        &::before,
        &::after {
          transform: translate(-50%, -50%) scale(1);
        }
      }
    }
  }

  & .snaploader-interactive-embed-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(0.23deg, #000000 -6.4%, transparent 51.68%);
    background-blend-mode: multiply;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.35s var(--cubic-bezier, cubic-bezier(0.4, 0, 0.2, 1));
  }

  & .snaploader-interactive-embed-overlayContent {
    position: absolute;
    right: 32px;
    bottom: 32px;
    left: 32px;
    z-index: 2;
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    transform: translateY(12px);
    transition:
      opacity 0.35s var(--cubic-bezier, cubic-bezier(0.4, 0, 0.2, 1)),
      transform 0.35s var(--cubic-bezier, cubic-bezier(0.4, 0, 0.2, 1));
  }

  & .snaploader-interactive-embed-button {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 48px);
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--gcid-primary-color);
    color: #ffffff;
    cursor: pointer;
    font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    transition: background-color 0.35s var(--cubic-bezier, cubic-bezier(0.4, 0, 0.2, 1));

    &::after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      background: url('/wp-content/themes/snaploader/images/icons/arrow-right-white.svg') center / contain no-repeat;
      pointer-events: none;
      transform: translateX(0);
      transition: transform 0.35s var(--cubic-bezier, cubic-bezier(0.4, 0, 0.2, 1));
      will-change: transform;
    }

    &:hover,
    &:focus-visible {
      background-color: var(--col-navy-hover);
      color: #ffffff;
      opacity: 1;

      &::after {
        transform: translateX(4px);
      }
    }

    &:focus-visible {
      outline: 2px solid #ffffff;
      outline-offset: 3px;
    }
  }

  & .embedOverlay.has-primary-button.has-play-btn {
    &::before,
    &::after {
      display: none;
    }
  }

  & .snaploader-interactive-embed-title {
    color: #ffffff;
    font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    margin: 0;
    padding: 0;
  }

  & .snaploader-interactive-embed-subtitle {
    color: #ffffff;
    font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
    font-size: 24px;
    line-height: 32px;
    margin: 4px 0 0;
    padding: 0;
  }

  & .overlayBg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.25s ease-in-out;
  }

  & .snaploader-interactive-embed-iframe {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    flex: 1 1 auto;
    border: 0;
  }
}

.snaploader-interactive-embed.snaploader-interactive-embed_hasGradientHover:hover .snaploader-interactive-embed-gradient,
.snaploader-interactive-embed.snaploader-interactive-embed_hasGradientHover:focus-within .snaploader-interactive-embed-gradient,
.snaploader-interactive-embed.snaploader-interactive-embed_hasGradientHover:active .snaploader-interactive-embed-gradient {
  transform: scaleY(1);
}

.snaploader-interactive-embed.snaploader-interactive-embed_hasOverlayContent:hover .snaploader-interactive-embed-overlayContent,
.snaploader-interactive-embed.snaploader-interactive-embed_hasOverlayContent:focus-within .snaploader-interactive-embed-overlayContent,
.snaploader-interactive-embed.snaploader-interactive-embed_hasOverlayContent:active .snaploader-interactive-embed-overlayContent {
  opacity: 1;
  transform: translateY(0);
}

.snaploader-interactive-embed-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 24px;
  border: 1px dashed #9aa7b8;
  border-radius: 8px;
  color: #41566f;
  text-align: center;
  background: #f7f9fc;
}

@keyframes snaploaderInteractiveEmbedSkeleton {
  to {
    left: calc(100% + var(--snaploader-skeleton-width));
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  .snaploader-divi-interactive-embed-module,
  .snaploader-interactive-embed {
    min-height: 650px;
  }
}

@media (max-width: 767px) {
  .snaploader-divi-interactive-embed-module,
  .snaploader-interactive-embed {
    min-height: 450px;
  }

  .snaploader-interactive-embed {
    & .snaploader-interactive-embed-overlayContent {
      right: 24px;
      bottom: 24px;
      left: 24px;
    }

    & .snaploader-interactive-embed-title {
      font-size: 28px;
      line-height: 32px;
    }

    & .snaploader-interactive-embed-subtitle {
      font-size: 20px;
      line-height: 28px;
    }

    & .embedOverlay.has-play-btn {
      &::before {
        width: 80px;
        height: 80px;
      }

      &::after {
        border-top-width: 14px;
        border-bottom-width: 14px;
        border-left-width: 22px;
      }
    }
  }
}