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