$_menu_shadow: 0 1px 6px transparentize(black, if($variant == 'light', .85, .5));
$_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25));

* {
  outline-style: solid;
  outline-offset: -4px;
  outline-width: 2px;
  -gtk-outline-radius: 3px;
  outline-color: gtkalpha(currentColor, 0.07);

  button {
    &, &:hover, &:active, &:checked, &:focus {
      outline-color: gtkalpha(currentColor, if($variant == 'light', 0.15, 0.07));
    }
  }
}

/***************
 * Base States *
 ***************/
.background, .background:backdrop {
  // without this headerbar transparency doesn't seem to work
  background: if($transparency == 'true', transparentize($bg_color, 0.001), $bg_color);
}

/**********
 * Button *
 **********/
button {
  &.flat {
    border-color: transparent;
    transition: $button_transition;

    &:hover, &:active {
      background: image($dark_fill);
      box-shadow: none;
      transition: none;
    }

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

  // Suggested and Destructive Action buttons
  @each $b_type, $b_color, $t_color in (suggested-action, $suggested_bg_color, $selected_fg_color),
                             (destructive-action, $destructive_color, white) {
    &.#{$b_type} {
      @include button(normal, $b_color, $t_color);

      &:hover { @include button(hover, $b_color, $t_color); }

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

      &:backdrop,
      &.flat:backdrop {
        @include button(backdrop, $b_color, $t_color);

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

        &:disabled {
          &:active,
          &:checked { @include button(backdrop-insensitive-active, $b_color, $t_color); }
        }
      }

      &:disabled {
        &:active,
        &:checked { @include button(insensitive-active, $b_color, $t_color); }
      }
    }
  }
}

/**********
 * Entry *
 **********/
%entry,
entry {
  @if ($variant == 'dark') {
    background-color: $dark_fill;
  }
}

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

/**********
 * Switch *
 **********/
switch {
  &:checked {
    border-color: transparentize(black, .8);
    border-right-width: 0; // Hack to prevent dirty right border-radius
    margin-right: 1px; // Compensate missing right border
  }

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

  slider {
    @extend %slider;

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

    &:disabled {
      border-color: $backdrop_borders_color;
    }
  }
}

/*************************
 * Check and Radio items *
 *************************/
check,
radio {
  &, menu menuitem &, menu menuitem:hover & {
    @include button(normal);

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

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

  &, menu menuitem & {
    &:checked, &:indeterminate {
      background-image: image($selected_bg_color);
      border-color: $selected_bg_color;
      color: $selected_fg_color;

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

%slider,
scale slider {
  @include button(normal-alt);
  &:active, &:hover { @include button(hover-alt); }
}

/************
 * GtkScale *
 ************/
%scale_trough {
  border: 2px solid $borders_color;
  border-radius: $button_radius;
  background-color: $borders_color;

  &:disabled {
    background-color: $insensitive_borders_color;
    border-color: $insensitive_borders_color;
  }

  &:backdrop {
    background-color: $backdrop_borders_color;
    border-color: $backdrop_borders_color;
    transition: $backdrop_transition;

    &:disabled {
      background-color: $insensitive_borders_color;
      border-color: $insensitive_borders_color;
    }
  }

  // ...on selected list rows
  row:selected & { &:disabled, & { border-color: $selected_borders_color; }}

  // OSD
  .osd & {
    border-color: $osd_borders_color;
    background-color: transparentize($osd_borders_color, 0.2);

    &:disabled { background-color: $osd_insensitive_bg_color; }
  }
}

%scale_highlight {
  border: 2px solid $progress_bg_color;
  border-radius: $button_radius;
  background-color: $progress_bg_color;

  &:disabled {
    background-color: transparent;
    border-color: transparent;
  }

  &:backdrop {
    border-color: $progress_bg_color;
    &:disabled {
      background-color: transparent;
      border-color: transparent;
    }
  }

  // ...on selected list rows
  row:selected & { &:disabled, & { border-color: $selected_borders_color; }}

  // OSD
  .osd & {
    border-color: $progress_bg_color;

    &:disabled { border-color: transparent; }
  }
}

/***************
 * Header bars *
 ***************/
headerbar {
  border: none;
  background: $headerbar_color;
  box-shadow: inset 0 1px $top_hilight;
  color: $text_color;

  &, &:backdrop {
    box-shadow: none;
    background: $headerbar_color;
  }
}

%titlebar,
headerbar {
  .title { font-weight: normal; }

  $_headerbar_widget_bg: image(if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 7%)));
  $_headerbar_widget_bg_disabled: image(if($variant == 'light', darken($bg_color, 4%), darken($bg_color, 4%)));
  button,
  entry,
  .linked button,
  .linked entry {
    border: none;

    background: $_headerbar_widget_bg;
    &:disabled {
      background: $_headerbar_widget_bg_disabled;
    }
  }

  button:backdrop {
    background: $_headerbar_widget_bg;
    &:disabled {
      background: $_headerbar_widget_bg_disabled;
    }
  }

  entry:focus,
  .linked entry:focus { background: $bg_color; }

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

  viewswitcher button > stack > box,
  hdyviewswitcher > button box {
    &.narrow { margin: -7px 0 -5px; }
    &.wide { margin: -8px 0; }
  }

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

  // Window Close button
  button.titlebutton:not(.appmenu) {
    &.minimize, &.maximize, &.close {
      color: transparent;
      -gtk-icon-shadow: none;
      background-image: -gtk-scaled(url('assets/titlebutton.png'), url('assets/titlebutton@2.png'));
      background-position: center;
      background-repeat: no-repeat;
      background-size: 8px;
      margin: 0;
      margin-left: 5px;
      padding: 0;
      min-width: 0;
      min-height: 0;
      box-shadow: none;
      border: none;
      transition: all .2s;

      & + button.titlebutton { margin-left: 0; }
      &:last-child { margin-right: 5px; }

      &:backdrop,
      &:backdrop:hover {
        background-color: if($variant == 'light', darken($bg_color, 20%), lighten($bg_color, 20%));
        background-image: -gtk-scaled(url('assets/titlebutton.png'), url('assets/titlebutton@2.png'));
        @if $transparency=='true' {
          box-shadow: inset 0 0 0 1px transparentize(black, if($variant=='light',.9, .8));
        }
      }
    }

    &.minimize {
      background-color: #fd7d00;
      &:hover {
        background-image: -gtk-scaled(url('assets/minimize.png'), url('assets/minimize@2.png'));
      }
    }

    &.maximize {
      background-color: #377cf1;
      &:hover {
        background-image: -gtk-scaled(url('assets/maximize.png'), url('assets/maximize@2.png'));
      }
    }

    &.close {
      background-color: #d31919;
      &:hover {
        background-image: -gtk-scaled(url('assets/close.png'), url('assets/close@2.png'));
      }
    }

    .maximized &,
    .fullscreen &,
    .tiled &,
    .tiled-top &,
    .tiled-right &,
    .tiled-bottom &,
    .tiled-left & {
        &:last-child { margin-right: 0; }
        &:first-child { margin-left: 0; }
    }
  }

  &.default-decoration {
    background: opacify($headerbar_color, 1);
    min-height: 0;
    padding: 6px;

    button.titlebutton {
      min-height: 0;
      min-width: 0;

      &, &:last-child {
        margin: 0;
      }
    }
  }
}

paned headerbar:first-child,
hdyleaflet headerbar:first-child,
headerbar.titlebar headerbar:first-child,
deck leaflet box:first-child headerbar:first-child,
leaflet > headerbar:first-child {
  border-color: $backdrop_borders_color;
  background: $base_color;
  box-shadow: none;

  &:backdrop { background: $backdrop_base_color; }
}


/**************
 * Tree Views *
 **************/
treeview.view {
  border-top-color: $borders-color;

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

  header button {
    @include button(normal);

    &:hover,
    &:active { border-color: $borders_color; }

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

/***************
 * Popovers   *
 ***************/
popover.background {
  box-shadow: $_menu_shadow;
  .csd &, & { border-color: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25)); }
}

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

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

          &:checked {
            @include button(normal);
            background: image($base_color);

            &:backdrop {
              @include button(backdrop);
              background: image($base_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);
      > tabs {
        margin-bottom: -3px;
        > tab {
          margin: 3px 0;
          border-radius: $button_radius $button_radius 0 0;
          &:not(:checked) { box-shadow: 4px 3px 0 -3px $borders_color; }
          &:checked, &:checked:backdrop { border-bottom-color: $base_color; }
        }
      }
    }

    &.bottom {
      background-image: linear-gradient(to top, $gradient);
      > tabs {
        margin-top: -3px;
        > tab {
          margin: 3px 0;
          border-radius: 0 0 $button_radius $button_radius;
          &:not(:checked) { box-shadow: 4px -3px 0 -3px $borders_color; }
          &:checked, &:checked:backdrop { border-top-color: $base_color; }
        }
      }
    }

    &.right {
      background-image: linear-gradient(to left, $gradient);
      > tabs {
        margin-left: -3px;
        > tab {
          margin: 0 3px;
          border-radius: 0 $button_radius $button_radius 0;
          &:not(:checked) { box-shadow: -3px 4px 0 -3px $borders_color; }
          &:checked, &:checked:backdrop { border-left-color: $base_color; }
        }
      }
    }

    &.left {
      background-image: linear-gradient(to right, $gradient);
      > tabs {
        margin-right: -3px;
        > tab {
          margin: 0 3px;
          border-radius: $button_radius 0 0 $button_radius;
          &:not(:checked) { box-shadow: 3px 4px 0 -3px $borders_color; }
          &:checked, &:checked:backdrop { border-right-color: $base_color; }
        }
      }
    }

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

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

/**************
 * Scrollbars *
 **************/
scrollbar slider {
  min-width: 6px;
  min-height: 6px;
}

/**************
 * GtkInfoBar *
 **************/
infobar {
  @mixin _infobar_button($bg) {
    button,
    button.flat {
      @include button(normal, lighten($bg, 10%), $selected_fg_color, none);

      &:hover { @include button(hover, $bg, $selected_fg_color, none); }

      &:active,
      &:checked { @include button(active, $bg, $selected_fg_color, none); }

      &:disabled { @include button(insensitive, $bg, $selected_fg_color, none); }

      &:backdrop {
        @include button(backdrop, $bg, $selected_fg_color, none);
        border-color: _border_color($bg);

        &:disabled {
          @include button(backdrop-insensitive, $bg,
                          $selected_fg_color, none);
          border-color: _border_color($bg);
        }
      }
      &:backdrop, & {
        label, & { color: $selected_fg_color; }
      }
    }
  }

  &,
  &.info,
  &.question,
  &.warning,
  &.error {

    border-style: none;
    text-shadow: none;

    &:backdrop > revealer > box, & > revealer > box {
      label, & { color: $selected_fg_color; }
    }

    &:backdrop { text-shadow: none; }

    selection { background-color: darken($bg_color, 10%); }

    *:link { color: $link_color; }
  }

  &.info, &.info.action:hover {
    &:backdrop > revealer > box, & > revealer > box {
      background-color: $selected_bg_color;
    }

    @include _infobar_button($selected_bg_color);
  }

  &.question, &.warning, &.question.action:hover, &.warning.action:hover {
    &:backdrop > revealer > box, & > revealer > box {
      background-color: $warning_color;
    }

    @include _infobar_button($warning_color);
  }

  &.error, &.error.action:hover {
    &:backdrop > revealer > box, & > revealer > box {
      background-color: $error_color;

      @include _infobar_button($error_color);
    }
  }
}

/*********
 * Lists *
 *********/
row {
  &:selected, &.activatable:selected {
    &, &:backdrop, &:active {
    border-radius: $button_radius + 4px;
    background-color: $bg_color;
    color: $text_color;
    box-shadow: inset 0 0 0 9999px $menu_selected_color,
                inset 0 0 0 3px $bg_color;
    }
  }
}

/*********************
 * App Notifications *
 *********************/
.app-notification,
.app-notification.frame {
  padding: 5px 10px;
  margin: 20px;
  border-radius: $button_radius+1;
  border: 1px solid transparentize($_wm_border, 0.1);
  box-shadow: $_menu_shadow;
  background-image: none;

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

/************
 * Calendar *
 ***********/
calendar {
  border-radius: 6px;
  border:0;
  padding: 1px;
}

/***********
 * Dialogs *
 ***********/
messagedialog .titlebar:backdrop { background-image: none; }


/***********
 * Sidebar *
 ***********/
.sidebar {
  background-color: $bg_color;
}

stacksidebar row { padding: 7px 3px; }

/****************
 * File chooser *
 ****************/
placessidebar {
  row {
    min-height: 30px;
  }
}

/**********************
 * Window Decorations *
 *********************/
decoration {
  $_border_width: 1px;
  $_top_window_radius: $window_radius+$_border_width;
  $_bottom_window_radius: min($button_radius+$_border_width, 6px);
  border-radius: $_top_window_radius $_top_window_radius $_bottom_window_radius $_bottom_window_radius;
  border: $_border_width solid $bg_color;
  border-top-width: 0;
  border-bottom-width: 2px;
  background: if($transparency=='true', transparent, $bg_color);

  @if $transparency=='true' {
    border-color: $headerbar_color $headerbar_color $bg_color;
  }

  box-shadow: 0 2px 8px 0 transparentize(black, 0.6),
              0 0 0 1px $_wm_border;

  &:backdrop {
    box-shadow: 0 2px 8px 0 transparent,
                0 0 5px 3px transparentize(black, if($variant == 'light', .85, .75)),
                0 0 0 1px if($variant=='light', transparentize(black, 0.97), transparentize(black, 0.25));
  }

  .maximized &,
  .fullscreen &,
  .tiled &,
  .tiled-top &,
  .tiled-right &,
  .tiled-bottom &,
  .tiled-left & { border-width: 0; }

  dialog & {
    border-width: 0 0 4px;
  }

  .popup & { border-width: 0; }

  .ssd & {
    box-shadow: 0 0 0 1px $_wm_border;
    border-width: 0;
  }

  .csd.popup & {
    box-shadow: $_menu_shadow,
                0 0 0 1px transparentize($_wm_border, 0.1);
    border-width: 0;
  }

  tooltip.csd & { border: 0; }

  messagedialog.csd & {
    border-width: 0;
    box-shadow: 0 1px 4px transparentize(black, 0.8);
  }
}

@if $transparency == 'true' {
  window.unified, window.unified:backdrop {
    background: linear-gradient(to bottom, $headerbar_color $_headerbar_height, $bg_color $_headerbar_height);

    decoration { border: 0; }

    headerbar { background: transparent; }
  }
}
