/*
    Flux Schema Explorer -- Tree View
    ----------------------------------------------------------------------------
*/

$flux-tree-min-width: 250px;
$flux-tree-indent: 26px;
$flux-tree-line: 2px;
$flux-tree-max-filter: 220px;
$flux-tree-gutter: 11px;

.flux-schema-explorer {
  width: 100%;
  height: 100%;
  background-color: $g2-kevlar;
  min-width: $flux-tree-min-width;

  .fancy-scroll--view > .flux-schema-tree .flux-schema--expander {
    margin-left: 9px;
  }
}

.flux-schema-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-left: 0;
  > .flux-schema--children > .flux-schema-tree {
    padding-left: $flux-tree-indent;
  }
}

.flux-schema-tree--error {
  color: $c-pineapple;
}

.flux-schema--children.hidden {
  display: none;
}

.flux-schema-tree__empty {
  height: $flux-tree-indent;
  display: flex;
  align-items: center;
  padding: 0 $flux-tree-gutter;
  font-size: 12px;
  font-weight: 600;
  color: $g8-storm;
  font-style: italic;
}

.flux-schema--expander {
  width: 10px;
  height: 10px;
  padding: 0 10px;
  position: relative; // Plus Sign
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: $g11-sidewalk;
    width: $flux-tree-indent / 3;
    height: $flux-tree-line;
    transition: transform 0.25s ease, background-color 0.25s ease;
  } // Vertical Line
  &:after {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

.flux-schema-item--expandable {
  &:hover {
    cursor: pointer;
  }
}

.flux-schema--item {
  position: relative;
  height: $flux-tree-indent;
  display: flex;
  align-items: center;
  padding: 0 $flux-tree-gutter;
  padding-left: 0;
  font-size: 12px;
  font-weight: 600;
  color: $g11-sidewalk;
  white-space: nowrap;
  transition: color 0.25s ease, background-color 0.25s ease;
  > span.icon {
    position: absolute;
    top: 50%;
    left: $flux-tree-indent / 2;
    transform: translate(-50%, -50%);
  }
  &:not(.no-hover):hover {
    color: $g17-whisper;
    background-color: $g4-onyx;
    .flux-schema--expander:before,
    .flux-schema--expander:after {
      background-color: $g17-whisper;
    }
  }
  .expanded > & {
    color: $c-pool;
    .flux-schema--expander:before,
    .flux-schema--expander:after {
      background-color: $c-pool;
    }
    .flux-schema--expander:before {
      transform: translate(-50%, -50%) rotate(-90deg);
      width: $flux-tree-line;
    }
    .flux-schema--expander:after {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    &:hover {
      color: $c-laser;
      .flux-schema--expander:before,
      .flux-schema--expander:after {
        background-color: $c-laser;
      }
    }
  }
  &.readonly,
  &.readonly:hover {
    padding-left: $flux-tree-indent + 8px;
    background-color: transparent;
    color: $g11-sidewalk;
    cursor: default;
  }
  .increase-values-limit {
    margin-left: 8px;
    padding: 0 $flux-tree-gutter;
  }
  .no-results {
    margin-left: 8px;
    font-style: italic;
    color: $g9-mountain;
  }
}

.flux-schema--child .flux-schema--item {
  border-radius: 4px 0 0 4px;
}

.flex-schema-item-group {
  display: flex;
  flex: 1 0 0;
  align-items: center;
}

.flex-schema-item-group button {
  margin-left: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;

  .flux-schema--item:hover & {
    opacity: 1;
  }
}

.flux-schema-copy {
  color: $g11-sidewalk;
  display: inline-block;
  opacity: 0;
  transition: opacity 0.25s ease;
  margin-left: 8px;
  .flux-schema--item:hover & {
    opacity: 1;
  }
  > span.icon {
    margin-right: 3px;
  }
  &:hover {
    color: $g15-platinum;
  }
}

@keyframes skeleton-animation {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.flux-schema--item-skeleton {
  background: linear-gradient(60deg, $g4-onyx 0%, $g4-onyx 35%, $g6-smoke 50%, $g4-onyx 65%, $g4-onyx 100%);
  border-radius: 4px;
  height: 60%;
  background-size: 400% 400%;
  animation: skeleton-animation 1s ease infinite;
}

// Tree Node Lines
.flux-schema--child:before,
.flux-schema--child:after {
  content: '';
  background-color: $g4-onyx;
  position: absolute;
}

// Vertical Line
.flux-schema--child:before {
  top: 0;
  left: $flux-tree-indent / 2;
  width: $flux-tree-line;
  height: 100%;
}

.flux-schema--child:last-child:before {
  height: $flux-tree-indent / 2;
}

// Horizontal Line
.flux-schema--child:after {
  top: $flux-tree-indent / 2;
  left: $flux-tree-indent / 2;
  width: $flux-tree-indent / 2;
  height: $flux-tree-line;
}

/*
    Controls
    ----------------------------------------------------------------------------
*/

.flux-schema--controls {
  padding: $flux-tree-gutter;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flux-schema--filter {
  display: flex;
  position: relative;
  padding-left: $flux-tree-indent;
  padding-right: $flux-tree-gutter;
  align-items: center;
  height: 30px;

  &:before,
  &:after {
    content: '';
    background-color: $g4-onyx;
    position: absolute;
  }
  // Vertical Line
  &:before {
    top: 0;
    left: $flux-tree-indent / 2;
    width: $flux-tree-line;
    height: 100%;
  }
  // Horizontal Line
  &:after {
    top: $flux-tree-indent / 2;
    left: $flux-tree-indent / 2;
    width: $flux-tree-indent / 2;
    height: $flux-tree-line;
  }

  & > input.form-control.input-xs {
    max-width: $flux-tree-max-filter;
    font-size: 12px;
  }
}

// Hints
.flux-schema--type {
  color: $g11-sidewalk;
  display: inline-block;
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.25s ease;
  .flux-schema--item:hover & {
    opacity: 1;
  }
}

.flux-schema--header {
  display: flex;
  align-items: center;
  padding-right: 11px;

  > .flux-schema--filter {
    flex: 1 0 0;
    max-width: $flux-tree-max-filter + $flux-tree-indent + $flux-tree-gutter;
  }
}

.flux-schema--count {
  font-size: 12px;
  color: $g11-sidewalk;
  font-weight: 600;
  height: 22px;
  line-height: 22px;
  border-radius: 11px;
  background-color: $g4-onyx;
  padding: 0 8px;
  @include no-user-select();
}

/*
    Spinner
    ----------------------------------------------------------------------------

    From http: //tobiasahlin.com/spinkit/.
*/

.loading-spinner .spinner {
  width: 25px;
  text-align: center;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.loading-spinner .spinner > div {
  width: 8px;
  height: 8px;
  background-color: $c-pool;
  border-radius: 50%;
  animation: sk-bouncedelay 1s infinite ease-in-out both;
}

.loading-spinner .spinner .bounce1 {
  animation-delay: -0.32s;
}

.loading-spinner .spinner .bounce2 {
  animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
