:root {
    --ef-scroll-thumb: #311112;
    --ef-scroll-track: #31111266;
    --ef-scroll-track-solid: #FFFFFF;
    --ef-scroll-size: 5px;
    --ef-scroll-border: 1px;
    --ef-scroll-radius: 3px;
  }

  html {
    scrollbar-width: thin;
    scrollbar-color: var(--ef-scroll-thumb) var(--ef-scroll-track-solid);
    color-scheme: light;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--ef-scroll-thumb) var(--ef-scroll-track-solid);
  }

  *::-webkit-scrollbar {
    width: var(--ef-scroll-size);
    height: var(--ef-scroll-size);
    -webkit-appearance: none;
    appearance: none;
  }

  *::-webkit-scrollbar-track {
    background-color: var(--ef-scroll-track);
    border-radius: var(--ef-scroll-radius);
    -webkit-appearance: none;
    appearance: none;
  }

  /*
    В покое thumb ужеже track за счёт прозрачной рамки.
    При hover рамка того же цвета — браузер не может «просветить» thumb.
  */
  *::-webkit-scrollbar-thumb {
    background-color: var(--ef-scroll-thumb) !important;
    background-image: none !important;
    border-radius: var(--ef-scroll-radius);
    border: var(--ef-scroll-border) solid transparent;
    background-clip: padding-box;
    box-shadow: none !important;
    opacity: 1 !important;
    min-height: 32px;
    -webkit-appearance: none;
    appearance: none;
  }

  *::-webkit-scrollbar-thumb:hover,
  *::-webkit-scrollbar-thumb:active,
  *::-webkit-scrollbar-thumb:vertical:hover,
  *::-webkit-scrollbar-thumb:horizontal:hover,
  *::-webkit-scrollbar-thumb:vertical:active,
  *::-webkit-scrollbar-thumb:horizontal:active,
  *::-webkit-scrollbar-thumb:window-inactive {
    background-color: var(--ef-scroll-thumb) !important;
    background-image: none !important;
    border: var(--ef-scroll-border) solid var(--ef-scroll-thumb) !important;
    background-clip: border-box !important;
    box-shadow: inset 0 0 0 10px var(--ef-scroll-thumb) !important;
    opacity: 1 !important;
  }

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