.gauge-viewport {
  container-type: inline-size;
  container-name: gauge;

  width: 100%;
  aspect-ratio: 70 / 260;

  box-sizing: border-box;
}

.gauge-container {
  width: 100%;
  height: 100%;

  padding-top: 28.571cqw; /* 20px */
  padding-bottom: 14.286cqw; /* 10px */

  display: flex;
  flex-direction: column;
  align-items: center;

  transform-origin: top center;

  box-sizing: border-box;
}

.gauge-track {
  position: relative;

  width: 100%;
  height: 300cqw; /* 210px */

  display: flex;

  justify-content: center;
  align-items: center;

  margin-bottom: 11.429cqw; /* 8px */

  box-sizing: border-box;
}

.slider {
  position: relative;

  width: 34.286cqw; /* 24px */
  height: 100%;

  cursor: pointer;

  touch-action: none;
  user-select: none;
}

.track {
  position: absolute;

  left: 50%;
  top: 0;

  transform: translateX(-50%);

  width: 2.857cqw; /* 2px */

  height: 100%;

  background: var(--border-hairline);

  border-radius: var(--radius-sm);
}

.thumb {
  position: absolute;

  left: 50%;

  width: 25.714cqw; /* 18px */

  aspect-ratio: 1;

  transform: translate(-50%, 50%);

  border-radius: 50%;

  background: var(--bg-panel);

  border: var(--border-width-active) solid var(--accent-brand);

  box-shadow: var(--shadow-sm);
}

.ticks {
  position: absolute;

  top: 0;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  pointer-events: none;
}

.ticks span {
  width: 14.286cqw; /* 10px */

  height: 2.857cqw; /* 2px */

  background: var(--border-hairline);

  border-radius: var(--radius-sm);
}

.left {
  left: 11.429cqw; /* 8px */
}

.right {
  right: 11.429cqw; /* 8px */
}

.value {
  width: 100%;

  margin-top: 5.714cqw; /* 4px */

  padding-top: 2.857cqw; /* 2px */
  padding-bottom: 2.857cqw; /* 2px */
  padding-right: 5.714cqw; /* 4px */
  padding-left: 5.714cqw; /* 4px */

  box-sizing: border-box;

  display: flex;

  justify-content: center;
  align-items: center;

  gap: 0.25em;

  white-space: nowrap;

  color: var(--accent-brand);

  font-size: 22.857cqw;

  font-family: var(--font-ui);

  box-shadow: var(--shadow-sm);

  border-radius: var(--radius-md);

  overflow: hidden;
}

.value input {
  width: auto;
  min-width: 0;

  height: 1.4em;

  text-align: center;

  background: transparent;

  border: 1px solid var(--border-hairline);

  border-radius: var(--radius-sm);

  appearance: none;
}

.value input,
.value-unit {
  font-size: inherit;

  line-height: 1;

  font-family: inherit;

  color: inherit;
}