@layer shwt-widgets {
  .embla {
    overflow: hidden;
    height: 100%;

    &:focus-visible {
      outline: none;
    }

    &.style-carousel {
      & .embla__container {
        margin-left: calc(var(--slide-space, 0) * var(--tr-ratio) * -1);
        container-type: size;
        height: 1px;

        & .embla__slide {
          padding-left: calc(var(--slide-space, 0) * var(--tr-ratio, 1px));
          flex-basis: unset;
          aspect-ratio: var(--aspect-ratio, unset);
          height: 100cqh;
        }

        & img {
          object-fit: cover;
        }
      }
    }

    &.style-cover img {
      object-fit: cover;
    }

    &.style-contain {
      & .embla__slide {
        padding: calc(var(--slide-space, 0) * var(--tr-ratio, 1px));
      }

      & img {
        object-fit: contain;
      }
    }

    & .loading-icon {
      animation-name: loader-spin;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;

      grid-area: content;
      height: 50px;
      width: 50px;
      justify-self: center;
      position: relative;

      & circle {
        stroke: hsla(0, 0%, 50%, 0.5);
      }
    }
  }

  .embla__viewport {
    max-height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  .embla__container {
    display: flex;
    max-height: 100%;
    align-items: stretch;
    max-height: 100%;
    min-height: 0;
    flex-shrink: 1;
    flex-grow: 1;

    cursor: grab;

    &:active {
      cursor: grabbing;
    }
  }

  .embla__slide {
    flex: 0 0 100%;
    min-width: 0;
    overflow: hidden;

    display: grid;
    grid-template-rows: 100%;
    grid-template-areas: "content";

    & .shwt-element {
      position: relative;
      opacity: 1;
      width: 100%;
      min-height: 100%;
    }

    & img {
      height: 100%;
      width: 100%;
      transition-duration: 0.4s;
      transition-property: scale, blur, opacity;
      grid-area: content;
    }
  }

  .embla .embla__slide img.shwt-loading {
    opacity: 0;
  }

  .embla__dots {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    column-gap: calc(var(--tr-ratio) * var(--dot-space-between));
    row-gap: calc(var(--tr-ratio) * var(--dot-space-between));
    justify-content: center;
    flex-wrap: wrap;
  }

  .embla__dot {
    height: calc(var(--tr-ratio) * var(--dot-size));
    width: calc(var(--tr-ratio) * var(--dot-size));
    background-color: var(--dot-color);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;

    &.active {
      background-color: var(--dot-selected-color);
    }
  }

  .embla__slide:not(.active) img {
    filter: blur(var(--unselected-image-blur, 0));
    opacity: var(--unselected-image-opacity, 100%);
    scale: var(--unselected-image-scale, 100%);
  }

  .embla__slide img:not(.shwt-loading)+.loading-icon {
    opacity: 0;
    transition: opacity 0.5s ease;
    animation-play-state: paused;
  }

  .loading-icon {
    top: calc(50% - 25px - (var(--tr-ratio) * var(--dot-offset, 0)));
  }

  @container (style(--dot-location: under)) {
    .embla__dots {
      padding-top: calc(var(--tr-ratio) * var(--dot-offset, 0));
    }
  }

  @container (style(--dot-location: over)) {
    .embla__dots {
      padding-bottom: calc(var(--tr-ratio) * var(--dot-offset, 0));
      position: absolute;
      bottom: 0;
      width: 100%;
    }

    .loading-icon {
      top: calc(50% - 6%);
    }
  }

  @keyframes loader-spin {
    from {
      rotate: 0deg;
    }

    to {
      rotate: 360deg;
    }
  }
}