.irg,
.irg *,
.irg *::before,
.irg *::after { box-sizing: border-box; }

.irg {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 100%;
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}

.irg__field {
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.irg .input {
  position: relative;
  z-index: 2;
  width: 100%;
}

.irg .input__input { font-variant-numeric: tabular-nums; }

.irg__bonus { color: var(--color-positive-500); }

.irg__hint {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: calc(-1 * var(--spacing-8)) 0 0;
  padding: var(--spacing-8) var(--spacing-12) 0;
  border-radius: 0 0 var(--radius-8) var(--radius-8);
  background: var(--color-positive-25);
  color: var(--color-gray-900);
  text-align: center;
}

.irg__hint-amount { font-weight: var(--text-body-12m-weight); }

.irg__hint-bonus {
  color: var(--color-positive-500);
  font-weight: var(--text-display-12-weight);
}

.irg--max .irg__hint { color: var(--color-positive-500); }

.irg .slider__labels {
  gap: 0;
  padding-top: var(--spacing-12);
  color: var(--color-gray-500);
}

.irg .slider__label:first-child { color: var(--color-gray-900); }

.irg .slider__label--on { color: var(--color-positive-500); }