_graph.sass

.graph-layout
  position: relative
  z-index: 0 // new stacking context "graph"
  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 $margin-x

  &__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(3)

  &__title
    color: $gray-800
    font-size: 15px
    font-weight: bold
    margin-bottom: space-x(0.25)

  &__code
    width: $legend-code-width
    height: $legend-code-height
    display: inline-block
    margin-right: space-x(2.5)
    border: 1px solid $gray-500


.graph-legend-nodes

  &__item
    display: inline-block

    &:first-child
      margin-top: space-x(0.75)

    &:not(:last-child)
      margin-bottom: space-x(0.5)
      margin-right: space-x(0.5)

    &--count
      color: $gray-800
      font-size: 12px
      font-weight: bold


  &__badge
    font-size: 13px
    white-space: normal
    word-break: break-word

    &--selected
      background-color: darken($light, 10%) // from Bootstrap "_badge.scss"


.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: #{ $section-margin / 2 }
  padding-top: $section-margin

  &__gap
    width: $item-margin
    display: inline-block

  &__section
    margin: #{ $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