semanticForms.scss

// #region global styles
form.semanticForms {
  --formBackgroundColor: #fff;
  --formSubBackgroundColor: #f5f5f5;
  --formTextColor: #000;
  --buttonBackgroundColor: #f5f5f5;
  --borderColor: #c0c0c0;
  --subBorderColor: #c0c0c0;
  --placeholderColor: rgba(0, 0, 0, 0.75);
  --scrollbarColor: #c0c0c0;
  --clearButtonColor: #000;
  --buttonGradientLight: #fff;
  --buttonGradientDark: #c0c0c0;
  --invalid: #f00;
  --invalidBorder: 1px solid var(--invalid);
  --inputHeight: 38px;
  --inputFontSize: 16px;
  --inputTopMargin: 15px;
  --inputMinWidth: 250px;
  --borderRadius: 10px;
  --nestedFieldset: rgba(0, 0, 0, .05);
  --nestedFieldsetBorder: 1px rgba(0, 0, 0, .2) solid;
  --nestedInput: #fff;
  --border: 1px var(--borderColor) solid;
  --selectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'%3E%3Cpolygon points='0,0 100,0 50,50'/%3E%3C/svg%3E");
  --customResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E")
}

form.semanticForms.dark {
  --formBackgroundColor: #555;
  --inputBackgroudColor: rgba(85,85,85,0.1);
  --formSubBackgroundColor: #2f2f2f;
  --formTextColor: #fff;
  --buttonBackgroundColor: #454545;
  --borderColor: #656565;
  --subBorderColor: #3f3f3f;
  --placeholderColor: rgba(255, 255, 255, 0.85);
  --scrollbarColor: #373737;
  --clearButtonColor: #fff;
  --buttonGradientLight: #6f6f6f;
  --buttonGradientDark: #373737;
  --nestedFieldset: rgba(255, 255, 255, .05);
  --nestedFieldsetBorder: 1px rgba(255, 255, 255, .1) solid;
  --nestedInput: rgba(255, 255, 255, .15);
  --border: none;
  --selectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23fff'%3E%3Cpolygon stroke='%23fff' points='0,0 100,0 50,50'/%3E%3C/svg%3E");
  --customResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");

  input::-webkit-calendar-picker-indicator {
    filter: invert(100%);
  }
}
// #endregion

form.semanticForms {
  width: 100%;
  container-type: inline-size;
  container-name: semanticForm;
  display: flex;
  flex-direction: column;
  gap: 10px;

  // style reset
  fieldset,
  label,
  input,
  select,
  textarea,
  button,
  menu:has(li > input, li > label, li > button, li > select, li > textarea),
  dl:has(dt > label, dd > input, dd > select, dd > textarea),
  dt:has(> input, > select, > textarea),
  dd:has(> input, > select, > textarea, > ul, > menu),
  div:has(dt, dd),
  dd > p {
    color: var(--formTextColor);
    font-family: sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  // #region container layout
  fieldset {
    border-radius: var(--borderRadius);
    background: var(--formSubBackgroundColor);
    border: 1px var(--subBorderColor) solid;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 10px 20px 10px;
    margin-bottom: 15px;

    // nested fieldsets are darkened
    > fieldset {
      background-color: var(--nestedFieldset);
      border: var(--nestedFieldsetBorder);

      // add opacity to styled inputs to prevent blending with background
      input:not([type='submit'], [type='reset'], [type='image'], [type=checkbox], [type=radio]),
      select,
      textarea {
        background: var(--nestedInput);
      }
    }
  }

  dl:has(dt > label, dd > input, dd > select, dd > textarea) {
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--inputMinWidth), 1fr));
    gap: 10px;
    margin-bottom: 10px;

    dd {
      position: relative;

      &:not(.checkboxes, .radios) {
        gap: 10px;
        max-width: 100%;

        // places all items within the <dd> horizontally
        &:not(.singleCheckbox) {
          display: flex;
          flex-direction: column;
        }

        &.singleCheckbox {
          display: flex;
          align-items: center;

          & > :not(input[type='checkbox'], label) {
            grid-column: 1 / -1;
          }
        }
      }

      &.checkboxes ul, &.radios ul {
        display: flex;
        flex-direction: column;
        margin-top: var(--inputTopMargin);
        padding-left: 10px;
        gap: 5px;

        li {
          display: flex;
          align-items: center;
          gap: 5px;
        }
      }
    }
  }

  p {
    // input/label combo
    &:has(input:not([type='checkbox'], [type='radio']), textarea, label) {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    // checkbox or radio/label combo
    &:has(input[type='checkbox'], input[type='radio']) {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 5px;
    }
  }

  menu:has(li > input, li > label, li > button, li > select, li > textarea),
  ul:has(li > input, li > label, li > button, li > select, li > textarea) {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    list-style-type: none;
  }

  details[open], summary {
    margin-bottom: 10px;
  }

  summary {
    cursor: pointer;
  }
  // #endregion

  // #region input styling
  input:not([type='submit'], [type='reset'], [type='image'], [type=checkbox], [type=radio]),
  select,
  textarea {
    font-size: var(--inputFontSize);
    background: var(--formBackgroundColor);
    border: var(--border);
    border-radius: var(--borderRadius);
    width: 100%;
    touch-action: manipulation;
    outline: none;

    &:not([type="range"]) {
      padding: 6px 30px 6px 20px;
    }

    &[disabled] {
      cursor: not-allowed;
      opacity: 0.5;

      ~ label:first-of-type {
        opacity: 0.5;
      }

      ~ label + button {
        display: none;
      }
    }
  }

  // focused styles
  input:not([type='submit'], [type='reset'], [type='image']),
  select,
  textarea {
    // custom focus highlight
    &:focus {
      outline: none;
      box-shadow: 0 0 0 1px var(--borderColor);
    }
  }

  input:not([type='submit'], [type='reset'], [type='image'], [type=checkbox], [type=radio]),
  select {
    height: var(--inputHeight);
  }

  // specific styling for color input
  input[type=color] {
    height: var(--inputHeight);
    padding: 4px !important;
    padding-right: 30px !important;
  }

  input[type=checkbox],
  input[type=radio] {
    // 30% larger based on parent font size
    width: 1.4em;
    height: 1.4em;
    margin: auto 0;
    cursor: pointer;

    & ~ label:first-of-type {
      color: var(--formTextColor) !important;
    }
  }

  input[type=file] {
    cursor: pointer;
    font-size: var(--inputFontSize);
  }

  select {
    cursor: pointer;
    // custom dropdown graphic on select element
    background-image: var(--selectIcon);
    background-size: 14px;
    background-position: calc(100% - 8px) 16px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  textarea {
    resize: vertical;
    width: 100%;
    min-height: 38px;
    height: 100px;
  }
  // #endregion

  // #region buttons
  button.clear {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    height: min-content;
    // account for margin above each input
    top: calc(var(--inputTopMargin) + 6px);
    right: 0;
    width: 25px;
    height: 25px;
    margin: auto 6px;
    padding: 5px;
    background: none;
    border: none;
    color: var(--clearButtonColor);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // custom styling of clear button on textarea
  textarea ~ .clear {
    bottom: auto;
  }

  // hide clear button while placeholder text is visible
  input:placeholder-shown ~ .clear,
  textarea:placeholder-shown ~ .clear,
  input[type=file] ~ .clear {
    display: none;
  }

  // button styling
  input[type='submit'],
  input[type='reset'],
  button:not(.clear) {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    max-width: max-content;
    background-image: linear-gradient(to bottom, var(--buttonGradientLight) 0%, var(--buttonGradientDark) 100%);
    border: 2px var(--buttonGradientDark) solid;
    border-radius: 20px;
    padding: 5px 25px;
    font-size: 100%;
    line-height: 1;

    &:active,
    &:focus {
      background-image: linear-gradient(to bottom, var(--buttonGradientDark) 0%, var(--buttonGradientLight) 100%);
    }
  }

  input[type='submit'],
  input[type='reset'],
  input[type='image'],
  button:not(.clear) {
    transition: filter 0.1s;

    &:hover {
      filter: brightness(1.05);
    }
  }
  // #endregion

  // #region labels

  input[type=checkbox] + label:first-of-type,
  input[type=radio] + label:first-of-type {
    // shift text down to match center
    padding-top: 2px;
    font-size: var(--inputFontSize);
  }

  .floatLabelForm {
    div {
      position: relative;
      width: 100%;

      dd:not(.singleCheckbox, .checkboxes, .radios) {
        input:not([type='submit'], [type='reset'], [type='image']),
        select,
        textarea {
          &:focus:not([type=checkbox], [type=radio]) ~ label:first-of-type,
          &:not(:placeholder-shown, [type=checkbox], [type=radio]) ~ label:first-of-type {
            color: var(--formTextColor) !important;
            transform: translateY(-150%) scale(0.7);
          }
        }

        select ~ label:first-of-type {
          // force label to be correct color
          color: var(--formTextColor) !important;
        }

        label:first-of-type {
          line-height: 1.2;
          font-size: var(--inputFontSize);
          position: absolute;
          transform-origin: left center;
          pointer-events: none;
          // when the label is positioned within the input it needs a buffer
          top: calc(var(--inputTopMargin) + 10px);
          left: 20px;
          transition: transform 250ms;
          cursor: text;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        // subtext
        label:nth-of-type(2) {
          margin-top: -5px;
          padding-left: 20px;
          font-size: small;
          color: var(--formTextColor);
        }

        input,
        textarea,
        select {
          margin-top: var(--inputTopMargin);
        }

        input,
        textarea {
          transition: opacity 250ms;
          // hide placeholder content until input is focused
          &::placeholder {
            opacity: 0;
            transition: opacity 250ms;
          }

          &::-moz-placeholder {
            opacity: 0;
            transition: opacity 250ms;
          }

          &::-webkit-input-placeholder {
            opacity: 0;
            transition: opacity 250ms;
          }

          &:-ms-input-placeholder {
            opacity: 0;
            transition: opacity 250ms;
          }

          // show placeholder content when focused
          &:focus {
            &::placeholder {
              opacity: 1;
            }

            &::-moz-placeholder {
              opacity: 1;
            }

            &::-webkit-input-placeholder {
              opacity: 1;
            }

            &:-ms-input-placeholder {
              opacity: 1;
            }
          }
        }

        label:first-of-type {
          user-select: none;
          color: var(--placeholderColor);
          touch-action: manipulation;

          span {
            cursor: help;
            pointer-events: auto;
            color: red;
          }
        }
      }

      // top level label for checkbox and radio groups
      dt {
        position: relative;

        label {
          user-select: auto;
          color: var(--formTextColor);
          position: absolute;
          transform-origin: left center;
          transform: translateY(-100%) scale(0.7);
          top: var(--inputTopMargin);
          left: 10px;
        }
      }

      &:has(dd input:required) {
        dt {
          label > span {
            margin-left: 5px;
            cursor: help;
            pointer-events: auto;
            color: red;
          }

        }
      }
    }

    input, textarea {
      &::placeholder {
        color: var(--placeholderColor);
        opacity: 1;
      }
    }
    // #endregion

  }

  // #region colspan classes
  div {
    &.colspan-full {
      grid-column: 1 / -1;
    }

    &.colspan-5 {
      grid-column: span 5;
    }

    &.colspan-4 {
      grid-column: span 4;
    }

    &.colspan-3 {
      grid-column: span 3;
    }

    &.colspan-2 {
      grid-column: span 2;
    }

    &.colspan-1 {
      grid-column: span 1;
    }
  }

  fieldset.colspan-full dl,
  dl.colspan-full {
    grid-template-columns: repeat(auto-fit, minmax(var(--inputMinWidth), 1fr));
  }

  fieldset.colspan-5 dl,
  dl.colspan-5 {
    grid-template-columns: repeat(5, minmax(var(--inputMinWidth), 1fr));
  }

  fieldset.colspan-4 dl,
  dl.colspan-4 {
    grid-template-columns: repeat(4, minmax(var(--inputMinWidth), 1fr));
  }


  fieldset.colspan-3 dl,
  dl.colspan-3 {
    grid-template-columns: repeat(3, minmax(var(--inputMinWidth), 1fr));
  }

  fieldset.colspan-2 dl,
  dl.colspan-2 {
    grid-template-columns: repeat(2, minmax(var(--inputMinWidth), 1fr));
  }

  fieldset.colspan-1 dl,
  dl.colspan-1 {
    grid-template-columns: repeat(1, minmax(var(--inputMinWidth), 1fr));
  }

  // low flow version
  &.lowFlow fieldset.colspan-full dl,
  &.lowFlow dl.colspan-full,
  &.lowFlow fieldset.colspan-5 dl,
  &.lowFlow dl.colspan-5 {
    grid-template-columns: repeat(5, minmax(var(--inputMinWidth), 1fr));

    & dt:nth-of-type(5n + 1),
    & dd:nth-of-type(5n + 1) {
      grid-column: 1;
    }

    & dt:nth-of-type(5n + 2),
    & dd:nth-of-type(5n + 2) {
      grid-column: 2;
    }

    & dt:nth-of-type(5n + 3),
    & dd:nth-of-type(5n + 3) {
      grid-column: 3;
    }

    & dt:nth-of-type(5n + 4),
    & dd:nth-of-type(5n + 4) {
      grid-column: 4;
    }

    & dt:nth-of-type(5n + 5),
    & dd:nth-of-type(5n + 5) {
      grid-column: 5;
    }
  }

  &.lowFlow fieldset.colspan-4 dl,
  &.lowFlow dl.colspan-4 {
    grid-template-columns: repeat(4, minmax(var(--inputMinWidth), 1fr));

    & dt:nth-of-type(4n + 1),
    & dd:nth-of-type(4n + 1) {
      grid-column: 1;
    }

    & dt:nth-of-type(4n + 2),
    & dd:nth-of-type(4n + 2) {
      grid-column: 2;
    }

    & dt:nth-of-type(4n + 3),
    & dd:nth-of-type(4n + 3) {
      grid-column: 3;
    }

    & dt:nth-of-type(4n + 4),
    & dd:nth-of-type(4n + 4) {
      grid-column: 4;
    }
  }

  &.lowFlow fieldset.colspan-3 dl,
  &.lowFlow dl.colspan-3 {
    grid-template-columns: repeat(3, minmax(var(--inputMinWidth), 1fr));

    // 1, 4, 7, ...
    & dt:nth-of-type(3n + 1),
    & dd:nth-of-type(3n + 1) {
      grid-column: 1;
    }

    // 2, 5, 8, ...
    & dt:nth-of-type(3n + 2),
    & dd:nth-of-type(3n + 2) {
      grid-column: 2;
    }

    // 3, 6, 9, ...
    & dt:nth-of-type(3n + 3),
    & dd:nth-of-type(3n + 3) {
      grid-column: 3;
    }
  }

  &.lowFlow fieldset.colspan-2 dl,
  &.lowFlow dl.colspan-2 {
    grid-template-columns: repeat(2, minmax(var(--inputMinWidth), 1fr));

    & dt:nth-of-type(2n + 1),
    & dd:nth-of-type(2n + 1) {
      grid-column: 1;
    }

    & dt:nth-of-type(2n + 2),
    & dd:nth-of-type(2n + 2) {
      grid-column: 2;
    }
  }

  &.lowFlow fieldset.colspan-1 dl,
  &.lowFlow dl.colspan-1 {
    grid-template-columns: repeat(1, minmax(var(--inputMinWidth), 1fr));

    & dt:nth-of-type(n + 1),
    & dd:nth-of-type(n + 1) {
      grid-column: 1;
    }
  }

  // #endregion

  // #region invalid styling
  [data-invalid-text] {
    display: none;
    color: var(--invalid);
  }

  input:not([type='submit'], [type='reset'], [type='image']),
  select,
  textarea {
    &.invalid,
    &:user-invalid {
      border: var(--invalidBorder) !important;

      ~ label:nth-of-type(2) {
        color: var(--invalid) !important;
      }

      ~ [data-invalid-text] {
        font-size: small;
        display: flex;
      }
    }

  }
  // #endregion

  // disable autofill yellow
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  textarea:-webkit-autofill:active,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus,
  select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--formBackgroundColor) inset;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
    transition-delay: 5000s;
    transition-property: background-color, color;
  }

  // update for scrollbars
  @supports (scrollbar-color: auto) {
    textarea {
      scrollbar-color: var(--scrollbarColor) transparent;

      &::-webkit-resizer {
        border: none;
        background-image: var(--customResizer);
        background-size: 14px;
        background-repeat: no-repeat;
        background-position: 100%;
        margin: 0 2px 2px 0;
      }
    }
  }

  // #region low flow form
  &.lowFlow {
    dl {
      grid-template-columns: repeat(2, minmax(var(--inputMinWidth), 1fr));
      grid-auto-flow: dense;
      gap: 5px;

      // 1, 4, 7, ...
      & > dt:nth-of-type(2n + 1),
      & > dd:nth-of-type(2n + 1) {
        grid-column: 1;
      }

      // 2, 5, 8, ...
      & > dt:nth-of-type(2n + 2),
      & > dd:nth-of-type(2n + 2) {
        grid-column: 2;
      }

      dt {
        // add required asterisk
        &:has(+ dd input:required) {
          label::after {
            content: ' *';
            color: red;
          }
        }
      }


      dd {
        margin-bottom: 10px;

        // nudge single checkboxes to match checkbox groups
        &:not(.checkboxes) {
          input[type=checkbox] {
            margin-left: 10px;
          }
        }

        // remove "x" padding
        input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
        select,
        textarea {
          padding-right: 6px;
        }

        // subtext
        label {
          margin-top: -5px;
          font-size: small;
          color: var(--placeholderColor);
        }
      }
    }

    .checkboxes ul,
    .radios ul {
      margin-top: calc(var(--inputTopMargin) / 2);
    }
  }
  // #endregion

  // #region container queries
  // The container is the <fieldset> element
  @container semanticForm (width > 2250px) {
    &.lowFlow fieldset dl,
    &.lowFlow dl {
      grid-template-columns: repeat(6, minmax(var(--inputMinWidth), 1fr));

      & dt:nth-of-type(6n + 1),
      & dd:nth-of-type(6n + 1) {
        grid-column: 1;
      }

      & dt:nth-of-type(6n + 2),
      & dd:nth-of-type(6n + 2) {
        grid-column: 2;
      }

      & dt:nth-of-type(6n + 3),
      & dd:nth-of-type(6n + 3) {
        grid-column: 3;
      }

      & dt:nth-of-type(6n + 4),
      & dd:nth-of-type(6n + 4) {
        grid-column: 4;
      }

      & dt:nth-of-type(6n + 5),
      & dd:nth-of-type(6n + 5) {
        grid-column: 5;
      }

      & dt:nth-of-type(6n + 6),
      & dd:nth-of-type(6n + 6) {
        grid-column: 6;
      }
    }
  }

  @container semanticForm (width < 2250px) {
    &.lowFlow fieldset dl,
    &.lowFlow dl {
      grid-template-columns: repeat(5, minmax(var(--inputMinWidth), 1fr));

      & dt:nth-of-type(5n + 1),
      & dd:nth-of-type(5n + 1) {
        grid-column: 1;
      }

      & dt:nth-of-type(5n + 2),
      & dd:nth-of-type(5n + 2) {
        grid-column: 2;
      }

      & dt:nth-of-type(5n + 3),
      & dd:nth-of-type(5n + 3) {
        grid-column: 3;
      }

      & dt:nth-of-type(5n + 4),
      & dd:nth-of-type(5n + 4) {
        grid-column: 4;
      }

      & dt:nth-of-type(5n + 5),
      & dd:nth-of-type(5n + 5) {
        grid-column: 5;
      }
    }
  }

  @container semanticForm (width < 1300px) {
    fieldset.colspan-5 dl,
    dl.colspan-5 {
      grid-template-columns: repeat(4, minmax(var(--inputMinWidth), 1fr)) !important;
    }

    div.colspan-5 {
      grid-column: span 4 !important;
    }

    &.lowFlow fieldset dl,
    &.lowFlow dl,
    &.lowFlow fieldset.colspan-5 dl,
    &.lowFlow dl.colspan-5 {
      grid-template-columns: repeat(4, minmax(var(--inputMinWidth), 1fr));

      & dt:nth-of-type(4n + 1),
      & dd:nth-of-type(4n + 1) {
        grid-column: 1;
      }

      & dt:nth-of-type(4n + 2),
      & dd:nth-of-type(4n + 2) {
        grid-column: 2;
      }

      & dt:nth-of-type(4n + 3),
      & dd:nth-of-type(4n + 3) {
        grid-column: 3;
      }

      & dt:nth-of-type(4n + 4),
      & dd:nth-of-type(4n + 4) {
        grid-column: 4;
      }
    }
  }

  @container semanticForm (width < 1050px) {
    fieldset.colspan-4 dl,
    fieldset.colspan-5 dl,
    dl.colspan-4,
    dl.colspan-5 {
      grid-template-columns: repeat(3, minmax(var(--inputMinWidth), 1fr)) !important;
    }

    div.colspan-4, div.colspan-5 {
      grid-column: span 3 !important;
    }

    &.lowFlow fieldset dl,
    &.lowFlow dl,
    &.lowFlow fieldset.colspan-4 dl,
    &.lowFlow dl.colspan-4,
    &.lowFlow fieldset.colspan-5 dl,
    &.lowFlow dl.colspan-5 {
      grid-template-columns: repeat(3, minmax(var(--inputMinWidth), 1fr));

      & dt:nth-of-type(3n + 1),
      & dd:nth-of-type(3n + 1) {
        grid-column: 1;
      }

      & dt:nth-of-type(3n + 2),
      & dd:nth-of-type(3n + 2) {
        grid-column: 2;
      }

      & dt:nth-of-type(3n + 3),
      & dd:nth-of-type(3n + 3) {
        grid-column: 3;
      }
    }
  }

  @container semanticForm (width < 800px) {
    fieldset.colspan-3 dl,
    fieldset.colspan-4 dl,
    fieldset.colspan-5 dl,
    dl.colspan-3,
    dl.colspan-4,
    dl.colspan-5 {
      grid-template-columns: repeat(2, minmax(var(--inputMinWidth), 1fr)) !important;
    }

    div.colspan-3,
    div.colspan-4,
    div.colspan-5 {
      grid-column: span 2 !important;
    }

    &.lowFlow fieldset dl,
    &.lowFlow dl,
    &.lowFlow fieldset.colspan-3 dl,
    &.lowFlow dl.colspan-3,
    &.lowFlow fieldset.colspan-4 dl,
    &.lowFlow dl.colspan-4,
    &.lowFlow fieldset.colspan-5 dl,
    &.lowFlow dl.colspan-5 {
      grid-template-columns: repeat(2, minmax(var(--inputMinWidth), 1fr));

      & dt:nth-of-type(2n + 1),
      & dd:nth-of-type(2n + 1) {
        grid-column: 1;
      }

      & dt:nth-of-type(2n + 2),
      & dd:nth-of-type(2n + 2) {
        grid-column: 2;
      }
    }
  }

  @container semanticForm (width < 550px) {
    fieldset.colspan-2 dl,
    fieldset.colspan-3 dl,
    fieldset.colspan-4 dl,
    fieldset.colspan-5 dl,
    dl.colspan-2,
    dl.colspan-3,
    dl.colspan-4,
    dl.colspan-5,
    dl {
      grid-template-columns: repeat(1, minmax(var(--inputMinWidth), 1fr)) !important;
    }

    div.colspan-2, div.colspan-3, div.colspan-4, div.colspan-5 {
      grid-column: span 1 !important;
    }

    &.lowFlow fieldset dl,
    &.lowFlow dl,
    &.lowFlow fieldset.colspan-2 dl,
    &.lowFlow dl.colspan-2,
    &.lowFlow fieldset.colspan-3 dl,
    &.lowFlow dl.colspan-3,
    &.lowFlow fieldset.colspan-4 dl,
    &.lowFlow dl.colspan-4,
    &.lowFlow fieldset.colspan-5 dl,
    &.lowFlow dl.colspan-5 {
      grid-template-columns: repeat(1, minmax(var(--inputMinWidth), 1fr));

      & dt:nth-of-type(n + 1),
      & dd:nth-of-type(n + 1) {
        grid-column: 1;
      }
    }
  }
  // #endregion
}