/***************
 * 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;}  
  
  // button {
  //   //@include button(normal-header);
  //   // min-height: 22px;
  //   // margin-top: 8px;
  //   // margin-bottom: 8px;
  //   // box-shadow: none;
  //   // &.image-button{
  //   //    padding: 3px 4px;
  //   // }

      
  //     background-color: red;
  //   &:hover,
  //   &:active,
  //   &:checked {
  //     @include button(hover-header);
  //   }

  //   &:backdrop,
  //   &:disabled,
  //   &:backdrop:disabled {
  //     @include button(backdrop-header,red,transparentize($fg_color,0.8));
  //   }

  //   &:backdrop {
  //     &:hover,
  //     &:active,
  //     &:checked {
  //       @include button(hover-header,transparent,transparentize(white,0.7));
  //     }
  //   }

 

  //   @each $b_type, $b_color in (suggested-action, $cyan),
  //                              (destructive-action, $destructive_color) {
  //     &.#{$b_type} {
  //       font-weight: bold;
  //       min-height: 22px;
  //       margin-top: 8px;
  //       margin-bottom: 8px;
  //       border-radius: 4px;
  //       @include button(normal, $b_color, white);
  //       box-shadow: none;

  //       &:hover { @include button(hover, $b_color, white); }

  //       &:active { @include button(active, $b_color, white); }

  //       &:disabled {
  //         @include button(insensitive, $b_color, white);
  //         label {color: transparentize(white,0.5);}
  //       }

  //       &:backdrop {
  //         @include button(backdrop, $b_color, white);
  //         border-radius: 3px;
  //       }

  //       &:backdrop:disabled { @include button(backdrop-insensitive, $b_color, white); }

  //     }
  //   }

  //   //Reset style
  //   &.titlebutton {
  //     color: transparent;
  //     box-shadow: none;
  //     border: none;
  //     background-color: transparent;
  //     background-repeat: no-repeat;
  //     &:hover,
  //     &:active,
  //     &:checked,
  //     &:backdrop,
  //     &:backdrop:hover,* {
  //       color: transparent;
  //       box-shadow: none;
  //       background-color: transparent;
  //     }
  //   }
  // }
  %linked-header {
    border-radius: 0;
    border-right-style: none;
    box-shadow: none;
    // margin: 5px 0px;
    // min-height: 20px;
    &:first-child {
      border-top-left-radius: 1px;
      border-bottom-left-radius: 1px;
    }

    &:last-child {
      border-top-right-radius: 1px;
      border-bottom-right-radius: 1px;
      border-right-style: solid;
    }

    &:only-child {
      border-radius: 1px;
      border-style: solid;
    }
  }
  %linked-button {
    @extend %linked-header;
    &:active, &:checked {
      @extend %linked-header;
      @include button(hover-header);
      &:backdrop{
        @include button(hover-header,transparent,transparentize(white,0.7));
      }
    }

  }
  .linked > button {
    @extend %linked-button;
  }
  .linked > button:hover,
  .linked > button:backdrop { @extend %linked-header; }
  // End reset style


  &.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,
  entry > 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: 1px;
    border-top-right-radius: 1px;
  }
}

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: 1px; }}

  window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 1px; }}
}


.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: if($variant == 'light', linear-gradient(to bottom, #EAEAEA, #DBDBDB) , mix($base_color, darken($headerbar_color, 8%), 30%));
    }
  }

  @extend %titlebar;
}

.titlebar{
  @extend %titlebar;
}

// Gnome 45

.sidebar-pane, .content-pane {
  .top-bar {
    &, headerbar {
      background: transparent;
    }
  }
}

.sidebar-pane .top-bar  {
  background-color: $sidebar_bg_color;
  button.image-button.toggle {
    @include button(undecorated);
    &:hover { @include button(hover); }
    &:active, &:checked { @include button(active); }
  }
}

 .content-pane .top-bar {
  background-color: $bg_color;
}

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