/* Handle */
*{
  //&::-webkit-scrollbar{
	//width: $scrollbar-width;
  //  height: $scrollbar-width;
	//&-thumb{
	//  background: $scrollbar-foreground;
	//  //border: 1px solid $scrollbar-foreground-border;
	//  border-top-width: 0px;
	//  border-bottom-width: 0px;
	//  &:window-inactive{
  //
	//  }
	//}
	//&-track{
	//  background: $scrollbar-background;
	//  border: 1px solid $scrollbar-background-border;
	//  border-top-width: 0px;
	//  border-bottom-width: 0px;
  //    position: relative;
	//}
  //}
}

.ps{
  &-container{
	&:hover{
	  .ps-scrollbar{
		&-x,&-y{
		  &-rail{
			opacity: 1;
		  }
		}
	  }
	}
  }
  &-in-scrolling{
	.ps-scrollbar{
	  &-x,&-y{
		&-rail{
		  opacity: 1 !important;
		}
	  }
	}
  }
  &-scrollbar{
	&-x,&-y{
	  @extend %compositor-layer;
	  @extend %border-radius;
	  background: $scrollbar-foreground;
	  position: absolute;
	  opacity: 0.5;
	  //border: 1px solid darken($scrollbar-background,10%);
	  &:hover{
		opacity: 1;
	  }
	  &-rail{
		position: absolute;
		opacity: 0;
		//background: $scrollbar-background;
		border: 1px solid transparent;
		z-index: 0;
	  }
      @include respond-to(max-medium-screen) {
        &-rail{
          opacity: 1 !important;
        }
      }
	}

	&-x{
	  height: $scrollbar-width - 2;
	  margin-bottom: 1px;
	  &-rail{
		//left: 0 !important;
		//right: 0 !important;
		bottom: 0;
		height: $scrollbar-width;
		//width: 100% !important;
		border-left: none;
		border-right: none;
	  }
	}
	&-y{
	  width: $scrollbar-width - 2;
	  margin-left: 2px;
	  &-rail{
		left: auto;
		width: $scrollbar-width;
		border-top: none;
		border-bottom: none;
		right: 0 !important;
	  }
	}
  }
}