
/* SCROLLBARS */

.scrollbars {

  @include fill-absolute ();
  padding: 0;
  border-radius: inherit;
  overflow: hidden;

  /* TRACK */

  &-track {

    position: absolute;
    z-index: $scrollbars-track-z-index;
    user-select: none !important;
    overflow: hidden;
    transition-duration: $scrollbars-track-animation-duration;

    /* HORIZONTAL */

    &.horizontal {

      bottom: 0;
      left: 0;
      right: 0;
      height: $scrollbars-track-size;

      .scrollbars-thumb {
        min-width: $scrollbars-thumb-min-size;
        top: $scrollbars-track-size - $scrollbars-thumb-collapsed-size;
        height: $scrollbars-thumb-collapsed-size;
        transition-property: top, height;
        transition-duration: $scrollbars-thumb-animation-duration;
      }

    }

    /* VERTICAL */

    &.vertical {

      right: 0;
      top: 0;
      bottom: 0;
      width: $scrollbars-track-size;

      .scrollbars-thumb {
        min-height: $scrollbars-thumb-min-size;
        left: $scrollbars-track-size - $scrollbars-thumb-collapsed-size;
        width: $scrollbars-thumb-collapsed-size;
        transition-property: left, width;
        transition-duration: $scrollbars-thumb-animation-duration;
      }

    }

  }

  /* THUMB */

  &-thumb {
    position: absolute;
    z-index: $scrollbars-thumb-z-index;
    background-color: #00000066;
    clip-path: inset(2px round $gutter);
  }

  /* CORNER */

  &-corner {
    display: none;
    position: absolute;
    z-index: $scrollbars-corner-z-index;
    right: 0;
    bottom: 0;
    width: $scrollbars-corner-size;
    height: $scrollbars-corner-size;
  }

  /* SHADOWS */

  &-shadows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: $scrollbars-shadows-z-index;
    transition-duration: $scrollbars-shadows-animation-duration;
  }

  /* VIEWPORT */

  &-viewport {

    @include fill-absolute ();
    overflow: scroll;
    scrollbar-width: 0;

    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      visibility: hidden;
      opacity: 0;
    }

  }

  /* CONTENT */

  &-content {
    position: relative !important;
    overflow: visible;
    min-height: 100%;
    min-width: 100%;
  }

  /* HAS HORIZONTAL */

  &:not(.has-horizontal) {

    > .scrollbars-track.horizontal {
      visibility: hidden;
      pointer-events: none;
    }

  }

  /* HAS VERTICAL */

  &:not(.has-vertical) {

    > .scrollbars-track.vertical {
      visibility: hidden;
      pointer-events: none;
    }

  }

  /* HAS CORNER */

  &.has-corner {

    /* HORIZONTAL */

    > .scrollbars-track.horizontal {
      right: $scrollbars-corner-size;
    }

    /* VERTICAL */

    > .scrollbars-track.vertical {
      bottom: $scrollbars-corner-size;
    }

  }

  /* HAS SHADOWS */

  &.has-shadows {

    $directions-classes: (
      top: ".is-vertical-scrolled-start",
      bottom: ".is-vertical-scrolled-end",
      left: ".is-horizontal-scrolled-start",
      right: ".is-horizontal-scrolled-end"
    );

    $directions-shadows: (
      top: $scrollbars-shadow-top,
      bottom: $scrollbars-shadow-bottom,
      left: $scrollbars-shadow-left,
      right: $scrollbars-shadow-right
    );

    $permutations: (
      /* 1 DIRECTION */
      ( "top" ), ( "right" ), ( "bottom" ), ( "left" ),
      /* 2 DIRECTIONS */
      ( "top", "right" ), ( "top", "bottom" ), ( "top", "left" ), ( "right", "bottom" ), ( "right", "left" ), ( "bottom", "left" ),
      /* 3 DIRECTIONS */
      ( "top", "right", "bottom" ), ( "top", "right", "left" ), ( "top", "bottom", "left" ), ( "right", "bottom", "left" ),
      /* 4 DIRECTIONS */
      ( "top", "right", "bottom", "left" )
    );

    @each $permutation in $permutations {

      $classes: "";
      $shadows: ();

      @each $direction in $permutation {

        $class: map-get( $directions-classes, $direction );
        $classes: "#{$classes}#{$class}";

        $shadow: map-get( $directions-shadows, $direction );
        $shadows: append( $shadows, $shadow, "comma" );

      }

      &#{$classes} > .scrollbars-shadows {
        box-shadow: #{$shadows};
      }

    }

  }

  /* IS DRAGGING */

  // Disabled, because otherwise elements inside it can't be found with document.elementAtPoint

  // &.is-horizontal-dragging,
  // &.is-vertical-dragging {

    // > .scrollbars-viewport {
    //   pointer-events: none;
    // }

  // }

  /* IS DRAGGING HORIZONTAL */

  &-track.horizontal:hover,
  &-track.horizontal:active,
  &.is-horizontal-dragging > .scrollbars-track.horizontal {

    .scrollbars-thumb {
      top: $scrollbars-track-size - $scrollbars-thumb-expanded-size;
      height: $scrollbars-thumb-expanded-size;
    }

  }

  /* IS DRAGGING VERTICAL */

  &-track.vertical:hover,
  &-track.vertical:active,
  &.is-vertical-dragging > .scrollbars-track.vertical {

    .scrollbars-thumb {
      left: $scrollbars-track-size - $scrollbars-thumb-expanded-size;
      width: $scrollbars-thumb-expanded-size;
    }

  }

  /* AUTOHIDE */

  &.autohide {

    /* HORIZONTAL SCROLLING */

    &:not(.autohide-hover):not(.is-horizontal-scrolling),
    &.autohide-hover:not(.is-horizontal-scrolling):not(:hover):not(:active) {

      > .scrollbars-track:not(:hover):not(:active).horizontal {
        opacity: 0;
      }

    }

    &.is-horizontal-scrolling {

      > .scrollbars-track.horizontal {
        transition-duration: 0s;
      }

    }

    /* VERTICAL SCROLLING */

    &:not(.autohide-hover):not(.is-vertical-scrolling),
    &.autohide-hover:not(.is-vertical-scrolling):not(:hover):not(:active) {

      > .scrollbars-track:not(:hover):not(:active).vertical {
        opacity: 0;
      }

    }

    &.is-vertical-scrolling {

      > .scrollbars-track.vertical {
        transition-duration: 0s;
      }

    }

  }

  /* AUTOSIZE */

  &.autosize {

    position: relative;
    max-width: 100%;
    max-height: 100%;
    height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available;
    height: stretch;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    width: stretch;

    > .scrollbars-viewport {
      position: relative;
      height: 100%;
      width: 100%;
    }

  }

  /* IS MOBILE */

  html.mobile &-track {
    pointer-events: none;
  }

  /* IS DRAGGING */

  html.scrollbars-dragging & {

    /* HORIZONTAL SCROLLING */

    &:not(.is-horizontal-dragging) {

      > .scrollbars-track.horizontal {
        pointer-events: none;
      }

    }

    /* VERTICAL SCROLLING */

    &:not(.is-vertical-dragging) {

      > .scrollbars-track.vertical {
        pointer-events: none;
      }

    }

  }

}
