@import "../os-tokens.css";
@import "../ss-motion/ss-motion.css";

[data-widget] {
  font-family: var(--os-font-body);
  color: var(--os-ink);
  --w-depth: 0.12;
}

[data-widget="toggle"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

[data-widget="toggle"] button {
  width: 44px;
  height: 26px;
  border: 1px solid var(--os-rule);
  background: var(--os-ground);
  border-radius: var(--os-radius-pill);
  position: relative;
  cursor: pointer;
  padding: 0;
}

[data-widget="toggle"] button[aria-pressed="true"] {
  background: var(--os-blue);
  border-color: var(--os-blue);
}

[data-widget="toggle"] button::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--os-ground);
  transition: transform var(--ss-snap-duration) var(--ss-snap-easing);
}

[data-widget="toggle"] button[aria-pressed="true"]::after {
  transform: translateX(18px);
}

[data-widget="drawer"] {
  position: relative;
  min-height: 180px;
}

[data-widget="drawer"] [data-drawer-plane] {
  position: absolute;
  top:0 0 0 20%;right:0 0 0 20%;bottom:0 0 0 20%;left:0 0 0 20%;
  width: 80%;
  max-width: 80%;
  background: var(--os-ground);
  border-left: 1px solid var(--os-rule);
  padding: 16px;
}

[data-widget="drawer"][data-vdc="V"] [data-drawer-plane] { top:0 0 0 40%;right:0 0 0 40%;bottom:0 0 0 40%;left:0 0 0 40%; width: 60%; }
[data-widget="drawer"][data-vdc="D"] [data-drawer-plane] { top:0 0 0 28%;right:0 0 0 28%;bottom:0 0 0 28%;left:0 0 0 28%; width: 72%; }
[data-widget="drawer"][data-vdc="C"] [data-drawer-plane] { top:0 0 0 20%;right:0 0 0 20%;bottom:0 0 0 20%;left:0 0 0 20%; width: 80%; }

[data-widget="rail"] {
  display: block;
  height: 2px;
  background: var(--os-blue);
  opacity: 0.35;
  width: 100%;
}

[data-widget="rail"] [data-rail-mark] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--os-blue);
  margin-top: -3px;
}

[data-surface] {
  padding: 16px 20px;
  background: var(--os-ground);
  border: 1px solid var(--os-rule);
  color: var(--os-ink);
}

[data-surface="error"] { border-color: var(--os-rose); }
[data-surface="auth-fail"] { border-color: var(--os-gold); }
[data-surface="empty"] { color: var(--os-muted); }
[data-surface="load"] [data-progress] {
  height: 2px;
  background: var(--os-blue);
  transform-origin: left center;
}

[data-widget="crate"] {
  position: relative;
  min-height: 140px;
  border: 1px solid var(--os-rule);
  background: var(--os-ground);
  padding: 1rem;
}

[data-widget="crate"][data-open="true"] [data-crate-lid] {
  opacity: 0.4;
}

[data-widget="credential"] [data-credential-plate] {
  border: 1px solid var(--os-ink);
  background: var(--os-ground);
  padding: 1rem 1.1rem;
  min-height: 88px;
}

[data-widget="passport"] [data-passport-book] {
  border: 1px solid var(--os-blue);
  background: var(--os-ground);
  padding: 1.1rem 1.2rem;
  min-height: 110px;
}

[data-widget="keyboard"] [data-real-text] {
  margin: 0 0 0.6rem;
  color: var(--os-ink);
}

[data-widget="keyboard"] [data-keyboard-keys] {
  display: flex;
  gap: 0.4rem;
}

[data-widget="keyboard"] button {
  border: 1px solid var(--os-rule);
  background: var(--os-ground);
  color: var(--os-ink);
  padding: 0.35rem 0.55rem;
  font: inherit;
}

[data-widget="thread"],
[data-widget="circuit"],
[data-widget="link"],
[data-widget="notification"] {
  display: block;
  position: relative;
  min-height: 200px;
  background: var(--os-ground-void);
}

[data-widget="thread"] canvas,
[data-widget="circuit"] canvas,
[data-widget="link"] canvas,
[data-widget="notification"] canvas {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-widget="toggle"] button::after { transition-duration: 0ms; }
}