@layer shwt-widgets {
  .cycle-button {
    width: 50px;
    height: 50px;
    top: calc(50% - 25px);
    position: fixed;
    opacity: 0.2;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    fill: var(--_buttons-color);
    transition: opacity 0.5s ease;
    z-index: 1;

    & svg {
      width: 100%;
      height: 100%;
    }

    &:hover {
      opacity: 1;
    }
  }

  .next {
    opacity: 0.2;
    right: var(--_arrow-offset);
  }

  .prev {
    opacity: 0.2;
    left: var(--_arrow-offset);
  }

  .close {
    position: fixed;
    top: 0;
    right: 0;
  }

  .lightbox {
    --_bg-color: var(--bg-color, #000000a7);
    --_buttons-color: var(--buttons-color, #ffffff);
    --_arrow-offset: var(--arrow-offset, 40px);

    transition: opacity 0.5s ease-in-out;
    transition-delay: 0.25s;

    opacity: 0;
    display: none;
    padding: 0;
    border: none;
    background: transparent;

    & shwt-widget-sliding-gallery {
      max-width: 100%;
      position: relative;
      z-index: 0;
      width: 100%;
    }

    & .content {
      display: flex;
      justify-content: center;
      width: 100cqw;
      height: 100vh;
    }

    .embla__slide {
      display: flex;
      justify-content: center;

      & img {
        height: initial;
        width: initial;
      }
      & svg {
        position: absolute;
        align-self: center;
      }
    }
  }

  .lightbox::backdrop {
    transition: background-color 0.5s ease-in-out;
    background-color: hsl(0 0 0 / 0);
  }

  .lightbox:popover-open::backdrop {
    background-color: var(--_bg-color);
    display: block;
  }

  .lightbox:popover-open {
    opacity: 1;
    display: block;
  }

  @starting-style {
    .lightbox:popover-open {
      opacity: 0;
    }

    .lightbox:popover-open::backdrop {
      background-color: hsl(0 0 0 / 0);
    }
  }
}