.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;
      /* some base height is needed for flex and aspect-ratio to function. Value doesn't actually matter as long as it's a number */
      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;

  /* Not on the viewport: the dots live inside it and keep their own pointer cursor. */
  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;
  }
}