// Color variables dependant on $headerbar_bg_color defined in _colors.scss
$_button_bg_color: lighten($headerbar_bg_color, 7.5%);
$_button_border_color: darken($headerbar_bg_color, 9%);
// deducted from the color used in common which is $backdrop_borders_color: mix($borders_color, $bg_color, 80%);
$_backdrop_button_border_color: darken($inkstone, 9%);

// overwriting the headerbar styling from common, for the inverted look in the ambiance theme

%titlebar,
headerbar {
  @include headerbar_fill($headerbar_bg_color);

  color: $headerbar_fg_color;
  border-color: $borders_color;

  .title,
  label.title {
    color: $headerbar_fg_color;
    &:backdrop { color: $backdrop_headerbar_fg_color; }
  }

  &.backdrop {
  }

  .maximized &,
  .fullscreen & {
    box-shadow: none;
  }

  entry {
    &,
    &:backdrop {
      border-color: darken($headerbar_bg_color, 8%);
    }

    &:focus { @include entry(focus); }
  }





  switch {
    border-color: $_button_border_color;
    color: $headerbar_fg_color;
    background-color: $_button_bg_color;

    &:checked {
      color: $selected_fg_color;
      border-color: $_button_border_color;
      background-color: $checkradio_bg_color;
    }

    &:disabled {
      color: $insensitive_fg_color;
      background-color: $headerbar_bg_color;
      border-color: $_button_border_color;
    }

    &:backdrop {
      color: $backdrop_fg_color;
      border-color: $backdrop_borders_color;
      background-color: lighten($backdrop_headerbar_bg_color, 2%);

      &:checked {
        color: $selected_fg_color;
        border-color: $_button_border_color;
        background-color: $checkradio_bg_color;
      }

      &:disabled {
        color: $backdrop_insensitive_color;
        background-color: $backdrop_headerbar_bg_color;
        border-color: $_backdrop_button_border_color;
      }
    }
  }

  switch, scale {
    &:checked {
      border-color: $checkradio_borders_color;
    }
    slider {
      @include button(normal, $_button_bg_color);
    }

    &:hover slider {
      @include button(hover, $_button_bg_color);
    }

    &:checked > slider { border-color: $_button_border_color; }

    &:disabled slider { @include button(insensitive, darken($headerbar_bg_color, 8%)); }

    &:backdrop {
      slider {
        @include button(backdrop, $_button_bg_color);
      }

      &, &:checked, &:disabled, &:checked:disabled {
        > slider { border-color: darken($_backdrop_button_border_color, 4%); box-shadow: none; }
      }

      &:checked > slider { border-color: $_button_border_color; }

      &:disabled slider { @include button(backdrop-insensitive, $_button_bg_color); }
    }
  }

  // TODO: Test separator
  // TODO: Test switches
}

windowcontrols button image {
  color: $headerbar_fg_color;
}

window.devel {
  headerbar.titlebar {
    $c: darken($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($selected_bg_color, 0.9)),
    linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));

    background: $bg_color $gradient;

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