$gallery-breakpoint: m;

:root {
  --gallery-figure-height: auto;

  @include use-responsive-sizing(--gallery-figure-caption-padding, responsive-map(xs 1.5rem, l 2rem));
  @include use-responsive-sizing(--gallery-navigation-button-size, (xs: 4rem, $gallery-breakpoint: 6.2rem));
}

.gallery {
  --gallery-position-width: calc(var(--gallery-figure-caption-padding) * 2 + 4rem);
  --gallery-navigation-width: calc(var(--gallery-navigation-button-size) * 2 + var(--gallery-figure-caption-padding) * 1.5);

  background-color: var(--color-cyan-light);
  position: relative;
}

.gallery__figures-wrapper {
  overflow: hidden;

  .no-js & {
    overflow-x: auto;
  }
}

.gallery__figures {
  align-items: stretch;
  display: flex;
  position: relative;
  transform: translateX(0);
  transition-duration: var(--duration-long);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.gallery__figure {
  --figure-caption-padding-inline: var(--gallery-position-width) var(--gallery-figure-caption-padding);
  --figure-caption-min-height: 6.2rem;
  --figure-height: var(--gallery-figure-height);

  flex-shrink: 0;
  inline-size: 100%;

  @include mq($from: $gallery-breakpoint) {
    --figure-caption-padding-inline: var(--gallery-position-width) var(--gallery-navigation-width);
  }
}

.gallery__navigation {
  display: none;
  inset-block-start: var(--gallery-figure-height);
  inset-inline-start: 0;
  position: absolute;
  transform: translateY(-100%);

  .gallery--ready & {
    display: flex;
  }

  @include mq($from: $gallery-breakpoint) {
    inset-inline: auto 0;
    transform: translateY(0);
  }
}

.gallery__navigation-button {
  --icon-button-size: var(--gallery-navigation-button-size);
}

.gallery__position {
  background-color: var(--color-cyan-light);
  font-size: 1.4rem;
  font-weight: var(--font-weight-semibold);
  inline-size: var(--gallery-position-width);
  inset-block: var(--gallery-figure-height) 0;
  inset-inline-start: 0;
  line-height: var(--line-height-body);
  padding-block-start: var(--gallery-figure-caption-padding);
  padding-inline-start: var(--gallery-figure-caption-padding);
  position: absolute;
}