@import '../../imports';

.link-view {
  .link-header-bar {
    @include pin-top($header-height);
  }

  .container {
    @include unpin-top($header-height);
  }

  .link-panel {
    @include pin-left($left-panel-width - $tile-margin-h);

    padding: $tile-margin-v $tile-margin-h;

    .link-container {
      background: $white;
      overflow: auto;
      padding-right: 10px;
      height: 100%;

      .link-group-title {
        padding: 0 18px;
        color: #999;
        font-size: 12px;
        text-transform: uppercase;
        pointer-events: none;
        margin-top: 8px;
        height: 25px;
        line-height: 25px;
      }

      .link-item {
        height: 25px;
        line-height: 25px;
        padding: 0 18px 0 38px;
        cursor: pointer;

        &.selected {
          background: rgba($brand, 0.16);
        }

        &:hover:not(.selected) {
          background: rgba($brand, 0.12);
        }
      }

    }

  }

  .center-panel {
    position: absolute;
    top: $tile-margin-v;
    bottom: $tile-margin-v;
    left: $left-panel-width;
    right: $pinboard-width;

    .center-top-bar {
      @extend %module;
      @include pin-top($control-tile-height + 1px + $control-tile-height);
      border-radius: $corner;
      padding: 17px 20px;
      border-bottom: 1px solid #eee;

      .link-title {
        font-size: 17px;
        margin-bottom: 8px;
      }

      .link-description {
        font-size: 13px;
        color: #999;
      }

      .right-align {
        position: absolute;
        min-width: 150px;
        right: $padding;
        top: $control-tile-height/ 2;
        bottom: $control-tile-height/ 2;
      }
    }

    .center-main {
      @include unpin-top($control-tile-height + 1px + $control-tile-height + $small-tile-margin);

      .visualization {
        @extend %module;
        @include pin-full;
        border-radius: $corner;

        .time-series,
        .table {
          @include pin-full;
        }
      }

      .manual-fallback {
        @include pin-full;
      }

      .drop-indicator {
        @include pin-full;
        z-index: 9;
      }
    }
  }

  .pinboard-panel {
    @include pin-right($pinboard-width);
    margin-bottom: $tile-margin-v - 1px;

    .pinboard-measure-tile,
    .dimension-tile,
    .placeholder-tile {
      &:first-child {
        border-radius: $corner $corner 0 0;
      }

      &:last-child {
        border-radius: 0 0 $corner $corner;
      }
    }
  }
}