.slideshow-controls {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px 11px 11px;
  border: 1px solid color-mix(in srgb, var(--wine) 28%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 84%, var(--surface-muted))
}

.slideshow-controls__title {
  color: var(--muted);
  font: 10px/1 var(--mono);
  letter-spacing: .08em
}

.slideshow-controls__row {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0
}

.slideshow-controls__field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font: 10px/1 var(--mono);
  letter-spacing: .04em
}

.slideshow-controls select {
  width: 112px;
  height: 32px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 400 12px/1.2 var(--sans)
}

.slideshow-controls__track select {
  width: 142px
}

.slideshow-controls__transition select {
  width: 122px
}

.slideshow-controls__music {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 2px;
  color: var(--ink);
  font: 400 12px/1.2 var(--sans);
  white-space: nowrap
}

.slideshow-controls__music input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--wine)
}

.slideshow-controls .button {
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0 12px;
  font: 400 12px/1.2 var(--sans);
  white-space: nowrap
}

.slideshow-controls__toggle {
  min-width: 94px
}

.slideshow-controls__fullscreen.is-active {
  border-color: var(--wine) !important;
  background: var(--wine) !important;
  color: #fff !important
}

.admin-session-viewer__actions {
  align-items: start !important
}

.admin-session-viewer__actions>.slideshow-controls {
  flex: 1 1 570px;
  max-width: 820px
}

.archive-session>.slideshow-controls {
  margin: 12px 0
}

.archive-session>.slideshow-controls .slideshow-controls__row {
  justify-content: flex-start
}

@media(max-width:980px) {
  .slideshow-controls__row {
    flex-wrap: wrap;
    justify-content: flex-start
  }

  .admin-session-viewer__actions>.slideshow-controls {
    max-width: none
  }
}

@media(max-width:560px) {
  .slideshow-controls {
    padding: 10px
  }

  .slideshow-controls__field {
    flex: 1 1 120px
  }

  .slideshow-controls select,
  .slideshow-controls__track select,
  .slideshow-controls__transition select {
    width: 100%
  }

  .slideshow-controls__music {
    flex: 1 1 100%
  }

  .slideshow-controls .button {
    flex: 1 1 auto
  }
}

@media(prefers-reduced-motion:no-preference) {
  .photo-viewer figure.viewer-transition--fade {
    animation: viewer-fade .46s cubic-bezier(.23, 1, .32, 1)
  }

  .photo-viewer figure.viewer-transition--slide {
    animation: viewer-slide .5s cubic-bezier(.23, 1, .32, 1)
  }

  .photo-viewer figure.viewer-transition--zoom {
    animation: viewer-zoom .56s cubic-bezier(.23, 1, .32, 1)
  }

  @keyframes viewer-fade {
    from {
      opacity: .18
    }

    to {
      opacity: 1
    }
  }

  @keyframes viewer-slide {
    from {
      opacity: .3;
      transform: translateX(3.2%)
    }

    to {
      opacity: 1;
      transform: translateX(0)
    }
  }

  @keyframes viewer-zoom {
    from {
      opacity: .28;
      transform: scale(1.025)
    }

    to {
      opacity: 1;
      transform: scale(1)
    }
  }
}