@import "variables.scss";

#stock {
  flex: 1;
  position: relative;

  div.column-header {
    position: relative;
    text-align: center;
    margin-bottom: 5px;
    padding-top: 7px;
    text-align: right;

    div.view-switch {
      display: inline-block;
      padding-right: 12px;

      a.document-view {
        margin-right: 10px;
      }

      a.graph-view img {
        width: 20px;
        height: 20px;
        vertical-align: 2px;
      }
    }

    div.close-reordering-div {
      position: absolute;
      top: 5px;
      left: 10px;
    }
  }
}

#pinned-cotos-body {
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;

  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  padding-top: 18px;

  @media (#{$wide-viewport}) {
    display: flex;
    justify-content: center; 

    div.root-connections {
      min-width: 460px;
      max-width: 640px;
    }
  }

  div.root-connections > div.outbound-conn:last-child {
    padding-bottom: 50px; // margin-bottom won't work on Safari
  }

  #coto-graph {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;

    div.tools {
      display: inline-block;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 15;

      button {
        padding: 0 4px;
        height: 34px;
        line-height: 34px;
        background-color: rgba(255, 255, 255, 0.6);
        
        i {
          vertical-align: -8px;
        }
      }
    }

    div.loading-subgraphs {
      display: inline-block;
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 15;
    }

    #coto-graph-canvas {
      background-color: #fff;
      width: 100%;
      height: 100%;
    }

    &.full-open {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
    }
  }

  div.pinned-coto {
    margin-top: 10px;
    margin-bottom: 20px;
    animation-duration: 1s;

    & > div.coto-inner > div.coto-header {
      i.pinned {
        display: none;
      }
    }

    div.pin {
      position: relative;
      height: 10px;

      .pin {
        position: absolute;
        top: -12px;
        left: 0;

        i {
          font-size: 24px;
        }
      }

      span.pin {
        color: #aaa;
      }
    }

    div.linking-phrase-pin {
      position: relative;
      height: 10px;

      .linking-phrase-pin {
        position: absolute;
        top: -12px;
        left: 0;
        border: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
        background-color: #fff;
        padding: 3px 10px;
        opacity: 1;
        white-space: nowrap;
        max-width: 80%;
        overflow-x: hidden;
        text-overflow: ellipsis;
      }

      span.linking-phrase-pin {
        color: #aaa;
      }
    }

    &.blank > div.coto-inner > div.coto-header {
      min-height: auto; 
    }
  }
}

.full-viewport-graph-mode {
  #app-header,
  #main-nav,
  #main-flow,
  #stock div.column-header,
  #main-view-switch,
  div.open-column-button {
    display: none !important;
  }

  #app-layout {
    padding: 0;
  }

  #main-stock,
  #stock,
  #pinned-cotos-body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
