.tr-scrollbar{
	overflow: hidden;
  position: relative;
	&:hover,
  &:active,
  &:focus{
		 > .tr-scrollbar__bar{
			opacity: 1;
      transition: opacity 0.34s ease-out;
		 }
	}
	.tr-scrollbar__wrap{
		overflow: scroll;
	}
	.tr-scrollbar__bar{
		position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 1;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .12s ease-out;
		&.opacity1{
			opacity: 1;
		}
		&.is-horizontal{
			 height: 5px;
      left: 2px;
			.tr-scrollbar__thumb{
				height: 100%;
        // display: none;
        &.show-true{
          display: block;
        }
        &.show-false{
          display: none;
        }

			}
		}
		&.is-vertical{
			width: 6px;
      top: 2px;
			.tr-scrollbar__thumb{
				width: 100%;
        &.show-true{
          display: block;
        }
        &.show-false{
          display: block;
        }
			}

		}
		&.is-horizontal{
			.tr-scrollbar__thumb{
				width: 100%;

			}
		}

	}
	.tr-scrollbar__thumb{
		position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: inherit;
    background-color: hsla(220, 4%, 50%, .3);
    transition: background-color .3s;
		&:hover{
			background-color: hsla(220,4%,58%,.5);
		}
	}
}
.adapt-width{
	&.tr-scrollbar__wrap{
		 font-size: 0;
	}
  .tr-scrollbar__view{
		font-size: 1rem;
    display: inline-block;
    min-width: 100%;
	}
}
.tr-scrollbar__wrap--hidden-default::-webkit-scrollbar{
	 width: 0;
  height: 0;
}