.seedWord {
  user-select: none;
  height: 23px;
  border-radius: 3px;
  color: var(--info-modal-button-text);
  margin: 5px;
  text-align: center;
  display: flex;
  align-items: center;
}

.filled {
  background-color: var(--info-modal-button-bg);
}

.empty,
.restore {
  border: 1px solid var(--seedword-select-border-default-border-color);
  background-color: initial !important;
}

.empty:hover,
.restore:hover {
  border: 1px solid var(--seedword-select-border-default-hover-border-color);
}

.empty:hover .number,
.restore:hover .number {
  border-right: 1px solid
    var(--seedword-select-border-default-hover-border-color);
  color: var(--seedword-select-border-default-hover-text-color);
}

.empty .number,
.restore .number {
  border-right: 1px solid var(--seedword-select-border-default-border-color);
  color: var(--seedword-select-border-default-text-color);
}

.populated {
  border: 1px solid var(--seedword-select-border-default-hover-text-color);
  background-color: initial !important;
}

.populated .number {
  border-right: 1px solid var(--seedword-select-border-default-hover-text-color);
  color: var(--seedword-select-border-default-hover-text-color);
}

.noMatch,
.error {
  border: 1px solid var(--error-red);
}

.noMatch .number,
.error .number {
  border-right: 1px solid var(--error-red);
  color: var(--error-red);
}

.match {
  border: 1px solid var(--accent-color);
}

.match .number {
  border-right: 1px solid var(--accent-color);
  color: var(--accent-color);
}

.word {
  text-align: center;
  width: 85px;
  font-size: 13px;
  line-height: 23px;
}

.number {
  width: 20px;
  border-right: 1px solid var(--seedword-number-color);
  color: var(--seedword-number-color);
  font-size: 10px;
  height: 23px;
  line-height: 23px;
}
