batch-header {
  display: grid;
  grid-template-areas:
    "produced-at family weight"
    "best-before family weight"
    "uid uid uid";
  grid-template-columns: 1fr 2fr 1fr;
  gap: 0.25rem;
  batch-produced-at {
    grid-area: produced-at;
  }
  batch-best-before {
    grid-area: best-before;
  }
  batch-family {
    grid-area: family;
    text-align: center;
  }
  batch-weight {
    grid-area: weight;
    text-align: right;
  }
  batch-uid {
    grid-area: uid;
  }
}

batch-input {
  display: grid;
  grid-template-columns: 2rem 1fr 5rem 8rem 5rem 4rem 6rem minmax(10rem, 1fr) 2rem 2rem;
  input, select {
    border: 1px solid rgb(0, 65, 4);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0.25rem;
    margin: 0.25rem;
  }
  & :focus {
    outline: 4px solid rgb(35, 215, 11);
    z-index: 1;
  }
  input:disabled, select:disabled {
    border: none;
  }
}

batch-output {
  display: grid;
  grid-template-columns: 20rem 10rem 10rem 1fr 1fr;
  input, select {
    border: 1px solid rgb(0, 65, 4);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0.25rem;
    margin: 0.25rem;
  }
  & :focus {
    outline: 4px solid rgb(35, 215, 11);
    z-index: 1;
    /* border: 1px solid rgb(35, 215, 11); */
  }
  .label-printed-at {
    display: flex;
    align-items: center;
    color: rgb(100, 100, 100);
  }
}