@keyframes blink {
  0%,
  100% {
    background-color: transparent;
  }

  50% {
    background-color: var(--text);
  }
}

.cursor {
  position: relative;
  top: 0.03em;

  display: inline-block;

  width: 0.05em;
  height: 0.8em;

  background-color: var(--text);

  animation: 1s blink step-end infinite;
}

.symmetricCellTag {
  position: absolute;
  top: 0%;
  right: 0%;

  border-top: 0.3em solid var(--primary);
  border-left: 0.3em solid rgb(0 0 0 / 0%);
}

.cellContainer {
  --current-cell-bg: var(--cell-bg);
  --current-cell-text: var(--text);
  --current-cell-verified: var(--verified-on-bg);

  position: relative;
  float: left;
  overflow: hidden;
  margin: 0;
}

.cellContainerActiveBlock {
  --current-cell-bg: repeating-linear-gradient(
    -45deg,
    black,
    black 10px,
    var(--primary) 10px,
    var(--primary) 20px
  );
}

.cellContainerSelectedBlock {
  --current-cell-bg: repeating-linear-gradient(
    -45deg,
    black,
    black 10px,
    var(--selected-cell) 10px,
    var(--selected-cell) 20px
  );
}

.cellContainerBlock {
  --current-cell-bg: black;
}

.cellContainerShaded {
  --current-cell-bg: rgb(241 167 45 / var(--cell-alpha));
}

.cellContainerActive {
  --current-cell-bg: var(--primary);
  --current-cell-text: var(--onprimary);
  --current-cell-verified: var(--verified-on-primary);
}

.cellContainerSelected {
  --current-cell-bg: var(--selected-cell);
  --current-cell-text: var(--on-selected-cell);
  --current-cell-verified: var(--verified-on-selected-cell);
}

.cellContainerEntryCell {
  --current-cell-bg: var(--lighter);
  --current-cell-text: var(--on-lighter);
  --current-cell-verified: var(--verified-on-lighter);
}

.cellContainerRefed {
  --current-cell-bg: var(--secondary);
  --current-cell-text: var(--on-secondary);
  --current-cell-verified: var(--verified-on-secondary);
}

.cq {
  container-type: size;
}

.circle {
  position: absolute;
  z-index: 0;
  inset: 0;

  border: 1px solid var(--black);
  border-radius: 50%;
}

.shade {
  position: absolute;
  inset: 0;
  background-color: var(--shade-highlight);
}

.slash {
  position: absolute;
  z-index: 2;
  top: -0.1em;
  left: 0.03em;

  font-size: 1em;
  color: var(--error);
}

.cell {
  user-select: none;

  position: absolute;

  width: 100%;
  height: 100%;

  font-size: 100cqw;
}

.cellHiddenActive {
  background: repeating-linear-gradient(
    -45deg,
    var(--cell-bg),
    var(--cell-bg) 10px,
    var(--primary) 10px,
    var(--primary) 20px
  );
}

.cellVisible {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background: var(--current-cell-bg);
}

.eye {
  position: absolute;
  top: -0.1em;
  left: 1.85em;

  font-size: 1.2em;
  color: var(--current-cell-verified);
}

.number {
  position: absolute;
  top: 0;
  left: 0.1em;

  font-size: 0.25em;
  font-weight: bold;
  line-height: 1em;
  color: var(--current-cell-text);
}

.contents {
  font-size: 0.9em;
  line-height: 1.2em;
  color: var(--autofill);
  text-align: center;
}

.contentsVerified {
  color: var(--current-cell-verified);
}

.contentsFilled {
  color: var(--current-cell-text);
}

.borderBottom {
  border-bottom: 1px solid black;
}

.barBottom {
  border-bottom: 0.05em solid black;
}

.borderRight {
  border-right: 1px solid black;
}

.barRight {
  border-right: 0.05em solid black;
}

.enteringRebus {
  box-shadow: inset 0 0 0 0.1em var(--primary);
}

.statsActive {
  box-shadow: inset 0 0 0 0.05em var(--black);
}

.statsEntry {
  box-shadow: inset 0 0 0 0.02em var(--black);
}
