// 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: darken($headerbar_bg_color, 7%);

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

  &:backdrop {
    border-color: $inkstone;
    background-color: $backdrop_headerbar_bg_color;
    box-shadow: inset 0 1px $headerbar_border_color;
  }

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

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

  button,
  button.toggle,
  button.popup.toggle,
  button.image-button,
  button.image-button.toggle,
  button.text-button,
  button.text-button.toggle,
  box button.toggle,
  buttonbox.toggle,
  stackswitcher button,
  filechooser .path-bar.linked>button,
  .path-bar button {

    @include button(normal, $_button_bg_color, $headerbar_fg_color);
    &.flat {
      @include button(undecorated);
    }

    &:hover {
      @include button(hover, $_button_bg_color, $headerbar_fg_color);
    }
    &:active,
    &:checked {
      @include button(active, $_button_bg_color, $headerbar_fg_color);
      border-color: black;
    }

    &:backdrop {
      &, &.flat {
          @include button(backdrop, $backdrop_headerbar_bg_color, $backdrop_headerbar_fg_color);

          -gtk-icon-effect: none;
          border-color: $_backdrop_button_border_color;

          &:active,
          &.toggle:active,
          &:checked,
          &.toggle:checked {
            $_bg: if($variant=='light', darken($backdrop_headerbar_bg_color, 8%), $backdrop_headerbar_bg_color);
            @include button(backdrop-active, $_bg, $backdrop_headerbar_fg_color);
            border-color: $_backdrop_button_border_color;
          }

          &:disabled {
            @include button(backdrop-insensitive, darken($backdrop_headerbar_bg_color, 14%), $backdrop_headerbar_fg_color);

            border-color: $_backdrop_button_border_color;

            &:active,
            &:checked {
              @include button(backdrop-insensitive-active, $backdrop_headerbar_bg_color, $backdrop_headerbar_fg_color);
              border-color: $_backdrop_button_border_color;
            }
        }
      }
    }

    &:disabled {
      @include button(insensitive, if($variant=='light', darken($headerbar_bg_color, 9%), $headerbar_bg_color), $headerbar_fg_color);
      border-color: darken($headerbar_bg_color, 6%);

      &: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, white);
        border-color: $b_color;

        &.flat {
          @include button(undecorated);
          color: $b_color;
        }

        &:hover {
          @include button(hover, $b_color, white);
          border-color: $b_color;
        }

        &:active,
        &:checked {
          @include button(active, $b_color, white);
          @if $ambiance==true {
            border-color: darken($suggested_bg_color, 15%);
          }
        }

        &, &:hover, &:focus:active { outline-color: $coloured_focus_border_color; }

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

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

          &:disabled {
            @include button(backdrop-insensitive, if($variant=='light', darken($backdrop_headerbar_bg_color, 14%), $headerbar_bg_color), $backdrop_headerbar_fg_color);
            border-color: darken($backdrop_headerbar_bg_color, 3%);

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

        &.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);
          border-color: darken($headerbar_bg_color, 5%);
          background-image: image(lighten($headerbar_bg_color, 2%));

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

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

  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 {
      @include button(normal-alt, $_button_bg_color);

      &:backdrop {
        @include button(backdrop-alt, $_button_bg_color);
        &, &:checked, &:disabled, &:checked:disabled {
          border-color: darken($_backdrop_button_border_color, 4%); box-shadow: none;
        }
      }

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