:host {
  display: block;
  overflow-x: auto;
}

.keyboard {
  /* Base unit: standard key size */
  --ku: 2.4rem;
  /* Gap between keys */
  --kg: 0.18rem;

  display: inline-flex;
  flex-direction: column;
  gap: var(--kg);
  padding: 0;
  background: transparent;
  min-width: max-content;
}

/* ── Row ──────────────────────────────────────────────────────────────── */

.keyboard__row {
  display: flex;
  gap: var(--kg);
}

.keyboard__row--modifiers {
  align-items: stretch;
}

/* ── Key ──────────────────────────────────────────────────────────────── */

.key {
  --w: 1;
  flex: 0 0 auto;
  /* Width formula accounts for the gap absorbed inside wide keys */
  width: calc(var(--w) * var(--ku) + (var(--w) - 1) * var(--kg));
  height: var(--ku);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.2rem 0.25rem;
  overflow: hidden;

  background: var(--sg-keyboard-key-surface-idle);
  border-radius: 0.28rem;
  box-shadow: inset 0 0 0 0.5px var(--sg-keyboard-key-stroke);

  cursor: default;
  user-select: none;
  transition:
    background 0.24s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.24s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Space bar: fills leftover width in modifier row */
.key--space {
  flex: 1 1 auto;
  width: auto;
}

/* Pressed state — плавный переход с «серого» idle-surface на акцент */
.key--active {
  background: var(--sg-keyboard-key-pressed-fill);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--sg-keyboard-key-pressed-fill) 55%, black);
}

/* ── Key labels ───────────────────────────────────────────────────────── */

.key__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.15rem;
}

/* Shifted/alt label — top-left */
.key__alt {
  font-size: 0.57rem;
  line-height: 1;
  color: var(--sg-keyboard-ink);
  font-family: var(--sg-keyboard-font-family);
  font-weight: var(--sg-keyboard-font-weight);
  min-width: 0;
  transition: color 0.24s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Russian glyph — top-right */
.key__ru {
  font-size: 0.57rem;
  line-height: 1;
  color: var(--sg-keyboard-ink-soft);
  font-family: var(--sg-keyboard-font-family);
  font-weight: var(--sg-keyboard-font-weight);
  text-align: right;
  min-width: 0;
  transition: color 0.24s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Main English label — bottom-left */
.key__en {
  font-size: 0.78rem;
  line-height: 1;
  color: var(--sg-keyboard-ink);
  font-family: var(--sg-keyboard-font-family);
  font-weight: 500;
  letter-spacing: var(--sg-keyboard-letter-spacing);
  transition: color 0.24s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Label for special keys (Tab, Caps, Shift, ⌘ …) — centered */
.key__label {
  font-size: 0.68rem;
  line-height: 1;
  color: var(--sg-keyboard-ink);
  font-family: var(--sg-keyboard-font-family);
  font-weight: var(--sg-keyboard-font-weight);
  letter-spacing: var(--sg-keyboard-letter-spacing);
  margin: auto;
  text-align: center;
  width: 100%;
  transition: color 0.24s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Active key — invert text colors */
.key--active .key__alt,
.key--active .key__en,
.key--active .key__label {
  color: var(--sg-keyboard-key-pressed-ink);
}

.key--active .key__ru {
  color: color-mix(in srgb, var(--sg-keyboard-key-pressed-ink) 65%, transparent);
}
