:root {
  --history-font-size: 2.5vmin;
  --history-margin-left: 1vmin;
  --history-margin-right: 1vmin;
  --history-margin-top: 0vmin;

  --history-active-span-color: white;
  --history-active-span-bg: black;
  --history-inactive-span-color: gray;
  --history-inactive-span-bg: black;
  --history-span-font-size: 2.5vmin;
  --history-span-border-style: solid;
  --history-span-border-width: 1px;
  --history-span-border-color:  white;
  --history-span-border-radius: 1vmin;
  
  --history-button-color: white;
  --history-button-bg: gray;
  --history-button-font-size: 2.5vmin;
  --history-button-border-style: solid;
  --history-button-border-width: 1px;
  --history-button-border-color:  white;
  --history-button-border-radius: 1vmin;
}

/* this is a scoreboared history item */ 
.sb-history-item {
    width: 90vw;
    font-size: var(--history-font-size);
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* this is a scoreboared history item of the current player*/ 
.sb-history-item-active {
  background: var(--history-active-span-bg);
  color: var(--history-active-span-color);
}

/* this is a scoreboared history item of a non-current player*/ 
.sb-history-item-inactive {
  background: var(--history-inactive-span-bg);
  color: var(--history-inactive-span-color);
}

.sb-history-item-active > span {
  display: inline;
  font-size: var(--history-span-font-size);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  border-style: var(--history-span-border-style);
  border-width: var(--history-span-border-width);
  border-radius: var(--history-span-border-radius);
  border-color: var(--history-span-border-color);
}

.sb-history-item-inactive > span {
  display: inline;
  font-size: var(--history-span-font-size);
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  border-style: var(--history-span-border-style);
  border-width: var(--history-span-border-width);
  border-radius: var(--history-span-border-radius);
  border-color: var(--history-span-border-color);
}

.sb-history-item > button {
  display: inline;
  /* width: 15vw; */
  background: var(--history-button-bg);
  color: var(--history-button-color);
  font-size: var(--history-button-font-size);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  border-style: var(--history-button-border-style);
  border-width: var(--history-button-border-width);
  border-radius: var(--history-button-border-radius);
  border-color: var(--history-button-border-color);
}