Keycard

const css = `
  .toggle-keycard { position: relative; display: inline-flex; align-items: center; gap: 12px; color: light-dark(#42454c, #e5e6e9); font-size: 14px; cursor: pointer; user-select: none; }
  .toggle-keycard__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .toggle-keycard__track { position: relative; width: 60px; height: 56px; border-radius: 8px; }
  .toggle-keycard__input:focus-visible + .toggle-keycard__track { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 3px; }
  .toggle-keycard__card {
    position: absolute;
    left: 14px;
    top: 0;
    width: 32px;
    height: 22px;
    border-radius: 3px;
    background: linear-gradient(135deg, light-dark(#42454c, #e5e6e9), light-dark(#5f626a, #a7abb2));
    transform: translateY(-4px) rotate(-8deg);
    transition: transform 0.45s cubic-bezier(0.5, 0, 0.2, 1.2);
  }
  .toggle-keycard__card::before { content: ''; position: absolute; left: 4px; top: 5px; width: 7px; height: 6px; border-radius: 1px; background: light-dark(#6d7179, #7d8087); }
  .toggle-keycard__card::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 2px; border-radius: 1px; background: light-dark(#6d7179, #7d8087); }
  /* The reader sits in front, so the card disappears into the slot behind its face. */
  .toggle-keycard__reader {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36px;
    border-radius: 8px;
    background: light-dark(#ebedf0, #232529);
    box-shadow: inset 0 0 0 1px light-dark(#dbdde1, #2e3035), 0 6px 12px -8px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.6));
  }
  .toggle-keycard__slot { position: absolute; left: 10px; right: 10px; top: 4px; height: 3px; border-radius: 2px; background: light-dark(#fbfcfd, #121417); }
  .toggle-keycard__led {
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: light-dark(#cbced3, #393c41);
    transition: background-color 0.2s, box-shadow 0.2s;
  }
  .toggle-keycard__bars { position: absolute; left: 9px; bottom: 10px; display: flex; gap: 2px; }
  .toggle-keycard__bars i { width: 3px; height: 4px; border-radius: 1px; background: light-dark(#cbced3, #393c41); transition: background-color 0.15s; }
  .toggle-keycard__input:checked + .toggle-keycard__track .toggle-keycard__card { transform: translateY(16px) rotate(0deg); transition: transform 0.4s cubic-bezier(0.6, 0, 0.3, 1); }
  .toggle-keycard__input:checked + .toggle-keycard__track .toggle-keycard__led { background: light-dark(#373a40, #f1f2f3); box-shadow: 0 0 6px light-dark(#42454c, #e5e6e9); transition-delay: 0.35s; }
  .toggle-keycard__input:checked + .toggle-keycard__track .toggle-keycard__bars i { background: light-dark(#50535b, #c6c8cd); transition-delay: calc(0.4s + var(--i) * 0.08s); }
  @media (prefers-reduced-motion: reduce) {
    .toggle-keycard__track * { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  }
`;

export function KeycardToggle() {
  return (
    <>
      <style>
        {css}
      </style>
      <label className="toggle-keycard">
        <input className="toggle-keycard__input" type="checkbox" role="switch" />
        <span className="toggle-keycard__track" aria-hidden="true">
          <span className="toggle-keycard__card" />
          <span className="toggle-keycard__reader">
            <span className="toggle-keycard__slot" />
            <span className="toggle-keycard__bars">
              {[0, 1, 2, 3].map((i) => (
                <i key={i} style={{ '--i': i } as React.CSSProperties} />
              ))}
            </span>
            <span className="toggle-keycard__led" />
          </span>
        </span>
        Room power
      </label>
    </>
  );
}