.RCIG {
  --RCIG-titleHeight: calc(var(--gap-m) * 2 + var(--Text-height));
  --RCIG-addSize: calc(var(--gap-s) * 2 + var(--Text-height));

  position: relative;
}

.RCIG-list {
  counter-reset: RCIG-item;

  &:not(:empty) {
    > .RCIG-item:last-child:not(.is-gridItem, .Sortable-selected) {
      border-bottom: 1px solid var(--color-gray3);
    }

    margin-bottom: var(--gap-s);
  }

  li:focus-within {
    z-index: 1;

    .RCIG-title:focus {
      background: var(--color-gray2);
    }
  }
}

.RCIG-item {
  background: var(--color-white);
  border-color: var(--color-gray3);
  border-style: solid;
  border-width: 1px 1px 0;
  counter-increment: RCIG-item;
  position: relative;

  &.Sortable-selected {
    &:not(:first-child, .draggable-mirror),
    &:not(.draggable-mirror) {
      border-color: var(--color-blue5);
    }
  }

  &::before {
    bottom: 0;
    box-shadow: var(--shadow-3);
    content: '';
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity var(--time-s) var(--ease-out);
  }

  &.is-collapsed,
  &.is-removing {
    height: var(--RCIG-titleHeight);
    overflow: hidden;

    &:not(:first-child, .draggable-mirror, .Sortable-selected) {
      height: calc(var(--RCIG-titleHeight) + 1px);
    }

    &.Sortable-selected {
      .RCIG-title {
        height: calc(var(--RCIG-titleHeight) - 4px);
        padding: calc(var(--gap-m) - 2px) 0;
      }

      .RCIG-swap,
      .RCIG-remove,
      .MultiSortable-buttonToggle {
        top: calc(var(--gap-m) - var(--gap-s) - 2px);
      }
    }
  }

  &:not(.is-removing, [data-empty]) {
    > .RCIG-title:hover::before,
    > .RCIG-title:focus::before {
      .Icon;

      content: 'expand_less';
      overflow: hidden;
    }

    &.is-collapsed,
    &.is-gridItem {
      > .RCIG-title:hover::before,
      > .RCIG-title:focus::before {
        content: 'expand_more';
      }
    }
  }

  &:not(.is-collapsed, .is-removing) {
    &::before {
      opacity: 1;
    }
  }

  > .MultiSortable-buttonToggle {
    position: absolute;
    right: calc(var(--gap-xs) * 4.5 + var(--Icon-size));
    top: calc((var(--RCIG-titleHeight) - var(--Icon-size)) / 2 - var(--gap-s));
  }

  &.is-loading::after {
    .Icon;

    animation: spin var(--time-xl) infinite ease-in-out;
    background: var(--color-gray2);
    color: var(--color-black);
    content: 'autorenew';
    left: calc((var(--RCIG-addSize) - var(--Icon-size)) / 2);
    position: absolute;
    top: calc((var(--RCIG-titleHeight) - var(--Icon-size)) / 2);
  }
}

.RCIG-item.Sortable-ghost {
  background: var(--color-white);
}

.RCIG-item.Sortable-ghost > .RCIG-title {
  background: var(--color-blue5);
  user-select: none;
}

.RCIG-item.MultiSortable > .RCIG-title {
  &:hover {
    background: var(--color-gray2);
    cursor: move;
  }

  &.is-loading::after {
    .Icon;

    animation: spin var(--time-xl) infinite ease-in-out;
    background: var(--color-gray2);
    color: var(--color-black);
    content: 'autorenew';
    left: calc((var(--RCIG-addSize) - var(--Icon-size)) / 2);
    position: absolute;
    top: calc((var(--RCIG-titleHeight) - var(--Icon-size)) / 2);
  }
}

.RCIG-item > .CIG > .CIG-row.is-unlabeled:only-of-type {
  > .CIG-label {
    display: none;
  }

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

  > .CIG-large > .CIG {
    margin: calc(0px - var(--CIG-padding));
  }
}

.RCIG-title {
  cursor: pointer;
  height: var(--RCIG-titleHeight);
  overflow: hidden;
  padding: var(--gap-m) 0;
  padding-right: calc(var(--Icon-size) * 3 + var(--gap-s) * 6 + var(--gap-l));
  text-overflow: ellipsis;
  white-space: nowrap;

  &::before {
    content: counter(RCIG-item);
    display: inline-block;
    margin-right: var(--gap-s);
    text-align: center;
    width: var(--RCIG-addSize);
  }
}

.RCIG-item:not(.is-collapsed, .is-removing) > .RCIG-title {
  background: var(--color-gray2);
}

.RCIG-previewField.is-error.state-changed::after,
.RCIG-previewField.is-error.state-changed > .Message.is-error {
  display: none;
}

.RCIG-remove {
  .Icon.is-s;
  .IconButton;
  .IconButton.is-red;

  --IconButton-name: 'remove';

  position: absolute;
  right: 0;
  top: calc((var(--RCIG-titleHeight) - var(--Icon-size)) / 2 - var(--gap-s));
}

.RCIG-add,
.RCIG-addSelect {
  .IconButton.no-Fill;
  .Link;
  .Link.is-black;

  --IconButton-name: 'add';

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

&:not('.Dropdown-item') > .RCIG-swap {
  font-size: 0;
  position: absolute;
  right: calc(var(--gap-s) * 4 + var(--Icon-size) * 2);
  top: calc((var(--RCIG-titleHeight) - var(--Icon-size)) / 2 - var(--gap-s));

  .Sortable-ghost & {
    color: var(--color-white);
  }
}

.RCIG-addSelect {
  --Link-hoverDecoration: none;

  line-height: unset;
}

.RCIG-item.is-removing {
  background: var(--color-red1);
  box-shadow: none;
  height: var(--RCIG-titleHeight);
  overflow: hidden;

  > .RCIG-title,
  > .RCIG-title::before {
    color: var(--color-red6);
    pointer-events: none;
    text-decoration: line-through;
  }

  > .RCIG-remove {
    .Link.is-blue;

    --IconButton-name: 'add';
  }

  .TabBar {
    display: none;
  }
}

.RCIG-item.is-error > .RCIG-title::before {
  .Icon;

  color: var(--color-red6);
  content: 'error' !important;
}

.RCIG.is-addToTop {
  display: flex;
  flex-direction: column;

  .RCIG-controls {
    order: -1;
  }

  .RCIG-list:not(:empty) {
    margin-bottom: 0;
    margin-top: var(--gap-s);
  }
}

.RCIG-preview {
  display: none;
}

.RCIG-expandAll {
  .Icon.is-s;
  .IconButton;

  --IconButton-name: 'unfold_more';

  &.is-expanded {
    --IconButton-name: 'unfold_less';
  }

  position: absolute;
  right: 0;
  top: calc(
    0px - var(--gap-s) * 3 - (var(--Text-height) + var(--Icon-size)) / 2
  );
}

.RCIG[data-rcig-size='0'] {
  .RCIG-expandAll,
  .RCIG-resetWeights {
    display: none;
  }

  &.is-previewable .repeatablePreviewControls {
    right: 0;
  }
}

.RCIG.is-previewable {
  > .repeatablePreviewControls {
    position: absolute;
    right: calc(var(--gap-s) * 3 + var(--Icon-size));
    top: calc(0px - var(--gap-s) * 3 - var(--Text-height));
  }

  .action-upload {
    .IconButton.no-Fill;
    .Link;
    .Link.is-black;

    --IconButton-name: 'publish';

    + .RCIG-controls {
      display: inline-block;
      margin-left: var(--gap-l);
    }
  }

  .copyButton {
    display: none;
  }

  &.is-gridView {
    > .repeatablePreviewControls {
      right: 0;
    }

    > .RCIG-expandAll {
      display: none;
    }

    > .RCIG-list {
      border: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

      &:not(:empty) {
        padding: 1px 0 0 1px;
      }

      > .RCIG-item {
        --RCIG-itemHeight: 200px;

        border-width: 1px;
        box-shadow: none;
        height: calc(var(--RCIG-itemHeight) + 1px);
        margin: -1px 0 0 -1px;
        position: relative;

        &::before {
          display: none;
        }

        > .RCIG-title {
          background: transparent;
          padding-right: calc(var(--Icon-size) * 2 + var(--gap-s) * 3);
        }

        > .MultiSortable-buttonToggle {
          right: calc(var(--gap-s) * 2 + var(--Icon-size));
        }

        .CIG-row:not(.RCIG-previewField),
        .TabBar {
          display: none;
        }

        .CIG-row.RCIG-previewField {
          left: 0;
          padding: 0;
          position: absolute;
          top: calc(0px - var(--gap-s));

          &::after {
            display: none;
          }

          > .CIG-label {
            display: none;
          }

          > .CIG-small {
            > .ContentSelector-search {
              max-width: none;
              width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));

              > figure {
                width: 100%;

                > img {
                  height: calc(
                    var(--RCIG-itemHeight) - var(--RCIG-titleHeight)
                  );
                  object-fit: cover;
                  width: 100%;
                }

                > figcaption {
                  display: none;
                }
              }
            }

            input[data-previewable='true'] {
              &:not([data-preview]),
              &[data-preview=''] {
                + .ContentSelector-search {
                  background: var(--color-gray1);
                  border-width: 0;
                  height: calc(
                    var(--RCIG-itemHeight) - var(--RCIG-titleHeight) - 1px
                  );
                  padding: var(--gap-s);
                  width: calc(100% - var(--gap-s) * 2 - var(--Icon-size));

                  + .ContentSelector-edit {
                    vertical-align: top;
                  }
                }
              }
            }

            > .ContentSelector-clear {
              display: none;
            }
          }
        }

        > .RCIG-preview {
          background: var(--color-gray1);
          display: block;
          height: calc(var(--RCIG-itemHeight) - var(--RCIG-titleHeight));
          left: 0;
          position: absolute;
          top: var(--RCIG-titleHeight);
          width: 100%;

          > img {
            height: 100%;
            object-fit: cover;
            width: 100%;

            &:not([src]),
            &[src=''] {
              display: none;
            }
          }
        }
      }
    }
  }
}

.RCIG.is-weighted {
  --RCIG-weightLabelWidth: calc(var(--fontSize-m) * 3.5);

  > .RCIG-list > li > .RCIG-title::before {
    margin-right: calc(var(--RCIG-weightLabelWidth) + var(--gap-m));
  }
}

.RCIG-resetWeights {
  .Icon.is-s;
  .IconButton;

  --IconButton-name: 'view_column';

  position: absolute;
  right: calc(var(--gap-xs) * 4.5 + var(--Icon-size));
  top: calc(
    0px - var(--gap-s) * 3 - (var(--Text-height) + var(--Icon-size)) / 2
  );
}

.RCIG-weightBar {
  display: flex;
  height: calc(var(--gap-s) * 2 + var(--Text-height));
  margin-bottom: var(--gap-s);
  overflow: hidden;
  width: 100%;

  &:empty {
    display: none;
  }
}

.RCIG-weightBarItem {
  height: 100%;
  position: relative;

  &:not(:last-child) {
    border-right: 1px solid var(--color-white);
  }

  &:first-child .RCIG-weightBarHandle {
    display: none;
  }
}

.RCIG-weightBarMarker {
  background: var(--color-white);
  border-radius: 50%;
  height: var(--gap-xs);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--gap-xs);
}

.RCIG-weightBarHandle {
  background: var(--color-white);
  border-radius: 2px;
  bottom: var(--gap-s);
  cursor: col-resize;
  height: var(--Text-height);
  left: calc(0px - var(--gap-m) / 2 - 1px);
  position: absolute;
  top: var(--gap-s);
  width: calc(var(--gap-m) + 1px);

  &::after {
    border-color: var(--color-black);
    border-style: solid;
    border-width: 0 1px;
    bottom: var(--gap-xs);
    content: '';
    left: calc(var(--gap-m) / 2 - 2px);
    position: absolute;
    right: calc(var(--gap-m) / 2 - 2px);
    top: var(--gap-xs);
  }
}

.RCIG-weightLabel {
  height: calc(var(--gap-xs) * 2 + var(--Text-height));
  left: var(--RCIG-addSize);
  pointer-events: none;
  position: absolute;
  top: calc(var(--gap-m) - var(--gap-xs));
  width: var(--RCIG-weightLabelWidth);

  &::after {
    color: var(--color-white);
    content: attr(data-weight-label);
    left: 0;
    line-height: calc(var(--gap-xs) * 2 + var(--Text-height));
    padding: 0 var(--gap-s);
    position: absolute;
    text-align: right;
    top: 0;
    width: 100%;
  }
}

.RCIG-weightColor {
  border-radius: calc(var(--Text-height) / 8);
  display: block;
  height: 100%;
  width: 100%;
}

// Contextual image editor available
.RCIG-item {
  &.is-gridItem > .CIG > .RCIG-previewField,
  &.is-collapsed > .CIG > .RCIG-previewField {
    [data-image-editor='true'] .ImageEditor-container {
      > * {
        display: none;
      }

      > .ImageEditor-preview {
        display: flex;
      }
    }
  }

  &.is-gridItem > .CIG > .RCIG-previewField [data-image-editor='true'] {
    > input[data-previewable='true'][data-preview]:not([data-preview=''])
      + .ContentSelector-search {
      border: none;
      overflow: visible;
      padding: 0;
      top: calc(0px - var(--gap-s));

      &::before,
      &::after {
        z-index: 1;
      }

      > span {
        visibility: hidden;
      }
    }

    > .ImageEditor-container {
      height: calc(var(--RCIG-itemHeight) - var(--RCIG-titleHeight));
      left: 0;
      min-height: 0;
      min-width: 0;
      position: absolute;
      right: calc(var(--gap-s) + var(--Icon-size));
      top: 0;
      width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));

      canvas {
        max-height: calc(var(--RCIG-itemHeight) - var(--RCIG-titleHeight));
      }
    }
  }
}

// Legacy.
.repeatableLabel-progress {
  font-size: 10px;
  position: absolute;
  right: 50px;
  text-transform: uppercase;
  top: 2px;

  [data-toggle-field-value] > & {
    right: 105px;
  }

  .repeatableLabel-progressLabel {
    display: block;
    text-align: center;
  }

  .repeatableLabel-progressBar {
    background: @color-border;
    border-radius: 3px;
    height: 6px;
    width: 180px;

    .repeatableLabel-progressFill {
      background: @color-focus;
      height: 100%;
    }
  }
}

.repeatableForm-alt {
  > ol > li {
    &[data-progress-field-value] > .repeatableLabel {
      padding-right: 368px;
    }

    &[data-toggle-field-value='false'],
    &.toBeRemoved {
      > .repeatableLabel {
        background: @color-heading;
      }

      .repeatableLabel-color::before {
        background: @color-border;
        border-radius: 10px;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
      }

      .repeatableLabel-weightLabel::after {
        content: '0%';
        min-width: 18px;
      }
    }

    &.toBeRemoved {
      .repeatableLabel-weightLabel,
      .repeatableLabel-toggleLabel,
      .repeatableLabel-progress {
        display: none;
      }
    }
  }
}

.repeatableLabel-toggle {
  display: none;
  position: absolute;
  right: 42px;
  top: 12px;

  + .repeatableLabel-toggleLabel {
    background: @color-border;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    height: 20px;
    outline: 0;
    padding: 2px;
    position: absolute;
    right: 45px;
    top: 5px;
    transition: all 0.4s ease;
    user-select: none;
    width: 35px;

    &::after {
      background: #fff;
      border-radius: 50%;
      content: '';
      display: block;
      height: 16px;
      left: 0;
      transition: all 0.2s ease;
      width: 16px;
    }
  }

  &:checked {
    + .repeatableLabel-toggleLabel {
      background: @color-publish;

      &::after {
        margin-left: 15px;
      }
    }
  }
}
