:where(.motile-dock){display:inline-flex;align-items:center;gap:12px;padding:8px 16px;--dock-glass:color-mix(in srgb,var(--motile-bg) 70%,#fff);background:color-mix(in srgb,var(--motile-bg) 25%,transparent);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:50px;border:1px solid color-mix(in srgb,var(--dock-glass) 30%,transparent);box-shadow:0 8px 32px #0000001a,0 2px 8px #0000000d,inset 0 0 0 1px color-mix(in srgb,var(--dock-glass) 20%,transparent);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .3s cubic-bezier(.4,0,.2,1)}:where(.motile-dock[data-position=top]){flex-direction:row}:where(.motile-dock[data-position=bottom]){flex-direction:row}:where(.motile-dock[data-position=left]){flex-direction:column}:where(.motile-dock[data-position=right]){flex-direction:column}:where(.motile-dock__item){position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;border:none;border-radius:10px;background:transparent;color:var(--motile-gray-700);cursor:pointer;transition:background .2s ease;outline:none;will-change:transform;transform:translateZ(0)}:where(.motile-dock[data-position=top] .motile-dock__item){transform-origin:center top}:where(.motile-dock[data-position=bottom] .motile-dock__item){transform-origin:center bottom}:where(.motile-dock[data-position=left] .motile-dock__item){transform-origin:left center}:where(.motile-dock[data-position=right] .motile-dock__item){transform-origin:right center}:where(.motile-dock__item:hover){background:color-mix(in srgb,var(--dock-glass) 40%,transparent)}:where(.motile-dock__item:active){background:color-mix(in srgb,var(--dock-glass) 60%,transparent);filter:brightness(.9)}:where(.motile-dock__item:focus-visible){outline:2px solid color-mix(in srgb,var(--motile-gray-500) 60%,transparent);outline-offset:2px}:where(.motile-dock__item--active):after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background-color:var( --motile-dock-color,var(--motile-ui-dock,var(--motile-theme,#3b82f6)) );pointer-events:none}:where(.motile-dock[data-position=top] .motile-dock__item--active):after{top:0;bottom:auto}:where(.motile-dock[data-position=left] .motile-dock__item--active):after{top:50%;bottom:auto;left:0;margin:-2.5px 0 0}:where(.motile-dock[data-position=right] .motile-dock__item--active):after{top:50%;bottom:auto;left:auto;right:0;margin:-2.5px 0 0}:where(.motile-dock[data-indicator=bar] .motile-dock__item--active):after{width:14px;height:3px;margin-left:-7px;border-radius:2px}:where(.motile-dock[data-indicator=bar][data-position=left] .motile-dock__item--active):after,:where(.motile-dock[data-indicator=bar][data-position=right] .motile-dock__item--active):after{width:3px;height:14px;margin:-7px 0 0}:where(.motile-dock[data-indicator=background] .motile-dock__item--active):after{top:2px;right:2px;bottom:2px;left:2px;width:auto;height:auto;margin:0;background-color:color-mix(in srgb,var( --motile-dock-color,var(--motile-ui-dock,var(--motile-theme,#3b82f6)) ) 14%,transparent);z-index:-1}:where(.motile-dock__item>*){pointer-events:none}:where(.motile-dock__separator){position:relative;flex-shrink:0}:where(.motile-dock__separator[data-position=bottom]),:where(.motile-dock__separator[data-position=top]){width:1px;height:40px;margin:0 6px;background:linear-gradient(to bottom,#0000,color-mix(in srgb,var(--motile-gray-900) 15%,transparent) 20%,color-mix(in srgb,var(--motile-gray-900) 15%,transparent) 80%,#0000)}:where(.motile-dock__separator[data-position=left]),:where(.motile-dock__separator[data-position=right]){height:1px;width:40px;margin:6px 0;background:linear-gradient(to right,#0000,color-mix(in srgb,var(--motile-gray-900) 15%,transparent) 20%,color-mix(in srgb,var(--motile-gray-900) 15%,transparent) 80%,#0000)}@media (prefers-contrast:high){:where(.motile-dock){border:2px solid;background:color-mix(in srgb,var(--motile-bg) 95%,transparent)}:where(.motile-dock__item){border:1px solid}}@media (prefers-reduced-motion:reduce){:where(.motile-dock),:where(.motile-dock__item){transition:none}}@media (max-width:768px){:where(.motile-dock){gap:6px;padding:6px 12px;border-radius:40px}:where(.motile-dock__item){width:44px;height:44px;min-width:44px;min-height:44px}}@media (hover:none) and (pointer:coarse){:where(.motile-dock__item){transform:scale(1)!important}}:where(.motile-dock):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50px;padding:1px;background:linear-gradient(135deg,color-mix(in srgb,var(--dock-glass) 40%,transparent),color-mix(in srgb,var(--dock-glass) 10%,transparent));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}:where(.motile-dock__item):before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:14px;background:radial-gradient(circle at center,color-mix(in srgb,var( --motile-dock-color,var(--motile-ui-dock,var(--motile-theme,#3b82f6)) ) 30%,transparent),transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}:where(.motile-dock__item:hover):before{opacity:1}@media (prefers-contrast:high){:where(.motile-dock__item):before{display:none}:where(.motile-dock):before{display:none}}