.toolbar {
  
  position: absolute;
  top:10px;
  right:10px;
  
  &-items li {
    
    cursor:pointer;
    
    width:32px;
    height:32px;

    display: flex;
    align-items: center;
    justify-content: center;
    
  }
  
  &-items {
    list-style: none;
    padding-left:0;
    margin:0;
  }

  &-items li {
    cursor:pointer;
    background-color: rgba(greys(50%), .5);

    &:not(:last-child){
      border-bottom:1px solid rgba(greys(50%), .5);
    }

    &:hover {
      background-color: rgba(greys(50%), .2);
    }
  }
  
}

.configuration-panel {
  
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  
  @extend %flow;
  @extend %vertical;
  @extend %padded;
  
  max-height: 100%;
  
  &.split-view {
    max-height: 50%;
  }
  
  .titlebar {
    
    @extend %flow;
    @extend %horizontal;
    @extend %space-between;
    @extend %padded;
    
    border-bottom: 1px solid greys(30%);
    
    padding-top: $gutter;
    padding-bottom: $gutter;
    
    .title, .title .separator.iconfont, .actions .iconfont {
      font-size: 1.2em;
      font-weight: blod;
      color: greys(70%);
    }
    
    .title .separator.iconfont {
      color: greys(30%);
    }
    
  }
  
  & > .body {
    
    @extend %padded;
    overflow-y: auto;
    padding-top: $gutter;
    padding-bottom: $gutter;
    
  }
  
  & > .footer {
    @extend %flow;
    @extend %horizontal;
    @extend %right;
    @extend %airy;
    @extend %middle;
  }
}

.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%);
  }
}



