@use "sass:math";

.graph-layout {
  position: relative;
  z-index: 0;
  width: 100%;
  height: $layout-height;

  &__frame {
    @include fit-positions;

    position: absolute;
    display: flex;
    z-index: z-index("graph", "frame");
    width: 100%;
    height: $sidebar-height;
    justify-content: flex-end;
    pointer-events: none;

    @include right-handed {
      flex-direction: row;
    }


    @include left-handed {
      flex-direction: row-reverse;
    }
  }

  &__sidebar {
    width: $sidebar-width;
    height: inherit;
    flex-grow: 0;
    pointer-events: all;

    &__inner {
      position: fixed;
      height: inherit;
      width: inherit;

      @include right-handed {
        border-left: 1px solid $border-color;
      }


      @include left-handed {
        border-right: 1px solid $border-color;
      }
    }
  }

  &__focus {
    flex-grow: 1;
    pointer-events: all;
    position: relative;

    // (?) last resort solution to have a fixed scrollable child, with
    //     its dimension relative to its parent
    //     (flaw: no overflow)
    // contain: layout

    &__inner {
      @include fit-positions;

      position: absolute;
      background-color: $body-bg;
    }
  }

  &__toolbar {
    position: absolute;
    z-index: z-index("graph", "toolbar");
    background-color: $body-bg;

    // width: 100%
    border-bottom: 1px solid $border-color;

    .b-fieldset {
      background-color: $body-bg;

      // flex-grow: 1

      button {
        .b-icon {
          $button-icon-margin: 0.4em;

          @include right-handed {
            margin-right: $button-icon-margin;
          }


          @include left-handed {
            margin-left: $button-icon-margin;
          }
        }
      }
    }
  }

  &__content {
    width: 100%;
    height: 100%;
  }
}

/////////////////////////////////////////////

.graph-topbar {
  @include aside-topbar;

  display: flex;

  // padding: $grah-topbar-item-margin $topbar-item-margin $grah-topbar-item-margin 0

  &__toolbar,
  &__sidebar {
    // width: $topbar-fixed-button-width
    margin-top: $topbar-item-margin;
    margin-bottom: $topbar-item-margin;
    margin-left: $topbar-item-margin;
    margin-right: $topbar-item-margin;
    padding-left: $topbar-item-margin;
    padding-right: $topbar-item-margin;
  }

  &__search {
    width: $topbar-input-width;
    margin-top: $topbar-item-margin;
    margin-bottom: $topbar-item-margin;
    margin-left: $topbar-item-margin;
    margin-right: $topbar-item-margin;

    [type="submit"] {
      display: none;
    }

    .form-control {
      height: 2rem;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}

/////////////////////////////////////////////

.graph-doc-focus {
  @include term-window;

  &__header {
    // avoid overlap with document side controls
    @include right-handed {
      margin-left: space-x(4);
    }


    @include left-handed {
      margin-right: space-x(4);
    }
  }

  // remove document header top spacing due to the already presence of
  // the inner column top teaser
  .document-layout__header {
    padding-top: initial;
  }
}

/////////////////////////////////////////////

.graph-sidebar {
  @include term-window;

  $margin-x: $sidebar-tab-margin-x;
  $margin-y: space-x(2);

  &__close {
    position: absolute;
    right: 0;
    margin-right: space-x(3);
  }

  &__legend-tab {
    padding: $margin-y space-x(2);
  }

  &__data-tab {
    padding: $margin-y $margin-x;
  }

  &__community-tab {
    padding: $margin-y $margin-x;
  }

  &__separator {
    margin-top: $margin-y;
    margin-bottom: $margin-y;
    color: $gray-500;
    text-align: center;
  }
}

.graph-legend {
  $legend-code-width: 24px;
  $legend-code-height: 12px;

  &__item {
    display: flex;
    // align-items: baseline;
    list-style: none;
    position: relative;

    &:not(:first-child) {
      margin-top: space-x(0.25);
    }
  }

  &__title {
    // color: $gray-800;
    font-size: 15px;
    font-weight: bold;
    margin-top: space-x(0.5);
  }

  &__code {
    margin-right: space-x(1);
    border: 1px solid $gray-500;
    width: 62px;
    height: 60px;
    border-width: 1px;
    border-style: dashed;

    &:hover {
      border-style: solid;
      i {
        opacity: 0.8;
      }
    }

  }

  &__separator {
    fill: #B5B5B5;
  }

  &__params {
    margin: space-x(2);

    &__heading {
      font-weight: bold;
      list-style: none;
    }

    &__item {
      list-style: initial;
      margin-left: space-x(2)
    }
  }
}

.graph-legend-nodes {
  &__item {
    display: inline-block;

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

    &:not(:last-child) {
      margin-bottom: 0;
      margin-right: space-x(0.75);
    }

    &--count {
      color: $gray-800;
      font-size: 11px;
      font-weight: bold;
    }
  }

  &__badge {
    font-size: 12px;
    white-space: normal;
    word-break: break-word;

    &--selected {
      background-color: darken($light, 10%);
    }
  }
}

.graph-documentation {
  &__text-section {
    margin-bottom: space-x(3);
    font-size: 15px;
    line-height: 1.5;

    p {
      margin-bottom: space-x(1);
    }

    li {
      list-style-type: circle;
      padding-left: space-x(0.5);
      margin-left: space-x(3);
      line-height: 1.4;

      &:not(:last-child) {
        margin-bottom: space-x(1.5);
      }
    }
  }
}

.graph-selected-nodes {
  &__list {
    display: flex;
    gap: space-x(0.5);
    flex-wrap: wrap;
    padding-right: space-x(4);
  }

  &__badge {
    font-size: $font-size-base;
    white-space: normal;
    word-break: break-word;
  }

  &__expand {
    // Following <list-group-item> spacing
    $position-x: $list-group-item-padding-x;

    // Empirical: fit well with icon overlay
    $position-y: 0.75rem;

    position: absolute;
    right: $position-x;
    top: $position-y;
  }

  &__actions {
    .b-button-group {
      width: 100%;
    }

    .b-button {
      width: 50%;
    }
  }
}

.graph-neighborhood {
  &__parent {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
  }

  &__counter {
    font-weight: bold;
  }

  &__expand {
    // Following <list-group-item> spacing
    $position-x: $list-group-item-padding-x;

    // Empirical: fit well with icon overlay
    $position-y: 0.75rem;

    position: absolute;
    right: $position-x;
    top: $position-y;
  }

  &__badge {
    border: 1px solid;
    border-radius: space-x(0.75);
    white-space: normal;
    word-break: break-word;

    // Show on one line
    margin-right: space-x(0.75);
    margin-bottom: space-x(0.75);

    &:not(:last-child) {
      //margin-bottom: space-x(0.75);
    }

    .badge {
      // reduce bootstrap padding due to a vertical asymmetry (empirical)
      $padding-top: 0.15em;

      padding-top: $padding-top;
      color: inherit;
      background-color: rgba(0, 0, 0, 0);
    }
  }

  &__show-more {
    margin-top: space-x(2);
  }
}

.graph-doc-list {
  &__item {
    @include clickable;

    display: flex;
    align-items: flex-start;
    transition: $transition-base;

    &:hover {
      background-color: $gray-50;
    }

    &--selected::before {
      @include fit-positions;

      content: "";
      position: absolute;
      z-index: 1;
      width: 2px;
      background-color: $info;
    }

    // (following list group item border radius)
    &--selected:first-child::before {
      border-top-left-radius: $list-group-border-radius;
    }

    &--selected:last-child::before {
      border-bottom-left-radius: $list-group-border-radius;
    }

    &__main {
      flex-grow: 1;
      padding-right: $card-spacer-x;
    }

    &__title,
    &__source,
    &__date {
      line-height: 1.3;
      margin-bottom: space-x(0.5);
    }

    &__source {
      font-size: 15px;
      color: $gray-700;
    }

    &__date {
      font-size: 14px;
      color: $gray-600;
    }
  }
}

.graph-contact-list {
  &__item {
    &__title,
    &__subtitle {
      line-height: 1.3;
      margin-bottom: space-x(0.25);
    }

    &__subtitle {
      font-size: 15px;
      color: $gray-700;
    }
  }
}

/////////////////////////////////////////////

.graph-toolbar {
  $self: &;
  $section-margin: space-x(2);
  $item-margin: space-x(1);

  display: flex;
  padding: math.div($section-margin, 2);
  padding-top: $section-margin;

  &__gap {
    width: $item-margin;
    display: inline-block;
  }

  &__section {
    margin: math.div($section-margin, 4);

    // Selection settings
    &--selection {
      .b-fieldset__content {
        display: flex;
      }

      #{$self}__gap {
        width: #{$item-margin * 2};
      }

      .range-simple {
        flex-grow: 1;
      }
    }

    // Controls
    &--controls {
      .b-fieldset__content {
        position: relative;
      }

      #{$self}__gap {
        width: #{$item-margin * 2};
      }

      .range-control,
      .range-simple {
        // flex-basis: calc(50% - #{ $item-margin * 2 })
        flex-basis: 100%;
        min-width: 150px;
      }
    }
  }

  &__region_advanced {
    .btn-advanced.collapsed .b-icon {
      transform: rotate(180);
    }
  }
}

// Atlas button animation
.on-running-animation .b-icon {
  animation-name: pulse;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
