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

  margin-top: 0;
}

.RTI-list > li,
.RTI-add {
  display: flex;
  flex: 2 1;
  margin-top: var(--gap-s);
  position: relative;

  > btu-input {
    flex: 2 1;
    width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));
  }
}

// Add the numbers to the left on OLs.
ol.RTI-list {
  counter-reset: RTI-list;

  > li,
  + .RTI-add {
    padding-left: calc(var(--RTI-markerSize) + var(--gap-s));

    &::before {
      align-items: center;
      background: var(--color-gray2);
      border-radius: 50%;
      content: '';
      display: inline-flex;
      height: var(--RTI-markerSize);
      justify-content: center;
      left: 0;
      margin-right: var(--gap-s);
      pointer-events: none;
      position: absolute;
      top: 0;
      width: var(--RTI-markerSize);
    }
  }

  > li {
    counter-increment: RTI-list;

    &::before {
      content: counter(RTI-list);
      transition: transform var(--time-s) var(--ease-out);
    }

    &.Sortable-selected {
      input[type='text'] {
        pointer-events: none;
      }

      &::before {
        background: var(--color-blue2);
      }
    }

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

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

ol.RTI-list > li.Sortable-chosen::before {
  color: var(--color-blue6);
  transform: translateZ(0) scale3d(0.85, 0.85, 1);
}

ol.RTI-list > li.Sortable-chosen > btu-input input[type] {
  border-bottom: none;
}

// Add and remove buttons.
.RTI-list > li > .RTI-remove,
.RTI-add > :is(span, a) {
  .IconButton;

  top: calc(var(--gap-xs) * -1);
  user-select: none;
}

.RTI-list > li > .RTI-remove {
  .IconButton.is-red;
  .Link;

  --IconButton-name: 'remove';
}

ol.RTI-list + .RTI-add::before {
  background: transparent;
  border: dashed 2px var(--color-gray2);
}

.RTI-add > :is(span, a) {
  --IconButton-name: 'add';
}

// Tint removing items red.
.RTI-list > li.is-removing {
  &::before {
    background: var(--color-red1);
    color: var(--color-red6);
  }

  > btu-input input[type='text'] {
    background: var(--color-red1);
    color: var(--color-red6);
    text-decoration: line-through;
  }

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

    --IconButton-name: 'add';
  }
}

.RTI-handle {
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: -1;
}

// Make the input area smaller on larger screens.
@media (@mq-m) {
  .RTI-list > li,
  .RTI-add {
    width: 75%;
  }
}

@media (@mq-l) {
  .RTI-list > li > .RTI-remove,
  .RTI-add > :is(span, a) {
    top: 0;
  }
}

@media (@mq-xl) {
  .RTI-list > li,
  .RTI-add {
    width: 50%;
  }
}
