@use "../colors" as c;
@use "font-size";

@mixin sort-manager() {
  .actions {
    display: flex;
    justify-content: flex-end;

    button {
      margin-left: 0.5rem;
    }

    .bigadd {
      background-color: c.$fernGreen;
      color: c.$white;
    }

    .bigcancel {
      background-color: c.$crimson;
      color: c.$white;
    }
  }

  .content {
    padding-top: 0.5rem;
  }

  .sortable-items {
    list-style-type: none;
    .item {
      background-color: c.$culturedGrey;
      border-radius: 4px;
      box-sizing: border-box;
      cursor: pointer;
      margin: 10px 0.3rem 0 0;
      opacity: 1;
      padding: 1rem;
      vertical-align: middle;

      .fa {
        vertical-align: top;
      }
      .details {
        @include font-size.font-size("small");
      }

      .title {
        display: inline-block;
      }

      &.dragging-item {
        opacity: 0.3;
      }
      &.dragged-above {
        border-top: 0.7rem solid c.$orange;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: 0.3rem 1rem 1rem 1rem;
      }
      &.dragged-below {
        border-bottom: 0.7rem solid c.$orange;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding: 1rem 1rem 0.3rem 1rem;
      }
      &.dragged-below,
      &.dragged-above {
        &.dragging-item {
          border: none;
          padding: 1rem;
          opacity: 1;
        }
        * {
          pointer-events: none;
        }
      }
    }
  }
}
