diff --git a/src/containers/tool/Drawer/Content/DesktopView.tsx b/src/containers/tool/Drawer/Content/DesktopView.tsx
index 631225243..6726b61ce 100755
--- a/src/containers/tool/Drawer/Content/DesktopView.tsx
+++ b/src/containers/tool/Drawer/Content/DesktopView.tsx
@@ -1,6 +1,5 @@
 import { FC, useEffect, useRef, memo } from 'react'
 
-import 'overlayscrollbars/styles/overlayscrollbars.css'
 import { useOverlayScrollbars } from 'overlayscrollbars-react'
 
 import { DRAWER_SCROLLER } from '@/constant/dom'
diff --git a/src/widgets/CustomScroller/VerticalScroller.tsx b/src/widgets/CustomScroller/VerticalScroller.tsx
index 03115036a..3e298f440 100755
--- a/src/widgets/CustomScroller/VerticalScroller.tsx
+++ b/src/widgets/CustomScroller/VerticalScroller.tsx
@@ -5,7 +5,6 @@
  */
 
 import { FC, useState, Fragment, useCallback, memo } from 'react'
-import 'overlayscrollbars/styles/overlayscrollbars.css'
 
 // NOTE: do not use ViewportTracker here, it cause crash
 import { Waypoint } from 'react-waypoint'
diff --git a/src/widgets/CustomScroller/index.tsx b/src/widgets/CustomScroller/index.tsx
index e285fdda3..a013a8aed 100755
--- a/src/widgets/CustomScroller/index.tsx
+++ b/src/widgets/CustomScroller/index.tsx
@@ -3,7 +3,7 @@ import { FC, ReactNode, memo } from 'react'
 import type { TSizeSML } from '@/spec'
 import type { TDirection, TScrollDirection } from './spec'
 
-import HorizontalScroller from './HorizontalScroller'
+// import HorizontalScroller from './HorizontalScroller'
 import VerticalScroller from './VerticalScroller'
 
 export type TProps = {
@@ -30,11 +30,7 @@ export type TProps = {
 }
 
 const CustomScroller: FC<TProps> = ({ children, direction = 'vertical', ...restProps }) => {
-  return direction === 'vertical' ? (
-    <VerticalScroller {...restProps}>{children}</VerticalScroller>
-  ) : (
-    <HorizontalScroller {...restProps}>{children}</HorizontalScroller>
-  )
+  return <VerticalScroller {...restProps}>{children}</VerticalScroller>
 }
 
 export default memo(CustomScroller)
diff --git a/src/widgets/FeedsBar/List.tsx b/src/widgets/FeedsBar/List.tsx
deleted file mode 100755
index 5ca97c374..000000000
--- a/src/widgets/FeedsBar/List.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- *
- * List
- *
- */
-
-import { FC, memo } from 'react'
-
-import { ICON_CMD } from '@/config'
-import { buildLog } from '@/logger'
-
-import CustomScroller from '@/widgets/CustomScroller'
-import { SpaceGrow } from '@/widgets/Common'
-
-import { mockList } from './mock'
-
-import { ListItemWrapper, Header, Icon, InfoIcon, Timestamp, Title } from './styles/list'
-
-/* eslint-disable-next-line */
-const log = buildLog('w:FeedsBar:index')
-
-const List: FC = () => {
-  // list header(with lable) - 40px
-  // source select - 75px
-  const listHeadHeight = '105px'
-  const items = mockList()
-
-  return (
-    <CustomScroller direction="vertical" height={`calc(90vh - ${listHeadHeight})`} autoHide>
-      {items.map((item) => (
-        <ListItemWrapper key={item.id}>
-          <Header>
-            <Icon src={item.icon} />
-            {item.source}
-            <InfoIcon src={`${ICON_CMD}/hot/info.svg`} />
-            <SpaceGrow />
-            <Timestamp>{item.createdAt}</Timestamp>
-          </Header>
-          <Title>{item.title}</Title>
-        </ListItemWrapper>
-      ))}
-    </CustomScroller>
-  )
-}
-
-export default memo(List)
diff --git a/src/widgets/FeedsBar/SourceSelector.tsx b/src/widgets/FeedsBar/SourceSelector.tsx
deleted file mode 100755
index 4eac607b2..000000000
--- a/src/widgets/FeedsBar/SourceSelector.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- *
- * SourceSelector
- *
- */
-
-import { FC, memo } from 'react'
-
-import { buildLog } from '@/logger'
-import CustomScroller from '@/widgets/CustomScroller'
-import { Wrapper, Icon, Block, Title } from './styles/source_selector'
-
-import { mockSource } from './mock'
-
-/* eslint-disable-next-line */
-const log = buildLog('w:SourceSelector:index')
-
-const SourceSelector: FC = () => {
-  const items = mockSource()
-
-  return (
-    <Wrapper>
-      <CustomScroller direction="horizontal" innerHeight="70px" shadowSize="small">
-        {items.map((item) => (
-          <Block key={item.id}>
-            <Icon src={item.icon} />
-            <Title>{item.title}</Title>
-          </Block>
-        ))}
-      </CustomScroller>
-    </Wrapper>
-  )
-}
-
-export default memo(SourceSelector)
diff --git a/src/widgets/FeedsBar/index.tsx b/src/widgets/FeedsBar/index.tsx
deleted file mode 100755
index 1434fa97e..000000000
--- a/src/widgets/FeedsBar/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- *
- * FeedsBar
- *
- */
-
-import { FC, memo } from 'react'
-
-import { ICON_CMD } from '@/config'
-import { buildLog } from '@/logger'
-
-import { SpaceGrow } from '@/widgets/Common'
-import SourceSelector from './SourceSelector'
-import List from './List'
-
-import { Wrapper, Header, FunctionIcon, Title } from './styles'
-
-/* eslint-disable-next-line */
-const log = buildLog('w:FeedsBar:index')
-
-type TProps = {
-  title: string
-}
-
-const FeedsBar: FC<TProps> = ({ title }) => {
-  return (
-    <Wrapper>
-      <Header>
-        <Title>{title}</Title>
-        <SpaceGrow />
-        <FunctionIcon src={`${ICON_CMD}/hot/info.svg`} />
-      </Header>
-      <SourceSelector />
-      <List />
-    </Wrapper>
-  )
-}
-
-export default memo(FeedsBar)
diff --git a/src/widgets/FeedsBar/mock.ts b/src/widgets/FeedsBar/mock.ts
deleted file mode 100755
index 0cc8663d7..000000000
--- a/src/widgets/FeedsBar/mock.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import { ICON_CMD } from '@/config'
-
-export const mockList = () => {
-  return [
-    {
-      id: '0',
-      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-      source: 'hackernews',
-      createdAt: '3天前',
-      title: 'Thank HN: You helped me get a new job',
-    },
-    {
-      id: '1',
-      icon: `${ICON_CMD}/hot/techcrunch.png`,
-      source: 'techcrunch',
-      createdAt: '3天前',
-      title:
-        'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
-    },
-    {
-      id: '2',
-      icon: `${ICON_CMD}/hot/infoq.jpg`,
-      source: 'infoQ 中文站',
-      createdAt: '2天前',
-      title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
-    },
-    {
-      id: '3',
-      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-      source: 'hackernews',
-      createdAt: '3天前',
-      title: 'Thank HN: You helped me get a new job',
-    },
-    {
-      id: '4',
-      icon: `${ICON_CMD}/hot/techcrunch.png`,
-      source: 'techcrunch',
-      createdAt: '3天前',
-      title:
-        'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
-    },
-    {
-      id: '5',
-      icon: `${ICON_CMD}/hot/infoq.jpg`,
-      source: 'infoQ 中文站',
-      createdAt: '2天前',
-      title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
-    },
-    {
-      id: '6',
-      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-      source: 'hackernews',
-      createdAt: '3天前',
-      title: 'Thank HN: You helped me get a new job',
-    },
-    {
-      id: '7',
-      icon: `${ICON_CMD}/hot/techcrunch.png`,
-      source: 'techcrunch',
-      createdAt: '3天前',
-      title:
-        'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
-    },
-    {
-      id: '8',
-      icon: `${ICON_CMD}/hot/infoq.jpg`,
-      source: 'infoQ 中文站',
-      createdAt: '2天前',
-      title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
-    },
-    {
-      id: '9',
-      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-      source: 'hackernews',
-      createdAt: '3天前',
-      title: 'Thank HN: You helped me get a new job',
-    },
-    {
-      id: '10',
-      icon: `${ICON_CMD}/hot/techcrunch.png`,
-      source: 'techcrunch',
-      createdAt: '3天前',
-      title:
-        'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
-    },
-    {
-      id: '11',
-      icon: `${ICON_CMD}/hot/infoq.jpg`,
-      source: 'infoQ 中文站',
-      createdAt: '2天前',
-      title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
-    },
-    {
-      id: '12',
-      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-      source: 'hackernews',
-      createdAt: '3天前',
-      title: 'Thank HN: You helped me get a new job',
-    },
-    {
-      id: '13',
-      icon: `${ICON_CMD}/hot/techcrunch.png`,
-      source: 'techcrunch',
-      createdAt: '3天前',
-      title:
-        'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
-    },
-    {
-      id: '14',
-      icon: `${ICON_CMD}/hot/infoq.jpg`,
-      source: 'infoQ 中文站',
-      createdAt: '2天前',
-      title: 'Footer',
-    },
-  ]
-}
-
-export const mockSource = () => {
-  return [
-    {
-      id: '0',
-      icon: `${ICON_CMD}/hot/techcrunch.png`,
-      title: 'techcrunch',
-    },
-    {
-      id: '1',
-      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-      title: 'hackernews',
-    },
-    {
-      id: '2',
-      icon: `${ICON_CMD}/hot/infoq.jpg`,
-      title: 'infoQ',
-    },
-    {
-      id: '3',
-      icon: `${ICON_CMD}/hot/techcrunch.png`,
-      title: 'techcrunch',
-    },
-    {
-      id: '4',
-      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-      title: 'hackernews',
-    },
-    {
-      id: '5',
-      icon: `${ICON_CMD}/hot/infoq.jpg`,
-      title: 'infoQ',
-    },
-    {
-      id: '21',
-      icon: `${ICON_CMD}/hot/infoq.jpg`,
-      title: 'infoQ',
-    },
-    {
-      id: '31',
-      icon: `${ICON_CMD}/hot/techcrunch.png`,
-      title: 'techcrunch',
-    },
-    {
-      id: '41',
-      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-      title: 'hackernews',
-    },
-    {
-      id: '51',
-      icon: `${ICON_CMD}/hot/infoq.jpg`,
-      title: 'infoQ',
-    },
-  ]
-}
diff --git a/src/widgets/FeedsBar/styles/index.ts b/src/widgets/FeedsBar/styles/index.ts
deleted file mode 100755
index 731998c79..000000000
--- a/src/widgets/FeedsBar/styles/index.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import styled from 'styled-components'
-
-import Img from '@/Img'
-import css, { theme } from '@/css'
-
-const bgColor = '#02303e'
-
-export const Wrapper = styled.div`
-  width: 320px;
-  color: ${theme('article.digest')};
-  /* background: #02303e; */
-  /* height: 90vh; */
-  height: 100%;
-  margin-right: 15px;
-  flex-shrink: 0;
-  border: 1px solid;
-  border-color: ${bgColor};
-  background-color: ${bgColor};
-  border-radius: 3px;
-  overflow-y: hidden;
-`
-export const Header = styled.div`
-  position: relative;
-  ${css.row('align-center')};
-  padding: 6px 8px 5px 0;
-  color: ${theme('article.digest')};
-`
-export const FunctionIcon = styled(Img)`
-  ${css.size(18)};
-  fill: ${theme('article.digest')};
-  &:hover {
-    fill: ${theme('article.title')};
-    cursor: pointer;
-  }
-`
-export const Title = styled.div`
-  position: absolute;
-  top: -2px;
-  left: 0;
-  background: #0d4152;
-  padding: 2px 10px;
-  color: #92a4a5;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-
-  ${Wrapper}:hover & {
-    font-weight: bold;
-  }
-  transition: all 0.2s;
-`
-// color: #cecece;
-// padding: 8px 10px;
-// color: #cecece;
-// background: #006f74;
diff --git a/src/widgets/FeedsBar/styles/list.ts b/src/widgets/FeedsBar/styles/list.ts
deleted file mode 100755
index 21da9bc1e..000000000
--- a/src/widgets/FeedsBar/styles/list.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import styled from 'styled-components'
-
-import Img from '@/Img'
-import css, { theme } from '@/css'
-
-export const ListItemWrapper = styled.div`
-  width: 100%;
-  color: ${theme('article.digest')};
-  border-bottom: 1px solid;
-  border-bottom-color: #034256;
-  padding: 10px;
-
-  &:last-child {
-    border-bottom: none;
-  }
-`
-export const Header = styled.div`
-  ${css.row('align-center')};
-  margin-bottom: 4px;
-  color: ${theme('article.digest')};
-`
-export const Icon = styled(Img)`
-  ${css.circle(13)};
-  margin-right: 6px;
-`
-export const InfoIcon = styled(Img)`
-  ${css.circle(13)};
-  fill: ${theme('article.digest')};
-  margin-left: 5px;
-  opacity: 0;
-
-  ${Header}:hover & {
-    fill: ${theme('article.title')};
-    cursor: pointer;
-    opacity: 1;
-  }
-  transition: all 0.2s;
-`
-export const Timestamp = styled.div`
-  ${css.row()};
-  color: ${theme('article.digest')};
-  font-size: 12px;
-`
-export const Title = styled.div`
-  color: ${theme('article.title')};
-  font-size: 14px;
-  &:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-`
diff --git a/src/widgets/FeedsBar/styles/source_selector.ts b/src/widgets/FeedsBar/styles/source_selector.ts
deleted file mode 100755
index 74d6898e7..000000000
--- a/src/widgets/FeedsBar/styles/source_selector.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import styled from 'styled-components'
-
-import Img from '@/Img'
-import css, { theme } from '@/css'
-
-export const Wrapper = styled.div`
-  position: relative;
-  width: 100%;
-  height: 75px;
-  color: ${theme('article.digest')};
-  background: #022935;
-  border: 1px solid;
-  border-color: #013648;
-  padding-top: 2x;
-`
-export const Header = styled.div`
-  ${css.row()};
-  color: ${theme('article.digest')};
-`
-// padding: 10px 2px;
-export const Block = styled.div`
-  ${css.column('align-both')};
-  margin-right: 5px;
-
-  &:hover {
-    cursor: pointer;
-    background: #05303e;
-  }
-`
-export const Icon = styled(Img)`
-  ${css.circle(30)};
-`
-export const Title = styled.div`
-  ${css.cutRest('50px')};
-  text-align: center;
-  padding-left: 5px;
-  color: ${theme('article.digest')};
-`
diff --git a/src/widgets/FeedsBar/tests/index.test.ts b/src/widgets/FeedsBar/tests/index.test.ts
deleted file mode 100755
index 32a8b125b..000000000
--- a/src/widgets/FeedsBar/tests/index.test.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// import React from 'react'
-// import { shallow } from 'enzyme'
-
-// import FeedsBar from '..'
-
-describe('TODO <FeedsBar />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true)
-  })
-})
diff --git a/src/widgets/ThemePalette/ScrollBarStyle.ts b/src/widgets/ThemePalette/ScrollBarStyle.ts
index 98690cd55..b68baa204 100644
--- a/src/widgets/ThemePalette/ScrollBarStyle.ts
+++ b/src/widgets/ThemePalette/ScrollBarStyle.ts
@@ -1,5 +1,6 @@
 import { createGlobalStyle } from 'styled-components'
 
+import { theme } from '@/css'
 /*!
  * OverlayScrollbars
  * https://github.com/KingSora/OverlayScrollbars
@@ -18,559 +19,682 @@ OVERLAY SCROLLBARS CORE:
 */
 
 const ScrollBarStyle = createGlobalStyle`
-  /*!
-  * OverlayScrollbars
-  * Version: 2.0.1
-  *
-  * Copyright (c) Rene Haas | KingSora.
-  * https://github.com/KingSora
-  *
-  * Released under the MIT license.
-  */
-  .os-size-observer,
-  .os-size-observer-listener {
-    direction: inherit;
-    pointer-events: none;
-    overflow: hidden;
-    visibility: hidden;
-    box-sizing: border-box;
-  }
-
-  .os-size-observer,
-  .os-size-observer-listener,
-  .os-size-observer-listener-item,
-  .os-size-observer-listener-item-final {
-    writing-mode: horizontal-tb;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-
-  .os-size-observer {
-    z-index: -1;
-    contain: strict;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    padding: inherit;
-    border: inherit;
-    box-sizing: inherit;
-    margin: -133px;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: scale(0.1);
-  }
-  .os-size-observer::before {
-    content: "";
-    flex: none;
-    box-sizing: inherit;
-    padding: 10px;
-    width: 10px;
-    height: 10px;
-  }
-
-  .os-size-observer-appear {
-    animation: os-size-observer-appear-animation 1ms forwards;
-  }
-
-  .os-size-observer-listener {
-    box-sizing: border-box;
-    position: relative;
-    flex: auto;
-    padding: inherit;
-    border: inherit;
-    margin: -133px;
-    transform: scale(10);
-  }
-  .os-size-observer-listener.ltr {
-    margin-right: -266px;
-    margin-left: 0;
-  }
-  .os-size-observer-listener.rtl {
-    margin-left: -266px;
-    margin-right: 0;
-  }
-  .os-size-observer-listener:empty::before {
-    content: "";
-    width: 100%;
-    height: 100%;
-  }
-  .os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
-    display: block;
-    position: relative;
-    padding: inherit;
-    border: inherit;
-    box-sizing: content-box;
-    flex: auto;
-  }
-
-  .os-size-observer-listener-scroll {
-    box-sizing: border-box;
-    display: flex;
-  }
-
-  .os-size-observer-listener-item {
-    right: 0;
-    bottom: 0;
-    overflow: hidden;
-    direction: ltr;
-    flex: none;
-  }
-
-  .os-size-observer-listener-item-final {
-    transition: none;
-  }
-
-  @keyframes os-size-observer-appear-animation {
-    from {
-      cursor: auto;
-    }
-    to {
-      cursor: none;
-    }
-  }
-  .os-trinsic-observer {
-    flex: none;
-    box-sizing: border-box;
-    position: relative;
-    max-width: 0px;
-    max-height: 1px;
-    padding: 0;
-    margin: 0;
-    border: none;
-    overflow: hidden;
-    z-index: -1;
-    height: 0;
-    top: calc(100% + 1px);
-    contain: strict;
-  }
-  .os-trinsic-observer:not(:empty) {
-    height: calc(100% + 1px);
-    top: -1px;
-  }
-  .os-trinsic-observer:not(:empty) > .os-size-observer {
-    width: 1000%;
-    height: 1000%;
-    min-height: 1px;
-    min-width: 1px;
-  }
-
-  /**
-  * environment setup
-  */
-  .os-environment {
-    --os-custom-prop: -1;
-    position: fixed;
-    opacity: 0;
-    visibility: hidden;
-    overflow: scroll;
-    height: 200px;
-    width: 200px;
-    z-index: var(--os-custom-prop);
-  }
-  .os-environment div {
-    width: 200%;
-    height: 200%;
-    margin: 10px 0;
-  }
-  .os-environment.os-environment-flexbox-glue {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    height: auto;
-    width: auto;
-    min-height: 200px;
-    min-width: 200px;
-  }
-  .os-environment.os-environment-flexbox-glue div {
-    flex: auto;
-    width: auto;
-    height: auto;
-    max-height: 100%;
-    max-width: 100%;
-    margin: 0;
-  }
-  .os-environment.os-environment-flexbox-glue-max {
-    max-height: 200px;
-  }
-  .os-environment.os-environment-flexbox-glue-max div {
-    overflow: visible;
-  }
-  .os-environment.os-environment-flexbox-glue-max div::before {
-    content: "";
-    display: block;
-    height: 999px;
-    width: 999px;
-  }
-
-  /**
-  * hide native scrollbars
-  */
-  .os-environment,
-  .os-viewport {
-    -ms-overflow-style: scrollbar !important;
-  }
-
-  [data-overlayscrollbars-initialize],
-  [data-overlayscrollbars~=scrollbarHidden],
-  .os-viewport-scrollbar-hidden.os-environment,
-  .os-viewport-scrollbar-hidden.os-viewport {
-    scrollbar-width: none !important;
-  }
-
-  [data-overlayscrollbars-initialize]::-webkit-scrollbar,
-  [data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
-  [data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,
-  [data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,
-  .os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar,
-  .os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar-corner,
-  .os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar,
-  .os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar-corner {
-    -webkit-appearance: none !important;
-            appearance: none !important;
-    display: none !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
-
-  /**
-  * elements wont suddenly crop after initialization is done
-  */
-  [data-overlayscrollbars-initialize] {
-    overflow: auto;
-  }
-
-  /**
-  * applied to body
-  */
-  html[data-overlayscrollbars],
-  html.os-viewport-scrollbar-hidden,
-  html.os-viewport-scrollbar-hidden > body {
-    box-sizing: border-box;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  html[data-overlayscrollbars] > body {
-    overflow: visible;
-  }
-
-  /**
-  * structure setup
-  */
-  [data-overlayscrollbars~=host],
-  .os-padding {
-    position: relative;
-  }
-
-  [data-overlayscrollbars~=host],
-  .os-padding {
-    display: flex;
-    flex-direction: row !important;
-    flex-wrap: nowrap !important;
-  }
-
-  .os-padding,
-  .os-viewport {
-    box-sizing: inherit;
-    position: relative;
-    flex: auto !important;
-    height: auto;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    border: none;
-    z-index: 0;
-  }
-
-  .os-viewport {
-    --os-vaw: 0;
-    --os-vah: 0;
-  }
-  .os-viewport.os-viewport-arrange::before {
-    content: "";
-    position: absolute;
-    pointer-events: none;
-    z-index: -1;
-    min-width: 1px;
-    min-height: 1px;
-    width: var(--os-vaw);
-    height: var(--os-vah);
-  }
-
-  [data-overlayscrollbars~=host],
-  [data-overlayscrollbars~=viewport] {
-    overflow: hidden;
-  }
-
-  [data-overlayscrollbars~=overflowVisible] {
-    overflow: visible;
-  }
-
-  [data-overlayscrollbars-overflow-x=hidden] {
-    overflow-x: hidden;
-  }
-
-  [data-overlayscrollbars-overflow-x=scroll] {
-    overflow-x: scroll;
-  }
-
-  [data-overlayscrollbars-overflow-x=hidden] {
-    overflow-y: hidden;
-  }
-
-  [data-overlayscrollbars-overflow-y=scroll] {
-    overflow-y: scroll;
-  }
-
-  .os-padding,
-  .os-viewport {
-    overflow: hidden;
-  }
-
-  .os-overflow-visible {
-    overflow: visible;
-  }
-
-  .os-content {
-    box-sizing: inherit;
-  }
-
-  /**
-  * optional & experimental grid mode
-  */
-  [data-overlayscrollbars-grid],
-  [data-overlayscrollbars-grid] .os-padding {
-    display: grid;
-    grid-template: 1fr/1fr;
-  }
-
-  [data-overlayscrollbars-grid] > .os-padding,
-  [data-overlayscrollbars-grid] > .os-viewport,
-  [data-overlayscrollbars-grid] > .os-padding > .os-viewport {
-    height: auto !important;
-    width: auto !important;
-  }
-
-  .os-scrollbar {
-    contain: strict;
-    transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
-    pointer-events: none;
-    position: absolute;
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  body > .os-scrollbar {
-    position: fixed;
-    z-index: 99999;
-  }
-
-  .os-scrollbar-transitionless {
-    transition: none;
-  }
-
-  .os-scrollbar-track {
-    position: relative;
-    direction: ltr !important;
-    padding: 0 !important;
-    border: none !important;
-  }
-
-  .os-scrollbar-handle {
-    position: absolute;
-  }
-
-  .os-scrollbar-track,
-  .os-scrollbar-handle {
-    pointer-events: none;
-    width: 100%;
-    height: 100%;
-  }
-
-  .os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
-  .os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
-    pointer-events: auto;
-    touch-action: none;
-  }
-
-  .os-scrollbar-horizontal {
-    bottom: 0;
-    left: 0;
-  }
-
-  .os-scrollbar-vertical {
-    top: 0;
-    right: 0;
-  }
-
-  .os-scrollbar-rtl.os-scrollbar-horizontal {
-    right: 0;
-  }
-
-  .os-scrollbar-rtl.os-scrollbar-vertical {
-    right: auto;
-    left: 0;
-  }
-
-  .os-scrollbar-visible,
-  .os-scrollbar-interaction.os-scrollbar-visible {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  .os-scrollbar-auto-hidden {
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  .os-scrollbar-unusable,
-  .os-scrollbar-unusable *,
-  .os-scrollbar-wheel,
-  .os-scrollbar-wheel * {
-    pointer-events: none !important;
-  }
-
-  .os-scrollbar-unusable .os-scrollbar-handle {
-    opacity: 0 !important;
-  }
-
-  .os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,
-  .os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl {
-    left: 0;
-    right: 0;
-  }
-
-  .os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,
-  .os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl {
-    top: 0;
-    bottom: 0;
-  }
-
-  /* NONE THEME: */
-  [data-overlayscrollbars~=updating] > .os-scrollbar,
-  .os-theme-none.os-scrollbar {
-    display: none !important;
-  }
-
-  /* DARK & LIGHT THEME: */
-  .os-theme-dark.os-scrollbar-horizontal,
-  .os-theme-light.os-scrollbar-horizontal {
-    right: 10px;
-    height: 10px;
-  }
-
-  .os-theme-dark.os-scrollbar-vertical,
-  .os-theme-light.os-scrollbar-vertical {
-    bottom: 10px;
-    width: 10px;
-  }
-
-  .os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal,
-  .os-theme-light.os-scrollbar-rtl.os-scrollbar-horizontal {
-    left: 10px;
-    right: 0;
-  }
-
-  .os-theme-dark.os-scrollbar,
-  .os-theme-light.os-scrollbar {
-    padding: 2px;
-    box-sizing: border-box;
-    background: transparent;
-  }
-
-  .os-theme-dark.os-scrollbar-unusable,
-  .os-theme-light.os-scrollbar-unusable {
-    background: transparent;
-  }
-
-  .os-theme-dark.os-scrollbar > .os-scrollbar-track,
-  .os-theme-light.os-scrollbar > .os-scrollbar-track {
-    background: transparent;
-  }
-
-  .os-theme-dark.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
-  .os-theme-light.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
-    min-width: 30px;
-  }
-
-  .os-theme-dark.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle,
-  .os-theme-light.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
-    min-height: 30px;
-  }
-
-  .os-theme-dark.os-scrollbar-transition > .os-scrollbar-track > .os-scrollbar-handle,
-  .os-theme-light.os-scrollbar-transition > .os-scrollbar-track > .os-scrollbar-handle {
-    transition: background-color 0.3s;
-  }
-
-  .os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
-  .os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
-  .os-theme-dark.os-scrollbar > .os-scrollbar-track,
-  .os-theme-light.os-scrollbar > .os-scrollbar-track {
-    border-radius: 10px;
-  }
-
-  .os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
-    background: rgb(148 148 148 / 55%);
-  }
-
-  .os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
-    background: rgba(255, 255, 255, 0.4);
-  }
-
-  .os-theme-dark.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
-    background: rgba(0, 0, 0, 0.55);
-  }
-
-  .os-theme-light.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
-    background: rgba(255, 255, 255, 0.55);
-  }
-
-  .os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
-    background: rgba(0, 0, 0, 0.7);
-  }
-
-  .os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
-    background: rgba(255, 255, 255, 0.7);
-  }
-
-  .os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,
-  .os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,
-  .os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before,
-  .os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: block;
-  }
-
-  .os-theme-dark.os-host-scrollbar-hidden > .os-scrollbar-handle:before {
-    display: none;
-  }
-
-  .os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,
-  .os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before {
-    top: -6px;
-    bottom: -2px;
-  }
+/*!
+ * OverlayScrollbars
+ * Version: 2.4.5
+ *
+ * Copyright (c) Rene Haas | KingSora.
+ * https://github.com/KingSora
+ *
+ * Released under the MIT license.
+ */
+.os-size-observer,
+.os-size-observer-listener {
+  scroll-behavior: auto !important;
+  direction: inherit;
+  pointer-events: none;
+  overflow: hidden;
+  visibility: hidden;
+  box-sizing: border-box;
+}
+
+.os-size-observer,
+.os-size-observer-listener,
+.os-size-observer-listener-item,
+.os-size-observer-listener-item-final {
+  writing-mode: horizontal-tb;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.os-size-observer {
+  z-index: -1;
+  contain: strict;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding: inherit;
+  border: inherit;
+  box-sizing: inherit;
+  margin: -133px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: scale(0.1);
+}
+.os-size-observer::before {
+  content: "";
+  flex: none;
+  box-sizing: inherit;
+  padding: 10px;
+  width: 10px;
+  height: 10px;
+}
+
+.os-size-observer-appear {
+  animation: os-size-observer-appear-animation 1ms forwards;
+}
+
+.os-size-observer-listener {
+  box-sizing: border-box;
+  position: relative;
+  flex: auto;
+  padding: inherit;
+  border: inherit;
+  margin: -133px;
+  transform: scale(10);
+}
+.os-size-observer-listener.ltr {
+  margin-right: -266px;
+  margin-left: 0;
+}
+.os-size-observer-listener.rtl {
+  margin-left: -266px;
+  margin-right: 0;
+}
+.os-size-observer-listener:empty::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+}
+.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
+  display: block;
+  position: relative;
+  padding: inherit;
+  border: inherit;
+  box-sizing: content-box;
+  flex: auto;
+}
+
+.os-size-observer-listener-scroll {
+  box-sizing: border-box;
+  display: flex;
+}
+
+.os-size-observer-listener-item {
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  direction: ltr;
+  flex: none;
+}
+
+.os-size-observer-listener-item-final {
+  transition: none;
+}
+
+@keyframes os-size-observer-appear-animation {
+  from {
+    cursor: auto;
+  }
+  to {
+    cursor: none;
+  }
+}
+.os-trinsic-observer {
+  flex: none;
+  box-sizing: border-box;
+  position: relative;
+  max-width: 0px;
+  max-height: 1px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  overflow: hidden;
+  z-index: -1;
+  height: 0;
+  top: calc(100% + 1px);
+  contain: strict;
+}
+.os-trinsic-observer:not(:empty) {
+  height: calc(100% + 1px);
+  top: -1px;
+}
+.os-trinsic-observer:not(:empty) > .os-size-observer {
+  width: 1000%;
+  height: 1000%;
+  min-height: 1px;
+  min-width: 1px;
+}
+
+/**
+ * environment setup
+ */
+.os-environment {
+  scroll-behavior: auto !important;
+  --os-custom-prop: -1;
+  position: fixed;
+  opacity: 0;
+  visibility: hidden;
+  overflow: scroll;
+  height: 200px;
+  width: 200px;
+  z-index: var(--os-custom-prop);
+}
+.os-environment div {
+  width: 200%;
+  height: 200%;
+  margin: 10px 0;
+}
+.os-environment.os-environment-flexbox-glue {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: auto;
+  width: auto;
+  min-height: 200px;
+  min-width: 200px;
+}
+.os-environment.os-environment-flexbox-glue div {
+  flex: auto;
+  width: auto;
+  height: auto;
+  max-height: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+.os-environment.os-environment-flexbox-glue-max {
+  max-height: 200px;
+}
+.os-environment.os-environment-flexbox-glue-max div {
+  overflow: visible;
+}
+.os-environment.os-environment-flexbox-glue-max div::before {
+  content: "";
+  display: block;
+  height: 999px;
+  width: 999px;
+}
+
+/**
+ * hide native scrollbars
+ */
+.os-environment,
+[data-overlayscrollbars-viewport] {
+  -ms-overflow-style: scrollbar !important;
+}
+
+[data-overlayscrollbars-initialize],
+[data-overlayscrollbars~=scrollbarHidden],
+[data-overlayscrollbars-viewport~=scrollbarHidden],
+.os-scrollbar-hidden.os-environment {
+  scrollbar-width: none !important;
+}
+
+[data-overlayscrollbars-initialize]::-webkit-scrollbar,
+[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
+[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,
+[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,
+[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,
+[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,
+.os-scrollbar-hidden.os-environment::-webkit-scrollbar,
+.os-scrollbar-hidden.os-environment::-webkit-scrollbar-corner {
+  -webkit-appearance: none !important;
+          appearance: none !important;
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+/**
+ * elements wont suddenly crop after initialization is done
+ */
+[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body) {
+  overflow: auto;
+}
 
-  .os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,
-  .os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
-    left: -6px;
-    right: -2px;
-  }
+/**
+ * applied to body
+ */
+html[data-overlayscrollbars],
+html.os-scrollbar-hidden,
+html.os-scrollbar-hidden > body {
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+html[data-overlayscrollbars] > body {
+  overflow: visible;
+}
+
+/**
+ * structure setup
+ */
+[data-overlayscrollbars~=host],
+[data-overlayscrollbars-padding] {
+  display: flex;
+  align-items: stretch !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+}
+
+[data-overlayscrollbars-padding],
+[data-overlayscrollbars-viewport] {
+  box-sizing: inherit;
+  position: relative;
+  flex: auto !important;
+  height: auto;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  z-index: 0;
+}
+
+[data-overlayscrollbars-viewport] {
+  --os-vaw: 0;
+  --os-vah: 0;
+}
+[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  z-index: -1;
+  min-width: 1px;
+  min-height: 1px;
+  width: var(--os-vaw);
+  height: var(--os-vah);
+}
+
+[data-overlayscrollbars-padding],
+[data-overlayscrollbars-viewport] {
+  overflow: hidden;
+}
+
+[data-overlayscrollbars~=host],
+[data-overlayscrollbars~=viewport] {
+  position: relative;
+  overflow: hidden;
+}
+
+[data-overlayscrollbars~=overflowVisible],
+[data-overlayscrollbars-padding~=overflowVisible],
+[data-overlayscrollbars-viewport~=overflowVisible] {
+  overflow: visible;
+}
+
+[data-overlayscrollbars-overflow-x=hidden] {
+  overflow-x: hidden;
+}
+
+[data-overlayscrollbars-overflow-x=scroll] {
+  overflow-x: scroll;
+}
+
+[data-overlayscrollbars-overflow-x=hidden] {
+  overflow-y: hidden;
+}
+
+[data-overlayscrollbars-overflow-y=scroll] {
+  overflow-y: scroll;
+}
+
+[data-overlayscrollbars~=scrollbarPressed],
+[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport] {
+  scroll-behavior: auto !important;
+}
+
+[data-overlayscrollbars-content] {
+  box-sizing: inherit;
+}
+
+/**
+ * Display contents to bridge any flickering during deferred initialization.
+ */
+[data-overlayscrollbars-contents]:not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]) {
+  display: contents;
+}
 
-  .os-theme-dark.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before,
-  .os-theme-light.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before {
-    right: -6px;
-    left: -2px;
-  }
+/**
+ * optional & experimental grid mode
+ */
+[data-overlayscrollbars-grid],
+[data-overlayscrollbars-grid] [data-overlayscrollbars-padding] {
+  display: grid;
+  grid-template: 1fr/1fr;
+}
+
+[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],
+[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],
+[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport] {
+  height: auto !important;
+  width: auto !important;
+}
+
+.os-scrollbar {
+  contain: size layout;
+  contain: size layout style;
+  transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
+  pointer-events: none;
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+}
+
+body > .os-scrollbar {
+  position: fixed;
+  z-index: 99999;
+}
+
+.os-scrollbar-transitionless {
+  transition: none;
+}
+
+.os-scrollbar-track {
+  position: relative;
+  direction: ltr !important;
+  padding: 0 !important;
+  border: none !important;
+}
+
+.os-scrollbar-handle {
+  position: absolute;
+}
+
+.os-scrollbar-track,
+.os-scrollbar-handle {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}
+
+.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
+.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.os-scrollbar-horizontal {
+  bottom: 0;
+  left: 0;
+}
+
+.os-scrollbar-vertical {
+  top: 0;
+  right: 0;
+}
+
+.os-scrollbar-rtl.os-scrollbar-horizontal {
+  right: 0;
+}
+
+.os-scrollbar-rtl.os-scrollbar-vertical {
+  right: auto;
+  left: 0;
+}
+
+.os-scrollbar-visible,
+.os-scrollbar-interaction.os-scrollbar-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.os-scrollbar-unusable,
+.os-scrollbar-unusable *,
+.os-scrollbar-wheel,
+.os-scrollbar-wheel * {
+  pointer-events: none !important;
+}
+
+.os-scrollbar-unusable .os-scrollbar-handle {
+  opacity: 0 !important;
+}
+
+.os-scrollbar-horizontal .os-scrollbar-handle {
+  bottom: 0;
+}
+
+.os-scrollbar-vertical .os-scrollbar-handle {
+  right: 0;
+}
+
+.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle {
+  right: auto;
+  left: 0;
+}
+
+.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,
+.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl {
+  left: 0;
+  right: 0;
+}
+
+.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,
+.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl {
+  top: 0;
+  bottom: 0;
+}
+
+.os-scrollbar {
+  --os-size: 0;
+  --os-padding-perpendicular: 0;
+  --os-padding-axis: 0;
+  --os-track-border-radius: 0;
+  --os-track-bg: none;
+  --os-track-bg-hover: none;
+  --os-track-bg-active: none;
+  --os-track-border: none;
+  --os-track-border-hover: none;
+  --os-track-border-active: none;
+  --os-handle-border-radius: 0;
+  --os-handle-bg: none;
+  --os-handle-bg-hover: none;
+  --os-handle-bg-active: none;
+  --os-handle-border: none;
+  --os-handle-border-hover: none;
+  --os-handle-border-active: none;
+  --os-handle-min-size: 33px;
+  --os-handle-max-size: none;
+  --os-handle-perpendicular-size: 100%;
+  --os-handle-perpendicular-size-hover: 100%;
+  --os-handle-perpendicular-size-active: 100%;
+  --os-handle-interactive-area-offset: 0;
+}
+
+.os-scrollbar .os-scrollbar-track {
+  border: var(--os-track-border);
+  border-radius: var(--os-track-border-radius);
+  background: transparent;
+  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
+}
+.os-scrollbar .os-scrollbar-track:hover {
+  border: var(--os-track-border-hover);
+  background: var(--os-track-bg-hover);
+}
+.os-scrollbar .os-scrollbar-track:active {
+  border: var(--os-track-border-active);
+  background: var(--os-track-bg-active);
+}
+.os-scrollbar .os-scrollbar-handle {
+  border: var(--os-handle-border);
+  border-radius: var(--os-handle-border-radius);
+  background: ${theme('hint')};
+}
+.os-scrollbar .os-scrollbar-handle:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: block;
+}
+.os-scrollbar .os-scrollbar-handle:hover {
+  border: var(--os-handle-border-hover);
+  background: var(--os-handle-bg-hover);
+}
+.os-scrollbar .os-scrollbar-handle:active {
+  border: var(--os-handle-border-active);
+  background: var(--os-handle-bg-active);
+}
+
+.os-scrollbar-horizontal {
+  padding: var(--os-padding-perpendicular) var(--os-padding-axis);
+  right: var(--os-size);
+  height: var(--os-size);
+}
+.os-scrollbar-horizontal.os-scrollbar-rtl {
+  left: var(--os-size);
+  right: 0;
+}
+.os-scrollbar-horizontal .os-scrollbar-handle {
+  min-width: var(--os-handle-min-size);
+  max-width: var(--os-handle-max-size);
+  height: var(--os-handle-perpendicular-size);
+  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s;
+}
+.os-scrollbar-horizontal .os-scrollbar-handle:before {
+  top: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
+  bottom: calc(var(--os-padding-perpendicular) * -1);
+}
+.os-scrollbar-horizontal:hover .os-scrollbar-handle {
+  height: var(--os-handle-perpendicular-size-hover);
+}
+.os-scrollbar-horizontal:active .os-scrollbar-handle {
+  height: var(--os-handle-perpendicular-size-active);
+}
+
+.os-scrollbar-vertical {
+  padding: var(--os-padding-axis) var(--os-padding-perpendicular);
+  bottom: var(--os-size);
+  width: var(--os-size);
+}
+.os-scrollbar-vertical .os-scrollbar-handle {
+  min-height: var(--os-handle-min-size);
+  max-height: var(--os-handle-max-size);
+  width: var(--os-handle-perpendicular-size);
+  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
+}
+.os-scrollbar-vertical .os-scrollbar-handle:before {
+  left: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
+  right: calc(var(--os-padding-perpendicular) * -1);
+}
+.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before {
+  right: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
+  left: calc(var(--os-padding-perpendicular) * -1);
+}
+.os-scrollbar-vertical:hover .os-scrollbar-handle {
+  width: var(--os-handle-perpendicular-size-hover);
+}
+.os-scrollbar-vertical:active .os-scrollbar-handle {
+  width: var(--os-handle-perpendicular-size-active);
+}
+
+/* NONE THEME: */
+[data-overlayscrollbars~=updating] > .os-scrollbar,
+.os-theme-none.os-scrollbar {
+  display: none !important;
+}
+
+/* DARK & LIGHT THEME: */
+.os-theme-dark,
+.os-theme-light {
+  box-sizing: border-box;
+  --os-size: 10px;
+  --os-padding-perpendicular: 2px;
+  --os-padding-axis: 2px;
+  --os-track-border-radius: 10px;
+  --os-handle-interactive-area-offset: 4px;
+  --os-handle-border-radius: 10px;
+}
+
+.os-theme-dark {
+  --os-handle-bg: rgba(0, 0, 0, 0.44);
+  --os-handle-bg-hover: rgba(0, 0, 0, 0.55);
+  --os-handle-bg-active: rgba(0, 0, 0, 0.66);
+}
+
+.os-theme-light {
+  --os-handle-bg: rgba(255, 255, 255, 0.44);
+  --os-handle-bg-hover: rgba(255, 255, 255, 0.55);
+  --os-handle-bg-active: rgba(255, 255, 255, 0.66);
+}
+
+.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-handle {
+  border-radius: 10px;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-track, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-track {
+  border-radius: 10px;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-handle {
+  border-radius: 10px;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal {
+  padding: 2px 2px;
+  right: 10px;
+  height: 10px;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal.os-scrollbar-cornerless, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal.os-scrollbar-cornerless {
+  right: 0;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal.os-scrollbar-rtl, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal.os-scrollbar-rtl {
+  left: 10px;
+  right: 0;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal.os-scrollbar-rtl.os-scrollbar-cornerless, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal.os-scrollbar-rtl.os-scrollbar-cornerless {
+  left: 0;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle {
+  min-width: 33px;
+  max-width: none;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before {
+  top: calc((
+                2px + 4px
+              ) * -1);
+  bottom: calc(2px * -1);
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-vertical, .os-no-css-vars.os-theme-light.os-scrollbar-vertical {
+  padding: 2px 2px;
+  bottom: 10px;
+  width: 10px;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-vertical.os-scrollbar-cornerless, .os-no-css-vars.os-theme-light.os-scrollbar-vertical.os-scrollbar-cornerless {
+  bottom: 0;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle {
+  min-height: 33px;
+  max-height: none;
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
+  left: calc((
+                2px + 4px
+              ) * -1);
+  right: calc(2px * -1);
+}
+.os-no-css-vars.os-theme-dark.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before {
+  right: calc((
+              2px + 4px
+            ) * -1);
+  left: calc(2px * -1);
+}
+.os-no-css-vars.os-theme-dark .os-scrollbar-handle {
+  background: rgba(0, 0, 0, 0.44);
+}
+.os-no-css-vars.os-theme-dark:hover .os-scrollbar-handle {
+  background: rgba(0, 0, 0, 0.55);
+}
+.os-no-css-vars.os-theme-dark:active .os-scrollbar-handle {
+  background: rgba(0, 0, 0, 0.66);
+}
+.os-no-css-vars.os-theme-light .os-scrollbar-handle {
+  background: rgba(255, 255, 255, 0.44);
+}
+.os-no-css-vars.os-theme-light:hover .os-scrollbar-handle {
+  background: rgba(255, 255, 255, 0.55);
+}
+.os-no-css-vars.os-theme-light:active .os-scrollbar-handle {
+  background: rgba(255, 255, 255, 0.66);
+}
 `
 export default ScrollBarStyle