// 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
headerbar,
.titlebar {
  @include headerbar_fill($headerbar_bg_color, $hc: $headerbar_border_color);
  color: $headerbar_fg_color;
  border-color: $borders_color;

  .title,
  label.title {
    color: $selected_fg_color;
        text-shadow: 0 1px #455d7c,0 -1px #455d7c, -1px 0px #455d7c,  1px 0px #455d7c;
    &:backdrop { color: darken($borders_color, 15%); text-shadow:none; }
  }

  &.backdrop {
  }

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

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

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

 

  separator {
    background: image(lighten($_button_border_color, 5%));
    &:backdrop {
      background: image($_backdrop_button_border_color);
    }
  }

  // Re-style switches because they are drawn on a dark headerbar
  switch {
    border-color: $_button_border_color;
    color: $headerbar_fg_color;
    background-color: $_button_bg_color;

    &:hover { background-color: lighten($_button_bg_color, 2%); }

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

      &,
      &:checked { border-color: darken($_backdrop_button_border_color, 4%); }

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

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

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

  // Re-style sliders for switches and scales do make them look sharp on the dark headerbar
  switch, scale {
    slider {
      &:checked {
        border-color: $checkradio_borders_color;
      }
      &:backdrop {
        @include button(backdrop-alt, $_button_bg_color);

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

      &:not(:checked) {
        border-color: $_button_border_color;
      }
      &:disabled {
        @include button(insensitive, darken($headerbar_bg_color, 8%));
      }
    }
  }

  // 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, $_hc);

    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;
      }
    }

    .subtitle:link { @extend %link_selected; }

    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);

          //-gtk-icon-effect: none;
          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: darken($suggested_border_color, 10%);
        }

        &: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: $_sel_menu_pad;

        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;
        }
      }
    }
  }
}