.configuration-panel {
  
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  
  @include flow(vertical);
  @extend %padded;
  
  background-color: rgba(255, 255, 255, 0.9);
  //opacity: 0.96;
  
  max-height: 100%;
  
  &.split-view {
    max-height: 60%;
  }
  
  .titlebar {
    
    @include flow(space-between, solid);
    @extend %padded;
    
    border-bottom: 1px solid greys(30%);
    
    padding-top: $gutter;
    padding-bottom: $gutter;
    
    .title, .title .separator, .actions .iconfont {
      font-size: 1.2em;
      font-weight: blod;
      color: greys(70%);
    }
    
    .title .separator {
      color: greys(30%);
    }
    
    a, a:visited {
      color: color(text);
      text-decoration: none;
    }
    
    a:hover {
      transition: text-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1);
      text-shadow: rgba(125, 125, 125, 0.26) 1px 1px 1px;
      transition-delay: 0.05s;
    }
    
  }
  
  & > .body {
    
    @extend %padded;
    overflow-y: auto;
    padding-top: $gutter;
    padding-bottom: $gutter;
    
  }
  
  & > .footer {
    @include flow(right, middle, airy);
  }
}

.configuration-panel.layer {
  
  .title {
    font-size: 1.2em;
    text-transform: uppercase;
  }
  
  .grey-box {
    margin-top: -$gutter/2;
    margin-bottom: -$gutter/2;
    margin-left: -$gutter/2 !important;
    width: 10%;
    background-color: greys(20%);
  }
}

.configuration-panel.projection {

  .infos {
    border-right: 1px solid greys(40%);
  }
  
}

.configuration-panel {
  .value-break-input {
    width: 80px;
  }
}

