Generated by SassMeister.com.

input.scss

$alpha: a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z;

:root {
  --pending-key: 0 0 0px 8px rgb(171, 67, 255) inset;
  --error-key: 0 0 0px 40px rgb(255, 58, 58) inset;
}

@each $letter in $alpha {
  body:has( [data-testid="tile"][data-state="tbd"][aria-label$=#{to-upper-case($letter)}]:not([data-animation="flip-in"])) [aria-label="Keyboard"] [data-key=#{$letter}] {
    box-shadow: var(--pending-key);
  }

  body:has( [data-testid="tile"][data-state="tbd"][aria-label$=#{to-upper-case($letter)}]:not([data-animation="flip-in"])) [aria-label="Keyboard"] [data-key=#{$letter}][data-state=absent] {
    box-shadow: var(--error-key);
  }
}

output.css

:root {
  --pending-key: 0 0 0px 8px rgb(171, 67, 255) inset;
  --error-key: 0 0 0px 40px rgb(255, 58, 58) inset;
}

body:has([data-testid=tile][data-state=tbd][aria-label$=A]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=a] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=A]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=a][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=B]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=b] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=B]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=b][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=C]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=c] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=C]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=c][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=D]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=d] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=D]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=d][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=E]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=e] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=E]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=e][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=F]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=f] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=F]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=f][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=G]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=g] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=G]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=g][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=H]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=h] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=H]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=h][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=I]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=i] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=I]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=i][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=J]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=j] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=J]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=j][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=K]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=k] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=K]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=k][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=L]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=l] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=L]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=l][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=M]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=m] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=M]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=m][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=N]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=n] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=N]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=n][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=O]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=o] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=O]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=o][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=P]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=p] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=P]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=p][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=Q]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=q] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=Q]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=q][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=R]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=r] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=R]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=r][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=S]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=s] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=S]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=s][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=T]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=t] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=T]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=t][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=U]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=u] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=U]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=u][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=V]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=v] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=V]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=v][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=W]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=w] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=W]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=w][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=X]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=x] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=X]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=x][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=Y]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=y] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=Y]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=y][data-state=absent] {
  box-shadow: var(--error-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=Z]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=z] {
  box-shadow: var(--pending-key);
}

body:has([data-testid=tile][data-state=tbd][aria-label$=Z]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=z][data-state=absent] {
  box-shadow: var(--error-key);
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}