:root {
  --timer-width : 150px;
  --timer-height : 200px;
}



.timers {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  justify-content: center;
  flex-wrap: wrap;
}

.timer {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;

  border-radius: var(--border-radius);
  min-width: var(--timer-width);
  max-width: var(--timer-width);
  min-height: var(--timer-height);
  max-height: var(--timer-height);
  /* background: var(--text-mid); */
  border: 2px var(--text-mid) solid;
  padding: var(--gap);

  gap: var(--gap);
}

.timer .name {
  /* color: var(--background); */
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-size: var(--font-size);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;

  color: var(--background);
  background: var(--text);

  max-width: 100%;
  overflow-x: hidden;

  border: none;
  border-radius: 3px;
  padding: 0px 4px;
}

.timer .circle {
  margin: 0 auto;
}

.__circle {
  transition: 0.15s stroke-dashoffset;
  scale: 1 -1;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  color: var(--orange);
}

.__rim {
  color: var(--text-mid);
}

.timer .setters {
  display: flex;
  flex-direction: row;
  gap: 5px;
  margin: 0 auto;
  color: var(--light);
}

.timer .setters input {
  min-width: 32px;
  max-width: 32px;
  background: var(--text);
  color: var(--background);
  border-radius: 3px;
  text-align: center;
  font-family: "Space Mono", monospace;
  padding: 2px 0;
  border: none;
  font-size: 14px
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}