/* .smart-sortable */
.smart-sortable {
  display: block;

  .smart-sortable-items-parent {
    display: flex;
    flex-direction: column;
  }

  .smart-sortable-item {
    transform: translate(0, 0);
    position: relative;

    &.dragged {
      position: absolute;
      box-shadow: var(--smart-elevation-4);
      z-index: 9999999;
    }

    &.placeholder {

      &:before,
      &:after {
        content: none;
      }
    }
  }

  &:not([disabled]) {
    .smart-sortable-item {
      touch-action: none;
    }
  }

  &[disabled] {
    pointer-events: none;
    opacity: 0.7;
  }

  &:not([items]) {

    &.smart-container,
    >.smart-container {
      display: flex;
      flex-direction: column;
    }

    &[mode="horizontal"] {
      >.smart-container {
        flex-direction: row;
      }
    }
  }

  &[dragged] {
    >.smart-container {
      user-select: none;
    }
  }

  &[mode="horizontal"] {
    .smart-sortable-items-parent {
      flex-direction: row;
    }
  }

  &[handle-position="left"] {
    .smart-sortable-item {

      &:before,
      &:after {
        left: calc(-1 * var(--smart-sortable-handle-size)) !important;
      }
    }
  }

  &:not([animation="none"]) {
    .smart-sortable-item {
      transition: transform 0.15s ease-in;

      &.returning {
        transition: left 0.15s ease-in, top 0.15s ease-in;
      }
    }
  }

  &:not([drag-mode="handle"]) {
    &:not([disabled]) {
      .smart-sortable-item {
        cursor: grab;
      }
    }
  }

  &[drag-mode="handle"] {
    .smart-sortable-item {

      &:before,
      &:after {
        content: var(--smart-icon-ellipsis);
        position: absolute;
        left: 100%;
        top: calc(50% - var(--smart-sortable-handle-size) / 2);
        width: var(--smart-sortable-handle-size);
        height: var(--smart-sortable-handle-size);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-family: var(--smart-font-family-icon);
        font-size: var(--smart-font-size);
        line-height: calc(var(--smart-sortable-handle-size) - var(--smart-font-size) / 2);
        cursor: grab;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.2s ease-in, opacity 0.2s ease-in;
        color: var(--smart-background-color);
      }

      &:before {
        transform: rotate(-90deg);
      }

      &:after {
        transform: rotate(90deg);
      }

      &.dragged {

        &:before,
        &:after {
          visibility: visible;
          opacity: 0.5;
        }
      }
    }

    &:not([disabled]) {

      .smart-sortable-item:hover:before,
      .smart-sortable-item:hover:after {
        z-index: 9999999;
        visibility: visible;
        opacity: 0.5;
      }
    }

    &[handle-visibility="visible"] {
      &:not([disabled]) {

        .smart-sortable-item:before,
        .smart-sortable-item:after {
          visibility: visible;
          opacity: 0.5;
        }
      }
    }

    &[handle-position="bottom"],
    &[handle-position="top"] {
      .smart-sortable-item {

        &:before,
        &:after {
          left: calc(50% - var(--smart-sortable-handle-size) / 2);
          top: 100%;
          align-items: center;
          transform: none;
        }
      }
    }

    &[handle-position="bottom"] {
      .smart-sortable-item {
        &:after {
          align-items: flex-start;
        }
      }
    }

    &[handle-position="top"] {
      .smart-sortable-item {
        &:before {
          top: calc(-1 * var(--smart-sortable-handle-size));
        }

        &:after {
          top: calc(-1 * var(--smart-sortable-handle-size));
          align-items: flex-end;
        }
      }
    }
  }
}

@import 'rtl/_sortable';