//
// Scrollbars
//
$_scrollbar_bg_color: transparentize($base_color, 0.7);

scrollbar {
  @at-root * {
    /* pretter ignore */
    -GtkScrollbar-has-backward-stepper: false;
    -GtkScrollbar-has-forward-stepper: false;
  }

  $_slider_min_length: 40px;

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

  &.top {
    border-bottom: 1px solid $borders_color;
  }

  &.bottom {
    border-top: 1px solid $borders_color;
  }

  &.left {
    border-right: 1px solid $borders_color;
  }

  &.right {
    border-left: 1px solid $borders_color;
  }

  button {
    border: none;
  }

  // slider
  slider {
    min-width: 6px;
    min-height: 6px;
    margin: -1px;
    border: 4px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    background-color: mix($fg_color, $bg_color, 40%);

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

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

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

  &.fine-tune {
    slider {
      min-width: 4px;
      min-height: 4px;
    }

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

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

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

      slider {
        margin: 0;
        min-width: 4px;
        min-height: 4px;
        background-color: mix($fg_color, $bg_color, 70%);
        border: 1px solid transparentize(black, 0.7);
        // background-clip: padding-box;
      }

      // w/o the following margin tweaks the slider shrinks when hovering/dragging
      &.vertical slider {
        margin: 2px 0;
        min-height: $_slider_min_length;
      }

      &.horizontal slider {
        margin: 0 2px;
        min-width: $_slider_min_length;
      }
    }

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

  &.horizontal slider {
    min-width: $_slider_min_length;
  }

  &.vertical slider {
    min-height: $_slider_min_length;
  }
}

frame > border,
.frame {
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: 1px solid $borders_color;
}

frame.flat > border,
frame > border.flat,
.frame.flat {
  border-style: none;
}

scrolledwindow {
  viewport.frame {
    // avoid double borders when viewport inside scrolled window
    border-style: none;
  }

  // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
  // This draws a box on top of the content, the size changes programmatically.
  overshoot {
    &.top {
      @include overshoot(top);
    }

    &.bottom {
      @include overshoot(bottom);
    }

    &.left {
      @include overshoot(left);
    }

    &.right {
      @include overshoot(right);
    }
  }

  // Overflow indication, works similarly to the overshoot, the size if fixed tho.
  undershoot {
    &.top {
      @include undershoot(top);
    }

    &.bottom {
      @include undershoot(bottom);
    }

    &.left {
      @include undershoot(left);
    }

    &.right {
      @include undershoot(right);
    }
  }

  junction {
    // the small square between two scrollbars
    border-color: transparent;
    // the border image is used to add the missing dot between the borders, details, details, details...
    border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px
      stretch;
    background-color: $_scrollbar_bg_color;

    &:dir(rtl) {
      border-image-slice: 0 1 0 0;
    }
  }
}