/*
 * 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.
 */

.layout {
  display: flex;
  designer {
    flex-grow: 1;
  }
}

.palette-and-or-toolbar {
  .toolbar {
    position: relative;
    height: calc(~"100vh - 105px");
    background-color: #fff;
    overflow-y: scroll;
    z-index: 40;
    box-shadow: 0 0 10px 2px @navbar-default-border;

    &:after {
      position: absolute;
      content: '';
      width: 1px;
      top: 0;
      bottom: 0;
      right: 0;
      background-color: @navbar-default-border;
    }

    .list-group-item {
      @active-border-width: 4px;
      padding-top: 10px + @active-border-width;
      padding-bottom: 9px + @active-border-width;
      border-left: none;
      border-radius: 0;

      &:first-child {
        border-top: none;
      }
      &.active {
        border-right: none;
        border-color: @list-group-border;
        border-bottom: @active-border-width solid @brand-primary;
        background-color: #fff;
        color: @list-group-link-color;
        padding-bottom: 10px;
      }
    }
  }
  
  #palette-controls-button {
    margin-right: -2px;  // not sure why the default -1px doesn't work to merge the borders?
  }

  .pane-nav-row {
    border: solid 1px @gray-lighter;
    border-top: none;
    border-radius: 5px;
    margin-top: -5px;
    padding: 12px 5px 4px 5px;
    display: flex;
    
    .filters {
        flex: 1 1 auto;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        
        max-height: 27px;  // if things wrap hide them
        &.multiline {      // unless toggled multiline
            max-height: max-content; 
        }
        
        .spacer {
            flex: 0 0.5 1ex;
        }
    }
    
    .nav-row-item {
      color: @gray-light;
      flex: 0 0 auto;
      margin: 6px 3px;
      &.tool {
        margin-top: 4px;
      }
      cursor: hand;
    }
    .nav-row-item:hover {
        color: @brand-primary;
    }
    span[uib-dropdown] {
        align-self: start;
    }

    a[aria-expanded="true"] {
        > div.nav-row-item {
            color: @brand-primary;
        }
    }
    
    .spacer {
        flex: 1 1 2em;
    }
    
    .right-align-icon {
        position: absolute;
        left: auto;
        right: 0;
    }
  }
}

.pane {
  position: absolute;
  top: 50px;
  bottom: 0;
  background-color: #fff;
  z-index: 40;
  overflow-y: scroll;

  &.pane-palette {
    left: 49px;
    width: 440px;
    box-shadow: 5px 0 10px -2px @navbar-default-border;

    .palette-title {
        margin-left: 0;
        margin-right: 0;
    }    
    
    &, .palette-full-height-wrapper {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      margin-left: 0;
      margin-right: 0;
    }
    
    h3 {
      color: @gray-light;
    }
    br-svg {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }

  &.pane-configuration {
    right: 0;
    box-shadow: 5px 0 10px 5px @navbar-default-border;

    & > ui-view > ui-view {
      display: block;
      width: 489px;
    }

    .pane-palette .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .container-fluid {
      padding: 0;
    }

    .add-panel {
        display: flex;
        flex-direction: column;
        > .spec-parent {
            flex: 0 0 auto;
        } 
        > .add-panel-main {
            flex: 1 1 auto;
            display: flex;
            flex-direction: row;
            .toolbar {
                flex: 0 0 auto;
            }
            .pane-palette {
                flex: 1 1 auto;
            }
        }
    }
    
    .spec-parent {
      a {
        background-color: @gray-lighter;
        padding: 15px 45px 15px 15px;
        position: relative;
        color: @gray-light;
        font-style: italic;
        display: block;
        transition: color 0.3s ease;
        .text-overflow();

        &:after{
          content: '\f112';
          font-family: FontAwesome;
          position: absolute;
          right: 15px;
          color: @gray-light;
          transition: color 0.3s ease;
        }
        &:hover {
          color: @gray;
          &:after {
            color: @gray;
          }
        }
      }
    }

    // panel classes are added by use of accordion toggle in palette
    // we also use these classes for spec editor and others
    // (would be nice to refactor so we use our own classes instead)
    .panel-group {
      margin-bottom: 0;
      .panel {
        border-bottom: 1px solid @gray-lighter;
        margin: 0 12px;
        border-radius: 0;
        box-shadow: none;
        .panel-heading {
          padding: 15px 3px 15px 3px;
        }
        .panel-title {
          font-size: 16px;
          font-weight: 400;
        }
        .panel-body {
          padding: 0;
          border: none !important;
          margin-bottom: 24px;
        }
      }
      .panel-title > a,
      .panel-title > a:hover,
      .panel-title > a:focus:hover {
        background: none;
        color: @gray-light;

        .collapsible-action {
          padding-left: 2px;
          padding-right: 6px;
          margin-top: 1px;
        }
        .collapsible-action, a.collapsible-action {
          color: @gray-light;
        }
        .collapsible-action:active, a.collapsible-action:active,
        .collapsible-action:hover, a.collapsible-action:hover,
        .collapsible-action:focus, a.collapsible-action:focus {
          color: @gray;
        }
      }
    }
  }
}