/*
==========================================================================
common components sortable container
==========================================================================
*/
.mars-sortable-wrapper {
  .sortable-container {
    padding: 0;
    overflow: auto;
    position: relative;
    z-index: 0;

    input[type="text"], input[type="number"] {
      padding: 2px 10px;
      height: 26px;
      background: color("cumulus");
      color: color("black2");
      border: 1px solid color("manatee");
      @include border-radius(0);
    }

    .mars-select .multiselect-container {
      min-width: initial !important;
    }

    .btn-add,
    .btn-hand,
    .btn-deletecell {
      width: $icon-large;
      height: 26px;
      display: block;
    }

    .btn-add {
      padding: 1px 3px;
    }

    .btn-deletecell {
      border: 1px solid color("manatee");
      background-color: color("dodger-blue");
      position: unset;
    }

    .stickyHeader {
      background: color("white");
      position: sticky;
      top: 0;
      z-index: 1;
      width: 100%;
      display: block;
    }

    .sortable-row-content {
      position: relative;
      clear: both;
    }

    .sortable-row {
      margin-top: 2px;

      &:first-child {
        margin-top: 0;
      }

      position: relative;
      z-index: 0;
    }

    .sortable-row-title {
      height: $icon-large;
    }

    .sortable-row-top-title {
      .sortable-group {
        .sortable-column {
          .data {
            background: color("pattens-blue");
            text-align: center;
            border: none;
            padding: 3px 10px;
            font-family: $base-font-semibold;
          }

          &:first-child .data {
            @include linear-gradient(#e2e2e2, #f3f2f2);
          }
        }
      }
    }

    .sortable-item {
      min-height: 26px;
    }

    .sortable-column {
      a {
        text-decoration: underline;
        color: color("black2");
      }
    }

    .sortable-column-title {
      padding: 0;
      -ms-grid-template-columns: auto;
      grid-template-columns: auto;
      text-align: center;
      background: color("tropical-blue");

      .data {
        height: $icon-large;
        padding: 5px 10px;
        background: color("tropical-blue");
        border: none;
      }

      &.is-add-button {
        display: -ms-grid;
        display: grid;
        padding: 0;
        -ms-grid-template-columns: auto 30px;
        grid-template-columns: auto 30px;

        .btn-add {
          padding: 3px 3px;
          left: unset;
          height: $icon-large;
          position: relative;
        }
      }
    }

    .sortable-group {
      display: -ms-grid;
      display: grid;
      -ms-grid-template-columns: auto auto;
      grid-template-columns: auto auto;
      grid-column-gap: 2px;
      margin-top: 2px;

      &:first-child {
        margin-top: 0;
      }
    }

    .is-add-button {
      position: relative;
      padding-left: 30px;

      .btn-add {
        position: absolute;
        left: 0;
        top: 0;
        float: none;
      }

      /* default drag and drop child grid upto 3 group but you can remove this as your need */
      .group2 {
        -ms-grid-template-columns: 210px auto;
        grid-template-columns: 210px auto;
      }

      .group3 {
        -ms-grid-template-columns: 210px 1fr 1fr 54px 1fr;
        grid-template-columns: 210px 1fr 1fr 54px 1fr;
      }

      /* ----------------------------------------------- end */
    }

    .data {
      height: 26px;
      color: color("black");
      cursor: pointer;
      white-space: nowrap !important;
      text-overflow: ellipsis;
      overflow: hidden;
      background: color("white");
      border: 1px solid $c-border;
      padding: 2px 10px;
    }

    .data-checkbox {
      height: 26px;
      padding: 0 10px;
      @include flexbox();
      justify-content: center;
      background: color("white");

      .mars-checkbox {
        margin: 0;
        display: block;
      }
    }

    .data-input {
      display: -ms-grid;
      display: grid;

      &.is-hand-button { /* check */
        -ms-grid-template-columns: 30px auto;
        grid-template-columns: 30px auto;
      }

      &.is-hand-delete-button {
        -ms-grid-template-columns: 30px auto 30px;
        grid-template-columns: 30px auto 30px;

        .btn-deletecell {
          border-left: none !important;
        }

        .form-control {
          border-right: none !important;
        }
      }
    }


    .predefineData {
      height: 26px;
      color: color("black");
      padding: 2px 10px;
      color: $c-black2;
      border: 1px solid $c-border;
      @include linear-gradient(#e2e2e2, #f3f2f2);
    }

    /* default drag and drop child grid upto 3 group but you can remove this as your need*/
    .group1 {
      -ms-grid-template-columns: 200px auto;
      grid-template-columns: 200px auto;
    }

    .group2 {
      -ms-grid-template-columns: 240px auto;
      grid-template-columns: 240px auto;
    }

    .group3 {
      -ms-grid-template-columns: 240px 1fr 1fr 54px 1fr;
      grid-template-columns: 240px 1fr 1fr 54px 1fr;
    }

    /* ----------------------------------------------- end */

    /* check option show  */
    .is-check {
      .data,
      .data-select {
        display: none;

        &.active {
          display: block;
        }
      }
    }

    /* sortable-container save & edit added by js */
    &.sortable-container--save {
      .data-edit {
        display: none;
      }

      .data-save {
        display: block;

        &.data-checkbox {
          @include flexbox();
        }
      }

      .is-check {
        .data-edit {
          display: none;

          &.active {
            display: none;
          }
        }

        .data-save {
          display: block;
        }
      }
    }

    &.sortable-container--edit {
      .data-edit {
        display: block;

        &.data-input {
          display: -ms-grid;
          display: grid;
        }

        &.data-checkbox {
          @include flexbox();
        }
      }

      .data-save {
        display: none;
      }

      .is-check {
        .data.data-edit,
        .data-select.data-edit {
          display: none;

          &.active {
            display: block;
          }
        }

        .data-save {
          display: none;
        }
      }
    }
  }

  .sortable-container--update {
    .sortable-row--top-title, .sortable-row--title {
      display: grid;
      gap: 0 2px;

      .sortable-column {
        display: flex;

        .data {
          flex-grow: 1;
        }
      }
    }
    .sortable-row--top-title div:first-child {
      background: linear-gradient(to bottom, #e2e2e2 0%, #f3f2f2 100%) !important;
    }
    .sortable-row--top-title div {
      background: #cce5ff;
      text-align: center;
      border: none;
      padding: 3px 10px;
      font-family: "SourceSansProSemiBold";
    }
    .btn-hand {
      background-color: #FFFFFF !important;
    }
    .btn-deletecell {
      background-color: #c2d7fd !important;
    }
    .data-input .form-control + .btn-deletecell {
      border-left: none;
    }
  }

  .sortable-container--update.sortable-container--edit .data-input.data-edit {
    display: flex;
  }
}
