/* Carousel mode keeps the real application buttons and their launch handlers.
   There are no copied icons, hidden apps or changes to saved application order. */
#expanded-dock[data-dock-motion="carousel"] .expanded-dock-grid {
  position: relative;
  display: block;
  overflow: visible;
  touch-action: pan-y;
}
#expanded-dock[data-dock-motion="carousel"] .expanded-dock-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--carousel-orbit-left, 0px);
  top: var(--carousel-orbit-top, 0px);
  width: var(--carousel-orbit-width, 0px);
  height: var(--carousel-orbit-height, 0px);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius: 50%;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 10%, transparent);
  pointer-events: none;
}
#expanded-dock[data-dock-motion="carousel"] .expanded-dock-grid > .expanded-dock-app {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--carousel-item-width, 132px);
  height: var(--carousel-item-height, 204px);
  min-height: 0;
  padding: 28px 6px 18px;
  box-sizing: border-box;
  z-index: var(--carousel-z, 1);
  transform: translate(var(--carousel-x, 0px), var(--carousel-y, 0px)) scale(var(--carousel-scale, 1));
  transform-origin: center;
  opacity: var(--carousel-opacity, 1);
  transition: transform var(--carousel-duration, 250ms) cubic-bezier(.2,.75,.2,1), opacity var(--carousel-duration, 250ms);
}
#expanded-dock[data-dock-motion="carousel"] .expanded-dock-app .app-glyph {
  width: var(--carousel-icon-size, 120px);
  height: var(--carousel-icon-size, 120px);
  transform: none;
}
#expanded-dock[data-dock-motion="carousel"] .expanded-dock-app:is(:hover,:focus-visible) { filter: brightness(1.08); }
#expanded-dock[data-dock-motion="carousel"] .expanded-dock-upcoming { top: 0; right: 0; }
body:not(.dock-reordering) #dock[data-dock-motion="carousel"] > .dock-item {
  z-index: var(--carousel-z, 1);
  transform: translate(var(--carousel-x, 0px), var(--carousel-y, 0px)) scale(var(--carousel-scale, 1));
  transform-origin: center;
  opacity: var(--carousel-opacity, 1);
  transition: transform var(--carousel-duration, 250ms) cubic-bezier(.2,.75,.2,1), opacity var(--carousel-duration, 250ms);
}
body:not(.dock-reordering) #dock[data-dock-motion="carousel"] > .dock-item .app-glyph { transform: none; }
#dock[data-dock-motion="carousel"] { touch-action: pan-y; }
body:is([data-dock-position="left"],[data-dock-position="right"]) #dock[data-dock-motion="carousel"] { touch-action: pan-x; }
.dock-carousel-dragging { cursor: grabbing; }
.dock-carousel-dragging :is(.expanded-dock-app,.dock-item) { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(#expanded-dock,#dock)[data-dock-motion="carousel"] :is(.expanded-dock-app,.dock-item) { transition: none !important; }
}