_form-box.scss

// label and input or box together
//
// The `form-box` wrapper combines an input element with a label 
// and an optional tooltip (called the mini-info).

// Default size is s .pa-m and .pa-xs should also work

.form-box {

  display:  block;     // for absolute positioned childs
  position: relative;  // for absolute positioned childs
  overflow: hidden;

  padding: 0;
  .input, .select,.textarea {
    padding: var(--space-s);
  }
  // Dirty hack to make options align in Firefox
  @-moz-document url-prefix() {
    .select {
      padding-left: .4rem;
    }
  }

  // make some space for .mini-label
  &:not(.no-label) {
    .input, .button, .textarea, .select { padding-top: calc(1 * var(--space-m)) !important }
  }

  &.active, &:hover {
    z-index: 2;
    .mini-info { visibility: visible }
  }
  // 1. place mini-info after form elem in HTML
  // 2. when form elem is focus/hover mini-info will be shown
  .input ~ .mini-info, 
  .select ~ .mini-info, 
  .textarea ~ .mini-info { visibility: hidden }
  .input, .select, .input, .textarea {
    &:hover ~ .mini-info,
    &:focus ~ .mini-info { visibility: visible }
  }


  // Add a padding size to 
  // adjust the inner paddings of the inputs
  &.pa-m {
    padding: 0;
    .input, .button, .textarea, .select { 
      padding-left: var(--space-m);
      padding-right: var(--space-m);
      padding-top: calc(1.3 * var(--space-m)) !important;
      padding-bottom: calc(.7 * var(--space-m)) !important;
    }
    .mini-label { 
      left: var(--space-m);
      top: calc(1.6 * var(--space-s));
    }
  }
  &.pa-xs {
    padding: 0;
    .input, .button, .textarea, .select { 
      padding: var(--space-xs);
      padding: var(--space-xs);
      padding-top: 1.1rem !important;
    }
    .mini-label { 
      left: var(--space-xs);
      top: var(--space-xs);
    }
    @-moz-document url-prefix() {
      .select {
        padding-left: 0;
      }
    }
  }
}