:root {
  /** Required arguments with purportedly ridiculous defaults */
  --global-icon-font: 'sans-serif';
  --global-icon-color: red;
  --global-icon-color-allowed: transparent;
  --global-icon-color-forbidden: transparent;
  --global-icon-gap: 50px;
}

html > body > #grid {
  *[data-icon]:not([data-icon='']),
  *[data-icon-common]:not([data-icon-common='']) {
    &::before {
      content: attr(data-icon);
      font: var(--global-icon-font);
      color: var(--global-icon-color);
      overflow-y: visible;
      text-decoration: none;
      display: inline-block;
      speak: never;
    }

    &:not(:empty)::before {
      padding: 0 var(--global-icon-gap) 0 0;
    }

    &[data-icon-common='allowed']::before {
      content: '✅';
      color: var(--global-icon-color-allowed);
    }

    &[data-icon-common='forbidden']::before {
      content: '❌';
      color: var(--global-icon-color-forbidden);
    }
  }
}