n-carousel.css

body[data-frozen] {
  overflow: hidden;
}

.n-carousel__content {
  display: flex;
  will-change: scroll;
  outline: 0;
  box-sizing: border-box;
  overflow-anchor: none;
  list-style: none;
  scrollbar-width: none;
  /* Firefox */
}
@media (prefers-reduced-motion: reduce) {
  .n-carousel__content {
    transition: none;
  }
}
.n-carousel__content::-webkit-scrollbar {
  display: none;
}
.n-carousel__content > * {
  flex: 1 0 auto;
  box-sizing: content-box;
  overflow: auto;
  width: 100%;
  padding-inline-end: calc(1px * var(--subpixel-compensation, 0));
}
.n-carousel__content > * > * {
  overflow: auto;
}
.n-carousel__content img {
  height: auto;
}
.n-carousel__content > :not([aria-current]):not(:last-child) {
  overflow: auto;
}

.n-carousel:not(.n-carousel--vertical) > .n-carousel__content {
  overflow-x: auto;
  width: calc(100% - 0px);
  padding: 0 var(--peek, 0);
}
.n-carousel:not(.n-carousel--vertical):not(.n-carousel--auto-height) > .n-carousel__content > * {
  overflow: auto;
}
.n-carousel:not(.n-carousel--vertical).n-carousel--auto-height:not(.n-carousel--controls-outside) {
  grid-template: auto/auto;
  grid-template-areas: "f f f" "a1 a1 a1" "prev a2 next" "a3 a3 a3" "i i i";
}
.n-carousel:not(.n-carousel--vertical).n-carousel--auto-height:not([data-ready]) > .n-carousel__content > :not(:first-child) {
  height: 0;
  overflow: visible;
}
.n-carousel:not(.n-carousel--vertical).n-carousel--auto-height > .n-carousel__content {
  overflow-y: hidden;
  height: var(--height, auto);
}
.n-carousel:not(.n-carousel--vertical).n-carousel--auto-height > .n-carousel__content,
.n-carousel:not(.n-carousel--vertical).n-carousel--auto-height > .n-carousel__content > * {
  min-height: 9em;
}

.n-carousel--vertical:not(.n-carousel--auto-height) > .n-carousel__content, .n-carousel--vertical[data-ready] > .n-carousel__content {
  flex-direction: column;
}
.n-carousel--vertical > .n-carousel__next button {
  transform: none;
}
.n-carousel--vertical > .n-carousel__previous button {
  transform: rotate(180deg);
}
.n-carousel--vertical[data-ready].n-carousel--auto-height > .n-carousel__content {
  overflow: hidden;
  overflow-y: auto;
}

@keyframes carousel-css-only {
  100% {
    height: 100%;
  }
}
.n-carousel {
  --max-height: 100vh;
  --peek: 0px;
  display: grid;
  grid-template: auto 1fr auto 1fr auto/auto 1fr auto;
  position: relative;
  grid-template-areas: "f f f" "a1 a1 a1" "prev    a2  next" "a3 a3 a3" "i       i   i";
}
.n-carousel:fullscreen, .n-carousel.n-carousel--overlay {
  max-height: 100% !important;
}
.n-carousel:fullscreen > .n-carousel__content, .n-carousel.n-carousel--overlay > .n-carousel__content {
  height: 100% !important;
  height: 100dvh !important;
}
.n-carousel:fullscreen > .n-carousel__content figure,
.n-carousel:fullscreen > .n-carousel__content img,
.n-carousel:fullscreen > .n-carousel__content video,
.n-carousel:fullscreen > .n-carousel__content iframe, .n-carousel.n-carousel--overlay > .n-carousel__content figure,
.n-carousel.n-carousel--overlay > .n-carousel__content img,
.n-carousel.n-carousel--overlay > .n-carousel__content video,
.n-carousel.n-carousel--overlay > .n-carousel__content iframe {
  max-height: 100%;
}
.n-carousel:fullscreen .n-carousel__close {
  display: none;
}
.n-carousel:-webkit-full-screen, .n-carousel.n-carousel--overlay {
  max-height: 100% !important;
}
.n-carousel:-webkit-full-screen > .n-carousel__content, .n-carousel.n-carousel--overlay > .n-carousel__content {
  height: 100% !important;
  height: 100dvh !important;
}
.n-carousel:-webkit-full-screen > .n-carousel__content figure,
.n-carousel:-webkit-full-screen > .n-carousel__content img,
.n-carousel:-webkit-full-screen > .n-carousel__content video,
.n-carousel:-webkit-full-screen > .n-carousel__content iframe, .n-carousel.n-carousel--overlay > .n-carousel__content figure,
.n-carousel.n-carousel--overlay > .n-carousel__content img,
.n-carousel.n-carousel--overlay > .n-carousel__content video,
.n-carousel.n-carousel--overlay > .n-carousel__content iframe {
  max-height: 100%;
}
.n-carousel:-webkit-full-screen .n-carousel__close {
  display: none;
}
.n-carousel.n-carousel--vertical {
  --max-height: 75vh;
  height: var(--max-height, 100%);
  max-height: 100%;
}
.n-carousel.n-carousel--vertical.n-carousel--auto-height:not([data-ready]) > .n-carousel__content > :not(:first-child) {
  display: none;
}
.n-carousel.n-carousel--vertical > .n-carousel__content {
  max-height: 100%;
}
.n-carousel.n-carousel--vertical:not(.n-carousel--auto-height):-webkit-full-screen > .n-carousel__content {
  height: 100% !important;
}
.n-carousel.n-carousel--vertical:not(.n-carousel--auto-height):fullscreen > .n-carousel__content {
  height: 100% !important;
}
.n-carousel.n-carousel--vertical > .n-carousel__content {
  overflow-y: auto;
  box-sizing: content-box;
  padding: var(--peek, 0) 0;
}
.n-carousel.n-carousel--vertical > .n-carousel__content > * {
  width: 100%;
  padding-inline-end: 0;
  height: 100%;
  padding-block-end: calc(1px * var(--subpixel-compensation, 0));
}
.n-carousel.n-carousel--vertical:not(.n-carousel--controls-outside) > .n-carousel__index {
  position: absolute;
  max-height: 100%;
  overflow: auto;
  justify-content: initial;
  grid-area: auto;
}
.n-carousel.n-carousel--vertical:not(.n-carousel--controls-outside).n-carousel--inline:not(.n-carousel--overlay) {
  height: auto;
}
.n-carousel.n-carousel--vertical:not(.n-carousel--controls-outside).n-carousel--inline:not(.n-carousel--overlay) > .n-carousel__index {
  position: static;
}
.n-carousel.n-carousel--vertical:not(.n-carousel--controls-outside).n-carousel--inline:not(.n-carousel--overlay) > .n-carousel__index > * {
  display: initial;
  margin: 0;
}
.n-carousel.n-carousel--vertical:not(.n-carousel--controls-outside).n-carousel--index-end > .n-carousel__index {
  inset-inline-end: 0;
  inset-inline-start: auto;
  grid-area: auto;
}
.n-carousel.n-carousel--vertical:not(.n-carousel--controls-outside).n-carousel--index-end.n-carousel--index-align-end > .n-carousel__index {
  position: absolute;
}
.n-carousel.n-carousel--vertical.n-carousel--auto-height:not(.n-carousel--overlay) {
  height: auto;
}
.n-carousel.n-carousel--vertical.n-carousel--auto-height.n-carousel--peek > .n-carousel__content > * {
  height: calc(100% + 1px * var(--subpixel-compensation, 0));
}
.n-carousel.n-carousel--vertical.n-carousel--auto-height.n-carousel--peek > .n-carousel__content:before, .n-carousel.n-carousel--vertical.n-carousel--auto-height.n-carousel--peek > .n-carousel__content:after {
  display: none;
}
.n-carousel:not([data-ready]) > * > button {
  cursor: not-allowed;
}
.n-carousel:not([data-ready]) > .n-carousel--auto-height > :not(:first-child) {
  height: 0;
  animation: carousel-css-only 2 0.1s linear 1s forwards;
}
.n-carousel:not([data-ready]) > .n-carousel--auto-height > :first-child {
  min-height: 100%;
}
.n-carousel[data-sliding] {
  pointer-events: none;
}
.n-carousel.n-carousel--rtl {
  direction: rtl;
}
.n-carousel.n-carousel--peek {
  --peek: 15%;
}
.n-carousel:not([data-sliding]) > .n-carousel__content {
  scroll-snap-type: x mandatory;
}
.n-carousel:not([data-sliding]) > .n-carousel__content > * {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.n-carousel.n-carousel--vertical:not([data-sliding]) > .n-carousel__content {
  scroll-snap-type: y mandatory;
}
.n-carousel.n-carousel--index-align-start > .n-carousel__index {
  justify-self: start;
}
.n-carousel.n-carousel--index-align-center:not(.n-carousel--vertical) > .n-carousel__index {
  justify-self: center;
}
.n-carousel.n-carousel--index-align-end > .n-carousel__index {
  justify-self: end;
}
.n-carousel > .n-carousel__content {
  padding: 0;
  margin: 0;
  grid-row: 1/-1;
  grid-column: 1/-1;
}
@media (prefers-reduced-motion: no-preference) {
  .n-carousel > .n-carousel__content {
    transition: opacity 0.2s ease-in-out;
  }
}
.n-carousel > :not(.n-carousel__content) {
  z-index: 1;
}
.n-carousel > .n-carousel__previous {
  grid-area: prev;
  align-self: center;
}
.n-carousel > .n-carousel__next {
  grid-area: next;
  align-self: center;
  justify-self: end;
}
.n-carousel > .n-carousel__index {
  grid-area: i;
  align-self: end;
  justify-self: center;
  justify-content: center;
  overflow: auto;
  white-space: nowrap;
  vertical-align: middle;
}
.n-carousel > .n-carousel__index img {
  width: 3em;
  height: 3em;
  object-fit: cover;
  padding: 0;
}
.n-carousel.n-carousel--thumbnails > .n-carousel__index {
  padding: 1px;
}
.n-carousel.n-carousel--thumbnails > .n-carousel__index > * {
  padding: 0;
  vertical-align: middle;
  margin: 0.125em;
  border-radius: var(--nui-border-radius);
  overflow: hidden;
}
.n-carousel.n-carousel--thumbnails > .n-carousel__index > * span {
  padding: 0 1ch;
}
.n-carousel.n-carousel--thumbnails > .n-carousel__index [aria-current] {
  box-shadow: 0 0px 0px 1px var(--nui-control-bg, grey);
}
.n-carousel[data-platform=iPhone] .n-carousel__full-screen, .n-carousel[data-platform=iPod] .n-carousel__full-screen {
  display: none;
}
.n-carousel[data-platform=iPhone] .n-carousel__close, .n-carousel[data-platform=iPod] .n-carousel__close {
  grid-area: f;
}
.n-carousel.n-carousel--index-start {
  grid-template-areas: "i       i   i" "a1 a1 a1" "prev    a2  next" "a3 a3 a3" "f f f";
}
.n-carousel.n-carousel--index-start > .n-carousel__index {
  align-self: start;
}
.n-carousel.n-carousel--index-start .n-carousel__index {
  justify-content: flex-start;
}
.n-carousel.n-carousel--index-start .n-carousel__full-screen,
.n-carousel.n-carousel--index-start .n-carousel__close {
  align-self: end;
}
.n-carousel.n-carousel--index-end > .n-carousel__index {
  justify-content: flex-end;
}
.n-carousel.n-carousel--controls-outside {
  grid-template-areas: "f 		f 			f" "a1 	content 		a2" "prev    content  	next" "b1 	content 		b2" "i       i   	i";
}
.n-carousel.n-carousel--controls-outside > .n-carousel__content {
  grid-area: content;
}
.n-carousel.n-carousel--controls-outside.n-carousel--index-start {
  grid-template-areas: "i       i   	i" "a1 	content 		a2" "prev    content  	next" "b1 	content 		b2" "f 		f 			f";
}
.n-carousel.n-carousel--controls-outside.n-carousel--index-align-start > .n-carousel__index {
  text-align: start;
}
.n-carousel.n-carousel--controls-outside.n-carousel--index-align-end > .n-carousel__index {
  text-align: end;
}
.n-carousel.n-carousel--vertical {
  grid-template: auto 1fr auto/auto 1fr auto 1fr auto;
  grid-template-areas: "i a1 prev a3 f" "i a1 a2   a3 f" "i a1 next a3 f";
}
.n-carousel.n-carousel--vertical:has(> .n-carousel__controls):before {
  content: "";
  grid-area: i;
  width: 3em;
}
.n-carousel.n-carousel--vertical > .n-carousel__index {
  align-self: center;
  justify-self: initial;
}
.n-carousel.n-carousel--vertical > .n-carousel__index > * {
  display: block;
  white-space: normal;
  max-width: 25vw;
}
.n-carousel.n-carousel--vertical.n-carousel--index-align-start > .n-carousel__index {
  align-self: start;
}
.n-carousel.n-carousel--vertical.n-carousel--index-align-end > .n-carousel__index {
  align-self: end;
  inset-inline-start: 0;
}
.n-carousel.n-carousel--vertical.n-carousel--index-end {
  grid-template-areas: "f a1 prev a3 i" "f a1 a2   a3 i" "f a1 next a3 i";
}
.n-carousel.n-carousel--vertical.n-carousel--index-end.n-carousel--index-align-start:not(.n-carousel--index-end) {
  grid-template: 1fr auto auto/auto auto auto 1fr auto auto;
  grid-template-areas: "f  c a1  prev  a2  i" "a3   a3 a3  a3    a3  i" "a4   a4 a4  next  a5  b2";
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
}
.n-carousel.n-carousel--vertical.n-carousel--index-end.n-carousel--index-align-start:not(.n-carousel--index-end) > .n-carousel__index {
  align-self: start;
}
.n-carousel.n-carousel--vertical.n-carousel--index-end.n-carousel--index-align-start {
  grid-template: 1fr auto auto/auto auto 1fr auto auto;
  grid-template-areas: "f   c  prev  a2  a2 i" "a3   a3  a3    a3  a3 i" "a4   a4  next  a5  a5 a5";
}
.n-carousel.n-carousel--vertical.n-carousel--index-end.n-carousel--index-align-start > .n-carousel__index {
  align-self: start;
}
.n-carousel.n-carousel--vertical.n-carousel--index-end.n-carousel--index-align-start > .n-carousel__previous {
  justify-self: center;
}
.n-carousel.n-carousel--vertical.n-carousel--index-end.n-carousel--index-align-end {
  grid-template: 1fr auto auto/auto auto 1fr auto auto;
  grid-template-areas: "f   c  prev  a2  a2 a2" "a3   a3  a3    a3  a3 i" "a4   a4  next  a5  a5 i";
}
.n-carousel.n-carousel--vertical.n-carousel--index-end.n-carousel--index-align-end > .n-carousel__index {
  align-self: end;
}
.n-carousel.n-carousel--vertical.n-carousel--index-end.n-carousel--index-align-end > .n-carousel__previous {
  justify-self: center;
}
.n-carousel.n-carousel--vertical > .n-carousel__previous {
  align-self: start;
}
.n-carousel.n-carousel--vertical > .n-carousel__next {
  align-self: end;
}
.n-carousel.n-carousel--vertical.n-carousel--controls-outside {
  grid-template-areas: "i a1 		prev		a2 		f" "i content 	content   	content f" "i b1 		next 		b2 		f";
}
.n-carousel.n-carousel--vertical.n-carousel--controls-outside.n-carousel--index-align-start > .n-carousel__index {
  align-self: start;
}
.n-carousel.n-carousel--vertical.n-carousel--controls-outside.n-carousel--index-end {
  grid-template-areas: "f a1 		prev		a2 		i" "f content 	content   	content i" "f b1 		next 		b2 		i";
}
.n-carousel.n-carousel--vertical.n-carousel--controls-outside > .n-carousel__index {
  max-height: var(--max-height, 100%);
}
.n-carousel.n-carousel--vertical.n-carousel--controls-outside.n-carousel--auto-height:not([data-ready]) > .n-carousel__index {
  max-height: 0;
}
.n-carousel.n-carousel--vertical.n-carousel--controls-outside.n-carousel--auto-height[data-ready] {
  overflow: hidden;
}
.n-carousel.n-carousel--vertical.n-carousel--controls-outside.n-carousel--auto-height[data-ready][data-sliding] > .n-carousel__index {
  max-height: none;
}
.n-carousel.n-carousel--vertical.n-carousel--controls-outside.n-carousel--auto-height[data-ready].n-carousel--index-end > .n-carousel__index {
  margin-inline-start: calc(-1px * var(--index-width) / 2);
}
.n-carousel:-webkit-full-screen {
  background: #000;
  --max-height: 100vh;
}
.n-carousel:fullscreen {
  background: #000;
  --max-height: 100vh;
}
.n-carousel.n-carousel--overlay {
  --max-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  max-height: none;
  height: 100%;
  height: 100dvh;
  background: rgba(255, 255, 255, 0.9);
}
@media (prefers-color-scheme: dark) {
  .n-carousel.n-carousel--overlay {
    background: rgba(0, 0, 0, 0.9);
  }
}
.n-carousel.n-carousel--inline:not(.n-carousel--overlay) {
  display: block;
}
.n-carousel.n-carousel--inline:not(.n-carousel--overlay) > .n-carousel__index > [aria-current] {
  box-shadow: none;
}
.n-carousel.n-carousel--inline:not(.n-carousel--overlay) > * {
  text-align: start;
}
.n-carousel.n-carousel--inline:not(.n-carousel--overlay) > *:not(.n-carousel__index) {
  visibility: hidden;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

@supports not (aspect-ratio: 1) {
  _::-webkit-full-page-media,
  _:future,
  :root .n-carousel[data-sliding] > .n-carousel__content {
    scroll-snap-type: both mandatory;
  }
}
_::-webkit-full-page-media,
_:future,
:root .n-carousel[data-sliding] > .n-carousel__content > * {
  scroll-snap-align: center;
}

_::-webkit-full-page-media,
_:future,
:root .n-carousel.n-carousel--peek:not(.n-carousel--vertical) > .n-carousel__content:after {
  content: "";
  padding: var(--peek-int, 0);
  flex-shrink: 0;
}

.n-carousel__index > *,
.n-carousel__previous > *,
.n-carousel__next > *,
.n-carousel__full-screen > *,
.n-carousel__close > * {
  box-sizing: border-box;
  text-decoration: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  all: revert;
  border: none;
  color: var(--nui-control-color, #333);
  background: var(--nui-control-bg, #eee);
  min-width: 2.25em;
  min-height: 2.25em;
  border-radius: var(--nui-border-radius, 2.25em);
  margin: 0.25em;
  font: inherit;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 1ch;
  cursor: pointer;
}
.n-carousel__index > * span,
.n-carousel__previous > * span,
.n-carousel__next > * span,
.n-carousel__full-screen > * span,
.n-carousel__close > * span {
  color: var(--nui-control-color, #333);
}
.n-carousel__index > *[aria-current] span,
.n-carousel__previous > *[aria-current] span,
.n-carousel__next > *[aria-current] span,
.n-carousel__full-screen > *[aria-current] span,
.n-carousel__close > *[aria-current] span {
  color: var(--nui-control-active-color, blue);
}

.n-carousel__index > *,
.n-carousel__previous > *,
.n-carousel__next > *,
.n-carousel__full-screen > *,
.n-carousel__close > *,
.n-carousel--tabs > .n-carousel__index {
  box-shadow: 0 0 0 var(--nui-border-size) var(--nui-border-color), 0 0 var(--nui-shadow-blur) calc(var(--nui-border-size) + var(--nui-shadow-size)) var(--nui-shadow-color);
}

.n-carousel--tabs > .n-carousel__index > * {
  box-shadow: none;
}

.n-carousel[data-ready] {
  --height: 0;
}
.n-carousel[data-ready] > .n-carousel__index > *,
.n-carousel[data-ready] > .n-carousel__previous > *,
.n-carousel[data-ready] > .n-carousel__next > *,
.n-carousel[data-ready] .n-carousel__full-screen > *,
.n-carousel[data-ready] .n-carousel__close > * {
  cursor: pointer;
}
.n-carousel[data-ready].n-carousel--auto-height:not(.n-carousel--vertical):not([data-sliding]) > .n-carousel__content > :not([aria-current]) {
  overflow: visible;
}
.n-carousel[data-ready].n-carousel--auto-height > .n-carousel__content > * {
  overflow: hidden !important;
}

.n-carousel__previous,
.n-carousel__next,
.n-carousel__full-screen,
.n-carousel__close {
  height: 2.85em;
  width: 2.85em;
}
.n-carousel__previous button span,
.n-carousel__next button span,
.n-carousel__full-screen button span,
.n-carousel__close button span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.n-carousel__previous button:before,
.n-carousel__next button:before,
.n-carousel__full-screen button:before,
.n-carousel__close button:before {
  content: "";
  background-color: var(--nui-control-color, #333);
  --chevron: url("data:image/svg+xml,%3Csvg height='18' viewBox='0 0 18 18' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.003 7.626 7.081-7.081 1.916 1.915-8.997 8.998-9.003-9 1.917-1.916z' transform='translate(0 5)'/%3E%3C/svg%3E");
  -webkit-mask: var(--chevron) no-repeat 0 0/contain;
  -webkit-mask-size: 100%;
  mask: var(--chevron) no-repeat 0 0;
  mask-size: 100%;
  width: 1em;
  height: 1em;
  display: inline-block;
}

.n-carousel__full-screen {
  grid-area: f;
  justify-self: baseline;
}
.n-carousel__full-screen button:before {
  --chevron: url("data:image/svg+xml,%3Csvg viewBox='0 0 46 46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-rule='nonzero'%3E%3Cpath d='M.778 17.444h5.555V6.334h11.111V.777H.778zM28.556.778v5.555h11.11v11.111h5.556V.778zM39.667 39.667H28.556v5.555h16.666V28.556h-5.555zM6.333 28.556H.778v16.666h16.666v-5.555H6.334z'/%3E%3C/g%3E%3C/svg%3E");
}
.n-carousel__full-screen ~ .n-carousel__close {
  grid-area: c;
}

.n-carousel__controls {
  grid-area: f;
  display: flex;
  justify-self: start;
}

.n-carousel--vertical > .n-carousel__controls {
  flex-direction: column;
  align-self: start;
}

.n-carousel__close {
  grid-area: f;
  justify-self: baseline;
}
.n-carousel__close button:before {
  --chevron: url("data:image/svg+xml,%3Csvg viewBox='0 0 480 480' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2523000' fill-rule='evenodd'%3E%3Cpath d='M68.88 368.693l42.427 42.427L411.12 111.307 368.693 68.88 168.818 268.756z'/%3E%3Cpath d='M111.307 68.88L68.88 111.307 368.693 411.12l42.427-42.427-199.876-199.875z'/%3E%3C/g%3E%3C/svg%3E");
}
.n-carousel__close ~ .n-carousel__full-screen {
  grid-area: c;
}

.n-carousel:not(.n-carousel--overlay) > .n-carousel__controls .n-carousel__close button:before {
  transform: rotate(45deg);
}

.n-carousel__previous button,
[dir=rtl] .n-carousel__next button,
.n-carousel--rtl > .n-carousel__next button {
  transform: rotate(90deg);
}

.n-carousel__next button,
[dir=rtl] .n-carousel__previous button,
.n-carousel--rtl > .n-carousel__previous button {
  transform: rotate(-90deg);
}

.n-carousel--tabs.n-carousel > .n-carousel__index {
  display: flex;
  justify-content: start;
  overflow: auto;
  max-width: 100%;
  max-height: 100%;
  color: var(--nui-control-color, #333);
  border-radius: var(--nui-border-radius);
}
.n-carousel--tabs.n-carousel > .n-carousel__index > * {
  box-sizing: border-box;
  border-radius: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  padding: 0.5ch 1ch;
  text-align: start;
  word-break: break-word;
  outline-offset: -3px;
  min-width: 1.5em;
  min-inline-size: min-content;
}
.n-carousel--tabs.n-carousel > .n-carousel__index > *:focus {
  z-index: 0;
}
.n-carousel--tabs.n-carousel.n-carousel--vertical > .n-carousel__index {
  display: block;
}
.n-carousel--tabs.n-carousel.n-carousel--vertical > .n-carousel__index > * {
  width: 100%;
}
.n-carousel--tabs.n-carousel.n-carousel--vertical > .n-carousel__index > *:first-child {
  border-radius: 0;
  border-start-start-radius: var(--nui-border-radius);
  border-start-end-radius: var(--nui-border-radius);
}
.n-carousel--tabs.n-carousel.n-carousel--vertical > .n-carousel__index > *:last-child {
  border-radius: 0;
  border-end-start-radius: var(--nui-border-radius);
  border-end-end-radius: var(--nui-border-radius);
}
.n-carousel--tabs.n-carousel.n-carousel--vertical.n-carousel--auto-height > .n-carousel__index > * {
  white-space: nowrap;
}
.n-carousel--tabs.n-carousel.n-carousel--tabs-align-end > .n-carousel__index > * {
  text-align: end;
}
.n-carousel--tabs.n-carousel > .n-carousel__previous,
.n-carousel--tabs.n-carousel > .n-carousel__next {
  display: none;
}

@-moz-document url-prefix() {
  .n-carousel--vertical > .n-carousel__content {
    display: block;
  }
  .n-carousel--vertical > .n-carousel__content > :last-child {
    margin-block-end: var(--peek, 0);
  }
}
.n-carousel--lightbox {
  flex: 1;
  --nui-carousel-bg: transparent;
}
.n-carousel--lightbox:not(.n-carousel--auto-height) {
  max-height: var(--max-height, 100vh);
}
.n-carousel--lightbox figure {
  height: 100%;
  margin: 0;
  display: grid;
  grid-template: auto 1fr/auto;
  box-sizing: border-box;
}
.n-carousel--lightbox figure > * {
  grid-row: 1/3;
  grid-column: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  min-width: 0;
}
.n-carousel--lightbox figure > figcaption {
  grid-row: 1/2;
  justify-self: center;
  padding: 0.5em 0.75em;
  background: rgba(0, 0, 0, 0.3);
  color: #ddd;
  z-index: 0;
  border-radius: var(--nui-border-radius);
  margin: 0.25em;
}
.n-carousel--lightbox.n-carousel--auto-height figure,
.n-carousel--lightbox.n-carousel--auto-height video,
.n-carousel--lightbox.n-carousel--auto-height iframe {
  height: auto;
  max-height: none;
}
.n-carousel--lightbox.n-carousel--auto-height :not(:-webkit-full-screen):not(.n-carousel--overlay) > .n-carousel__content {
  max-height: var(--max-height);
}
.n-carousel--lightbox.n-carousel--auto-height :not(:fullscreen):not(.n-carousel--overlay) > .n-carousel__content {
  max-height: var(--max-height);
}
.n-carousel--lightbox.n-carousel--index-start figure {
  grid-template: 1fr auto/auto;
}
.n-carousel--lightbox.n-carousel--index-start figure > figcaption {
  grid-row: 2/3;
}
.n-carousel--lightbox.n-carousel--vertical:not(.n-carousel--controls-outside) figure > figcaption {
  margin-top: 3em;
}
.n-carousel--lightbox.n-carousel--vertical:not(.n-carousel--controls-outside).n-carousel--index-start figure > figcaption {
  margin-top: none;
  margin-bottom: 3em;
}
.n-carousel--lightbox img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  box-sizing: border-box;
  padding: 0 0.5px;
  z-index: 0;
}
.n-carousel--lightbox.n-carousel--auto-height img {
  max-height: none;
}
.n-carousel--lightbox:-webkit-full-screen img {
  max-height: 100%;
}
.n-carousel--lightbox:-webkit-full-screen.n-carousel--auto-height figure {
  height: 100%;
}
.n-carousel--lightbox:fullscreen img {
  max-height: 100%;
}
.n-carousel--lightbox:fullscreen.n-carousel--auto-height figure {
  height: 100%;
}
.n-carousel--lightbox.n-carousel--overlay img {
  max-height: 100%;
}
.n-carousel--lightbox.n-carousel--overlay.n-carousel--auto-height figure {
  height: 100%;
}
.n-carousel--lightbox iframe,
.n-carousel--lightbox video {
  border: none;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.n-carousel--lightbox > .n-carousel__content picture:not([data-loaded]) {
  position: relative;
}
.n-carousel--lightbox > .n-carousel__content picture:not([data-loaded]):before {
  content: "";
  position: absolute;
  inset: 0;
  filter: blur(4px);
  background: var(--placeholder, none) center no-repeat;
  background-size: contain;
}
.n-carousel--lightbox:not(.n-carousel--overlay):not(:fullscreen).n-carousel--aspect {
  --max-height: 100%;
}
.n-carousel--lightbox:not(.n-carousel--overlay):not(:fullscreen).n-carousel--aspect > .n-carousel__content > * figure {
  aspect-ratio: var(--ratio, 16/9);
  position: relative;
  width: 100%;
  height: auto;
}
.n-carousel--lightbox:not(.n-carousel--overlay):not(:fullscreen).n-carousel--aspect.n-carousel--auto-height img {
  max-height: 100%;
}
.n-carousel--lightbox:not(.n-carousel--overlay):not(:fullscreen).n-carousel--aspect.n-carousel--vertical {
  height: var(--height);
}
.n-carousel--lightbox:not(.n-carousel--overlay):not(:fullscreen).n-carousel--aspect.n-carousel--vertical > .n-carousel__content > * {
  height: auto;
  flex-grow: initial;
}
.n-carousel--lightbox:not(.n-carousel--overlay):not(:-webkit-full-screen).n-carousel--aspect {
  --max-height: 100%;
}
.n-carousel--lightbox:not(.n-carousel--overlay):not(:-webkit-full-screen).n-carousel--aspect > .n-carousel__content > * figure {
  aspect-ratio: var(--ratio, 16/9);
  position: relative;
  width: 100%;
  height: auto;
}
.n-carousel--lightbox:not(.n-carousel--overlay):not(:-webkit-full-screen).n-carousel--aspect.n-carousel--auto-height img {
  max-height: 100%;
}
.n-carousel--lightbox:not(.n-carousel--overlay):not(:-webkit-full-screen).n-carousel--aspect.n-carousel--vertical {
  height: var(--height);
}
.n-carousel--lightbox:not(.n-carousel--overlay):not(:-webkit-full-screen).n-carousel--aspect.n-carousel--vertical > .n-carousel__content > * {
  height: auto;
  flex-grow: initial;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .n-carousel:fullscreen .n-carousel__full-screen {
    display: none;
  }
}

/*# sourceMappingURL=n-carousel.css.map */