// General guidelines:
// - very unlikely you want to edit something else than _common.scss
// - keep the number of defined colors to a minimum, use the color blending functions if
//   you need a subtle shade
// - if you need to inverse a color function use the @if directive to match for dark $variant



// FIXME: Backdrop checkboxes in treeview go from white to black in backdrop
// FIXME: Radio buttons in tree view go square when selected
// FIXME: Header bar now has a bottom border (may not be necessary, but adjusts positioning fractionally)
// FIXME: Strange lines appear in icon view on page 2 when clicking an icon

// XXX: Header bar buttons are flatter now



/// TODO:
/// * Firefox GTK3 defaults to grey page background (".background" CSS rule)
///    - https://bugzilla.mozilla.org/show_bug.cgi?id=1268618
///    - Can't fudge this because Synapse uses the background colour and
///      seems to create its own gradient from it
/// * LibreOffice button-menus (e.g. "More numbering" under bullet styles) have green-on-green
///   text on hover
///
/// Unresolvable issues:
/// * Gnome Terminal uses #C6C6C6 for background
///    - This is because it uses @theme_base_color, and that is our base colour.
///      The only way to change it in the theme is to change the base colour, but
///      that would affect anything that relies on the base colour.
/// * Nautilus pathbar style doesn't properly change from "in bar" to "no bar"
///   when making the window wider. It needs an unfocus/focus cycle
///    - This is an Adwaita/Nautilus problem and can be seen in the base theme

$variant: 'light';
$contrast: 'normal';

// Import the colours
@import 'colors-custom';

// Import the default widgets
@import 'drawing';
// Style everything
@import 'common';

@import 'colors-public-custom';






/**************************
 *                        *
 * Adwaita Dark Overrides *
 *                        *
 *   And now do our own   *
 *  overrides of styling! *
 *                        *
 **************************/

avatar { border-radius: 4px }


*:disabled {
  -gtk-icon-filter: opacity(0.5);
}

/***************
 * Header bars *
 ***************/
%titlebar,
headerbar {
  color: $title_fg;
  background-image: linear-gradient(to bottom, lighten($bg_dark_color, 3%) 0%, $bg_dark_color 45%);
  border-color: shade($bg_dark_color, 0.90);
  border-bottom-width: 0;
  box-shadow: inset 0 2px $titlebar_highlight, inset 0 1px $header_button_border;
  background-color: $bg_dark_color;

  &:backdrop {
    color: $fg_dark_color;
    box-shadow: none;
    background-color: $bg_dark_color;
    background-image: none;
    border-bottom-width: 0;
    border-color: darken($bg_dark_color, 10%);
  }

  .title {
    color: $title_fg;
  }

  .subtitle {
  }

  .tiled &,
  .maximized & { &:backdrop, & { }}

  &.default-decoration {
    button.titlebutton {
    }
  }

  label {
    &, &:backdrop {
      color: $fg_dark_color;
    }
  }

  popover label {
    &, &:backdrop {
      color: $fg_color;
    }
  }
}

headerbar {
  entry,
  spinbutton,
  separator,
  button {
  }
  switch {
  }
}

.background:not(.tiled):not(.maximized) .titlebar {
  &:backdrop, & {
  }
}

headerbar {
  window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
  window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { }}

  window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { }}
}

.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 { background-color: $borders_color; }

  @extend %titlebar;
}

headerbar button {
  &, &:backdrop {
    &, &:checked {
      &, & label, & label:backdrop {
        color: $fg_dark_color;
      }
    }
  }
}
headerbar popover modelbutton {
  &, &.title, & label {
    color: $fg_color;
  }
}
%titlebar headerbar:not(.selection-mode),
headerbar:not(.selection-mode) {
  // FIXME: Tweak Tool header menu button not working
  button, stackswitcher button {
    color: $fg_dark_color;
    background-image: linear-gradient(to bottom, $header_button_raised_gradient_color_a, $bg_dark_color);
    text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
    -gtk-icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
    border-color: $header_button_border;
    outline-color: $header_button_raised_gradient_color_a;
    box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a;

    &.flat, &.titlebutton {
      color: $fg_dark_color;
      background-image: none;
      background-color: transparent;
      border-color: transparent;
      box-shadow: none;
      text-shadow: none;
      -gtk-icon-shadow: none;

      &:hover, &:active, &:backdrop, &:checked {
        color: $title_fg;
      }
      &:backdrop {
        border-color: transparent;
      }
    }

    &:hover, &.titlebutton:hover {
      color: shade($fg_dark_color, 1.3);
      outline-color: $header_button_raised_gradient_color_a;
      border-color: $header_button_border;
      background-image: linear-gradient(to bottom, shade($header_button_raised_gradient_color_a, 1.1), shade($bg_dark_color, 1.1));
      text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
      -gtk-icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
      box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a;
    }

    &:active,
    &:checked, &.titlebutton:active, &.titlebutton:active:backdrop, &.titlebutton:checked, &.titlebutton:checked:backdrop {
      color: $title_fg;
      outline-color: $header_button_raised_gradient_color_a;
      border-color: $header_button_border;
      background-image: linear-gradient(to bottom, $bg_dark_color, $header_button_checked);
      text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
      -gtk-icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
      box-shadow: inset 0 1px transparentize($header_button_raised_gradient_color_a, 0.7), 0 1px $header_button_raised_gradient_color_a;
    }

    &:backdrop {
        color: $fg_dark_color;
        background-image: none;
        background-color: $bg_dark_color;
        border-color: $header_button_border;
        box-shadow:none;
        text-shadow: none;
        -gtk-icon-shadow: none;

        transition: $backdrop_transition;
        -gtk-icon-filter: none;

        &:active,
        &:checked { 
          background-image: none;
          background-color: $header_button_checked;
          border-color: $header_button_border;
        }

        &:disabled, &.suggested-action:disabled {
          color: $insensitive_dark_fg_color;
          background-color: $bg_dark_color;
          background-image: none;
          border-color: $header_button_border;
          box-shadow: none;
          
          &:active,
          &:checked { }
        }
    }

    &.flat { &:backdrop, &:disabled, &:backdrop:disabled { } }

    &:disabled, &.suggested-action:disabled {
      color: $insensitive_dark_fg_color;
      background-color: $bg_dark_color;
      background-image: none;
      border-color: $header_button_border;
      box-shadow: 0 1px $header_button_raised_gradient_color_a;
    }

    &:drop(active) {
      color: $drop_target_color;
      border-color: $drop_target_color;
      box-shadow: inset 0 0 0 1px $drop_target_color;
    }
    &.suggested-action {
      @include button(normal, $selected_bg_color, white);
      &.flat {
        @include button(undecorated);

        color: $selected_bg_color; //FIXME: does it work on the dark variant?
      }

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

      &:active,
      &:checked { @include button(active, $selected_bg_color, white); }

      &:backdrop,
      &.flat:backdrop {
        @include button(backdrop, $selected_bg_color, white);
        border-color: $selected_bg_border;

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

        &:disabled, &:disabled label {
          color: $insensitive_dark_fg_color;
          background-color: $bg_dark_color;
          background-image: none;
          border-color: $header_button_border;
          box-shadow: none;

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

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

          color: transparentize($selected_bg_color, 0.2);
        }
      }
    }
//    &.suggested-action:backdrop {
//      @include button(normal, $selected_bg_color, white);
//    }
//    
//    &.suggested-action label { color: $selected_fg_color; }
  }
}

column-header button, column-header headerbar button.titlebutton, headerbar column-header button.titlebutton,
column-header .titlebar button.titlebutton,
.titlebar column-header button.titlebutton {
  color: $fg_color;
  background-color: $bg_gradient_2;}
  column-header button:hover, column-header headerbar button.titlebutton:hover, headerbar column-header button.titlebutton:hover,
  column-header .titlebar button.titlebutton:hover,
  .titlebar column-header button.titlebutton:hover {
    color: $fg_color_emphasis; }

%entry,
entry {
  background-color: $text_input_color;
  &:disabled { background-color: $insensitive_bg_color; }
  &:backdrop { background-color: $backdrop_text_input_color; }
  &:backdrop:disabled { background-color: $insensitive_bg_color; }
}
spinbutton:not(.vertical) button:hover {
  background-color: transparentize($bg_color,0.6);
  border-top-color: transparent;
  border-top-style: solid;
  border-top-width:1px;
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width:1px;
  background-clip: padding-box;
}

.view, .view text, iconview, iconview text, textview, textview text  {
  color: $text_color;
  background-color: $text_input_color;
  &:backdrop, &:backdrop:hover {
    color: $backdrop_text_color;
    background-color: $backdrop_text_input_color;
  }
  &:selected {
    color: $selected_fg_color;
    background-color: $selected_bg_color;
  }
  //&:hover {
  //  background-color: mix($fg_color, $text_input_color, 5%);
  //}
  &:active {
    box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
  }
  &:selected {
    &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
    &:hover {
      background-color: mix($fg_color, $selected_bg_color, 10%);
    }
    &:backdrop { background-color: $selected_bg_color; }
  }
}

popover .view {
  background-color: transparent;
}

list:not(.view), list-row, list-row.button  {
  background-color: darken($text_input_color, 6%);
  &:backdrop, &:backdrop:hover {
    color: $backdrop_text_color;
    background-color: darken($backdrop_text_input_color, 6%);
  }
  &:selected {
    color: $selected_fg_color;
    background-color: $selected_bg_color;
  }
  &:hover {
    background-color: mix($fg_color, darken($text_input_color, 6%), 5%);
  }
  &:active {
    box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
  }
  &:selected {
    &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
    &:hover {
      background-color: mix($fg_color, $selected_bg_color, 10%);
    }
    &:backdrop { background-color: $selected_bg_color; }
  }
}

.sidebar list {
  background: transparent;
}

// The path bar box in Open dialogs is classed as a view, but we don't
// want it that light
#pathbarbox {
  background-color: $bg_color;
}
headerbar .pathbar {
  background-color: #{"@theme_bg_dark_color"};
  border-style:none;
}
list-row {
  // Set sidebar items back to something reasonable
  &.sidebar-item {
    background-color: $sidebar_bg_color;
    border-color: $borders_color;
    &:backdrop, &:backdrop:hover {
      background-color: $backdrop_sidebar_bg_color;
      border-color: $backdrop_borders_color;
    }
    // let's take care of background colors
    &:hover {
      background-color: mix($fg_color, $base_color, 5%);
    }
    &:active {
      box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
    }
    &:selected {
      background-color: $selected_bg_color;
      &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
      &:hover {
        background-color: mix($fg_color, $selected_bg_color, 10%);
      }
      &:backdrop { background-color: $selected_bg_color; }
    }
  }
}

/* Fudge the Nautilus icon view background colour in the only way that seems to work */
.nautilus-window notebook > stack > box > grid { background-color: $text_input_color; }

/* And make the Nautilus places bar a bit darker, as it used to be */
placessidebar list {
    background-color: $sidebar_bg_color;
    border-color: $borders_color;
    &:backdrop {
      background-color: $backdrop_sidebar_bg_color;
      border-color: $backdrop_borders_color;
    }
}

// Fix the rubberband background after we gave lists and views a lighter background
.view.rubberband {
  background-color: transparentize($selected_bg_color,0.8);
}
menubar {
  background-color: $bg_dark_color;
  color: $menu_fg_dark_color;
  box-shadow: inset 0 -1px transparentize(black, 0.9);
  &:backdrop { 
    background-color: $bg_dark_color;
    color: $menu_fg_dark_color;
  }
}

// Make all menus dark - we mainly want the menu bar menus dark, but
// Firefox and other non-standard apps use those colours for their
// context menus as well, so be consistent.
menubar popover.menu.background > contents {
  border-top-width: 0;
  border-radius: 0 0 9px 9px;
  background-color: $bg_dark_color;
  color: $menu_fg_dark_color;
  border-color: $header_button_border;

  & modelbutton.flat:selected, & modelbutton.flat:hover {
    background-color: $selected_bg_color;
    color: $selected_fg_color;
  }
  & check, & radio {
    color: $menu_fg_dark_color;
    &:hover {
      color: $selected_fg_color;      
    }
  }
}
// Except combo box backgrounds. We want those to be grey, like the
// combobox itself
popover.menu, #gtk-combobox-popup-menu {
  color: $fg_color;
}
// Top-level menu text needs to be tweaked to match dark menus
menubar {
  & > item {
    &, & > label {
      &:hover { //Seems like it :hover even with keyboard focus
        color: $selected_bg_color
      }
      &:backdrop {
        color: $menu_fg_dark_color;
      }
      & menuitem.check, & menuitem.radio {
        color: $fg_dark_color;
      }
    }
  }
}

.floating-bar {
  opacity: 0.9;
  color: $text_color;
  background-color: $text_input_color;
  border: 1px solid $borders_color;

  @each $tb,$tb_corner in ('top','bottom'),
                          ('bottom','top') {
    @each $lr,$lr_corner in ('left','right'),
                 ('right','left') {
      &.#{$tb}.#{$lr} {
        border-#{$tb_corner}-#{$lr_corner}-radius: 3px;
        border-#{$tb}-width: 0;
        border-#{$lr}-width: 0;
      }
    }
  }
}

treeview.view header button { 
  &, &:hover, &:active, &:disabled {
    &, &:backdrop {
      border-color: lighten($borders_color, 20%);
    }
  }
}

treeview.view header button:last-child {
  &:hover {
    border-right-width: 0;
  }
}

// Lighten selected tabs a bit to match other UI
notebook {
  > header {
    tab {
      &:checked {
        &.reorderable-page {
          border-color: $borders_color;
          background-color: $bg_color;
          &:hover { background-color: lighten($bg_color, 5%); }
        }
      }

      &:backdrop:checked {
        &.reorderable-page {
          background-color: $backdrop_bg_color;
        }
      }
    }
  }
}

// Stop the disabled spin button being dark grey
spinbutton:not(.vertical) button:backdrop:disabled { background: transparent none; }

// Fix the category icons in the Emoji input box
.emoji-section label {
  font-family: "Symbola";
  font-weight: bold;
  font-size: 125%
}


// GTK 3.24 updates
headerbar frame > border, headerbar .frame,
headerbar frame > border:backdrop, headerbar .frame:backdrop
{ border-color: $header_button_border; }

// Later GTK 3.24 updates
check, radio {
  & {
    // for unchecked
    $_c: if($variant=='light', lighten($bg_color, 5%), $bg_color);

    @each $state, $t in ("", "normal"),
                        (":hover", "hover"),
                        (":active", "active"),
                        (":disabled", "insensitive") {
      &#{$state} {
        @include check($t, $_c);
      }
    }
  }

  & {
    // 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);
          }
        }
      }
    }
  }
}

button {
  &.flat {
    // FIXME: Not changing the outline!
    outline-width: 0;
    outline-color: transparent;
  }
  &.suggested-action {
    @include button(normal, $selected_bg_color, white);
    &.flat {
      @include button(undecorated);

      color: $selected_bg_color; //XXX: does it work on the dark variant?
    }

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

    &:active,
    &:checked { @include button(active, $selected_bg_color, white); }

    &:backdrop,
    &.flat:backdrop {
      @include button(backdrop, $selected_bg_color, white);
      border-color: $selected_bg_border;

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

      &:disabled, &:disabled label {
        color: $insensitive_dark_fg_color;
        background-color: $bg_dark_color;
        background-image: none;
        border-color: $header_button_border;
        box-shadow: none;

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

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

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

list spinbutton button.image-button:not(.toggle) {
    outline-width: 0;
}

popover.background {
  .csd & {
    $_popover_border: if($variant=='light', transparentize(black, 0.6), transparentize(black, 0.25));

    border-color: $_popover_border;
  }
}

infobar {
  &.action:hover > revealer > box {
      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 22%), 30%),
                        desaturate(darken(invert($selected_bg_color), 42%), 70%));
  }
  .info,
  &.question,
  &.warning,
  &.error {
    > revealer > box {      
      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 20%), 30%),
                        desaturate(darken(invert($selected_bg_color), 40%), 70%));
    }
  }
}