@function backdrop($color) {
  $desaturate: desaturate($color, 15%);
  $lighten: lighten($desaturate, 10%);
  $bg: mix($lighten, $bg_color, 70%);
  @return $bg;
}

* {
  // padding: 0;
  background-clip: padding-box;

  -GtkToolButton-icon-spacing: 0;
  -GtkTextView-error-underline-color: $error_color;

  // The size for scrollbars. The slider is 2px smaller, but we keep it
  // up so that the whole area is sensitive to button presses for the
  // slider. The stepper button is larger in both directions, the slider
  // only in the width

  -GtkScrolledWindow-scrollbar-spacing: 0;

  -GtkToolItemGroup-expander-size: 11;

  -GtkWidget-text-handle-width: 24;
  -GtkWidget-text-handle-height: 24;

  -GtkDialog-button-spacing: 4;
  -GtkDialog-action-area-border: 0;

  // We use the outline properties to signal the focus properties
  // to the adwaita engine: using real CSS properties is faster,
  // and we don't use any outlines for now.

  outline-style: solid;
  outline-width: 2px;
  outline-color: transparent;
  outline-offset: -4px;
  -gtk-outline-radius: 2px;

  -gtk-secondary-caret-color: $accent_color;
}

switch:focus slider,
notebook:focus tab,
*:focus { outline-color: $fill_color; }


/***************
 * Base States *
 ***************/
.background {
  background-color: $bg_color;
  color: $fg_color;
}

/*
   These wildcard seems unavoidable, need to investigate.
   Wildcards are bad and troublesome, use them with care,
   or better, just don't.
   Everytime a wildcard is used a kitten dies, painfully.
*/

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

.gtkstyle-fallback {
  background-color: $bg_color;
  color: $fg_color;

  &:hover {
    background-color: darken($bg_color, 5%);
    color: $fg_color;
  }

  &:active {
    background-color: darken($bg_color, 10%);
    color: $fg_color;
  }

  &:disabled {
    background-color: $bg_color;
    color: $disabled_fg_color;
  }

  &:selected {
    background-color: $primary_color;
    color: $inverse_fg_color;
  }
}

.view {
  @extend %row_activatable;

  background-color: $base_color;
  color: $fg_color;

  &:disabled { color: $disabled_fg_color; }

  &:hover, &:active, &:selected { border-radius: 4px; }

  selection,
  &:selected { @extend %selected_items; }
}

textview {
  text { background-color: $base_color; }

  border {
    background-color: $alt_base_color;
    color: $hint_fg_color; // not working
  }
}

// iconview { @extend .view; }

.rubberband,
rubberband {
  border: 1px solid $alt_primary_color;
  background-color: rgba($alt_primary_color, $lower_opacity);
}

flowbox {
  rubberband { @extend rubberband; }

  flowboxchild {
    padding: 4px;
    border-radius: 2px;

    &:selected { @extend %selected_items; }
  }
}

.content-view .tile {
  // margin: 2px;
  // padding: 0;
  // border-radius: 0;
  // background-color: $black;

  &:selected {
    background-color: transparent;
    color: inherit;
  }
}

label {
  caret-color: currentColor; // this shouldn't be needed.

  &.separator {
    @extend .dim-label;

    color: $fg_color;
  }

  row:selected &,
  &:selected { @extend %nobg_selected_items; }

  selection {
    background-color: $primary_color;
    color: $inverse_fg_color;
  }

  &:disabled {
    color: $disabled_fg_color;

    selection { @extend %selected_items_disabled; }

    tab &,
    button & { color: inherit; }
  }
}

.dim-label { opacity: $hint_opacity; }

assistant {
  .sidebar {
    padding: 4px 0;
    // background-color: $base_color;
    // border-top: 1px solid $border_color;
  }

  // &.csd .sidebar { border-top-style: none; }

  .sidebar label {
    min-height: $large_size;
    padding: 0 12px;
    color: $fg_color;
    font-weight: 500;

    &.highlight { color: $fg_color; }
  }
}

%osd, .osd { opacity: $higher_opacity; }

@import 'widgets/button';
@import 'widgets/checkradio';
@import 'widgets/colorchooser';
@import 'widgets/decoration';
@import 'widgets/emoji';
@import 'widgets/entry';
@import 'widgets/expander';
@import 'widgets/frame';
@import 'widgets/headerbar';
@import 'widgets/infobar';
@import 'widgets/level';
@import 'widgets/lists';
@import 'widgets/menu';
@import 'widgets/misc';
@import 'widgets/notebook';
@import 'widgets/pane';
@import 'widgets/pathbar';
@import 'widgets/popover';
@import 'widgets/progress';
@import 'widgets/scale';
@import 'widgets/scrollbar';
@import 'widgets/sidebar';
@import 'widgets/switch';
@import 'widgets/filechooser';
@import 'widgets/toolbar';
@import 'widgets/treeview';
@import 'widgets/dialog';

