/**************
 * Scrollbars *
 **************/

.scrollbar {
  $_slider_min_length: 40px;

  // disable steppers
  @at-root * {
    -GtkScrollbar-has-backward-stepper: false;
    -GtkScrollbar-has-forward-stepper: false;
  }

  background-color: $scrollbar_bg_color;
  transition: 300ms $ease-out-quad;


  // scrollbar border
  $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left));
  @each $pos, $b_pos in $pos_list {
    &.#{$pos} & {
      border-#{$b_pos}: 1px solid $borders_color;
    }
  }

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

  // slider
  .slider {
    margin: -1px;
    border: 4px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    background-color: $scrollbar_slider_color;

    &:hover { background-color: $scrollbar_slider_hover_color; }

    &:hover:active { background-color: $scrollbar_slider_active_color; }

    &:backdrop { background-color: $backdrop_scrollbar_slider_color; }

    &:insensitive { background-color: transparent; }
  }

  &.fine-tune {
    .slider {
    }

    &.horizontal .slider { border-width: 5px 4px; }
    &.vertical .slider { border-width: 4px 5px; }
  }

  &.overlay-indicator {
    &:not(.dragging):not(.hovering) {
      border-color: transparent;
      opacity: 0.4;
      background-color: transparent;

      .slider {
        margin: -1px;
        background-color: $fg_color;
        border: 1px solid if($variant == 'light', white, black);
      }

      .button,
      button {
        background-color: $fg_color;
        background-clip: padding-box;
        border-radius: 100%;
        border: 1px solid if($variant == 'light', white, black);
        -gtk-icon-source: none;
      }

      &.horizontal {
        .slider,
        slider {
          margin: 0 2px;
        }

        .button,
        button {
          margin: 1px 2px;
        }
      }

      &.vertical {
        .slider {
          margin: 2px 0;
        }

        .button {
          margin: 2px 1px;
        }
      }
    }

    &.dragging,
    &.hovering { opacity: 0.8; }
  }



  // button styling
  .button {
    padding: 0;
    border-style: none;
    border-radius: 0;

    @include button(undecorated);

    color: $scrollbar_slider_color;

    &:hover {
      @include button(undecorated);

      color: $scrollbar_slider_hover_color;
    }
    &:active, &:checked {
      @include button(undecorated);

      color: $scrollbar_slider_active_color;
    }
    &:insensitive {
      @include button(undecorated);

      color: transparentize($scrollbar_slider_color, 0.8);
    }
    &:backdrop {
      @include button(undecorated);

      color: $backdrop_scrollbar_slider_color;

      &:insensitive {
        @include button(undecorated);

        color: transparentize($backdrop_scrollbar_slider_color, 0.8);
      }
    }
  }

  // button icons
  &.vertical {
    .button,
    button {
      &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
      &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
    }
  }

  &.horizontal {
    .button,
    button {
      &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
      &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
    }
  }
}

GtkTreeView ~ .scrollbar.vertical {
  border-top: 1px solid $borders_color;
  margin-top: -1px;
}


/**********************
 * Overlay Scrollbars *
 *********************/

OsThumb,
OsScrollbar {

  color: $selected_bg_color;

  &:active,
  &:selected {
    background-color: $selected_bg_color;
  }

  &:backdrop,
  &:active:backdrop {
    background-color: $backdrop_fg_color;
  } 

  &:insensitive {
    background-color: $insensitive_fg_color;
  }
}