/***************
 * Header bars *
 ***************/
 %titlebar,
 headerbar {
   padding: 0 6px;
   min-height: 38px;
   background: $headerbar_color;
   color: $headerbar_fg_color;
   border-radius: 0;
   &:backdrop {
     border-color: $backdrop_borders_color;
    // background-image: none;
 
     transition: $backdrop_transition;
   }
 
   .title {
     font-weight: bold;
     padding-left: 12px;
     padding-right: 12px;
   }
 
   .subtitle {
     font-size: smaller;
     padding-left: 12px;
     padding-right: 12px;
 
     @extend .dim-label;
   }
  
   entry { min-height: 24px;}  
   
   %linked-header {
     border-radius: 0;
     border-right-style: none;
     box-shadow: none;
     &:first-child {
       border-top-left-radius: 6px;
       border-bottom-left-radius: 6px;
     }
 
     &:last-child {
       border-top-right-radius: 6px;
       border-bottom-right-radius: 6px;
       border-right-style: solid;
     }
 
     &:only-child {
       border-radius: 6px;
       border-style: solid;
     }
   }
   %linked-button {
     @extend %linked-header;
     &:active, &:checked {
       background:  transparentize(darken($_sidebar_color, 3%), 0.07);
       color: lighten($headerbar_fg_color, 5%);
       border-bottom: 1px solid $selected_bg_color;
       &:backdrop{
         color: $backdrop_selected_fg_color;
         label{
           color: $backdrop_selected_fg_color;
         }
       }
     }
   }
   .linked > button {
     @extend %linked-button;
   }
   .linked > button:hover,
   .linked > button:backdrop { @extend %linked-header; }
   // End reset style

  & splitbutton.image-button {
    > button:not(.toggle) { 
      border-radius: 6px 0px 0px 6px;
    }
     menubutton.popup button.toggle {
      border-radius: 0px 6px 6px 0px ;
    }
  }
 
   .path-bar-box {
    .dim-label {
      color: transparent;
      margin-right: -6px;
    }
    button {
      @extend %linked-button;
      &:last-child {
        margin-left: -1px;
        border-radius: 0px;
        &:active, &:checked {
          border-radius: 0px 6px 6px 0px;
        }
      }
      &:first-child {
        border-radius: 6px 0px 0px 6px;
        &:active, &:checked {
          border-radius: 6px;
        }
      }
    }
    widget > .text-button:last-child{
      border-radius: 0px 6px 6px 0px;
      background:  transparentize(darken($_sidebar_color, 3%), 0.07);
      color: lighten($headerbar_fg_color, 5%);
      border-bottom: 1px solid $selected_bg_color;
      &:backdrop, &:backdrop label {
        color: $backdrop_selected_fg_color;
      }
      &:only-child{
        border-radius: 6px;
      } 
    }
  }

 
   &.selection-mode {
     button {
       &:backdrop {
         &.flat, & {
           &:active,
           &:checked {
             //@include button(backdrop-active, $selected_bg_color, $selected_fg_color);
             label{
               color:$backdrop_selected_bg_color;
             }
             border-color: $selected_borders_color;
           }
         }
       }
     }
 
   }
 
   .tiled &,
   .maximized & {
     &.titlebar {
       @if $variant == 'light' { box-shadow: none; }
       @else { box-shadow: inset 0 -1px $bottom_highlight; }
     }
     &:backdrop, & { border-radius: 0; }
   } // squared corners when the window is maximized or tiled
 
   &.default-decoration {
     padding: 5px 4px; 
     min-height: 20px;
 
     button.titlebutton {
       min-height: 20px;
       min-width: 20px;
       margin: 0;
       padding: 0;
     }
   }
 }
 
 headerbar {
   // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
   entry,
   spinbutton,
   separator:not(.sidebar),
   button,
   menubutton {
     margin-top: 3px;
     margin-bottom: 3px;
   }
   // Reset margins for buttons inside menubutton
   menubutton > button,
   spinbutton > button,
   splitbutton > button,
   splitbutton > menubutton {
     margin-top: 0px;
     margin-bottom: 0px;
   }
 
   switch {
     margin-top: 0;
     margin-bottom: 0;
   }
   separator { background: transparent; }
 }
 
 .background:not(.tiled):not(.maximized) .titlebar {
   @if $variant == 'light' { box-shadow: inset 0 1px $top_highlight; }
   @else { box-shadow: inset 0 1px $top_highlight,inset 0 -1px $bottom_highlight; }
 
 
   &:backdrop, & {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
   }
 }
 
 headerbar {
   window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
   window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 4px; }}
 
   window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 4px; }}
 }

 window {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
 
 .titlebar:not(headerbar) {
   window.csd > & {
     // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
     padding: 0;
     background-color: transparent;
     background-image: none;
     border-style: none;
     border-color: transparent;
     box-shadow: none;
   }
 
   > separator {
    &, &:backdrop {
      background: $headerbar_color;
    }
   }
 
   @extend %titlebar;
 }
 
 .titlebar{
   @extend %titlebar;
 }

// Gnome 45
.sidebar-pane, .content-pane {
  .top-bar {
    &, headerbar {
      background-color: $headerbar_color;
    }
  }
}

.top-bar { background-color: transparent; }