
/*******************
 * Pop Header bars *
 *******************/

$_backdrop_headerbar_bg_color: desaturate($color: $headerbar_bg_color, $amount: 3%);
$_backdrop_headerbar_fg_color: transparentize($headerbar_fg_color, 0.2);
$_headerbar_button_bg_color: lighten($headerbar_bg_color, 6%);
$_headerbar_button_backdrop_bg_color: darken($headerbar_bg_color, 4%);

%titlebar,
headerbar {
  padding: 0 6px;
  min-height: 46px;
  border-width: 1px 0px 0px;
  border-style: solid;
  border-color: lighten($color: $headerbar_bg_color, $amount: 10%);
  border-radius: 0;
  color: $headerbar_fg_color;
  
  @include headerbar_fill();

  label .title {
    color:$headerbar_fg_color;
  }

  &:backdrop {
    background-color: $_backdrop_headerbar_bg_color;
    border-color: lighten($color: $_backdrop_headerbar_bg_color, $amount: 10%);
  }

  .maximized &,
  .fullscreen & {
    border-width: 0px;
  }

  button,
  button.image-button,
  button.image-button.toggle,
  button.text-button,
  button.toggle,
  box button.toggle,
  buttonbox.toggle,
  stackswitcher button,
  filechooser .path-bar.linked>button,
  .path-bar button {
    $_button_border_color: darken($_headerbar_button_bg_color, 8%);
    @include button(normal, $_headerbar_button_bg_color, $headerbar_fg_color);
    border-color: $_button_border_color;
    border-bottom-color: darken($color: $_button_border_color, $amount: 8%);
    

    &.flat {
      @include button(undecorated);
      border: none;
    }

    &:hover {
      @include button(hover, lighten($headerbar_bg_color, 4%), $headerbar_fg_color);
    }

    &:active,
    &:checked,
    &.toggle:checked,
    &.toggle:active {
      $_bg: lighten($headerbar_bg_color, 1%);
      @include button(active, $_bg, $headerbar_fg_color);
      border-color: $dark_neutral_grey_700;
      background-image: image(darken($_bg, 9%));
    }

    &:backdrop {
      &.flat,
      & {
        @include button(backdrop, $_backdrop_headerbar_bg_color, $_backdrop_headerbar_fg_color);

        border-color: $_headerbar_button_backdrop_bg_color;

        &:active,
        &:checked {
          $_bg: if($variant=='light', darken($_backdrop_headerbar_bg_color, 9%), lighten($_backdrop_headerbar_bg_color, 2%));
          @include button(backdrop-active, $_bg, $_backdrop_headerbar_fg_color);
          border-color: $_headerbar_button_backdrop_bg_color;
        }

        &:disabled {
          @include button(backdrop-insensitive, $_backdrop_headerbar_bg_color, $_backdrop_headerbar_fg_color);

          border-color: lighten($color: $_button_border_color, $amount: 15%);

          &:active,
          &:checked {
            @include button(backdrop-insensitive-active, $_backdrop_headerbar_bg_color, $_backdrop_headerbar_fg_color);

            border-color: lighten($color: $_button_border_color, $amount: 15%);
          }
        }
      }
    }

    &:disabled {
      @include button(insensitive, $headerbar_bg_color, $headerbar_fg_color);
      border-color: lighten($color: $_button_border_color, $amount: 15%);

      &:active,
      &:checked {
        @include button(insensitive-active, $headerbar_bg_color, $headerbar_fg_color);
      }
    }

    // Suggested and Destructive Action buttons, need to overwrite them again here
    // copied from common, disabled buttons bg color changed to match the headerbar
    @each $b_type,
    $b_color in (suggested-action, $suggested_bg_color),
    (destructive-action, $destructive_color) {
      &.#{$b_type} {
        @include button(normal, $b_color, $selected_fg_color);

        &.flat {
          @include button(undecorated);

          color: $b_color;
        }

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

        &:active,
        &:checked {
          @include button(active, $b_color, $selected_fg_color);
        }

        &:backdrop,
        &.flat:backdrop {
          @include button(backdrop, $b_color, $selected_fg_color);

          &:active,
          &:checked {
            @include button(backdrop-active, $b_color, $selected_fg_color);
          }

          &:disabled {
            @include button(backdrop-insensitive, if($variant=='light', darken($headerbar_bg_color, 15%), $headerbar_bg_color), $_backdrop_headerbar_fg_color);

            &:active,
            &:checked {
              @include button(backdrop-insensitive-active, $b_color, $selected_fg_color);
            }
          }
        }

        &.flat {

          &:backdrop,
          &:disabled,
          &:backdrop:disabled {
            @include button(undecorated);

            color: transparentize($b_color, 0.2);
          }
        }

        &:disabled {
          @include button(insensitive, if($variant== "light", darken($headerbar_bg_color, 15%), $headerbar_bg_color), $headerbar_fg_color);

          &:active,
          &:checked {
            @include button(insensitive-active, $b_color, $selected_fg_color);
          }
        }

        .osd & {
          @include button(osd, $b_color);

          &:hover {
            @include button(osd-hover, $b_color);
          }

          &:active,
          &:checked {

            &:backdrop,
            & {
              @include button(osd-active, $b_color);
            }
          }

          &:disabled {

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

          &:backdrop {
            @include button(osd-backdrop, $b_color);
          }
        }
      }
    }
  }
  entry:disabled {
    color: rgba($fg_color, 0.8);
  }

  // Also include backdrop styling, because they turn white in :backdrop
  separator {
    background: image(darken($headerbar_bg_color, 5%));

    &:backdrop {
      background: image(darken($headerbar_bg_color, 3%));
    }
  }

  menu separator,
  popover separator {
    background: image($borders_color); //fix because of inheritance
  }

  @if $variant=='light' {
    switch {
      $_switch_border_color: darken($_headerbar_button_bg_color, 8%);
      border-color: $borders_color;
      color: $headerbar_fg_color;
      background-color: $_headerbar_button_bg_color;
      &:hover { background-color: lighten($_headerbar_button_bg_color, 2%); }
      &:backdrop {
        background-color: lighten($headerbar_bg_color,1%);
        box-shadow: none;
      }
      &:disabled {
        background-color: $headerbar_bg_color;
        border-color: $borders_color;
      }
      &:backdrop {
        border-color: $_switch_border_color;
      }
  
      &:checked {
        color: $selected_fg_color;
        border-color: transparentize($checkradio_bg_color, 0.6);
        background-color: $checkradio_bg_color;
      }
  
      slider {
        border-color: $_headerbar_button_bg_color;
        
        &:checked {
          border-color: $checkradio_bg_color;
        }
        &:disabled {
          background-color: $headerbar_bg_color;
          border-color: $borders_color;
          @include button(insensitive, $headerbar_bg_color);
        }
      }      
    }
  }

  // re-insert the full selection mode section from common ...
  .selection-mode &,
  &.selection-mode {
    $_hc: mix($top_hilight, $suggested_bg_color, 50%); // hilight color

    color: $selected_fg_color;
    border-color: $suggested_border_color;

    @include headerbar_fill($suggested_bg_color);

    separator {
      background: image(lighten($suggested_bg_color, 5%));
    }

    &:backdrop {
      background-color: $suggested_bg_color;
      background-image: none;
      box-shadow: inset 0 1px mix($top_hilight, $suggested_bg_color, 60%);

      label {
        text-shadow: none;
        color: $selected_fg_color;
      }
    }

    button,
    button.image-button,
    button.image-button.toggle,
    button.text.button,
    button.toggle,
    box button.toggle,
    buttonbox.toggle,
    stackswitcher button,
    filechooser .path-bar.linked>button,
    .path-bar button {
      @include button(normal, $suggested_bg_color, $selected_fg_color);

      &.flat {
        @include button(undecorated);
      }

      &:hover {
        @include button(hover, $suggested_bg_color, $selected_fg_color);
      }

      &:active,
      &:checked,
      &.toggle:checked,
      &.toggle:active {
        @include button(active, $suggested_bg_color, $selected_fg_color);
      }

      &:backdrop {

        &.flat,
        & {
          @include button(backdrop, $suggested_bg_color, $selected_fg_color);

          border-color: lighten($suggested_bg_color, 5%);

          &:active,
          &:checked {
            @include button(backdrop-active, $suggested_bg_color, $selected_fg_color);

            border-color: $suggested_border_color;
          }

          &:disabled {
            @include button(backdrop-insensitive, $suggested_bg_color, $selected_fg_color);

            border-color: $suggested_border_color;

            &:active,
            &:checked {
              @include button(backdrop-insensitive-active, $suggested_bg_color, $selected_fg_color);

              border-color: $suggested_border_color;
            }
          }
        }
      }

      &.flat {

        &:backdrop,
        &:disabled,
        &:backdrop:disabled {
          @include button(undecorated);
        }
      }

      &:disabled {
        @include button(insensitive, $suggested_bg_color, $selected_fg_color);

        &:active,
        &:checked {
          @include button(insensitive-active, $suggested_bg_color, $selected_fg_color);
        }
      }

      &.suggested-action {
        @include button(normal);

        border-color: $suggested_border_color;

        &:hover {
          @include button(hover);

          border-color: $suggested_border_color;
        }

        &:active {
          @include button(active);

          border-color: $suggested_border_color;
        }

        &:disabled {
          @include button(insensitive);

          border-color: $suggested_border_color;
        }

        &:backdrop {
          @include button(backdrop);

          border-color: $suggested_border_color;
        }

        &:backdrop:disabled {
          @include button(backdrop-insensitive);

          border-color: $suggested_border_color;
        }
      }
    }

    .selection-menu {

      &:backdrop,
      & {
        border-color: transparentize($suggested_bg_color, 1);
        background-color: transparentize($suggested_bg_color, 1);
        background-image: none;
        box-shadow: none;
        min-height: 20px;
        padding: 5px;
        
        // FIXME: This causes errors, so we're removing it, but I want to keep
        // it in case there's something bad that happens if we remove it.
        // arrow {
        //   -GtkArrow-arrow-scaling: 1;
        // }

        .arrow {
          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
          color: transparentize($selected_fg_color, 0.5);
          -gtk-icon-shadow: none;
        }
      }
    }
  }
}

paned.titlebar > separator {
  color: darken($headerbar_bg_color, 5%);
  background: image(darken($headerbar_bg_color, 5%));
  background-color: darken($headerbar_bg_color, 5%);

  &:backdrop {
  color: darken($headerbar_bg_color, 3%);
  background: image(darken($headerbar_bg_color, 3%));
  background-color: darken($headerbar_bg_color, 3%);
  }
}

// Development versions of apps to use a differently styled headerbar

window.devel {
  headerbar.titlebar {
    $c: darken($headerbar_bg_color, 10%);
    $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
               linear-gradient(to right, transparent 65%, transparentize($highlights_orange, 0.8)),
               linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%));
    @if $variant == 'dark' {
      $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
                 linear-gradient(to right, transparent 65%, transparentize($highlights_orange, 0.9)),
                 linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
    }

    background: $headerbar_bg_color $gradient;

    &:backdrop {
      background: $headerbar_bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
                  image($headerbar_bg_color); /* background-color would flash */
    }
  }
}

/*****************
 * Title buttons *
 *****************/

 windowcontrols {
  border-spacing: 6px;

  &:not(.empty) {
    &.start:dir(ltr),
    &.end:dir(rtl) {
      margin-right: 7px;
    }

    &.start:dir(rtl),
    &.end:dir(ltr) {
      margin-left: 7px;
    }
  }

  button {

    background-image: none;

    border-radius: 9999px;
    padding: 2px;
    margin: 0 2px;
    min-width: 0;
    min-height: 0;
    border: none;
    box-shadow: none;
    transition-duration: 100ms;

    &:hover {
      background-image: none;
      background-color: transparentize($color: $headerbar_fg_color, $amount: 0.5);
      transition-duration: 100ms;
    }

    &:active,
    &:checked {
      background-image: none;
      background-color: transparentize($color: $headerbar_fg_color, $amount: 0.7);
      transition-duration: 100ms;
    }
    
    &:backdrop {
      background-image: none;
      background-color: transparent;
      transition-duration: 100ms;
    }

    &.close {
      background-color: $close_button_color;
      transition-duration: 100ms;

      &:hover {
        background-color: transparentize($color: $headerbar_fg_color, $amount: 0.6);
        transition-duration: 100ms;
      }

      &:active,
      &:checked {
        background-color: transparentize($color: $headerbar_fg_color, $amount: 0.8);
        transition-duration: 100ms;
      }

      &:backdrop {
        background-color: transparent;
        transition-duration: 100ms;
      }
    }
    
  }
}

headerbar button.appmenu.popup.toggle {

  &,
  &:backdrop {
    @include button(undecorated);
  }

  &:hover {
    @include button(hover, lighten($headerbar_bg_color, 8%), $headerbar_fg_color);
  }

  &:active, &:checked {
    $_bg: lighten($headerbar_bg_color, if($variant==light, 0%, 1%));
    @include button(active, $_bg, $headerbar_fg_color);
    border-color: $borders_color;
    background-image: image(darken($_bg, 9%));
  }
}

// with a flatter headerbar and buttons, we dont need that heavy shadows in the headerbar
headerbar * {
  text-shadow: none;
  -gtk-icon-shadow: none;
}
// same for the rest of the theme, but not axe the icon shadows, otherwise things don't work
* {
  text-shadow: none;
}

/**********
 * Switch *
 **********/
 switch {

  // similar to the .scale
  border: 0px solid transparent;
  border-radius: 999px;
  color: $fg_color;
  background-color: rgba($fg_color, 0.4);
  box-shadow: 0 1px 3px 0 rgba(black, 0.5) inset;
  text-shadow: 0 1px transparentize(black, 0.9);

  &:checked {
    color: $selected_fg_color;
    border-color: transparent;
    background-color: $checkradio_bg_color;
    text-shadow: 0 1px transparentize($checkradio_bg_color, 0.5),
                 0 0 2px transparentize(white, 0.4);
  }

  &:disabled {
    color: $insensitive_fg_color;
    border-color: transparent;
    background-color: rgba($fg_color, 0.2);
    box-shadow: none;
    text-shadow: none;

    &:checked {
      background-color: rgba($checkradio_bg_color, 0.5);
    }
  }

  &:backdrop {
    color: $backdrop_fg_color;
    border-color: transparent;
    background-color: rgba($fg_color, 0.2);
    text-shadow: none;
    transition: $backdrop_transition;
    box-shadow: 0 1px 2px 0 rgba(black, 0.3) inset;

    &:checked {
      @if $variant == 'light' { color: $backdrop_bg_color; }
      border-color: transparent;
      background-color: rgba($checkradio_bg_color, 0.7);
    }

    &:disabled {
      color: $backdrop_insensitive_color;
      border-color: $backdrop_borders_color;
      background-color: rgba($fg_color, 0.1);
      box-shadow: none;

      &:checked {
        background-color: rgba($checkradio_bg_color, 0.5);
      }
    }
  }

  slider {
    margin: 3px;
    min-width: 20px;
    min-height: 20px;
    border: 0px solid transparent;
    border-radius: 999px;
    transition: $button_transition;
    box-shadow: none;

    @if $variant == 'light' {
      @include button(normal);
      border-width: 0px;
    } 
    @else {
      @include button(normal, $c: lighten($bg_color, 6%));
      border-width: 0px;
    }
  }
  
  image { color: transparent; } /* only show i / o for the accessible theme */

  &:hover slider {
    @if $variant == 'light' {
      @include button(hover);
      border-width: 0px;
      border-color: $bg_color;
      box-shadow: none;
    }
    @else {
      @include button(hover, $c: lighten($bg_color,6%));
      border-width: 0px;
      border-color: $bg_color;
      box-shadow: none;
    }
  }

  &:checked slider { border: 0px solid $bg_color; }

  &:disabled slider { @include button(insensitive); }

  &:backdrop {
    slider {
      transition: $backdrop_transition;

      @include button(backdrop);
    }

    &:checked slider { border-color: transparent; }

    &:disabled slider { @include button(backdrop-insensitive);
      border-color: $bg_color;
    border-width: 0px; }
  }

  row:selected & {
    @if $variant == 'light' {
      box-shadow: none;
      border-color: $selected_borders_color;

      &:backdrop { border-color: $selected_borders_color; }

      slider { &:checked, & { border-color: $selected_borders_color; } }
    }
  }

}

/*********
 * Scale *
 *********/
 scale {
  > trough > slider {

    border: 1px solid $progress_bg_color;
    background-image: none;
    background-color: $progress_bg_color;
    border-radius: 100%;
    box-shadow: 0 1px 0 rgba(black, 0.1);
    transition: $button_transition;
    transition-property: background, border, box-shadow;

    &:backdrop {
      border: 1px solid $progress_bg_color;
      background-image: none;
      background-color: mix($progress_bg_color, $bg_color, 60%);
      border-radius: 100%;
      box-shadow: 0 1px 0 rgba(black, 0.1);
      transition: $button_transition;
      transition-property: background, border, box-shadow;
    }

    &:hover { 
      background-image: none;
      background-color: $highlights_blue;
      border-color: $progress_bg_color;
      box-shadow: 0 1px 0 rgba(black, 0.1);
    }

    &:active { 
      background-color: $highlights_blue;
      border-color: $highlights_blue;
    }

    &:disabled { 
      background-image: none;
      background-color: mix($progress_bg_color, $bg_color, 50%);
      border-color: mix($progress_bg_color, $bg_color, 60%);
      box-shadow: none;

      &:backdrop {
        background-image: none;
        background-color: mix($progress_bg_color, $bg_color, 30%);
        border-color: mix($progress_bg_color, $bg_color, 50%);
        box-shadow: none;
      }
    }

    // ...on selected list rows
    row:selected & {  
      background-color: $selected_fg_color;
      border-color: $selected_fg_color;

      &:disabled {
        background-color: rgba($selected_fg_color, 0.6);
        border-color: rgba($selected_fg_color, 0.6);
      }
    }
  }

  row:selected & {
    > trough {
      @extend %scale_trough;

      background-color: transparentize($color: $selected_fg_color, $amount: 0.8);

      > fill,
      > highlight {
        @extend %scale_highlight;

        background-color: $selected_fg_color;
      }
    }
  }
}

/*************************
 * Check and Radio items *
 *************************/

checkbutton label {
  margin: 0 0 0 2px;
}

check,
radio {
  min-height: 12px;
  min-width: 12px;
  border: 0px solid transparent;
  transition: all 100ms $ease-out-quad;
  & {
    // for unchecked
    @each $state, $t in ("", "normal"),
                        (":hover", "hover"),
                        (":active", "active"),
                        (":disabled", "insensitive") {
      &#{$state} {
        @include check($t, $bg_color);
      }
    }
  }

  & {
    // for checked
    @each $t in (':checked'), (':indeterminate') {
      &#{$t} {
        @each $state, $t in ("", "normal"),
                            (":hover", "hover"),
                            (":active", "active"),
                            (":disabled", "insensitive") {
          &#{$state} {
            @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
          }
        }
      }
    }
  }
}

/************
 * Infobars *
 ************/

infobar {
  &.question {
    & > revealer > box,
    &.action:hover > revealer > box {
      border-bottom: 1px solid darken($color: $selected_bg_color, $amount: 10%);
      background-color: $selected_bg_color;
      color: $selected_fg_color;
    }
  }
  &.warning {
    & > revealer > box,
    &.action:hover > revealer > box {
      border-bottom: 1px solid darken($color: $warning_color, $amount: 10%);
      background-color: $warning_color;
      color: $selected_fg_color;
    }
  }
  &.error {
    & > revealer > box,
    &.action:hover > revealer > box {
      border-bottom: 1px solid darken($color: $error_color, $amount: 10%);
      background-color: $error_color;
      color: $selected_fg_color;
    }
  }

  button {
    @include button(normal);
    color: $selected_fg_color;
    background-image: image(transparent);
    border-color: transparentize($selected_fg_color, 0.8);

    &:backdrop {
      @include button(backdrop);
      background-image: image(transparent);
      border-color: transparentize($color: $selected_fg_color, $amount: 0.9);
    }

    &:hover {
      @include button(hover);
    }
  }
}

infobar .close,
searchbar .close {
  color: $selected_fg_color;

  &:hover {
    color: $fg_color;
  }
}

/*************************
 * Treeview Progressbars *
 *************************/

// Implemented to make progress bars in treeviews look nicer. 
// The the bars in the System Monitor for reference
treeview.view.trough,
treeview.view.progressbar {
  background: none;
  border-bottom: 3px solid transparent;
  background-color: transparent;
}

treeview.view.progressbar {
  background: none;
  background-color: transparent;
  border-bottom-color: $selected_bg_color;
}

treeview.view.progressbar:selected {
  background: none;
  background-color: transparent;
  border-bottom-color: $selected_fg_color;
}

treeview.view.trough {
  background: none;
  background-color: transparent;
  border-bottom-color: rgba($fg_color, 0.2);
}

treeview.view.trough:selected {
  background: none;
  background-color: transparent;
  border-bottom-color: rgba($selected_fg_color, 0.2);
}

treeview.view {
  color: $fg_color;
  background-color: $base_color;
}

treeview.view:selected {
  background: none;
  color: $selected_fg_color;
  background-color: $selected_bg_color;
}

/*************************
 * Scale trough contrast *
 *************************/

%scale_trough {
  border: 1px solid $dark_fill;
  border-radius: 3px;
  background-color: transparentize($fg_color, if($variant == "light", 0.9, 0.7));

  headerbar & { background-color: darken($dark_fill,8%); } //3504

  &:disabled {
   background-color: $insensitive_bg_color;
   border-color: $insensitive_borders_color;
  }

  // ...on selected list rows
  row:selected & {
    &:disabled, & {
      outline-color: $alt_focus_border_color;
      border-color: $selected_borders_color;
    }
  }

  // OSD
  .osd & {
    border-color: $osd_borders_color;
    background-color: transparentize($osd_borders_color, 0.2);

    &:disabled { background-color: $osd_insensitive_bg_color; }
  }
}
