/* ==========================================================================
   Config
   ========================================================================== */

$finder-indent-level-support: 10 !default;

.gui-finder-group {
  @apply mb-4 mx-2 mt-2;
}

.gui-finder-group-heading {
  @apply flex items-center mb-4;
}

.gui-finder-group-title {
  @apply block uppercase text-neutral-primary font-semi-bold text-xs px-3;
}

.gui-finder-group-meta {
  @apply ml-auto;
}

.gui-finder-item {
  @apply text-neutral-20 text-base;
}

.gui-finder-item-content {
  @apply flex h-10 mb-1 items-center;

  transition: height 200ms;
}

.gui-finder-item-content-folder {
  @apply h-8;
}

.gui-finder-item-active > .gui-finder-item-content {
  .gui-finder-item-content-inner {
    @apply bg-white text-blue-primary shadow-small;

    &:hover {
      @apply bg-white;
    }
  }

  .gui-finder-item-link {
    @apply text-blue-primary;

    .gui-icon path {
      fill: theme('colors.blue.primary');
    }
  }
}

.gui-finder-item-disabled {
  .gui-finder-item-link {
    @apply text-neutral-70;

    .gui-icon path {
      opacity: 0.3;
    }
  }

  .gui-finder-item-settings {
    @apply text-neutral-70;
  }
}

.gui-finder-item-content-hidden {
  @apply h-0 overflow-hidden;
}

.gui-finder-item-content-inner {
  @apply flex w-full h-full items-center pl-3 pr-2 rounded;

  min-width: 150px;

  &:hover {
    @apply bg-neutral-90;
  }

  .gui-form__input {
    @apply py-0 pl-3 pr-0;
  }
}

.gui-finder-item-settings {
  @apply ml-auto flex-shrink-0 pl-1 flex items-center text-neutral-primary;

  .gui-dropdown__content {
    @apply mt-0 -mr-2 text-neutral-20;
  }
}

.gui-finder-item-hover-settings {
  .gui-finder-item-settings {
    display: none;
  }

  &:hover {
    .gui-finder-item-settings {
      @apply flex;
    }
  }
}

.gui-finder-item-link {
  @apply no-underline text-neutral-20 flex-shrink w-full flex items-center cursor-pointer outline-none h-full truncate;
  
  &:hover {
    @apply no-underline;
  }
  
  .gui-icon {
    @apply mr-3;
  }
}

.gui-finder__separator {
  @apply bg-neutral-90 text-neutral-90 border-0 m-3;

  height: 2px;
}

/* ==========================================================================
   Drag and drop
   ========================================================================== */

.gui-finder-item-content--drag-wrapper {
  background-color: white;
  display: inline-flex;
  align-items: center;
  height: 35px;
  line-height: 35px;
  border-radius: $layout-spacing-base * 0.25;
  border: 1px solid $color-border-base;
}

.gui-finder-item.is-over.dragged-insert
  > .gui-finder-item-content
  .gui-finder-item-content-inner,
.gui-finder-item--selected > .gui-finder-item-content .gui-finder-item-content-inner {
  border: 2px solid $primary-blue;
  border-radius: 3px;
}

.gui-finder-item.is-over.dragged-top > .gui-finder-item-content,
.gui-finder-item.is-over.dragged-below > .gui-finder-item-content {
  border: none;
  border-radius: 0;
  padding: 0 $layout-spacing-base * 0.5;
  position: relative;

  .gui-finder-item-content-inner {
    position: relative;

    &::before,
    &::after {
      content: ' ';
      position: absolute;
      width: 6px;
      height: 6px;
      background: $primary-blue;
      border-radius: $layout-spacing-base;
      left: 0;
    }

    &::after {
      right: 0;
      margin-left: auto;
    }
  }
}

.gui-finder-item.is-over.dragged-top
  > .gui-finder-item-content
  .gui-finder-item-content-inner {
  border-top: 2px solid $primary-blue;
  top: -3px;
  padding-top: 3px;

  &::before,
  &::after {
    top: -4px;
  }
}

.gui-finder-item.is-over.dragged-below
  > .gui-finder-item-content
  .gui-finder-item-content-inner {
  border-bottom: 2px solid $primary-blue;
  margin-bottom: -5px;
  padding-bottom: 4px;

  &::before,
  &::after {
    bottom: -4px;
  }
}

/* ==========================================================================
   Indentation
   ========================================================================== */

@for $i from 1 through $finder-indent-level-support {
  $finderItemSelector: '.gui-finder-item';

  @for $l from 1 through $i {
    $finderItemSelector: '#{$finderItemSelector} .gui-finder-item';
  }

  #{$finderItemSelector}.gui-finder-item.is-over.dragged-insert
    > .gui-finder-item-content,
  #{$finderItemSelector}.gui-finder-item-selected > .gui-finder-item-content {
    padding-left: ($layout-spacing-base * 1.5 * $i) - ($layout-spacing-base * 0.5 * ($i - 1)) - 2;
  }

  #{$finderItemSelector} > .gui-finder-item-content,
  #{$finderItemSelector}.gui-finder-item.is-over.dragged-top > .gui-finder-item-content,
  #{$finderItemSelector}.gui-finder-item.is-over.dragged-below
    > .gui-finder-item-content {
    padding-left: ($layout-spacing-base * 1.5 * $i) - ($layout-spacing-base * 0.5 * ($i - 1));
  }
}