@use '@/assets/css/constants' as constants;
@use '@/assets/css/mixins' as mixins;

.hide-scrollbar-mask {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .hide-scrollbar-selection {
    position: relative;
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;

    .hide-scrollbar-content {
      min-width: 100%;
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .scrollbar {
    position: absolute;
    z-index: 1000;
    opacity: .5;
    touch-action: none;

    .box {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;


      .block {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        background-color: constants.$font-secondary-color;
        transition: background-color .2s;
      }

      :hover {
        background-color: constants.$font-main-color;
      }
    }

    &.hide {
      display: block;
      opacity: 0;
      animation: 0.4s linear;

      @include mixins.unique-keyframes {
        0% {
          opacity: 0.5;
        }
        100% {
          opacity: 0;
        }
      }
    }
  }

  .vertical-scrollbar {
    height: 100%;
    left: 100%;
    top: 0;
    transform: translateX(-100%);

    .box {
      width: 6px;
    }
  }

  .horizontal-scrollbar {
    width: 100%;
    left: 0;
    top: 100%;
    transform: translateY(-100%);

    .box {
      height: 8px;
    }
  }
}