:root {
  --brk-scrollbar-width: 18px;
  --brk-scrollbar-line: rgba(177, 8, 8, 0.5);
  --brk-scrollbar-fallback-thumb: rgba(244, 240, 229, 0.96);
}

@supports not selector(::-webkit-scrollbar) {
  html,
  * {
    scrollbar-color: var(--brk-scrollbar-fallback-thumb) var(--brk-scrollbar-line);
    scrollbar-width: thin;
  }
}

@supports selector(::-webkit-scrollbar) {
  html,
  body,
  * {
    scrollbar-color: auto !important;
    scrollbar-width: auto !important;
  }
}

*::-webkit-scrollbar {
  width: var(--brk-scrollbar-width);
  height: var(--brk-scrollbar-width);
  background: transparent;
}

*::-webkit-scrollbar-track:vertical,
*::-webkit-scrollbar-track-piece:vertical {
  background:
    linear-gradient(
      to right,
      transparent calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}

*::-webkit-scrollbar-thumb:vertical {
  min-height: 42px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image:
    url("./line.png"),
    linear-gradient(
      to right,
      transparent calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 1000% 100%, 100% 100%;
}


*::-webkit-scrollbar-button:single-button:vertical {
  display: block;
  width: var(--brk-scrollbar-width);
  height: var(--brk-scrollbar-width);
  border: 0;
  background-color: transparent;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 160% 160%, 100% 100%;
}


*::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image:
    url("./up.png"),
    linear-gradient(
      to right,
      transparent calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}

*::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image:
    url("./down.png"),
    linear-gradient(
      to right,
      transparent calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}

.brk-scroll-at-start::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image:
    url("./up_disabled.png"),
    linear-gradient(
      to right,
      transparent calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}

.brk-scroll-at-end::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image:
    url("./down_disabled.png"),
    linear-gradient(
      to right,
      transparent calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% - 1px),
      var(--brk-scrollbar-line) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

@media (max-width: 800px) {
  :root {
    --brk-scrollbar-width: 15px;
  }
}