.RCS {
  --RCS-markerSize: calc(var(--gap-s) * 2 + var(--Text-height));

  counter-reset: RCS-item;

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

    .RCS-controls {
      order: -1;
    }

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

  .ContentSelector-select + .ComboInput {
    max-width: calc(
      (100% - var(--gap-s) * 6 - var(--Icon-size) * 3) - var(--RCS-markerSize) -
        var(--gap-s)
    );
  }

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

    --IconButton-name: 'publish';

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

      .RCS-add {
        display: inline !important;
        height: auto;
        line-height: var(--RCS-markerSize);
        width: auto;
      }
    }
  }
}

.RCS-item {
  counter-increment: RCS-item;
  margin: 0 0 var(--gap-s) 0;

  &::before {
    align-items: center;
    background: var(--color-gray2);
    border-radius: var(--RCS-markerSize);
    content: counter(RCS-item);
    display: inline-flex;
    height: var(--RCS-markerSize);
    justify-content: center;
    margin-right: var(--gap-s);
    vertical-align: middle;
    width: var(--RCS-markerSize);
  }

  input[data-preview] {
    ~ .RCS-remove,
    ~ .MultiSortable-buttonToggle {
      position: relative;
    }
  }
}

.RCS-item.Sortable-chosen,
.RCS-item.Sortable-selected {
  &::before {
    background: var(--color-blue2);
    color: var(--color-black);
  }

  > input[type],
  > btu-input input[type] {
    border-bottom: none;
  }

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

    > a.ContentSelector-edit,
    > a.ContentSelector-search,
    > a.ContentSelector-search::after,
    .ComboInput-selected {
      color: var(--color-white);
    }
  }
}

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

  --IconButton-name: 'remove';
}

.RCS-add {
  .IconButton.no-Fill;
  .Link;
  .Link.is-black;

  --IconButton-name: 'add';

  display: inline-block !important;
}

.RCS-item.is-removing {
  color: var(--color-red6);

  &::before {
    background: var(--color-red1);
    border-radius: 0;
    margin-right: 0;
    padding-right: var(--gap-s);
    text-decoration: line-through;
    width: calc(var(--RCS-markerSize) + var(--gap-s));
  }

  .ComboInput {
    --Input-borderColor: var(--color-red1);

    background: var(--color-red1);
    pointer-events: none;
    text-decoration: line-through;

    .ComboInput-icon::after {
      display: none;
    }
  }

  .ContentSelector-search {
    opacity: 0.3;
    pointer-events: none;
  }

  .RCS-remove {
    --IconButton-name: 'add';
    --Link-color: var(--color-black);
    --Link-hoverColor: var(--color-blue5);

    &:focus::after {
      transform: scale(0);
    }
  }
}

.RCS.is-grid {
  > ol {
    display: flex;
    flex-wrap: wrap;

    &:not(:empty) {
      margin: calc(0px - var(--gap-s));
    }

    > .RCS-item {
      flex: none;
      padding: var(--gap-s);
      position: relative;
      width: 200px;

      &::before {
        border-radius: 50%;
        left: var(--gap-s);
        position: absolute;
        top: var(--gap-s);
        z-index: 1;
      }

      &.Sortable-selected .ContentSelector-search figcaption {
        background: unset;
      }

      .ContentSelector-search {
        border: 0;
        margin: 0;
        max-width: none;
        overflow: unset;
        padding-right: unset;
        padding-top: calc(var(--Icon-size) + var(--gap-s) * 3);
        width: calc(100% - var(--Icon-size) - var(--gap-s) * 2 - var(--gap-xs));

        .is-boxedInput & {
          padding: calc(var(--Icon-size) + var(--gap-s) * 3) 0
            calc(var(--gap-s) - 1px) 0;
        }

        &::before,
        &::after {
          margin-top: calc(var(--Icon-size) + var(--gap-s) * 3);
          z-index: 1;
        }

        &::before {
          background: var(--color-white);
          border-bottom-left-radius: unset;
          content: '';
          height: calc(var(--gap-s) * 2 + var(--Icon-size));
          position: absolute;
          right: 0;
          top: 0;
          transition: all var(--time-s) var(--ease-out);
          width: calc(var(--gap-s) * 2 + var(--Icon-size));
        }

        &:hover::before {
          background: var(--color-dominant2);
          border-radius: 50%;
          right: 0;
          top: 0;
        }

        &::after {
          right: var(--gap-s);
          top: var(--gap-s);
        }

        &:focus {
          background: unset;
        }

        figure {
          padding-bottom: calc(var(--Text-height) * 2 + var(--gap-xs));
          position: relative;
          width: 100%;

          img {
            background-color: var(--color-white);
            box-shadow: var(--shadow-1);
            height: 150px;
            object-fit: contain;
            width: 100%;
          }

          figcaption {
            background: var(--color-white);
            bottom: 0;
            -webkit-box-orient: vertical;
            color: unset;
            display: -webkit-box;
            font-style: unset;
            height: calc(var(--Text-height) * 2);
            left: 0;
            overflow: hidden;
            position: absolute;
            right: 0;
            white-space: nowrap;
          }
        }

        .RCS-caption {
          -webkit-box-orient: vertical;
          display: -webkit-box;
          height: calc(var(--Text-height) * 2 + var(--gap-xs));
          -webkit-line-clamp: 2;
          overflow: hidden;
          padding-top: var(--gap-xs);
          white-space: pre-wrap;
        }

        .RCS-placeholderCard {
          background: var(--color-white);
          box-shadow: var(--shadow-1);
          height: 150px;
        }
      }

      .ContentSelector-search + .ContentSelector-edit {
        margin-left: var(--gap-xs);
        position: absolute;
        top: calc(var(--RCS-markerSize) + var(--gap-s) * 2);
      }

      .MultiSortable-buttonToggle {
        position: absolute;
        right: calc(var(--gap-s) * 3 + var(--gap-xs) + var(--Icon-size));
      }

      .RCS-remove {
        position: absolute;
        right: var(--gap-s);
        top: unset;
      }
    }
  }
}
