// ********************************************
// container definition
$shuttle: #{$prefix}-shuttle;

$shuttle-wrapper: #{$shuttle}-wrapper;
$shuttle-header: #{$shuttle}-header;
$shuttle-list: #{$shuttle}-list;
$shuttle-list-item: #{$shuttle}-list-item;
$shuttle-footer: #{$shuttle}-footer;

$shuttle-searchbox: #{$shuttle}-search-box;
$shuttle-infinte-scroll-indicator: #{$shuttle}-infinite-scroll-indicator;

// ********************************************
// dimsum component classes
$DSBreadcrumb: #{$prefix}-breadcrumb;
$DSInputAddonWrapper: #{$prefix}-input-addon-wrapper;
$DSButton: #{$prefix}-button;
$DSInput: #{$prefix}-input;

// ********************************************
// shuttle variables
$shuttle-wrapper-width: space(xxl) * 4.6875;
$shuttle-wrapper-height: space(xxl) * 4.65;
$shuttle-list-item-height: space(l) * 1.125;
$shuttle-list-item-hover-color: color(brand-primary, 100);
$shuttle-searchbox-height: space(m) * 1.2;

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 color(brand-primary, 600);
  }
  50% {
    box-shadow: 0 0 5px 0 color(brand-primary, 600);
  }
  100% {
    box-shadow: 0 0 0 0 color(brand-primary, 600);
  }
}

@mixin link-button {
  color: color(brand-primary, 600);
  background-color: transparent;
  border: $theme-base-border-style transparent;
  cursor: pointer;
}

@mixin truncate-text($size) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: $size;
}

// ********************************************
// elements definition
$move-all-panel-el: #{$shuttle}__move-all-panel;

$list-width: space(xxl) * 4.6875;
$list-height: space(xxl) * 4.65;
$searchbox-height: space(m) * 1.2;
$item-list-height: space(l) * 1.125;
$hover-color: color(brand-primary, 100);
$border-style: $theme-base-border-style color(neutral, 100);

.#{$shuttle} {
  @include center();
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4em 0;
  height: 100%;
}

.#{$shuttle}__empty-container {
  height: 100%;
  @include center();
  span {
    color: color(neutral, 300);
  }
}

.#{$shuttle-wrapper} {
  position: relative;
  min-width: space(xxl) * 3;
  width: 100%;
  height: 100%;
  max-width: $shuttle-wrapper-width;

  .#{$shuttle-header} {
    height: space(m) * 1.25;
    display: flex;

    &__breadcrumb {
      overflow: hidden;
      align-self: center;
      flex: 1;
      padding: 4px 0;

      .#{$DSBreadcrumb} {
        width: 100%;
        ol {
          margin: 0;
        }
      }
    }
  }

  .#{$shuttle-list} {
    flex: 1 1 50%;
    position: relative;
    border: $theme-base-border-style color(neutral, 200);
    padding: 0;
    min-height: $list-height;
    height: 100%;
    overflow: hidden;
    width: 100%;
    margin: 0 0 space(xxs) 0;

    &__overflow {
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      transition: top duration(base) easing(base), height duration(base) easing(base);
      &--searching {
        top: $searchbox-height;
        height: calc(100% - #{$searchbox-height});
      }

      &--empty {
        top: 0;
      }
    }

    &__panel {
      width: space(xxl) * 0.8; // 50px
      background-color: color(neutral, 000);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 1px;
      transition: transform duration(fast) easing(base);
      transform: translateX(space(xxl));
      z-index: 1;
      box-shadow: depth(100);

      .#{$DSButton} {
        width: 100%;
        height: 100%;
      }

      &--open {
        transform: translateX(0px);
      }
    }
    &__loading-list,
    &__empty-message {
      animation: fadeIn ease 1s;
      -webkit-animation: fadeIn ease 1s;
      -moz-animation: fadeIn ease 1s;
      -o-animation: fadeIn ease 1s;
      -ms-animation: fadeIn ease 1s;
    }
    &__loading-list {
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    &__empty-message {
      height: 100%;
      @include center();
      color: color(neutral, 500);
    }

    &--show-pulse {
      animation: pulse 0.5s infinite;
      animation-iteration-count: 1;
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }

  .#{$shuttle-footer} {
    display: flex;
    height: space(m) * 0.833;
    align-items: center;

    &__actions {
      flex: 1;
    }

    &__counter {
      flex: 1;
      text-align: right;
    }
  }

  &:first-child {
    margin-right: 16px;
  }
}

.#{$shuttle-list-item} {
  display: grid;
  grid-template-columns: auto min-content;
  align-items: center;
  overflow: hidden;
  position: relative;
  border-bottom: $border-style;
  background-color: color(neutral, 000);
  z-index: 999;

  &.drag-helper {
    border: $border-style;
  }

  &__parent-helper-text {
    margin-left: space(xs);
    color: color(brand-primary, 700);
  }

  &__content {
    display: grid;
    align-items: center;
    grid-template-columns: min-content minmax(0px, min-content) auto;
    height: space(l) * 1.125;
    padding-left: space(xs);
    padding-right: space(xs);
    border-left: 4px solid color(neutral, 100);
    cursor: default;
    pointer-events: none;
    span.shuttle-tooltip-text {
      cursor: pointer;
      pointer-events: all;
    }

    .gripper {
      pointer-events: all;
      margin-right: space(xs);
    }

    &--checked {
      border-left-color: color(brand-primary, 600);
    }

    &--can-hover {
      cursor: pointer;
      pointer-events: all;
      &:hover {
        background-color: $hover-color;
      }
    }
  }

  &__icon-wrapper > span {
    margin-right: space(xs);
  }

  &__actions {
    display: flex;

    .#{$DSButton} {
      @include link-button;
      height: $item-list-height;
      width: $item-list-height;
      border-left: $border-style;

      svg,
      svg:not([fill]) {
        fill: color(brand-primary, 600);
      }

      &:hover:not(:disabled) {
        background-color: $hover-color;
      }

      &:disabled {
        cursor: auto;
        svg {
          opacity: 0.3;
        }
      }
    }
  }

  //span {
  //  margin-top: space(xxs);
  //  @include truncate-text(315px)
  //}
}

.#{$shuttle-searchbox} {
  position: absolute;
  width: 100%;
  z-index: 10;
  background-color: color(neutral, 000);
  height: $searchbox-height;
  top: ($searchbox-height * -1);
  border-bottom: $border-style;
  align-items: center;
  transition: duration(base) easing(base);

  .#{$DSInputAddonWrapper} {
    border: none;
    width: 100%;

    &__addon {
      &::before {
        content: none;
      }
    }
  }

  .#{$DSInput} {
    border: none;
  }

  input {
    flex: 1;
    border: none;
  }
  &--opened {
    //transform: translateY(0px);
    top: 0;
  }
}

.#{$shuttle-infinte-scroll-indicator} {
  position: absolute;
  width: 100%;
  z-index: 10;
  background-color: color(neutral, 000);
  height: space(m) * 1.5;
  bottom: -43px;
  border-top: $border-style;
  align-items: center;
  transition: duration(slower) easing(out);
  &--opened {
    transition: duration(slower) easing(in);
    bottom: 0;
  }
}