/* The existing ticket still owns its position, padding, silhouette and hover tilt. */
.bc-ticket {
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:0;
  font:inherit;
  color:inherit;
  cursor:var(--sd-control-cursor,pointer);
}
.bc-ticket .bc-stage,
.bc-ticket .bc-turn,
.bc-ticket .bc-front,
.bc-ticket .bc-back {
  font:inherit;
  letter-spacing:normal;
}
.bc-stage {
  display:block;
  position:relative;
  perspective:440px;
  pointer-events:none;
}
.bc-turn {
  display:block;
  position:relative;
  transform-style:preserve-3d;
}
.bc-front,
.bc-back {
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.bc-front {
  display:flex;
  flex-direction:column;
}
.bc-back {
  display:block;
  position:absolute;
  inset:-4px;
  transform:rotateY(180deg);
}
.bc-clock {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  fill:none;
  stroke:var(--navy);
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bc-face,
.bc-bell {
  fill:var(--paper);
}
.bc-bell {
  fill:var(--orange);
}
.bc-shadow {
  opacity:.16;
  stroke-width:3;
}
.bc-ticks {
  opacity:.6;
  stroke-width:1.6;
}
.bc-awake-eyes,
.bc-pin {
  fill:var(--navy);
  stroke:none;
}
.bc-sleepy-eyes,
.bc-smile {
  stroke-width:1.8;
}
.bc-minute {
  stroke-width:2.5;
}
.bc-hour {
  stroke-width:3;
}
.bc-snooze {
  stroke-width:1.7;
}
.bc-ticket[data-clock-playing=true] .bc-turn {
  will-change:transform;
}
.bc-ticket:focus-visible {
  outline:2px solid var(--navy);
  outline-offset:-5px;
}
@media (forced-colors:active) {
  .bc-ticket:focus-visible { outline-color:ButtonText; }
  .bc-clock { stroke:ButtonText; }
  .bc-face,.bc-bell { fill:ButtonFace; }
  .bc-awake-eyes,.bc-pin { fill:ButtonText; }
}