/* LEAL3D_CAMPOS_MEDIDAS_V61
   Sistema compartilhado de campos dimensionais para todas as ferramentas. */

/* O sufixo é visual e não faz parte do valor numérico enviado aos cálculos. */
.l3d-number-field {
  position: relative;
  width: 100%;
  min-width: 0;
  display: block;
}

.l3d-number-field > input[type="number"] {
  width: 100% !important;
  min-width: 0;
  padding-right: 46px !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

.l3d-number-field > input[type="number"]::-webkit-outer-spin-button,
.l3d-number-field > input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.l3d-number-field::after {
  content: attr(data-unit);
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .01em;
  pointer-events: none;
  user-select: none;
}

.l3d-number-field:focus-within::after {
  color: var(--secondary);
}

/*
  Cada campo dimensional passa a ter três linhas previsíveis:
  título, controle e texto auxiliar. As alturas são calculadas por grupo pelo
  JavaScript, evitando que uma coluna comece mais abaixo que a outra.
*/
.l3d-measure-field-item {
  min-width: 0;
  margin-top: 0 !important;
  align-self: start;
  display: grid !important;
  grid-template-rows:
    var(--l3d-label-row-height, auto)
    auto
    var(--l3d-help-row-height, auto);
  align-content: start;
  row-gap: 6px;
}

.l3d-measure-field-item > .l3d-number-field {
  grid-row: 2;
}

.l3d-measure-field-item > small:not([hidden]),
.l3d-measure-field-item > .help:not([hidden]) {
  grid-row: 3;
  align-self: start;
  margin: 0 !important;
}

.l3d-measure-field-item > span:first-child:not(.l3d-number-field),
.l3d-measure-field-item > label:first-child,
.l3d-measure-field-item > .kc-field-heading:first-child {
  grid-row: 1;
  align-self: end;
  margin: 0 !important;
}

/* As duas colunas começam sempre na mesma régua. */
.measure-pair,
.kc-two-fields,
.controls {
  align-items: start;
}

.kc-two-fields > .kc-field,
.measure-pair > .measure-input {
  margin-top: 0 !important;
}

/* O texto retirado por conter apenas a unidade não reserva espaço. */
.l3d-unit-help-removed,
.l3d-unit-help-removed[hidden] {
  display: none !important;
}

/* Descrição somente para leitores de tela. */
.l3d-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1279px) {
  .l3d-number-field::after {
    right: 12px;
  }
}