$backdrop_transition: 200ms ease-out;

$base_color: lighten($window_color, 5%);
$bg_color: lighten($window_color, 5%);
$fg_color: hsl(hue($base_color), saturation($base_color), lightness($fg_color));
$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
$top_hilight: $borders_edge;
$dark_fill: mix($borders_color, $bg_color, 50%);

$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: $borders_color;

$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
$backdrop_bg_color: $bg_color;
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
$backdrop_borders_color: mix($borders_color, $bg_color, 80%);
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));

@if $high_contrast {
  $fg_color: if($variant == 'light', darken($fg_color, 3%), lighten($fg_color, 2%));
  $bg_color: if($variant == 'light', lighten($bg_color, 3%), darken($bg_color, 2%));
  $borders_color: if($variant == 'light', darken($borders_color, 30%), lighten($borders_color, 30%));
  $alt_borders_color: if($variant == 'light', darken($alt_borders_color, 33%), lighten($alt_borders_color, 28%));

  //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: mix($borders_color, $bg_color, 80%);
}

$tab_bg: darken($bg_color, if($variant == 'dark', 6%, 12%));
$tab_bg_backdrop: darken($backdrop_bg_color, 6%);

@import 'drawing';

headerbar {
  @include headerbar_fill(darken($bg_color, 10%));

  border-color: $alt_borders_color;

  > clamp {
    color: $fg_color;
  }

  &:backdrop {
    background-image: image($bg_color);
    border-color: $backdrop_borders_color;
    box-shadow: inset 0 1px $top_hilight;

    > clamp {
      color: $backdrop_fg_color;
    }
  }
}

actionbar {
  background: $bg_color;

  > revealer > box {
    border-color: $borders_color;
  }

  &:backdrop {
    background: $backdrop_bg_color;

    > revealer > box {
      border-color: $backdrop_borders_color;
    }
  }
}

headerbar, actionbar {
  > * {
    color: $fg_color;

    &:backdrop { color: $backdrop_fg_color }
  }

  button {
    @include button(normal);

    &.flat, &.titlebutton { @include button(undecorated); }

    &.titlebutton { @include _button_text_shadow($fg_color); }

    &:hover { @include button(hover); }

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

    &:disabled { @include button(insensitive); }

    &:backdrop {
      @include button(backdrop);

      &:active { @include button(backdrop-active); }

      &:disabled { @include button(backdrop-insensitive); }
    }

    &:checked {
      background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
      border-color: darken($borders_color, 3%);
      border-top-color: darken($borders_color, 8%);
      &:backdrop {
        @include button(backdrop-active);
      }
    }

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

  entry {
    border-color: $borders_color;

    &:focus {
      border-color: entry_focus_border($selected_bg_color);
      box-shadow: entry_focus_shadow($selected_bg_color);
    }

    &:backdrop {
      box-shadow: none;
      border-color: $backdrop_borders_color;
    }
  }
}

tabbar {
  .box {
    background: darken($tab_bg, 3%);
    border-bottom: 1px solid $alt_borders_color;

    &:backdrop {
      background-color: darken($tab_bg_backdrop, 3%);
      border-color: $backdrop_borders_color;
    }
  }

  scrolledwindow.pinned {
    undershoot {
      border-color: $alt_borders_color;
    }

    &:backdrop undershoot {
      border-color: $backdrop_borders_color;
    }

    tabbox {
      &:dir(ltr) {
        box-shadow: inset -1px 0 $alt_borders_color;

        &:backdrop {
          box-shadow: inset -1px 0 $backdrop_borders_color;
        }
      }

      &:dir(rtl) {
        box-shadow: inset 1px 0 $alt_borders_color;

        &:backdrop {
          box-shadow: inset 1px 0 $backdrop_borders_color;
        }
      }
    }
  }

  tab {
    border-color: $alt_borders_color;
    background-color: $tab_bg;

    &:checked {
      background-color: lighten($tab_bg, 6%);

      &:hover {
        background-color: lighten($tab_bg, 9%);
      }
    }

    &:hover {
      background-color: lighten($tab_bg, 3%);
    }

    &:backdrop {
      border-color: $backdrop_borders_color;
      background-color: $tab_bg_backdrop;

      &:checked {
        background-color: $backdrop_bg_color;
      }
    }

    .tab-close-button,
    .tab-indicator.clickable {
      &:hover {
        background: gtkalpha($fg_color, .15);
      }

      &:active {
        background: gtkalpha(black, .2);
      }
    }
  }

  .start-action,
  .end-action {
    background: $tab_bg;
    border-color: $alt_borders_color;

    &:backdrop {
      border-color: $backdrop_borders_color;
      background-color: $tab_bg_backdrop;
    }
  }
}
