@import 'part:@lyra/base/theme/variables-style';

:root {
  --defaultScrollBarWidth: calc(var(--small-padding) / 2);
}

.lightScrollbars {
  @media (--screen-medium) {
    @nest &::-webkit-scrollbar {
      background-color: transparent;
      width: var(--defaultScrollBarWidth);
    }

    @nest &::-webkit-scrollbar * {
      background: transparent;
    }

    @nest &::-webkit-scrollbar-thumb:window-inactive {
      opacity: 0;
    }

    @nest &:hover {
      @nest &::-webkit-scrollbar {
        width: var(--defaultScrollBarWidth);
      }

      @nest &::-webkit-scrollbar-thumb {
        background-color: var(--gray);
        border-radius: calc(var(--defaultScrollBarWidth) / 2);
        border: 2px color(var(--black) a(2%)) solid;
      }

      @nest &::-webkit-scrollbar-track {
        padding: 2px;
        width: var(--defaultScrollBarWidth);
        background-color: transparent;
      }
    }

    @nest &::-webkit-scrollbar-thumb {
      background-color: transparent;

      @nest &:hover {
        background-color: var(--black);
      }
    }
  }
}

.thinLightScrollbars {
  /* kept in case somebody uses it as a part */

  composes: lightScrollbars;

  @nest &::-webkit-scrollbar {
    width: 3px;

    @media (--screen-medium) {
      width: 3px;
    }
  }

  @nest &:hover {
    @nest &::-webkit-scrollbar {
      width: 3px;

      @media (--screen-medium) {
        width: 3px;
      }
    }
  }
}

.hideScrollbars {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-style: overflow;
}

.touchScroll {
  -webkit-overflow-scrolling: touch;
}

.scrollAll {
  overflow: auto;
  composes: touchScroll;
}

.scrollX {
  composes: touchScroll;
  overflow-y: hidden;
  overflow-x: auto;
}

.scrollY {
  composes: touchScroll;
  overflow-y: auto;
  overflow-x: hidden;
}