@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/number-input/number-input.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/select/select.css';

@layer cinder.components {
  /* ========================================
 * DURATION FIELD
 *
 * A number and, beside it, the unit it is counted in. A fixed unit is text inside the number's
 * own frame, so a setting that always counts in seconds reads "30 seconds" in one box.
 * ======================================== */

  .cinder-duration-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--cinder-space-2);
  }

  .cinder-duration-field[data-cinder-fixed-unit] {
    grid-template-columns: minmax(0, 1fr);
  }
}