.reorderableListing {
  display: flex;
  flex-direction: column;
  gap: var(--gap--md);
  background: transparent;
}

.reorderableListing__list {
  display: flex;
  flex-direction: column;

  /* Breathing room for the 1px drop-indicator outline at the first/last gap. */
  padding-top: var(--padding--line);
  padding-bottom: var(--padding--line);
}

.reorderableListing__row {
  display: flex;
  flex-direction: column;
  outline: none;
}

.reorderableListing__dropIndicator {
  &[data-drop-target='true'] {
    outline: 1px solid rgb(var(--border--controls-medium-selected--light));
  }
}

.reorderableListing__item {
  display: flex;
  flex-direction: row;
  gap: var(--gap--md);
  align-items: center;

  height: 48px;
  padding-top: var(--padding--sm);
  padding-right: var(--padding--sm);
  padding-bottom: var(--padding--sm);

  background-color: transparent;

  .reorderableListing__row:hover &,
  .reorderableListing__row[data-focus-visible='true'] &,
  .reorderableListing__row:focus-within & {
    background-color: rgb(var(--background--neutral-low-hovered--light));
  }
}

.reorderableListing__item--subitem {
  padding-left: var(--padding--lg);
}

.reorderableListing__item--hover {
  background-color: rgb(var(--background--neutral-low-hovered--light));
}

.reorderableListing__item--dragging,
.reorderableListing__row[data-dragging='true'] .reorderableListing__item {
  background-color: rgb(var(--background--controls-low-hovered--light));
}

.reorderableListing__item--disabled,
.reorderableListing__item--hidden {
  .reorderableListing__labelText,
  .reorderableListing__icon,
  .reorderableListing__handle {
    color: rgb(var(--foreground--neutral-medium-default--light));
  }
}

.reorderableListing__item--hidden .reorderableListing__actions .iconButton {
  color: rgb(var(--foreground--neutral-medium-default--light));

  &:hover {
    color: rgb(var(--foreground--neutral-full-default--light));
  }
}

.reorderableListing__handle {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  color: rgb(var(--foreground--neutral-full-default--light));
}

.reorderableListing__dragHandle {
  cursor: grab;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;
  padding: 0;

  color: inherit;

  background: none;
  border: none;
  outline: none;

  &[data-focus-visible='true'] {
    outline: 2px solid rgb(var(--border--controls-medium-selected--light));
    outline-offset: 2px;
  }

  &[data-dragging='true'] {
    cursor: grabbing;
  }

  &:disabled {
    cursor: default;
    color: rgb(var(--foreground--neutral-medium-default--light));
  }
}

.reorderableListing__marker {
  transform: translateY(-3px);
  color: rgb(var(--foreground--neutral-medium-default--light));
}

.reorderableListing__label {
  overflow: hidden;
  display: flex;
  flex: 1 0 0;
  gap: var(--gap--md);
  align-items: center;

  min-width: 0;
  height: 100%;
}

.reorderableListing__icon {
  flex-shrink: 0;
}

.reorderableListing__media {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.reorderableListing__labelText {
  overflow: hidden;
  flex: 1 0 0;

  min-width: 0;

  font-family: var(--fontFamily--body);
  font-size: var(--fontSize--body-large);
  line-height: var(--lineHeight--body-large);
  text-overflow: ellipsis;
  letter-spacing: var(--letterSpacing--body-large);
  white-space: nowrap;
}

.reorderableListing__actions {
  pointer-events: none;

  display: flex;
  flex-shrink: 0;
  gap: var(--gap--sm);
  align-items: center;

  margin-left: auto;

  opacity: 0;

  .reorderableListing__row:hover &,
  .reorderableListing__row[data-focus-visible='true'] &,
  .reorderableListing__row:focus-within & {
    pointer-events: auto;
    opacity: 1;
  }
}

.reorderableListing__item--hidden .reorderableListing__actions,
.reorderableListing__item--hover .reorderableListing__actions {
  pointer-events: auto;
  opacity: 1;
}

.reorderableListing__item--dragging .reorderableListing__actions,
.reorderableListing__row[data-dragging='true'] .reorderableListing__actions {
  pointer-events: none;
  opacity: 0;
}

.reorderableListing__footer {
  display: flex;
  align-items: center;
  width: 100%;
}