$_widget_inset_shadow: inset 0 3px 10px -4px $shadow_color, 0 1px rgba(255, 255, 255, .05);

/**********
 * Button *
 **********/
button {
  @at-root %button_active,
  &:active,
  &:checked {
    background: $dark_fill;
    box-shadow: $_widget_inset_shadow;

    &:backdrop { box-shadow: none; }
  }

  &:disabled { box-shadow: none; }

  &.flat:not(.link) {
    &:hover {
      @extend %button_active;
      transition: none;
    }

    &:backdrop { @include button(undecorated); }
  }
}

/**********
 * Entry  *
 **********/
%entry,
entry {
  &:not(:disabled) {
    box-shadow: $_widget_inset_shadow;
    background: if($variant=='dark', $dark_fill, $bg_color);
  }

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

headerbar %entry,
headerbar entry {
  background: $base_color;
}

/**********
 * Switch *
 **********/
switch {
  box-shadow: $_widget_inset_shadow;

  slider { @extend %slider; }

  &:hover slider { @extend %slider_active; }

  &:checked {
    border-right-width: 0; // Hack to prevent dirty right border-radius
    margin-right: 1px; // Compensate missing right border
    box-shadow: inset 0 1px 3px -1px transparentize(black, .4);

    &, &:backdrop { border-color: transparentize(black, .8); }

    slider {
      border-color: if($variant=='light', $suggested_border_color, $borders_color);
      &:backdrop:not(:disabled) {
        border-color: if($variant=='light', $suggested_bg_color, $backdrop_borders_color);
      }
    }
  }

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

    slider { border-color: $backdrop_borders_color; }
  }
}

/*************************
 * Check and Radio items *
 *************************/
check,
radio {
  $_c: if($variant=='light', $bg_color, darken($bg_color, 2%));
  $_shadow: 0 1px 2px transparentize($shadow_color, 0.03);

  background-image: linear-gradient(to bottom, $_c 20%, darken($_c, 2%) 90%);
  border-color: $alt_borders_color;

  &, &:active { box-shadow: $_widget_inset_shadow; }

  &:checked, &:indeterminate {
    background-image: linear-gradient(to bottom, $checkradio_bg_color 20%, darken($checkradio_bg_color, 2%) 90%);
    border-color: $selected_borders_color;
    color: $selected_fg_color;

    &, &:active { box-shadow: inset 0 1px transparentize(white, .9), $_shadow; }

    &:backdrop {
      background-image: image($checkradio_bg_color);
      box-shadow: none;
    }
  }

  &:disabled, &:disabled:backdrop {
    &, &:checked, &:indeterminate {
      border-color: $borders_color;
      background-image: image($bg_color);
      color: $fg_color;
    }
  }
}

radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); }

check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }

radio,
check {
  &:active { -gtk-icon-transform: scale(0, 1); }

  &:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
    -gtk-icon-transform: unset;
    transition: 400ms;
  }
}

/************
 * GtkScale *
 ************/
%slider,
scale slider {
  @include button(normal);

  border-color: darken($alt_borders_color, 3%);

  @at-root %slider_active,
  &:active {
    background-image: if($variant == 'light', image(lighten($bg_color, 14%)), image(darken($bg_color, 9%)));
    border-color: $suggested_bg_color;
  }

  &:backdrop, &:disabled {
    border-color: $borders_color;
    background-image: image($bg_color);
    box-shadow: none;
  }
}

/***************
 * Header bars *
 ***************/
.titlebar,
headerbar {
  $_border_color: darken($bg_color, 20%);
  border-color: $_border_color;

  $_scale_asset: 'assets/kali-headerbar-logo#{$asset_suffix}';
  @include headerbar_fill(darken($bg_color, if($variant == 'light', 5%, 10%)),
                          $ov: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')));
  box-shadow: 0 1px 4px transparentize($_border_color, .25);
  background-repeat: no-repeat;
  background-position: left;

  &:backdrop {
    background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
    background-repeat: no-repeat;
    background-position: left;
    box-shadow: none;
  }

  stackswitcher button:checked,
  button.toggle {
    &:active, &:checked { @extend %button_active; }
  }

  .dialog &,
  .dialog &:backdrop {
    background: $bg_color;
    border: 0;
    box-shadow: none;
  }
}

/*************
 * Notebooks *
 *************/
notebook {
  > header {
    border: 0;
    padding: 0;
    background-color: $dark_fill;

    &.top,
    &.bottom,
    &.left,
    &.right {
      > tabs {
        margin: 0;

        > tab,
        > tab.reorderable-page {
          border: 1px solid transparent;
          margin: 3px;
          transition: $button_transition;

          &:hover {
            @include button(hover);
            transition-duration: 50ms;

            &:backdrop {
              @include button(undecorated);
            }
          }

          &:checked {
            @include button(normal);

            &:backdrop {
              @include button(backdrop);
              transition: $backdrop_transition;
            }
          }

          &:backdrop { color: $backdrop_fg_color; }
        }
      }
    }

    $gradient:
      rgba(black, 0),
      rgba(black, 0) calc(100% - 2px),
      rgba(black, 0.05) calc(100% - 1px),
      rgba(black, 0.15);

    &.top {
      background-image: linear-gradient(to bottom, $gradient);
    }

    &.bottom {
      background-image: linear-gradient(to top, $gradient);
    }

    &.right {
      background-image: linear-gradient(to left, $gradient);
    }

    &.left {
      background-image: linear-gradient(to right, $gradient);
    }

    tab {
      border-radius: $button_radius;
      transition: $button_transition;
      min-height: 28px;

      button.flat {
        margin-top: 1px;
        margin-bottom: 1px;
      }
    }
  }
}