/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you 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 '../../../stylesheets/less/variables.less';

.dashboard-builder-sidepane {
  flex: 0 0 @builder-pane-width;
  position: relative;

  .dashboard-builder-sidepane-header {
    font-size: @font-size-l;
    font-weight: @font-weight-bold;
    border-top: 1px solid @gray-light;
    border-bottom: 1px solid @gray-light;
    padding: 16px;
    display: flex;
    align-items: center;
  }

  .trigger {
    font-size: @font-size-l;
    color: @almost-black;
    opacity: 1;
    margin-left: auto;
    cursor: pointer;
  }

  .slices-layer .trigger {
    margin-left: 0;
    margin-right: 20px;
  }

  .viewport {
    position: absolute;
    transform: none !important;
    overflow: hidden;
    width: @builder-pane-width;
    height: 100%;
    box-shadow: -4px 0 4px 0 fade(@darkest, @opacity-light);
  }

  .slider-container {
    position: absolute;
    background: @lightest;
    width: @builder-pane-width * 2;
    height: 100vh;
    display: flex;
    transition: all @timing-normal ease;

    &.slide-in {
      left: -@builder-pane-width;
    }

    &.slide-out {
      left: 0;
    }

    .slide-content {
      width: @builder-pane-width;
    }
  }

  .component-layer .new-component.static,
  .slices-layer .dashboard-builder-sidepane-header {
    cursor: pointer;
  }

  .component-layer {
    .new-component.static {
      cursor: pointer;
    }
  }

  .new-component-label {
    flex-grow: 1;
  }

  .chart-card-container {
    .chart-card {
      border: 1px solid @gray-light;
      font-weight: @font-weight-light;
      padding: 8px;
      margin: 0 8px 8px 8px;
      position: relative;
      cursor: move;
      background: fade(@lightest, @opacity-medium-light);
      white-space: nowrap;
      overflow: hidden;

      &:hover {
        background: @gray-bg;
      }
    }

    .card-title {
      margin-right: 60px;
      margin-bottom: 8px;
      font-weight: @font-weight-bold;
    }

    .card-body {
      display: flex;
      flex-direction: column;

      .item {
        span {
          word-break: break-all;

          &:first-child {
            font-weight: @font-weight-normal;
          }
        }
      }
    }

    .chart-card.is-selected {
      cursor: not-allowed;
      opacity: 0.4;
    }

    .is-added-label {
      background: @almost-black;
      color: @lightest;
      font-size: @font-size-s;
      line-height: @line-height-tight;
      text-transform: uppercase;
      position: absolute;
      padding: 4px 8px;
      top: 32px;
      right: 32px;
      pointer-events: none;
    }
  }

  .slice-adder-container {
    position: relative;
    background-color: white;
    min-height: 200px; /* for loader positioning */

    .error-message {
      padding: 16px;
    }

    .controls {
      display: flex;
      padding: 16px;

      /* the input is wrapped in a div */
      .search-input {
        flex-grow: 1;
        margin-right: 16px;
      }

      .dropdown.btn-group button,
      input {
        font-size: @font-size-m;
        padding: 7px 12px;
        height: 32px;
        border: 1px solid @gray-light;
      }

      input {
        width: 100%;

        &:focus {
          outline: none;
          border-color: @gray;
        }
      }
    }

    .ReactVirtualized__Grid.ReactVirtualized__List:focus {
      outline: none;
    }
  }
}