.itf-sortable {
  .hidden {
    display: none!important;
    visibility: hidden!important;
  }

  .itf-sortable-list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .up-source-item {
    opacity: 0.2;
  }

  .itf-sortable-list-mocked {
    position: relative;
  }

  .itf-sortable-list-mocked,
  .itf-sortable-list-mocked * {
    user-select: none;
  }

  .up-cursor-item {
    position: absolute;
    z-index: var(--zindex-dropdown);
    cursor: move;
    user-select: none;
  }

  .up-cursor-item-presentation {
    box-shadow: var(--pop-shadow);
  }

  &.up-cursor-item-white {
    .up-cursor-item-presentation {
      background-color: var(--bg-inverse);
    }
  }
}

.itf-sortable-y {
  --sortable-ws: 2rem;

  margin: 0 calc(var(--sortable-ws) / 2 * -1);

  //@include media-breakpoint-up(md) {
  //  margin: 0 calc(var(--sortable-ws) * -1);
  //}

  .itf-sortable-drag-icon {
    padding: calc(var(--sortable-ws) / 2);
    color: var(--text-2);
    pointer-events: all;
    line-height: 0;

    //@include media-breakpoint-up(md) {
    //  margin-right: var(--sortable-ws);
    //  padding: 0;
    //}
  }

  li {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    padding-right: calc(var(--sortable-ws) / 2);
    background: var(--bg-inverse);
    border-bottom: var(--border-base);
    pointer-events: none;

    //@include media-breakpoint-up(md) {
    //  padding: 1rem var(--sortable-ws);
    //  pointer-events: all;
    //}

    &:hover {
      cursor: grab;

      .itf-sortable-drag-icon {
        color: var(--brand-primary);
      }
    }
  }

  [sortable-skip='true'] {
    cursor: default;
    pointer-events: all;
  }
}
