.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

    .toolbar-atlas-button
      // @XXX Glyphicon icons lack of homogeneous width
      //  ↳ empirically value matching every button icon width
      $toolbar-atlas-button-width: 40px

      width: $toolbar-atlas-button-width

  &__content
    width: 100%
    height: 100%


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

.graph-topbar
  @include aside-topbar

  display: flex
  padding-left: $topbar-item-margin
  padding-right: $topbar-item-margin

  &__toolbar,
  &__sidebar
    width: $topbar-fixed-button-width
    margin-left: $topbar-item-margin
    margin-right: $topbar-item-margin

  &__search
    width: $topbar-input-width
    margin-left: $topbar-item-margin
    margin-right: $topbar-item-margin

    [type="submit"]
      display: none

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

.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)

  &__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

  &__item

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

  &__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: 1rem

    position: absolute
    right: $position-x
    bottom: $position-y

  &__actions

    .b-button-group
      width: 100%
    .b-button
      width: 50%


.graph-neighborhood

  &__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: 1rem

    position: absolute
    right: $position-x
    bottom: $position-y

  &__badge
    white-space: normal
    word-break: break-word

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

  &__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 }

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

  &__section
    margin: #{ $section-margin / 2 }

    // 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 })


// 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