.CIG {
  --CIG-padding: var(--gap-l);

  display: flex;
  flex-wrap: wrap;
  padding: var(--CIG-padding);
  padding-top: 0;
  position: relative;

  &.is-empty {
    display: none;
  }

  // Prevent collapsing margins when CIG-title is the first child.
  &::before {
    content: '';
    display: block;
    height: 1px;
    margin-bottom: -1px;
    width: 100%;
  }

  > * {
    width: 100%;
  }
}

.CIG {
  > .Message,
  > .TabBar {
    margin-left: calc(0px - var(--CIG-padding));
    margin-right: calc(0px - var(--CIG-padding));
    width: calc(100% + (var(--CIG-padding) * 2));
  }
}

.CIG-title {
  background: var(--color-gray1);
  cursor: pointer;
  line-height: calc(var(--gap-s) * 2 + var(--Icon-size));
  margin: var(--gap-xl) calc(var(--gap-l) - var(--CIG-padding)) 0
    calc(var(--gap-l) - var(--CIG-padding));
  padding: 0 calc(var(--CIG-padding) - var(--gap-l)) 0 var(--gap-s);
  position: relative;
  width: calc(100% + (var(--CIG-padding) - var(--gap-l)) * 2);

  &:empty {
    display: none;
  }

  &:hover,
  &:focus {
    .CIG-titleToggle {
      .IconButton.is-focus;
    }
  }
}

.CIG-title.is-expanded-cluster {
  cursor: unset;
}

.CIG-label {
  .Text.is-s;

  align-items: center;
  color: var(--color-gray7);
  display: flex;
  font-weight: bold;
  height: var(--Text-height);
  order: -2;
  position: relative;
}

.CIG-requiredLabel {
  color: var(--color-gray5);
  font-size: var(--fontSize-xs);
  font-weight: normal;
  padding-left: var(--gap-xs);
}

// Adjusts spacing between RCIG-list, view switcher and label when "Items Type" dropdown is missing
.CIG-label + .CIG-large .RCIG.is-previewable > {
  .repeatablePreviewControls {
    top: calc(var(--Text-height) - var(--gap-xl));
  }

  .RCIG-expandAll {
    top: calc(0px - var(--gap-s) * 2 - var(--Icon-size) + var(--Text-height));
  }

  .repeatablePreviewControls + .RCIG-list {
    margin-top: calc(var(--Text-height) + var(--gap-s));
  }
}

.CIG-help {
  .Icon.is-s;
  .IconButton;

  --IconButton-name: 'build';

  margin-left: var(--gap-xs);
  order: 1;
  visibility: hidden;
}

.CIG-guide {
  .Icon.is-s;
  .IconButton;

  --IconButton-name: 'help';

  margin-left: var(--gap-xs);
  order: 1;
  visibility: hidden;
}

.CIG-pending {
  .Text.is-s;

  color: var(--color-yellow6);
  margin-top: var(--gap-s);
}

.CIG-updated {
  .Text.is-s;

  color: var(--color-gray5);
  margin-top: var(--gap-s);
}

.CIG > .CIG-note {
  margin: 0 calc(0px - var(--CIG-padding));
  order: -1;
  width: calc(var(--CIG-padding) * 2 + 100%);
}

.CIG-noteItem .Message {
  .Text.is-m;

  color: var(--color-black);
}

.CIG-row > .CIG-note {
  .Text.is-s;

  color: var(--color-gray7);
}

.CIG-row > .CIG-note,
.CIG-noteItem {
  margin-top: var(--gap-s);
}

// adds spacing to the right of CIG-note if ExpandAll button is present on RCIG
.CIG-row.is-expandable > .CIG-note {
  margin-right: calc(var(--gap-s) * 2 + var(--Icon-size) + var(--gap-m));
}

.CIG-note:first-child .CIG-noteItem:has(> .Message:only-child) {
  margin-top: 0;
}

.CIG-small,
.CIG-large {
  margin-top: var(--gap-s);
}

.CIG-small[data-rte-container='true'] {
  .ContentEditDrawer-widget-carousel-list-item {
    display: none;
  }

  .drawerDropOverlay {
    padding: 0;
    z-index: 2000000;

    &::before {
      --offset: calc(0px - var(--gap-m));

      background: rgb(var(--rgb-dominant3) / 70%);
      border: 4px dotted var(--color-dominant5);
      border-radius: var(--gap-s);
      bottom: var(--offset);
      content: '';
      left: var(--offset);
      position: absolute;
      right: var(--offset);
      top: var(--offset);
    }
  }
}

.CIG-row {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding-top: var(--gap-xl);
  position: relative;

  &::after {
    background: var(--color-dominant5);
    bottom: 0;
    content: '';
    left: calc(0px - var(--gap-l));
    opacity: 0;
    position: absolute;
    top: var(--gap-xl);
    transform: scaleX(0);
    transform-origin: left;
    transition-duration: var(--time-xs);
    transition-property: background-color, transform;
    transition-timing-function: var(--ease-out);
    width: var(--gap-m);
  }
}

.is-inHiddenCluster {
  display: none;
}

// WordCount
.CIG-wordCount {
  bottom: calc(0px - var(--gap-s) * 3);
  color: var(--color-gray5);
  display: block;
  font-size: var(--fontSize-s);
  line-height: var(--lineHeight-s);
  opacity: 0;
  position: absolute;
  right: 0;
}

// Narrow row modifiers.
.CIG-row {
  &.is-minimal,
  &.is-half,
  &.is-third,
  &.is-quarter {
    margin-right: var(--CIG-padding);
  }

  &.is-half,
  &.is-third,
  &.is-quarter {
    flex-grow: 1;
  }

  &.is-minimal {
    min-width: 0;
    width: auto;
  }

  &.is-half {
    width: calc(50% - var(--CIG-padding));
  }

  &.is-third {
    width: calc(100% / 3 - var(--CIG-padding));
  }

  &.is-quarter {
    width: calc(25% - var(--CIG-padding));
  }
}

// Query field support.
.CIG-row.is-query {
  &.is-disabled {
    .QueryField-toggle {
      display: none;
    }
  }
}

// Red marker when the row contains errors.
.CIG-row.is-error {
  &::after {
    background: var(--color-red6);
    opacity: 1;
    transform: none;
  }
}

// Blue marker when the row is focused.
.CIG-row {
  &:hover,
  &:focus-within {
    > .CIG-label {
      > .CIG-help,
      .CIG-guide,
      .CIG-comments {
        visibility: visible;
      }
    }
  }

  &:focus-within,
  &.is-openHelpPopup {
    &::after {
      opacity: 1;
      transform: none;
    }

    > .CIG-label {
      color: var(--color-dominant5);
    }

    > .CIG-large > .CIG-wordCount,
    > .CIG-small > .CIG-wordCount,
    > .CIG-wordCount {
      opacity: 1;
    }
  }
}

.CIG-row.is-openHelpPopup {
  > .CIG-label > .CIG-help {
    .IconButton.is-focus;

    opacity: 1;
    visibility: visible;
  }
}

.CIG-row.is-openGuidePopup {
  > .CIG-label > .CIG-guide {
    .IconButton.is-focus;

    opacity: 1;
    visibility: visible;
  }
}

// Gray marker when the row data has been overlaid.
.CIG-row.is-overlaid:not(:focus-within),
.CIG-row.is-updated {
  &::after {
    background: var(--color-gray5);
    opacity: 1;
    transform: none;
  }
}

// Gray/yellow marker when the row is pending change.
.CIG-row.is-pending {
  &::after {
    background-image: linear-gradient(
      -45deg,
      var(--color-gray5),
      var(--color-gray5) 25%,
      var(--color-yellow3) 25%,
      var(--color-yellow3) 50%,
      var(--color-gray5) 50%,
      var(--color-gray5) 75%,
      var(--color-yellow3) 75%
    );
    background-size: var(--gap-l) var(--gap-l);
    opacity: 1;
    transform: none;
  }
}

// Yellow marker when the row has changed.
.CIG-row.state-changed:not(:focus-within) {
  &::after {
    background: var(--color-yellow3);
    opacity: 1;
    transform: none;
  }

  > .CIG-label {
    color: var(--color-yellow5);
  }
}

// Boolean field checkboxes should look like toggles.
.CIG-row[data-type='boolean'] > .CIG-small > .Checkbox {
  .Checkbox.is-toggle;
}

// Small shadows on embedded forms.
.CIG-row[data-type$='record'],
.CIG-row[data-type$='period'],
.CIG-row[data-type$='duration'],
.CIG-row[data-type$='date'],
.CIG-row[data-type$='instant'],
.CIG-row[data-type$='zonedDateTime'],
.CIG-row[data-type$='offsetDateTime'],
.CIG-row[data-type$='offsetTime'],
.CIG-row[data-type$='localDateTime'],
.CIG-row[data-type$='localDate'],
.CIG-row[data-type$='localTime'] {
  > .CIG-large {
    > .toggleable-form > .CIG,
    > .CIG {
      box-shadow: var(--shadow-1);
    }
  }
}

.CIG.TC.is-query {
  --CIG-padding: 0;

  .QueryField input[type] {
    display: none;
  }
}

// Remove all gaps around CIG inside unlabeled row by itself.
.CIG-row[data-type='record'] > .CIG-large,
.CIG-row[data-type='list/record'] > .CIG-large,
.CIG-row[data-type='set/record'] > .CIG-large {
  > .toggleable-form > .CIG,
  > .CIG {
    > div.CIG-row.is-unlabeled:only-of-type {
      // Hides the CIG shadow by layering a white shadow over top.
      &::before {
        bottom: 0;
        box-shadow: 0 0 0 var(--gap-s) var(--color-white);
        content: '';
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }

  > .toggleable-form > .CIG,
  > .CIG {
    > div.CIG-row.is-unlabeled:only-of-type {
      margin-bottom: calc(0px - var(--CIG-padding));
      margin-left: calc(0px - var(--CIG-padding));
      margin-right: calc(0px - var(--CIG-padding));
      padding: 0;
      width: calc(100% + var(--CIG-padding) * 2);

      > .CIG-label {
        display: none;
      }

      > .CIG-small,
      > .CIG-large {
        margin-top: 0;
      }
    }
  }
}

// Make certain types of rows not editable.
.ContentEdit.is-locked,
.CIG.is-readOnly,
.CIG-row.is-readOnly,
.CIG-row.is-pending,
.CIG-row.is-updated,
.StandardForm.is-locked {
  --Input-borderColor: transparent;

  input[type],
  input[data-preview]:not([data-preview='']) + .ContentSelector-search,
  input[data-previewable='true']:not([data-preview]) + .ContentSelector-search,
  input[data-previewable='true'][data-preview=''] + .ContentSelector-search,
  select,
  textarea,
  .locationMap,
  .regionMap,
  .CIG-label,
  .CodeMirror,
  .ComboInput,
  .DateTimeInput,
  .ProseMirrorContainer,
  .RichTextEditor {
    opacity: 0.7;
    pointer-events: none;
  }

  input[data-previewable='false']:not([data-preview]) + .ContentSelector-search,
  input[data-previewable='false'][data-preview=''] + .ContentSelector-search,
  input[data-previewable='true']:not([data-preview])
    + .ContentSelector-search::after,
  input[data-previewable='true'][data-preview='']
    + .ContentSelector-search::after,
  input[data-preview]:not([data-preview='']) + .ContentSelector-search::before,
  input[data-preview]:not([data-preview='']) + .ContentSelector-search::after,
  .fileSelector > .ComboInput > .ComboInput-icon,
  .leaflet-control:not(.leaflet-control-zoom),
  .CIG-help,
  .CIG-guide,
  .ComboInput-icon::after,
  .Dropdown-container,
  .ContentSelector-clear,
  .ImageEditor-open,
  .MultiSortable-buttonToggle,
  .ProseMirrorToolbar,
  .RCIG-controls,
  .RCIG-remove,
  .RCIG-swap,
  .RCS-remove,
  .RCS-controls,
  .Repeatable-controls,
  .RichTextEditor-toolbar,
  .RTI-add,
  .EIG-controls {
    display: none !important;
  }

  .MultiSortable:hover {
    cursor: unset;
  }

  .RCIG-item.MultiSortable > .RCIG-title:hover {
    cursor: pointer;
  }

  .RTI-remove {
    display: none;
  }

  .is-collapsed {
    width: 100%;
  }

  .readOnlyDisplay {
    color: var(--color-gray6);
    margin: var(--gap-s);
  }
}

// Equalize the ComboInput widths so that they look aligned.
.CIG .ComboInput {
  min-width: 25%;
  width: auto;
}

// Messages inside CIG-row should be padded and smaller.
.CIG-row > .Message {
  margin-top: var(--gap-s);
  padding: 0;
  padding-left: calc(var(--Icon-size) + var(--gap-s));

  > .Message-icon::before {
    left: 0;
    top: 0;
  }

  &.is-error {
    background-color: transparent;
    color: var(--color-red6);

    .Link.is-red;
  }
}

.CIG-row:only-child.is-unlabeled > .Message.is-error {
  margin-left: calc(var(--CIG-padding) + var(--gap-s));
}

// Add more horizontal gap on larger viewports.
@media (@mq-m) {
  .CIG {
    --CIG-padding: var(--gap-xl);
  }

  .CIG-row::after {
    left: calc(0px - (var(--gap-xl) + var(--gap-m)) / 2);
  }

  .CIG-title {
    padding: 0 calc(var(--CIG-padding) - var(--gap-l));
  }
}

.CIG-search {
  .IconButton.no-Fill;
  .Link.is-black;

  --IconButton-name: 'search';

  margin-right: var(--gap-l);
}

// DateOnly Field
.CIG-row[data-type$='year'],
.CIG-row[data-type$='yearMonth'],
.CIG-row[data-type$='monthDay'] > .CIG-small {
  input,
  .ComboInput {
    width: 100px;
  }

  .ComboInput:last-of-type {
    margin-left: var(--gap-s);
  }

  .DateOnly-year {
    vertical-align: bottom;
  }

  .DateOnly-month {
    & + .ComboInput {
      &,
      .ComboInput-filter {
        min-width: 150px;
        width: 150px;
      }
    }
  }

  .DateOnly-day {
    & + .ComboInput {
      &,
      .ComboInput-filter {
        min-width: 120px;
        width: 120px;
      }
    }
  }
}

// hide focus state within date fields
.CIG-row[data-type$='duration'],
.CIG-row[data-type$='period'],
.CIG-row[data-type$='date'],
.CIG-row[data-type$='instant'],
.CIG-row[data-type$='zonedDateTime'],
.CIG-row[data-type$='offsetDateTime'],
.CIG-row[data-type$='offsetTime'],
.CIG-row[data-type$='localDateTime'],
.CIG-row[data-type$='localDate'],
.CIG-row[data-type$='localTime'] {
  .CIG-row:focus-within::after {
    opacity: 0;
  }
}

// Duration, Period
.CIG-row[data-type$='duration'],
.CIG-row[data-type$='period'] {
  > .CIG-large .CIG > .CIG-row {
    margin-right: var(--gap-s);
    min-width: 100px;
    width: 100px;
  }
}

// Date, DateString
.CIG-row[data-type$='date'],
.CIG-row[data-type$='instant'],
.CIG-row[data-type$='zonedDateTime'],
.CIG-row[data-type$='offsetDateTime'],
.CIG-row[data-type$='offsetTime'],
.CIG-row[data-type$='localDateTime'],
.CIG-row[data-type$='localDate'],
.CIG-row[data-type$='localTime'] {
  > .CIG-large .CIG > .CIG-row {
    > .CIG-small,
    > .CIG-note {
      margin-top: 0;
    }
  }
}

.RteSettings-customKeyboardConfig .CIG-small,
.RteSettings-customKeyboardConfig textarea {
  letter-spacing: 1.2rem;
}
