{"version":3,"sources":["n-carousel.scss"],"names":[],"mappings":"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","file":"n-carousel.min.css","sourcesContent":["// @import './node_modules/n-modal/n-modal.scss';\n\nbody[data-frozen] {\n  overflow: hidden;\n}\n\n.n-carousel__content {\n  scrollbar-width: none;\n  display: flex;\n  will-change: scroll;\n  outline: 0;\n  box-sizing: border-box;\n  overflow-anchor: none; // Prevent Chrome from scrolling parent carousels while animating carousel height\n  list-style: none;\n\n  /* Firefox */\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  >* {\n    flex: 1 0 auto;\n    box-sizing: content-box;\n    overflow: auto;\n    width: 100%;\n    padding-inline-end: calc(1px * var(--subpixel-compensation, 0));\n\n    >* {\n      overflow: auto; // Collapse inner margins\n    }\n  }\n\n  img {\n    height: auto;\n  }\n\n  > :not([aria-current]):not(:last-child) {\n    overflow: auto;\n  }\n}\n\n.n-carousel:not(.n-carousel--vertical) {\n  >.n-carousel__content {\n    overflow-x: auto;\n    // width: var(--subpixel-compensation, 0);\n    width: calc(100% - 0px); // Using the Safari bug where it floors the floating point value\n    padding: 0 var(--peek, 0);\n  }\n\n  &:not(.n-carousel--auto-height)> {\n    .n-carousel__content>* {\n      overflow: auto;\n    }\n  }\n\n  &.n-carousel--auto-height:not(:fullscreen):not(.n-carousel--overlay) {\n    &:not(.n-carousel--controls-outside) {\n      grid-template: auto/auto;\n      grid-template-areas:\n        \"f f f\"\n        \"a1 a1 a1\"\n        \"prev a2 next\"\n        \"a3 a3 a3\"\n        \"i i i\";\n    }\n\n    &:not(:fullscreen):not(.n-carousel--overlay):not([data-ready]) {\n      >.n-carousel__content> :not(:first-child) {\n        height: 0;\n        overflow: visible;\n      }\n    }\n\n    >.n-carousel__content {\n      overflow-y: hidden;\n      height: var(--height, auto);\n\n      &,\n      >* {\n        min-height: 9em; // Minimum height to accommodate the controls\n      }\n    }\n  }\n}\n\n.n-carousel--vertical {\n\n  &:not(.n-carousel--auto-height),\n  &[data-ready] {\n    >.n-carousel__content {\n      flex-direction: column;\n    }\n  }\n\n  >.n-carousel__next {\n    button {\n      transform: none;\n    }\n  }\n\n  >.n-carousel__previous {\n    button {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-ready].n-carousel--auto-height>.n-carousel__content {\n    overflow: hidden;\n    overflow-y: auto;\n  }\n}\n\n@keyframes carousel-css-only {\n  100% {\n    height: 100%;\n  }\n}\n\n.n-carousel {\n\n  &:fullscreen,\n  &.n-carousel--overlay {\n    max-height: 100% !important;\n\n    >.n-carousel__content {\n      height: 100% !important;\n      height: 100dvh !important; // Dynamic viewport height, Safari 15.4\n\n      figure,\n      img,\n      video,\n      iframe {\n        max-height: 100%;\n      }\n    }\n  }\n\n  &:fullscreen {\n    .n-carousel__close {\n      display: none;\n    }\n  }\n\n  // Safari 15+ supports `:fullscreen`, so no prefixed fullscreen selectors needed.\n\n  &.n-carousel--vertical {\n    &.n-carousel--auto-height:not([data-ready]) {\n      >.n-carousel__content {\n        > :not(:first-child) {\n          display: none;\n        }\n      }\n    }\n\n    --max-height: 75vh;\n    height: var(--max-height, 100%);\n    max-height: 100%;\n\n    >.n-carousel__content {\n      padding: var(--peek, 0) 0;\n      overflow-y: auto;\n      box-sizing: content-box;\n\n      >* {\n        width: 100%;\n        padding-inline-end: 0;\n        height: 100%;\n        padding-block-end: calc(1px * var(--subpixel-compensation, 0));\n      }\n    }\n\n    &:not(.n-carousel--controls-outside) {\n      >.n-carousel__index {\n        position: absolute;\n        max-height: 100%;\n        overflow: auto;\n        justify-content: initial;\n        grid-area: auto;\n      }\n\n      &.n-carousel--inline:not(.n-carousel--overlay) {\n        height: auto;\n\n        >.n-carousel__index {\n          position: static;\n\n          >* {\n            display: initial;\n            margin: 0;\n          }\n        }\n      }\n\n      &.n-carousel--index-end {\n        >.n-carousel__index {\n          inset-inline-end: 0;\n          inset-inline-start: auto;\n          grid-area: auto;\n        }\n\n        &.n-carousel--index-align-end {\n          >.n-carousel__index {\n            position: absolute;\n          }\n        }\n      }\n    }\n\n    &.n-carousel--auto-height:not(:fullscreen):not(.n-carousel--overlay) {\n      &:not(.n-carousel--overlay) {\n        height: auto;\n      }\n\n      &.n-carousel--peek {\n\n        // Disable vertical auto-height peeking for the time being\n        >.n-carousel__content {\n          >* {\n            height: calc(100% + 1px * var(--subpixel-compensation, 0));\n          }\n\n          &:before,\n          &:after {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n\n  &:not([data-ready]) [class*=\"n-carousel__\"]>button {\n    cursor: not-allowed;\n  }\n\n  &:not(:fullscreen):not(.n-carousel--overlay):not([data-ready])>.n-carousel--auto-height> :not(:first-child) {\n    height: 0;\n    animation: carousel-css-only 2 0.1s linear 1s forwards;\n  }\n\n  &:not(:fullscreen):not(.n-carousel--overlay):not([data-ready])>.n-carousel--auto-height> :first-child {\n    min-height: 100%;\n  }\n\n  --max-height: 100vh;\n  // max-height: -webkit-fill-available; // Moved to Safari only\n  // overflow: hidden; // To do: fix the real issue, bc overflow might be needed for popups etc.\n  --peek: 0px;\n\n  &[data-sliding] {\n    pointer-events: none;\n  }\n\n  &.n-carousel--rtl {\n    direction: rtl;\n  }\n\n  &.n-carousel--peek {\n    --peek: 15%;\n  }\n\n  &:not([data-sliding])>.n-carousel__content {\n    scroll-snap-type: x mandatory;\n\n    >* {\n      scroll-snap-align: center;\n      scroll-snap-stop: always;\n    }\n  }\n\n  &.n-carousel--vertical:not([data-sliding])>.n-carousel__content {\n    // Separate 'y', because 'both' crashes Safari 16.2\n\n    scroll-snap-type: y mandatory;\n  }\n\n  display: grid;\n  grid-template: auto 1fr auto 1fr auto/auto 1fr auto;\n  position: relative;\n  grid-template-areas: \"f f f\"\n  \"a1 a1 a1\"\n  \"prev    a2  next\"\n  \"a3 a3 a3\"\n  \"i       i   i\";\n\n  &.n-carousel--index-align-start {\n\n    // grid-template: auto 1fr auto / auto auto 1fr auto;\n    // grid-template-areas:\n    // \t\"a3 a3 a3 a3\"\n    // \t\"prev a2 a2 next\"\n    // \t\"i i b2 b2\";\n    >.n-carousel__index {\n      justify-self: start;\n    }\n\n    // \t\t&.n-carousel--index-start:not(.n-carousel--controls-outside) {\n    // \t\t\tgrid-template-areas:\n    // \t\t\t\t\"f c i b1 b2 b2\"\n    // \t\t\t\t\"prev a3 a3 a3 a3 next\";\n    //\n    // \t\t\t&:not(.n-carousel--vertical) {\n    // \t\t\t\tgrid-template-areas:\n    // \t\t\t\t\t\"i i i i i i\"\n    // \t\t\t\t\t\"prev a2 a2 a2 a2 next\"\n    // \t\t\t\t\t\"f c a3 a3 a3 a3\";\n    //\n    // \t\t\t\t.n-carousel__full-screen,\n    // \t\t\t\t.n-carousel__close {\n    // \t\t\t\t\talign-self: end;\n    // \t\t\t\t}\n    // \t\t\t}\n    // \t\t}\n  }\n\n  &.n-carousel--index-align-center:not(.n-carousel--vertical) {\n\n    // grid-template: 1fr auto 1fr / auto 1fr auto auto;\n    // grid-template-areas:\n    // \t\"a3 a3 a3 a3\"\n    // \t\"prev a2 a2 next\"\n    // \t\" b2 b2 i i\";\n    >.n-carousel__index {\n      justify-self: center;\n    }\n  }\n\n  &.n-carousel--index-align-end {\n\n    // grid-template: 1fr auto 1fr / auto 1fr auto auto;\n    // grid-template-areas:\n    // \t\"a3 a3 a3 a3\"\n    // \t\"prev a2 a2 next\"\n    // \t\" b2 b2 i i\";\n    >.n-carousel__index {\n      justify-self: end;\n    }\n\n    // \t\t&.n-carousel.n-carousel--index-start:not(.n-carousel--controls-outside):not(.n-carousel--vertical) {\n    // \t\t\tgrid-template-areas:\n    // \t\t\t\t\"f c i i i i\"\n    // \t\t\t\t\"prev a2 a2 a2 a2 next\"\n    // \t\t\t\t\"a3 a3 a3 a3 a3 a3\";\n    //\n    // \t\t\t.n-carousel__full-screen,\n    // \t\t\t.n-carousel__close {\n    // \t\t\t\t// align-self: end;\n    // \t\t\t}\n    // \t\t}\n  }\n\n  >.n-carousel__content {\n    padding: 0;\n    margin: 0;\n    grid-row: 1/-1;\n    grid-column: 1/-1;\n\n    @media (prefers-reduced-motion: no-preference) {\n      transition: opacity 0.2s ease-in-out;\n    }\n  }\n\n  > :not(.n-carousel__content) {\n    z-index: 1;\n  }\n\n  >.n-carousel__previous {\n    grid-area: prev;\n    align-self: center;\n    // justify-self: start;\n    // justify-self: center;\n  }\n\n  >.n-carousel__next {\n    grid-area: next;\n    align-self: center;\n    // justify-self: center;\n    justify-self: end;\n  }\n\n  >.n-carousel__index {\n    grid-area: i;\n    align-self: end;\n    justify-self: center;\n    justify-content: center;\n    overflow: auto;\n    white-space: nowrap;\n    vertical-align: middle;\n\n    img {\n      width: 3em;\n      height: 3em;\n      object-fit: cover;\n      padding: 0;\n    }\n  }\n\n  &.n-carousel--thumbnails {\n    >.n-carousel__index {\n      padding: 1px;\n\n      >* {\n        padding: 0;\n        vertical-align: middle;\n        margin: 0.125em;\n        border-radius: var(--nui-border-radius);\n        overflow: hidden;\n\n        span {\n          padding: 0 1ch;\n        }\n      }\n\n      [aria-current] {\n        // opacity: .5;\n        box-shadow: 0 0px 0px 1px var(--nui-control-bg, grey);\n      }\n    }\n  }\n\n  &[data-platform=\"iPhone\"],\n  &[data-platform=\"iPod\"] {\n    .n-carousel__full-screen {\n      // iPhone doesn't support full screen\n      display: none;\n    }\n\n    .n-carousel__close {\n      grid-area: f;\n    }\n  }\n\n  &.n-carousel--index-start {\n    grid-template-areas:\n      \"i       i   i\"\n      \"a1 a1 a1\"\n      \"prev    a2  next\"\n      \"a3 a3 a3\"\n      \"f f f\";\n\n    >.n-carousel__index {\n      align-self: start;\n    }\n\n    .n-carousel__index {\n      justify-content: flex-start;\n    }\n\n    .n-carousel__full-screen,\n    .n-carousel__close {\n      align-self: end;\n    }\n  }\n\n  &.n-carousel--index-end {\n    >.n-carousel__index {\n      justify-content: flex-end;\n    }\n  }\n\n  &.n-carousel--controls-outside:not(:fullscreen):not(.n-carousel--overlay) {\n    grid-template-areas:\n      \"f \t\tf \t\t\tf\"\n      \"a1 \tcontent \t\ta2\"\n      \"prev    content  \tnext\"\n      \"b1 \tcontent \t\tb2\"\n      \"i       i   \ti\";\n\n    >.n-carousel__content {\n      grid-area: content;\n    }\n\n    &.n-carousel--index-start {\n      grid-template-areas:\n        \"i       i   \ti\"\n        \"a1 \tcontent \t\ta2\"\n        \"prev    content  \tnext\"\n        \"b1 \tcontent \t\tb2\"\n        \"f \t\tf \t\t\tf\";\n    }\n\n    &.n-carousel--index-align-start>.n-carousel__index {\n      text-align: start;\n    }\n\n    &.n-carousel--index-align-end>.n-carousel__index {\n      text-align: end;\n    }\n  }\n\n  &.n-carousel--vertical {\n    grid-template: auto 1fr auto / auto 1fr auto 1fr auto;\n    grid-template-areas:\n      \"i a1 prev a3 f\"\n      \"i a1 a2   a3 f\"\n      \"i a1 next a3 f\";\n\n    &:has(> .n-carousel__controls):before {\n      // placeholder for the absolutely-positioned index\n      content: \"\";\n      grid-area: i;\n      width: 3em;\n    }\n\n    >.n-carousel__index {\n      align-self: center;\n      justify-self: initial;\n\n      >* {\n        display: block;\n        white-space: normal;\n        max-width: 25vw;\n      }\n    }\n\n    &.n-carousel--index-align-start {\n      >.n-carousel__index {\n        align-self: start;\n      }\n    }\n\n    &.n-carousel--index-align-end {\n      >.n-carousel__index {\n        align-self: end;\n        // grid-area: i;\n        inset-inline-start: 0;\n      }\n    }\n\n    &.n-carousel--index-end {\n      grid-template-areas:\n        \"f a1 prev a3 i\"\n        \"f a1 a2   a3 i\"\n        \"f a1 next a3 i\";\n\n      &.n-carousel--index-align-start:not(.n-carousel--index-end) {\n        grid-template: 1fr auto auto/auto auto auto 1fr auto auto;\n        grid-template-areas:\n          \"f  c a1  prev  a2  i\"\n          \"a3   a3 a3  a3    a3  i\"\n          \"a4   a4 a4  next  a5  b2\";\n        grid-template-columns: repeat(5, 1fr);\n        grid-template-rows: auto;\n\n        >.n-carousel__index {\n          align-self: start;\n        }\n      }\n\n      &.n-carousel--index-align-start {\n        grid-template: 1fr auto auto/ auto auto 1fr auto auto;\n        grid-template-areas:\n          \"f   c  prev  a2  a2 i\"\n          \"a3   a3  a3    a3  a3 i\"\n          \"a4   a4  next  a5  a5 a5\";\n\n        >.n-carousel__index {\n          align-self: start;\n        }\n\n        >.n-carousel__previous {\n          justify-self: center;\n        }\n      }\n\n      &.n-carousel--index-align-end {\n        grid-template: 1fr auto auto/auto auto 1fr auto auto;\n        grid-template-areas:\n          \"f   c  prev  a2  a2 a2\"\n          \"a3   a3  a3    a3  a3 i\"\n          \"a4   a4  next  a5  a5 i\";\n\n        >.n-carousel__index {\n          align-self: end;\n        }\n\n        >.n-carousel__previous {\n          justify-self: center;\n        }\n      }\n    }\n\n    >.n-carousel__previous {\n      align-self: start;\n    }\n\n    >.n-carousel__next {\n      align-self: end;\n    }\n\n    // \t\t&.n-carousel--index-align-start:not(.n-carousel--index-end):not(.n-carousel--controls-outside) {\n    // \t\t\tgrid-template-areas:\n    // \t\t\t\t\"a1 a1 a1 prev c f\"\n    // \t\t\t\t\"i a3 a3 a3 a3 a3\"\n    // \t\t\t\t\"i a4 a4 next a5 a5\";\n    // \t\t}\n    //\n    // \t\t&.n-carousel--index-align-end {\n    // \t\t\t// grid-template: 1fr auto 1fr / auto 1fr auto 1fr auto;\n    // \t\t\tgrid-template-areas:\n    // \t\t\t\t\"a1 a1 a1 prev c f\"\n    // \t\t\t\t\"i a3 a3 a3 a3 a3\"\n    // \t\t\t\t\"i a4 a4 next a5 a5\";\n    //\n    // \t\t\t&.n-carousel--tabs:not(.n-carousel--controls-outside) {\n    // \t\t\t\t// grid-template: 1fr auto auto/auto auto auto 1fr auto auto;\n    // \t\t\t}\n    // \t\t}\n  }\n\n  &.n-carousel--vertical.n-carousel--controls-outside:not(:fullscreen):not(.n-carousel--overlay) {\n    grid-template-areas:\n      \"i a1 \t\tprev\t\ta2 \t\tf\"\n      \"i content \tcontent   \tcontent f\"\n      \"i b1 \t\tnext \t\tb2 \t\tf\";\n    // grid-template-rows: auto 1fr auto auto;\n    // padding-inline-start: var(--index-width);\n\n    &.n-carousel--index-align-start {\n      >.n-carousel__index {\n        align-self: start;\n      }\n    }\n\n    // \t\t&.n-carousel--index-align-end {\n    // \t\t\tgrid-template-columns: auto auto 1fr auto;\n    //\n    // \t\t\t> .n-carousel__index {\n    // \t\t\t\talign-self: end;\n    // \t\t\t}\n    // \t\t}\n\n    &.n-carousel--index-end {\n      grid-template-areas:\n        \"f a1 \t\tprev\t\ta2 \t\ti\"\n        \"f content \tcontent   \tcontent i\"\n        \"f b1 \t\tnext \t\tb2 \t\ti\";\n    }\n\n    >.n-carousel__index {\n      max-height: var(--max-height, 100%);\n    }\n\n    &.n-carousel--auto-height:not(:fullscreen):not(.n-carousel--overlay):not([data-ready]) {\n      >.n-carousel__index {\n        max-height: 0;\n      }\n    }\n\n    &.n-carousel--auto-height:not(:fullscreen):not(.n-carousel--overlay)[data-ready] {\n      overflow: hidden;\n\n      &[data-sliding]>.n-carousel__index {\n        max-height: none;\n      }\n\n      // > .n-carousel__index {\n      // \tposition: absolute;\n      // \tmargin-inline-start: calc(-1 * var(--index-width));\n      // }\n\n      &.n-carousel--index-end {\n        >.n-carousel__index {\n          margin-inline-start: calc(-1px * var(--index-width) / 2);\n        }\n      }\n    }\n  }\n\n  &:fullscreen {\n    background: #000;\n    --max-height: 100vh;\n  }\n\n  &.n-carousel--overlay {\n    --max-height: 100vh;\n    color-scheme: light dark;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 2;\n    max-height: none;\n    height: 100%;\n    // height: -webkit-fill-available; // creates a bottom gap\n    height: 100dvh;\n    background: rgba(255, 255, 255, 0.9);\n\n    @media (prefers-color-scheme: dark) {\n      background: rgba(0, 0, 0, 0.9);\n    }\n  }\n\n  &.n-carousel--inline:not(.n-carousel--overlay) {\n    display: flex;\n\n    &.n-carousel--vertical {\n      display: block;\n    }\n\n    >.n-carousel__index>[aria-current] {\n      // opacity: 1;\n      box-shadow: none;\n    }\n\n    >* {\n      text-align: start;\n\n      &:not(.n-carousel__index) {\n        // display: none;\n        visibility: hidden;\n        position: absolute;\n        width: 0;\n        height: 0;\n        opacity: 0;\n        overflow: hidden;\n      }\n    }\n  }\n}\n\n// Safari 14-only scroll-snap workarounds removed (Safari 15+ baseline).\n\n// Safari not supporting inline end padding on scrollable element\n_::-webkit-full-page-media,\n_:future,\n:root .n-carousel.n-carousel--peek:not(.n-carousel--vertical)>.n-carousel__content:after {\n  content: \"\";\n  // width: var(--peek, 0);\n  padding: var(--peek-int, 0);\n  flex-shrink: 0;\n}\n\n.n-carousel__index,\n.n-carousel__previous,\n.n-carousel__next,\n.n-carousel__full-screen,\n.n-carousel__close {\n  >* {\n    box-sizing: border-box;\n    text-decoration: none !important;\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    user-select: none;\n    all: revert;\n    border: none;\n    color: var(--nui-control-color, #333);\n    background: var(--nui-control-bg, #eee);\n    min-width: 2.25em;\n    min-height: 2.25em;\n    border-radius: var(--nui-border-radius, 2.25em);\n    margin: 0.25em;\n    font: inherit;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 0 1ch;\n    cursor: pointer;\n\n    &:focus-visible {\n      outline: 2px solid var(--nui-control-highlight, currentColor);\n      outline-offset: 2px;\n    }\n\n    span {\n      color: var(--nui-control-color, #333);\n    }\n\n    &[aria-current] span {\n      // opacity: 0.5;\n      color: var(--nui-control-active-color, blue);\n    }\n  }\n}\n\n.n-carousel__index>*,\n.n-carousel__previous>*,\n.n-carousel__next>*,\n.n-carousel__full-screen>*,\n.n-carousel__close>*,\n.n-carousel--tabs>.n-carousel__index {\n  box-shadow: 0 0 0 var(--nui-border-size) var(--nui-border-color),\n    0 0 var(--nui-shadow-blur) calc(var(--nui-border-size) + var(--nui-shadow-size)) var(--nui-shadow-color);\n}\n\n.n-carousel--tabs>.n-carousel__index>* {\n  box-shadow: none;\n}\n\n.n-carousel[data-ready] {\n  --height: 0;\n\n  >.n-carousel__index,\n  >.n-carousel__previous,\n  >.n-carousel__next,\n  .n-carousel__full-screen,\n  .n-carousel__close {\n    >* {\n      cursor: pointer;\n    }\n  }\n\n  &.n-carousel--auto-height:not(:fullscreen):not(.n-carousel--overlay):not(.n-carousel--vertical):not([data-sliding])>.n-carousel__content {\n    > :not([aria-current]) {\n      overflow: visible;\n    }\n  }\n\n  &.n-carousel--auto-height:not(:fullscreen):not(.n-carousel--overlay)>.n-carousel__content {\n    >* {\n      overflow: hidden !important;\n    }\n  }\n}\n\n// LTR & RTL chevrons – but what about RTL defined by CSS 'direction' instead of the 'dir' attribute?\n.n-carousel__previous,\n.n-carousel__next,\n.n-carousel__full-screen,\n.n-carousel__close {\n  height: 2.85em;\n  width: 2.85em;\n\n  button {\n    span {\n      // Screen readers only\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    &:before {\n      content: \"\";\n      background-color: var(--nui-control-color, #333);\n      --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\");\n      -webkit-mask: var(--chevron) no-repeat 0 0 / contain;\n      -webkit-mask-size: 100%;\n      mask: var(--chevron) no-repeat 0 0;\n      mask-size: 100%;\n      width: 1em;\n      height: 1em;\n      display: inline-block;\n    }\n  }\n}\n\n.n-carousel__full-screen {\n  grid-area: f;\n  justify-self: baseline;\n\n  button:before {\n    // --chevron: url(\"data:image/svg+xml,%3Csvg width='480' height='480' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M0 0v180h60V60h120V0z'/%3E%3Cpath d='M0 0v180h60V60h120V0zM300 0v60h120v120h60V0z'/%3E%3Cpath d='M300 0v60h120v120h60V0zM420 300v120H300v60h180V300z'/%3E%3Cpath d='M420 300v120H300v60h180V300zM0 300v180h180v-60H60V300z'/%3E%3Cpath d='M0 300v180h180v-60H60V300z'/%3E%3C/g%3E%3C/svg%3E\");\n    --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  }\n\n  ~.n-carousel__close {\n    grid-area: c;\n  }\n}\n\n.n-carousel__controls {\n  grid-area: f;\n  display: flex;\n  justify-self: start;\n}\n\n// .n-carousel--controls-outside > .n-carousel__controls {\n// \tflex-direction: column;\n// }\n\n.n-carousel--vertical>.n-carousel__controls {\n  flex-direction: column;\n  align-self: start;\n}\n\n.n-carousel__close {\n  grid-area: f;\n  justify-self: baseline;\n\n  button:before {\n    --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  }\n\n  ~.n-carousel__full-screen {\n    grid-area: c;\n  }\n}\n\n.n-carousel:not(.n-carousel--overlay)>.n-carousel__controls .n-carousel__close button:before {\n  transform: rotate(45deg);\n}\n\n.n-carousel__previous,\n[dir=\"rtl\"] .n-carousel__next,\n.n-carousel--rtl>.n-carousel__next {\n  button {\n    transform: rotate(90deg);\n  }\n}\n\n.n-carousel__next,\n[dir=\"rtl\"] .n-carousel__previous,\n.n-carousel--rtl>.n-carousel__previous {\n  button {\n    transform: rotate(-90deg);\n  }\n}\n\n.n-carousel--tabs {\n  &.n-carousel>.n-carousel__index {\n    // For normal and detached controls\n    display: flex;\n    justify-content: start;\n    overflow: auto;\n    max-width: 100%;\n    max-height: 100%;\n    color: var(--nui-control-color, #333);\n    border-radius: var(--nui-border-radius);\n    min-height: max-content;\n\n    >* {\n      box-sizing: border-box;\n      border-radius: 0;\n      margin: 0;\n      display: flex;\n      justify-content: flex-start;\n      padding: 0.5ch 1ch;\n      text-align: start;\n      word-break: break-word;\n      outline-offset: -3px;\n      min-width: 1.5em;\n      min-inline-size: min-content;\n\n      &:focus-visible {\n        z-index: 0;\n      }\n    }\n  }\n\n  &.n-carousel {\n    &.n-carousel--vertical>.n-carousel__index {\n      display: block;\n\n      >* {\n        width: 100%;\n\n        &:first-child {\n          border-radius: 0;\n          border-start-start-radius: var(--nui-border-radius);\n          border-start-end-radius: var(--nui-border-radius);\n        }\n\n        &:last-child {\n          border-radius: 0;\n          border-end-start-radius: var(--nui-border-radius);\n          border-end-end-radius: var(--nui-border-radius);\n        }\n      }\n    }\n\n    &.n-carousel--vertical.n-carousel--auto-height>.n-carousel__index {\n      >* {\n        white-space: nowrap;\n      }\n    }\n\n    &.n-carousel--tabs-align-end>.n-carousel__index {\n      >* {\n        text-align: end;\n      }\n    }\n\n    >.n-carousel__previous,\n    >.n-carousel__next {\n      display: none;\n    }\n  }\n}\n\n@-moz-document url-prefix() {\n  .n-carousel--vertical>.n-carousel__content {\n    // FF doesn't respect the end padding of the vertical carousel. Can't use this for all, bc it breaks Safari\n    display: block;\n\n    > :last-child {\n      margin-block-end: var(--peek, 0);\n    }\n  }\n}\n\n.n-carousel--lightbox {\n  flex: 1;\n  --nui-carousel-bg: transparent;\n\n  &:not(.n-carousel--auto-height) {\n    max-height: var(--max-height, 100vh);\n  }\n\n  figure {\n    height: 100%;\n    margin: 0;\n    display: grid;\n    grid-template: auto 1fr / auto;\n    // border: 0.1px solid transparent;\n    box-sizing: border-box;\n\n    >* {\n      grid-row: 1/3;\n      grid-column: 1/1;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      justify-self: center;\n      min-width: 0; // Make flex item's max-width work\n      // align-self: center;\n      // overflow: hidden;\n    }\n\n    >figcaption {\n      grid-row: 1/2;\n      justify-self: center;\n      padding: 0.5em 0.75em;\n      background: rgba(0, 0, 0, 0.3);\n      color: #ddd;\n      z-index: 0;\n      border-radius: var(--nui-border-radius);\n      margin: 0.25em;\n    }\n  }\n\n  &.n-carousel--auto-height {\n\n    figure,\n    video,\n    iframe {\n      height: auto;\n      max-height: none;\n    }\n\n    :not(:fullscreen):not(.n-carousel--overlay)>.n-carousel__content {\n      max-height: var(--max-height);\n    }\n  }\n\n  &.n-carousel--index-start {\n    figure {\n      grid-template: 1fr auto/auto;\n\n      >figcaption {\n        grid-row: 2/3;\n      }\n    }\n  }\n\n  &.n-carousel--vertical:not(.n-carousel--controls-outside) {\n    figure {\n\n      // grid-template: 1fr auto/auto;\n      >figcaption {\n        // grid-row: 2/3;\n        margin-top: 3em;\n      }\n    }\n\n    &.n-carousel--index-start {\n      figure {\n\n        // grid-template: 1fr auto/auto;\n        >figcaption {\n          // grid-row: 2/3;\n          margin-top: 0;\n          margin-bottom: 3em;\n        }\n      }\n    }\n  }\n\n  img {\n    display: block;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    box-sizing: border-box;\n    padding: 0 0.5px; // Safari: visible pixel from neighbour\n    z-index: 0;\n  }\n\n  &.n-carousel--auto-height {\n    img {\n      max-height: none;\n    }\n  }\n\n  &:fullscreen {\n    img {\n      max-height: 100%;\n    }\n\n    &.n-carousel--auto-height {\n      figure {\n        height: 100%;\n      }\n    }\n  }\n\n  &.n-carousel--overlay {\n    img {\n      max-height: 100%;\n    }\n\n    &.n-carousel--auto-height {\n      figure {\n        height: 100%;\n      }\n    }\n  }\n\n  iframe,\n  video {\n    border: none;\n    margin: auto;\n    max-width: 100%;\n    max-height: 100%;\n    height: auto;\n    aspect-ratio: 16/9;\n  }\n\n  >.n-carousel__content {\n    picture:not([data-loaded]) {\n      position: relative;\n\n      &:before {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        filter: blur(4px);\n        background: var(--placeholder, none) center no-repeat;\n        background-size: contain;\n      }\n    }\n  }\n\n  &:not(.n-carousel--overlay):not(:fullscreen).n-carousel--aspect {\n    --max-height: 100%;\n\n    >.n-carousel__content {\n      >* {\n        figure {\n          aspect-ratio: var(--ratio, 16/9);\n          position: relative;\n          width: 100%;\n          height: auto;\n        }\n      }\n    }\n\n    &.n-carousel--auto-height img {\n      max-height: 100%;\n    }\n\n    &.n-carousel--vertical {\n      height: var(--height);\n\n      >.n-carousel__content>* {\n        height: auto;\n        flex-grow: initial;\n      }\n    }\n  }\n\n  // Safari 15+ supports `:fullscreen`, so the aspect/auto-height rules don't need\n  // a separate prefixed fullscreen branch.\n}\n\n// Remove iPad button to exit full screen, because there is a native one\n@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {\n  .n-carousel:fullscreen .n-carousel__full-screen {\n    display: none;\n  }\n}"]}