.graph {

  overflow-x: hidden;

  .body.expanded {
    margin-right: -300px;
  }

  .graph-topbar {

    height: 5.6rem;
    background:#FFF;

    & > * {
      padding-bottom: $gutter / 4;
    }

    & > *:nth-child(2n) {
      border-left: 3px solid white;
      border-right: 3px solid white;
    }

    .proj-slider {
      margin-top: -5px;

      input {
        background-color: greys(5%);
        border: none;
        border: 1px solid #f0f0f0;
        border-left: 2px solid #9e9e9e;
        border-radius: 0;
        outline: none;
        font-size: 1em;
        box-shadow: none;
        transition: all .3s;
        overflow: auto;
        padding: 0rem 0.5rem 0rem 0.5rem;
        height: 20px;
        width: 38px;
      }
    }

    .projection {
      border-right-width: 4px;
      border-right-color: greys(10%); 
    }

    .toggle-projection-button {
      font-size: 3rem;
      line-height: 1em;
      @media screen and (max-width: 1260px) {
        display: none;
      }
    }
  }

  .control-buttons {
    $size: 2.6rem;;
    position: absolute;
    right: $gutter;
    top: $gutter;
    width: $size;
    .control-button {
      border: 1px solid #000;
      border-radius: 0;
      line-height: 1em;
      font-size: 1.9rem;
      width: $size;
      height: $size;
      padding: 0.21rem 0.21rem;
      margin-right: 0.2rem;
      &.zoom-plus {
        margin-bottom: 0px;
      }
      &.zoom-minus {
        margin-top: -1px;
      }
      &:hover {
        background-color: greys(5%);
      }
      &.selected {
        background-color: black;
        color: white;
      }
    }
    .separator {
      height: 1px;
      width: $size/2;
      margin-left: $size/4;
      border-top: 1px solid greys(20%);
    }
  }

  svg.map-editor {
    display:block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .legend {
      cursor: move;
      &.dragging {
        cursor: grab;
      }
    }
  }

}

.sidebar {

  border-right: 1px solid greys(20%);

  .content {
    @include flow(vertical, airy);
    @extend %padded;
  }

  .bottom-navbar {
    @include flow(middle, solid);
    padding: 0.1rem 1rem 0.1rem 1rem;
    height: 3rem;
    background-color: greys(10%);
    border-bottom: 1px solid greys(15%);

    div:nth-child(2) {
      text-align: right;
    }

    &.reverse {
      @extend .rtl;
    }

  }

  .settings {

    .accordion-trigger {
      & {
        color: greys(70%);
        font-size: 1em;
      }
      padding: $gutter/2 $gutter/2 $gutter/2 $gutter/2;
      border-bottom: 1px solid greys(40%);
    }

  }

}




