/*
 * Copyright 2015-2016 Imply Data, Inc.
 * Copyright 2017-2019 Allegro.pl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import '../../imports';

$toggle-width: 15px;
$toggle-icon-width: 12px;

$control-panel-height: 3 * $control-tile-height + 2px;

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

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

  .dimension-measure-panel {
    @include pin-left($left-panel-width);
  }

  .center-panel {
    @include for-small-screens {
      top: 0;
      bottom: 0;
    }

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

    .dimension-panel-toggle, .pinboard-toggle {
      @include css-variable(background-color, background-lightest);
      position: absolute;
      top: 0;
      height: $control-panel-height;
      width: $toggle-width;
      display: flex;
      align-items: center;
      cursor: pointer;

      svg {
        width: $toggle-icon-width;

        path {
          @include css-variable(fill, background-dark);
        }
      }
    }

    .dimension-panel-toggle {
      left: 0;
    }

    .pinboard-toggle {
      right: 0;
    }

    .center-top-bar {
      position: absolute;
      top: 0;
      //redefined in CENTER_PANEL_HEIGHT in cube-view.tsx
      height: $control-panel-height;
      left: $toggle-width;
      right: $toggle-width;

      .filter-split-section {
        @include unpin-full(0, $vis-selector-width + 1px, 0, 0);

        .filter-tile-row,
        .series-tile-row,
        .split-tile-row {
          height: $control-tile-height;
        }

        .filter-tile-row,
        .split-tile-row {
          margin-bottom: 1px;
        }

        .series-tile-row {
          border-radius: $corner 0 0;
        }

        .filter-tile-row {
          border-radius: 0 0 0 $corner;
        }
      }

      .vis-selector {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: $vis-selector-width;
        z-index: 8;
        border-radius: 0 $corner $corner 0;
      }
    }

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

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

        .visualization-root,
        .loader,
        .message {
          @include pin-full;
        }
      }

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

      .drag-mask {
        @include pin-full;
        z-index: 10;
      }
    }
  }

  .pinboard-panel {
    @include pin-right($pinboard-width);
    @include for-small-screens {
      margin-bottom: 0;
    }

    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;
      }
    }
  }

}
