// 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


/// 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';

// Import the default colours
@import 'colors';

// Override some colours
$base_color: #C6C6C6;
$bg_color: #C6C6C6;
$fg_color: #161616;
$selected_bg_color: #5E7F3E;
$selected_borders_color: darken($selected_bg_color, 20%);
$borders_color: darken($bg_color,30%);
$alt_borders_color: if($variant == 'light', darken($bg_color, 35%), darken($bg_color, 17%));
$borders_edge: transparentize(lighten($bg_color, 30%), 0.9);
$dark_fill: mix($borders_color, $bg_color, 35%);
$link_color: darken($selected_bg_color,10%);
$link_visited_color: darken($selected_bg_color,20%);
$top_hilight: $borders_edge;
$popover_bg_color: $bg_color;
$popover_hover_color: lighten($bg_color, 5%);
$menu_color: $bg_color;
$destructive_color: darken($destructive_color, 15%);

$scrollbar_bg_color: darken($bg_color, 7%);

$sidebar_bg_color: darken($bg_color,5%);

//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: $borders_color;

//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: darken($base_color, 1%);
$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%);
$backdrop_bg_color: $bg_color;
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
$backdrop_insensitive_color: darken($backdrop_bg_color, 15%);
$backdrop_selected_fg_color: $selected_fg_color;
$backdrop_selected_bg_color: desaturate($selected_bg_color,100%);
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
$backdrop_sidebar_bg_color: darken($backdrop_bg_color,5%);
$backdrop_menu_color: $backdrop_bg_color;

$scrollbar_slider_active_color: $selected_bg_color;
$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);


// Add our own colours
$text_input_color: #F0F0F0;
$backdrop_text_input_color: darken($text_input_color, 1%);
$bg_dark_color: #3D3D3D;
$fg_dark_color: #dddddd;
$insensitive_dark_fg_color: mix($fg_dark_color, $bg_dark_color, 50%);
$titlebar_highlight: #4c4c4c;
$header_button_raised_gradient_color_a: lighten($bg_dark_color, 10%);
$header_button_checked: darken($bg_dark_color, 5%);
$header_button_border: darken($bg_dark_color, 5%);
$header_button_border_unfocused: darken($bg_dark_color, 5%);
$menu_fg_dark_color: #cccccc;
$focused_entry_outer:  transparentize($selected_bg_color, 0.45);
$bg_gradient_1: lighten($bg_color, 20%);
$bg_gradient_2: lighten($bg_color, 10%);
$bg_gradient_3: lighten($bg_color, 5%);
$bg_prelight: $bg_gradient_1;
$selected_bg_color_hover: lighten($selected_bg_color, 10%);
$selected_bg_color_shade: darken($selected_bg_color, 10%);
$selected_bg_border: darken($selected_bg_color, 20%);
$title_fg: #fff;
$header_separator: lighten($bg_dark_color, 10%);
$fg_color_emphasis: darken($fg_color, 50%);
$fg_color_de_emphasis: lighten($fg_color, 20%);
$unfocused_fg_color: $backdrop_fg_color;
$unfocused_insensitive_fg_color: lighten($insensitive_fg_color, 20%);
$transparent_outline: #383436;

// Import the default widgets
@import 'drawing';
// Style everything
@import 'common';
//Export default colours
@import 'colors-public';

//Override some exported colours
@define-color theme_base_color #{"" + $base_color};
@define-color theme_fg_dark_color #{"" + $fg_dark_color};
@define-color theme_bg_dark_color #{"" + $bg_dark_color};
@define-color wm_title #{"" + $fg_dark_color};
@define-color wm_unfocused_title #{"" + $fg_dark_color};
@define-color wm_highlight shade(#{"" + $bg_dark_color}, 1.03);
@define-color wm_borders_edge #{"" + $bg_dark_color};

@define-color wm_bg_a shade(#{$bg_dark_color}, 1.2);
@define-color wm_bg_b #{$bg_dark_color};

@define-color wm_button_hover_color_a shade(#{$bg_dark_color}, 1.3);
@define-color wm_button_hover_color_b #{$bg_dark_color};
@define-color wm_button_active_color_a shade(#{$bg_dark_color}, 0.85);
@define-color wm_button_active_color_b shade(#{$bg_dark_color}, 0.89);
@define-color wm_button_active_color_c shade(#{$bg_dark_color}, 0.9);

@define-color wm_button_border #{$header_button_border};

@define-color button_emphasis_a #{lighten($header_button_raised_gradient_color_a, 10%)};
@define-color button_emphasis_b #{lighten(mix($header_button_raised_gradient_color_a, $bg_dark_color, 50%), 10%)};
@define-color button_emphasis_c #{lighten($bg_dark_color, 10%)};






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



 
*:disabled {
  -gtk-icon-effect: highlight;
}

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

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;
      }
    }
  }
}
%titlebar headerbar:not(.selection-mode),
headerbar:not(.selection-mode) {
  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-effect: 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; }
  }
}

list, 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;
}
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.
menu, .menu, .context-menu {
  background-color: $bg_dark_color;
  color: $menu_fg_dark_color;
  border-color: $header_button_border;
}
// Except combo box backgrounds. We want those to be grey, like the
// combobox itself
popover.menu, #gtk-combobox-popup-menu {
  background-color: $bg_color;
  color: $fg_color;
}
// Top-level menu text needs to be tweaked to match dark menus
menubar, headerbar {
  & > menuitem {
    &, & 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 .background {
  background: lighten($bg_dark_color, 5%);
  color: $fg_dark_color;
  
  &:backdrop {
    background: transparent none;
    color: $fg_dark_color;
  }
}

headerbar frame > border, headerbar .frame,
headerbar frame > border:backdrop, headerbar .frame:backdrop
{ border-color: $header_button_border; }


// Import extra Nautilus CSS manually, because they only do this if
// you're using Adwaita -
// https://github.com/GNOME/nautilus/blob/gnome-3-24/src/nautilus-application.c#L1099-L1112
@import url("./nautilus.css");

// Gnome Builder fixes
@import url("./gnome-builder.css");

// Customise Cawbird bar to be dark, because it's like a menu bar but isn't
@import url("./cawbird.css");