Bauhaus Design System

Scrollbar ​

Usage ​

Scrollbar is used to communicate the existence of more content that is not able to fit on a screen or a container. It also gives user a control of exposing the data that is not visible in the viewport either in horizontal or vertical directions. If it is used for the whole page layout, it overrides browser’s native scrollbar.

Types ​

There are two types of Scrollbar components: Scrollbar and Scrollbar (tiny). The former is the standard size Scrollbar used in full layouts such as full viewport, a table, etc. while the Scrollbar (tiny) is used as parts of smaller components, such as a Dropdown Menu in a Select component, Modal or Card components.

Additionally, Scrollbar can be used to scroll in Vertical and Horizontal directions. For now, there is only scrollbar in Vertical direction.

Anatomy and Behavior ​

  1. Arrows - are the scroll control buttons that help user to go Up or Down. They follow the default movement increments set by the browser. Arrows contain Icon component (chevron up and down).

  2. Thumb - is the visual indicator of the relative location of user within the scrollable area. It also serves as an additional way of control to scroll up or down by clicking and dragging the Thumb. The Thumb’s length can change in size to represent the distance of scrolling available; when the view can scroll only a short way, the handle will fill up most of the bar and only allow a light shift in either direction.

  3. Track - is the visible or invisible (in case of Scrollbar (tiny)) track along which the Thumb travels during scroll action. It also gives user additional control for scrolling. When user clicks on any point along the Track, the page location as well as Thumb update to show the requested position on a scrollable page.

The users should be allowed to scroll by clicking on the free space of Track, dragging the Thumb, clicking on the arrows, using a mouse wheel and trackpad’s scroll functionality.

The value of a Scrollbar is determined by the position of the handle along its length with the value being reported as a fraction between the extreme ends. For example, the default left-to-right bar has a value of 0.0 at the left end, 1.0 at the right end and 0.5 indicates the halfway point. A scrollbar can be oriented vertically by choosing Top To Bottom or Bottom To Top for the Direction property.

States ​

Individual elements in the Scrollbar have their own states. Arrow up and Arrow down are clickable and have default, :hover and :active states. Thumb is clickable and has default, :hover, :active/dragged states.

Gaps and Sizes ​

SCROLLBAR

  • Track width: M
  • Track padding till Thumb: Unit
  • Arrows’ clickable area width and height: M
  • Icons width and height: XS
  • Thumb border radius: L

SCROLLBAR (TINY)

  • Track width: XS
  • Thumb border radius: L
  • Track padding: Unit

Tokens ​

SCSS Variable
Value
$icon_names
"add_layer" "add_user" "ai" "alert" "apps" "apps_arrow" "attachment" "avatar" "back" "calendar" "check" "check_filled" "chevron_down" "chevron_left" "chevron_right" "chevron_up" "close" "collapse" "construction" "double_chevron_down" "double_chevron_left" "double_chevron_right" "double_chevron_up" "download" "duplicate" "duster" "edit" "error" "expand_1" "expand_2" "export" "export_files" "eye" "eye_hidden" "file" "filter" "filter_dropdown" "filter_dropdown_message" "filter_remove" "folder" "gear" "help" "hidden_layer" "home" "info" "jva_f_console" "jva_n_console" "language" "layer" "list" "locked" "login" "logout" "minus" "more_options" "multiple_layers" "new_tab" "notification" "notification_update" "plus" "pohlcon_logo" "redo" "reload" "remove_user" "save" "screen_with_apps" "screen_with_download" "screen_with_gear" "screen_with_web" "search" "search_layer" "search_user" "star_user" "swatch" "swatch_alert" "sync" "tick" "trash" "undo" "unlocked" "upload" "user" "zoom_in" "zoom_out"
$
root { --icon-add_layer
$--icon-add_user
url("/icons/add_user.svg")
$--icon-ai
url("/icons/ai.svg")
$--icon-alert
url("/icons/alert.svg")
$--icon-apps
url("/icons/apps.svg")
$--icon-apps_arrow
url("/icons/apps_arrow.svg")
$--icon-attachment
url("/icons/attachment.svg")
$--icon-avatar
url("/icons/avatar.svg")
$--icon-back
url("/icons/back.svg")
$--icon-calendar
url("/icons/calendar.svg")
$--icon-check
url("/icons/check.svg")
$--icon-check_filled
url("/icons/check_filled.svg")
$--icon-chevron_down
url("/icons/chevron_down.svg")
$--icon-chevron_left
url("/icons/chevron_left.svg")
$--icon-chevron_right
url("/icons/chevron_right.svg")
$--icon-chevron_up
url("/icons/chevron_up.svg")
$--icon-close
url("/icons/close.svg")
$--icon-collapse
url("/icons/collapse.svg")
$--icon-construction
url("/icons/construction.svg")
$--icon-double_chevron_down
url("/icons/double_chevron_down.svg")
$--icon-double_chevron_left
url("/icons/double_chevron_left.svg")
$--icon-double_chevron_right
url("/icons/double_chevron_right.svg")
$--icon-double_chevron_up
url("/icons/double_chevron_up.svg")
$--icon-download
url("/icons/download.svg")
$--icon-duplicate
url("/icons/duplicate.svg")
$--icon-duster
url("/icons/duster.svg")
$--icon-edit
url("/icons/edit.svg")
$--icon-error
url("/icons/error.svg")
$--icon-expand_1
url("/icons/expand_1.svg")
$--icon-expand_2
url("/icons/expand_2.svg")
$--icon-export
url("/icons/export.svg")
$--icon-export_files
url("/icons/export_files.svg")
$--icon-eye
url("/icons/eye.svg")
$--icon-eye_hidden
url("/icons/eye_hidden.svg")
$--icon-file
url("/icons/file.svg")
$--icon-filter
url("/icons/filter.svg")
$--icon-filter_dropdown
url("/icons/filter_dropdown.svg")
$--icon-filter_dropdown_message
url("/icons/filter_dropdown_message.svg")
$--icon-filter_remove
url("/icons/filter_remove.svg")
$--icon-folder
url("/icons/folder.svg")
$--icon-gear
url("/icons/gear.svg")
$--icon-help
url("/icons/help.svg")
$--icon-hidden_layer
url("/icons/hidden_layer.svg")
$--icon-home
url("/icons/home.svg")
$--icon-info
url("/icons/info.svg")
$--icon-jva_f_console
url("/icons/jva_f_console.svg")
$--icon-jva_n_console
url("/icons/jva_n_console.svg")
$--icon-language
url("/icons/language.svg")
$--icon-layer
url("/icons/layer.svg")
$--icon-list
url("/icons/list.svg")
$--icon-locked
url("/icons/locked.svg")
$--icon-login
url("/icons/login.svg")
$--icon-logout
url("/icons/logout.svg")
$--icon-minus
url("/icons/minus.svg")
$--icon-more_options
url("/icons/more_options.svg")
$--icon-multiple_layers
url("/icons/multiple_layers.svg")
$--icon-new_tab
url("/icons/new_tab.svg")
$--icon-notification
url("/icons/notification.svg")
$--icon-notification_update
url("/icons/notification_update.svg")
$--icon-plus
url("/icons/plus.svg")
$--icon-pohlcon_logo
url("/icons/pohlcon_logo.svg")
$--icon-redo
url("/icons/redo.svg")
$--icon-reload
url("/icons/reload.svg")
$--icon-remove_user
url("/icons/remove_user.svg")
$--icon-save
url("/icons/save.svg")
$--icon-screen_with_apps
url("/icons/screen_with_apps.svg")
$--icon-screen_with_download
url("/icons/screen_with_download.svg")
$--icon-screen_with_gear
url("/icons/screen_with_gear.svg")
$--icon-screen_with_web
url("/icons/screen_with_web.svg")
$--icon-search
url("/icons/search.svg")
$--icon-search_layer
url("/icons/search_layer.svg")
$--icon-search_user
url("/icons/search_user.svg")
$--icon-star_user
url("/icons/star_user.svg")
$--icon-swatch
url("/icons/swatch.svg")
$--icon-swatch_alert
url("/icons/swatch_alert.svg")
$--icon-sync
url("/icons/sync.svg")
$--icon-tick
url("/icons/tick.svg")
$--icon-trash
url("/icons/trash.svg")
$--icon-undo
url("/icons/undo.svg")
$--icon-unlocked
url("/icons/unlocked.svg")
$--icon-upload
url("/icons/upload.svg")
$--icon-user
url("/icons/user.svg")
$--icon-zoom_in
url("/icons/zoom_in.svg")
$--icon-zoom_out
url("/icons/zoom_out.svg")
$}@font-face { font-family
"Consolas"
$src
local("Consolas-RegularItalic"), url("/fonts/woff2/Consolas-RegularItalic.woff2") format("woff2"), url("/fonts/woff/Consolas-RegularItalic.woff") format("woff"), url("/fonts/ttf/Consolas-RegularItalic.ttf") format("truetype")
$font-style
italic
$font-display
auto
$font-weight
400
$unicode-range
U+000-5FF
$}html { font-display
swap
$}
export { scrollbar-width
$rootSize_medium
14px
$rootSize_big
16px
$gutter_3xs
0.125
$gutter_2xs
0.25
$gutter_xs
0.5
$gutter_s
0.75
$gutter_m
1
$gutter_m_plus
1.25
$gutter_l
1.5
$gutter_l_plus
2
$gutter_xl
2.25
$gutter_xl_plus
2.5
$gutter_2xl
3
$gutter_3xl
4.5
$gutter_3xl_plus
5
$gutter_4xl
6
$gutter_5xl
9
$gutter_6xl
12.5
$gutter_small_3xs
1.5px
$gutter_small_2xs
3px
$gutter_small_xs
6px
$gutter_small_s
9px
$gutter_small_m
12px
$gutter_small_m_plus
15px
$gutter_small_l
18px
$gutter_small_l_plus
24px
$gutter_small_xl
27px
$gutter_small_xl_plus
30px
$gutter_small_2xl
36px
$gutter_small_3xl
54px
$gutter_small_3xl_plus
60px
$gutter_small_4xl
72px
$gutter_small_5xl
108px
$gutter_small_6xl
150px
$gutter_medium_3xs
1.75px
$gutter_medium_2xs
3.5px
$gutter_medium_xs
7px
$gutter_medium_s
10.5px
$gutter_medium_m
14px
$gutter_medium_m_plus
17.5px
$gutter_medium_l
21px
$gutter_medium_l_plus
28px
$gutter_medium_xl
31.5px
$gutter_medium_xl_plus
35px
$gutter_medium_2xl
42px
$gutter_medium_3xl
63px
$gutter_medium_3xl_plus
70px
$gutter_medium_4xl
84px
$gutter_medium_5xl
126px
$gutter_medium_6xl
175px
$gutter_big_3xs
2px
$gutter_big_2xs
4px
$gutter_big_xs
8px
$gutter_big_s
12px
$gutter_big_m
16px
$gutter_big_m_plus
20px
$gutter_big_l
24px
$gutter_big_l_plus
32px
$gutter_big_xl
36px
$gutter_big_xl_plus
40px
$gutter_big_2xl
48px
$gutter_big_3xl
72px
$gutter_big_3xl_plus
80px
$gutter_big_4xl
96px
$gutter_big_5xl
144px
$gutter_big_6xl
200px
$--root-size-medium
14px
$--root-size-big
16px
$--gutter-3xs
0.125rem
$--gutter-2xs
0.25rem
$--gutter-xs
0.5rem
$--gutter-s
0.75rem
$--gutter-m
1rem
$--gutter-m_plus
1.25rem
$--gutter-l
1.5rem
$--gutter-l_plus
2rem
$--gutter-xl
2.25rem
$--gutter-xl_plus
2.5rem
$--gutter-2xl
3rem
$--gutter-3xl
4.5rem
$--gutter-3xl_plus
5rem
$--gutter-4xl
6rem
$--gutter-5xl
9rem
$--gutter-6xl
12.5rem
$--gutter-small-3xs
1.5px
$--gutter-small-2xs
3px
$--gutter-small-xs
6px
$--gutter-small-s
9px
$--gutter-small-m
12px
$--gutter-small-m_plus
15px
$--gutter-small-l
18px
$--gutter-small-l_plus
24px
$--gutter-small-xl
27px
$--gutter-small-xl_plus
30px
$--gutter-small-2xl
36px
$--gutter-small-3xl
54px
$--gutter-small-3xl_plus
60px
$--gutter-small-4xl
72px
$--gutter-small-5xl
108px
$--gutter-small-6xl
150px
$--gutter-medium-3xs
1.75px
$--gutter-medium-2xs
3.5px
$--gutter-medium-xs
7px
$--gutter-medium-s
10.5px
$--gutter-medium-m
14px
$--gutter-medium-m_plus
17.5px
$--gutter-medium-l
21px
$--gutter-medium-l_plus
28px
$--gutter-medium-xl
31.5px
$--gutter-medium-xl_plus
35px
$--gutter-medium-2xl
42px
$--gutter-medium-3xl
63px
$--gutter-medium-3xl_plus
70px
$--gutter-medium-4xl
84px
$--gutter-medium-5xl
126px
$--gutter-medium-6xl
175px
$--gutter-big-3xs
2px
$--gutter-big-2xs
4px
$--gutter-big-xs
8px
$--gutter-big-s
12px
$--gutter-big-m
16px
$--gutter-big-m_plus
20px
$--gutter-big-l
24px
$--gutter-big-l_plus
32px
$--gutter-big-xl
36px
$--gutter-big-xl_plus
40px
$--gutter-big-2xl
48px
$--gutter-big-3xl
72px
$--gutter-big-3xl_plus
80px
$--gutter-big-4xl
96px
$--gutter-big-5xl
144px
$--gutter-big-6xl
200px
$grey_25
hsl(0, 0%, 23%)
$grey_40
hsl(0, 0%, 37%)
$grey_54
hsl(0, 0%, 51%)
$grey_70
hsl(0, 0%, 67%)
$grey_80
hsl(0, 0%, 78%)
$grey_86
hsl(0, 0%, 84%)
$grey_90
hsl(0, 0%, 89%)
$grey_93
hsl(0, 0%, 92%)
$grey_98
hsl(0, 0%, 98%)
$grey_55
hsl(0, 0%, 51%)
$grey_85
hsl(0, 0%, 84%)
$grey_95
hsl(0, 0%, 92%)
$lila_28
hsl(288, 59%, 32%)
$lila_54
hsl(290, 48%, 58%)
$lila_70
hsl(290, 42%, 72%)
$lila_80
hsl(290, 38%, 81%)
$lila_90
hsl(289, 33%, 90%)
$lila_30
hsl(288, 59%, 32%)
$lila_55
hsl(290, 48%, 58%)
$blue_45
hsl(240, 60%, 60%)
$blue_67
hsl(240, 61%, 76%)
$blue_90
hsl(240, 61%, 93%)
$blue_95
hsl(240, 60%, 96%)
$cobalt_30
hsl(210, 100%, 27%)
$cobalt_60
hsl(210, 48%, 58%)
$cobalt_70
hsl(210, 71%, 69%)
$cobalt_80
hsl(210, 64%, 79%)
$cobalt_90
hsl(210, 57%, 89%)
$cerulean_45
hsl(207, 79%, 40%)
$cerulean_61
hsl(207, 48%, 58%)
$cerulean_67
hsl(207, 12%, 64%)
$cerulean_70
hsl(207, 61%, 67%)
$cerulean_80
hsl(207, 54%, 78%)
$cerulean_90
hsl(208, 46%, 89%)
$cerulean_55
hsl(207, 48%, 58%)
$azure_45
hsl(192, 88%, 30%)
$azure_70
hsl(192, 75%, 51%)
$azure_80
hsl(192, 62%, 72%)
$azure_90
hsl(192, 52%, 87%)
$turquoise_50
hsl(158, 84%, 29%)
$turquoise_69
hsl(158, 76%, 43%)
$turquoise_80
hsl(158, 66%, 60%)
$turquoise_90
hsl(159, 51%, 84%)
$turquoise_70
hsl(158, 76%, 43%)
$green_50
hsl(123, 53%, 35%)
$green_75
hsl(120, 53%, 60%)
$green_80
hsl(120, 53%, 69%)
$green_90
hsl(120, 53%, 85%)
$green_95
hsl(120, 54%, 93%)
$grape_86
hsl(65, 74%, 53%)
$grape_90
hsl(64, 53%, 80%)
$ochre_70
hsl(53, 78%, 42%)
$ochre_80
hsl(53, 78%, 49%)
$ochre_85
hsl(53, 78%, 60%)
$ochre_90
hsl(53, 77%, 74%)
$ochre_95
hsl(52, 77%, 88%)
$red_50
hsl(350, 80%, 52%)
$red_70
hsl(350, 80%, 75%)
$red_90
hsl(349, 80%, 92%)
$red_95
hsl(353, 80%, 96%)
$glass-1-color
rgba(255, 255, 255, 0.65)
$glass-2-opaque-gradient
linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%)
$glass-2-opaque-color
rgba(255, 255, 255, 0.65)
$glass-3-opaque-gradient
linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%)
$glass-3-opaque-color
rgba(255, 255, 255, 0.85)
$glass-1-lila-color
rgba(219, 188, 225, 0.7)
$glass-4-dark-color
rgba(0, 0, 0, 0.25)
$fog-1-gradient
linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.78) 55%, rgb(255, 255, 255) 100%)
$fog-2-gradient
linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(240, 240, 240, 0.95) 41%, rgb(240, 240, 240) 100%)
$fog-3-gradient
linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(240, 240, 240, 0.95) 46%, rgb(240, 240, 240) 100%)
$metal-1-gradient
linear-gradient(90deg, rgb(215, 215, 215) 0%, rgb(222, 222, 222) 41%, rgb(194, 194, 194) 100%)
$metal-2-gradient
linear-gradient(90deg, rgb(215, 215, 215) 0%, rgb(222, 222, 222) 62%, rgb(194, 194, 194) 100%)
$metal-3-gradient
linear-gradient(121deg, rgb(177, 177, 177) 0%, rgb(222, 222, 222) 77%, rgba(170, 170, 170, 0.79) 100%)
$--color-lila-54
hsl(290, 48%, 58%)
$--color-lila-70
hsl(290, 42%, 72%)
$--color-lila-80
hsl(290, 38%, 81%)
$--color-lila-90
hsl(289, 33%, 90%)
$--color-lila-30
hsl(288, 59%, 32%)
$--color-lila-55
hsl(290, 48%, 58%)
$--color-blue-45
hsl(240, 60%, 60%)
$--color-blue-67
hsl(240, 61%, 76%)
$--color-blue-90
hsl(240, 61%, 93%)
$--color-blue-95
hsl(240, 60%, 96%)
$--color-cobalt-30
hsl(210, 100%, 27%)
$--color-cobalt-60
hsl(210, 48%, 58%)
$--color-cobalt-70
hsl(210, 71%, 69%)
$--color-cobalt-80
hsl(210, 64%, 79%)
$--color-cobalt-90
hsl(210, 57%, 89%)
$--color-cerulean-45
hsl(207, 79%, 40%)
$--color-cerulean-61
hsl(207, 48%, 58%)
$--color-cerulean-67
hsl(207, 12%, 64%)
$--color-cerulean-70
hsl(207, 61%, 67%)
$--color-cerulean-80
hsl(207, 54%, 78%)
$--color-cerulean-90
hsl(208, 46%, 89%)
$--color-cerulean-55
hsl(207, 48%, 58%)
$--color-azure-45
hsl(192, 88%, 30%)
$--color-azure-70
hsl(192, 75%, 51%)
$--color-azure-80
hsl(192, 62%, 72%)
$--color-azure-90
hsl(192, 52%, 87%)
$--color-turquoise-50
hsl(158, 84%, 29%)
$--color-turquoise-69
hsl(158, 76%, 43%)
$--color-turquoise-80
hsl(158, 66%, 60%)
$--color-turquoise-90
hsl(159, 51%, 84%)
$--color-turquoise-70
hsl(158, 76%, 43%)
$--color-green-50
hsl(123, 53%, 35%)
$--color-green-75
hsl(120, 53%, 60%)
$--color-green-80
hsl(120, 53%, 69%)
$--color-green-90
hsl(120, 53%, 85%)
$--color-green-95
hsl(120, 54%, 93%)
$--color-grape-86
hsl(65, 74%, 53%)
$--color-grape-90
hsl(64, 53%, 80%)
$--color-ochre-70
hsl(53, 78%, 42%)
$--color-ochre-80
hsl(53, 78%, 49%)
$--color-ochre-85
hsl(53, 78%, 60%)
$--color-ochre-90
hsl(53, 77%, 74%)
$--color-ochre-95
hsl(52, 77%, 88%)
$--color-red-50
hsl(350, 80%, 52%)
$--color-red-70
hsl(350, 80%, 75%)
$--color-red-90
hsl(349, 80%, 92%)
$--color-red-95
hsl(353, 80%, 96%)
$--color-grey-0
hsl(0, 0%, 0%)
$--color-grey-25
hsl(0, 0%, 23%)
$--color-grey-40
hsl(0, 0%, 37%)
$--color-grey-54
hsl(0, 0%, 51%)
$--color-grey-70
hsl(0, 0%, 67%)
$--color-grey-80
hsl(0, 0%, 78%)
$--color-grey-86
hsl(0, 0%, 84%)
$--color-grey-90
hsl(0, 0%, 89%)
$--color-grey-93
hsl(0, 0%, 92%)
$--color-grey-98
hsl(0, 0%, 98%)
$--color-grey-55
hsl(0, 0%, 51%)
$--color-grey-85
hsl(0, 0%, 84%)
$--color-grey-95
hsl(0, 0%, 92%)
$--color-gradient-glass-0-stroke-gradient
linear-gradient(54deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%)
$--color-gradient-glass-1-color
rgba(255, 255, 255, 0.65)
$--color-gradient-glass-2-opaque-gradient
linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%)
$--color-gradient-glass-2-opaque-color
rgba(255, 255, 255, 0.65)
$--color-gradient-glass-3-opaque-gradient
linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%)
$--color-gradient-glass-3-opaque-color
rgba(255, 255, 255, 0.85)
$--color-gradient-glass-1-lila-color
rgba(219, 188, 225, 0.7)
$--color-gradient-glass-4-dark-color
rgba(0, 0, 0, 0.25)
$--color-gradient-fog-1-gradient
linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.78) 55%, rgb(255, 255, 255) 100%)
$--color-gradient-fog-2-gradient
linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(240, 240, 240, 0.95) 41%, rgb(240, 240, 240) 100%)
$--color-gradient-fog-3-gradient
linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(240, 240, 240, 0.95) 46%, rgb(240, 240, 240) 100%)
$--color-gradient-metal-1-gradient
linear-gradient(90deg, rgb(215, 215, 215) 0%, rgb(222, 222, 222) 41%, rgb(194, 194, 194) 100%)
$--color-gradient-metal-2-gradient
linear-gradient(90deg, rgb(215, 215, 215) 0%, rgb(222, 222, 222) 62%, rgb(194, 194, 194) 100%)
$--color-gradient-metal-3-gradient
linear-gradient(121deg, rgb(177, 177, 177) 0%, rgb(222, 222, 222) 77%, rgba(170, 170, 170, 0.79) 100%)
$elevation_05
0 0.5px 0.5px 0 rgba(17, 17, 17, 0.1215686275), 0 0.5px 0.5px 0 rgba(17, 17, 17, 0.1411764706), 0 0.5px 1px 0 rgba(17, 17, 17, 0.2)
$elevation_1
0 2px 1px -1px rgba(17, 17, 17, 0.1215686275), 0 1px 1px 0 rgba(17, 17, 17, 0.1411764706), 0 1px 3px 0 rgba(17, 17, 17, 0.2)
$elevation_2
0 3px 1px -2px rgba(17, 17, 17, 0.1215686275), 0 2px 2px 0 rgba(17, 17, 17, 0.1411764706), 0 1px 5px 0 rgba(17, 17, 17, 0.2)
$elevation_4
0 1px 10px 0 rgba(75, 75, 73, 0.1215686275), 0 4px 5px 0 rgba(75, 75, 73, 0.1411764706), 0 2px 4px -1px rgba(75, 75, 73, 0.2)
$elevation_6
0 1px 18px 0 rgba(75, 75, 73, 0.1215686275), 0 6px 10px 0 rgba(75, 75, 73, 0.1411764706), 0 3px 5px -1px rgba(75, 75, 73, 0.2)
$elevation_8
0 3px 14px 2px rgba(17, 17, 17, 0.1215686275), 0 8px 10px 1px rgba(17, 17, 17, 0.1411764706), 0 5px 5px -3px rgba(17, 17, 17, 0.2)
$elevation_10
0 4px 18px 3px rgba(17, 17, 17, 0.1215686275), 0 10px 14px 1px rgba(17, 17, 17, 0.1411764706), 0 6px 6px -3px rgba(17, 17, 17, 0.2)
$elevation_12
0 5px 22px 4px rgba(75, 75, 73, 0.1215686275), 0 12px 17px 2px rgba(75, 75, 73, 0.1411764706), 0 7px 8px -4px rgba(75, 75, 73, 0.2)
$elevation_16
0 6px 30px 5px rgba(75, 75, 73, 0.1215686275), 0 16px 24px 2px rgba(75, 75, 73, 0.1411764706), 0 8px 10px -5px rgba(75, 75, 73, 0.2)
$elevation_20
0 8px 38px 7px rgba(75, 75, 73, 0.1215686275), 0 20px 31px 3px rgba(75, 75, 73, 0.1411764706), 0 10px 13px -6px rgba(75, 75, 73, 0.2)
$dieCut_05
inset 0 1px 0.5px -1px rgba(17, 17, 17, 0.1215686275), inset 0 0.5px 0.5px 0 rgba(17, 17, 17, 0.1411764706), inset 0 0.5px 1.5px 0 rgba(17, 17, 17, 0.4)
$dieCut_1
inset 0 2px 1px -2px rgba(17, 17, 17, 0.1215686275), inset 0 1px 1px 0 rgba(17, 17, 17, 0.1411764706), inset 0 1px 3px 0 rgba(17, 17, 17, 0.4)
$dieCut_2
inset 0 3px 1px -2px rgba(17, 17, 17, 0.1215686275), inset 0 2px 2px 0 rgba(17, 17, 17, 0.1411764706), inset 0 1px 5px 0 rgba(17, 17, 17, 0.4)
$dieCut_4
inset 0 1px 10px -3px rgba(17, 17, 17, 0.1215686275), inset 0 4px 5px 0 rgba(17, 17, 17, 0.1411764706), inset 0 2px 4px -1px rgba(17, 17, 17, 0.4)
$dieCut_6
inset 0 1px 18px 0 rgba(75, 75, 73, 0.1215686275), inset 0 6px 10px 0 rgba(75, 75, 73, 0.1411764706), inset 0 3px 5px -1px rgba(75, 75, 73, 0.2)
$dieCut_8
inset 0 3px 14px 2px rgba(75, 75, 73, 0.1215686275), inset 0 8px 10px 1px rgba(75, 75, 73, 0.1411764706), inset 0 5px 5px -3px rgba(75, 75, 73, 0.2)
$dieCut_10
inset 0 4px 18px 3px rgba(75, 75, 73, 0.1215686275), inset 0 10px 14px 1px rgba(75, 75, 73, 0.1411764706), inset 0 6px 6px -3px rgba(75, 75, 73, 0.2)
$dieCut_12
inset 0 5px 22px 4px rgba(75, 75, 73, 0.1215686275), inset 0 12px 17px 2px rgba(75, 75, 73, 0.1411764706), inset 0 7px 8px -4px rgba(75, 75, 73, 0.2)
$dieCut_16
inset 0 6px 30px 5px rgba(75, 75, 73, 0.1215686275), inset 0 16px 24px 2px rgba(75, 75, 73, 0.1411764706), inset 0 8px 10px -5px rgba(75, 75, 73, 0.2)
$dieCut_20
inset 0 8px 38px 7px rgba(75, 75, 73, 0.1215686275), inset 0 20px 31px 3px rgba(75, 75, 73, 0.1411764706), inset 0 10px 13px -6px rgba(75, 75, 73, 0.2)
$embossed_02_grey-95
-0.2px -0.2px 0.4px 0 rgba(255, 255, 255, 0.6980392157), 0.2px 0.2px 0.4px 0 rgba(0, 0, 0, 0.5019607843)
$embossed_1_grey-95
-1px -1px 2px 0 white, 1px 1px 2px 0 rgba(0, 0, 0, 0.2)
$embossed_2_grey-95
-2px -2px 4px 0 white, 2px 2px 4px 0 rgba(0, 0, 0, 0.2)
$embossed_4_grey-95
-3px -3px 6px 0 white, 3px 3px 6px 0 rgba(0, 0, 0, 0.2)
$embossed_6_grey-95
-4px -4px 8px 0 white, 4px 4px 8px 0 rgba(0, 0, 0, 0.2)
$embossed_8_grey-95
-6px -6px 12px 0 white, 6px 6px 12px 0 rgba(0, 0, 0, 0.2)
$embossed_10_grey-95
-8px -8px 16px 0 white, 8px 8px 16px 0 rgba(0, 0, 0, 0.2)
$embossed_08_grey-90
-0.8px -0.8px 1.6px 0 white, 0.8px 0.8px 1.6px 0 rgba(0, 0, 0, 0.2509803922)
$embossed_1_grey-90
-1px -1px 2px 0 rgba(255, 255, 255, 0.6980392157), 1px 1px 2px 0 rgba(0, 0, 0, 0.2509803922)
$embossed_2_grey-90
-2px -2px 4px 0 rgba(255, 255, 255, 0.6980392157), 2px 2px 4px 0 rgba(0, 0, 0, 0.2509803922)
$embossed_4_grey-90
-3px -3px 6px 0 rgba(255, 255, 255, 0.6980392157), 3px 3px 6px 0 rgba(0, 0, 0, 0.2509803922)
$embossed_6_grey-90
-4px -4px 8px 0 rgba(255, 255, 255, 0.6980392157), 4px 4px 8px 0 rgba(0, 0, 0, 0.2509803922)
$embossed_8_grey-90
-6px -6px 12px 0 rgba(255, 255, 255, 0.6980392157), 6px 6px 12px 0 rgba(0, 0, 0, 0.2509803922)
$embossed_10_grey-90
-8px -8px 16px 0 rgba(255, 255, 255, 0.6980392157), 8px 8px 16px 0 rgba(0, 0, 0, 0.2509803922)
$embossed_1_grey-98
-1px -1px 2px 0 white, 1px 1px 2px 0 rgba(0, 0, 0, 0.1803921569)
$embossed_2_grey-98
-2px -2px 4px 0 white, 2px 2px 4px 0 rgba(0, 0, 0, 0.1803921569)
$embossed_4_grey-98
-3px -3px 6px 0 white, 3px 3px 6px 0 rgba(0, 0, 0, 0.1803921569)
$embossed_6_grey-98
-4px -4px 8px 6px white, 4px 4px 8px 0 rgba(0, 0, 0, 0.1803921569)
$embossed_8_grey-98
-6px -6px 12px 0 white, 6px 6px 12px 0 rgba(0, 0, 0, 0.1803921569)
$embossed_10_grey-98
-8px -8px 16px 0 white, 8px 8px 16px 0 rgba(0, 0, 0, 0.1803921569)
$embossed_1_lila-30
-1px -1px 2px 0 rgba(182, 96, 199, 0.5019607843), 1px 1px 2px 0 #470f52
$embossed_1_cobalt-30
-1px -1px 2px 0 rgba(118, 175, 232, 0.3019607843), 1px 1px 2px 0 #113356
$embossed_1_cerulean-45
-1px -1px 2px 0 rgba(120, 176, 222, 0.4), 1px 1px 2px 0 #18466c
$embossed_1_turquoise-50
-1px -1px 2px 0 rgba(26, 193, 132, 0.5019607843), 1px 1px 2px 0 #24634c
$debossed_1_grey-90
inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 rgba(0, 0, 0, 0.2509803922)
$debossed_2_grey-90
inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 rgba(0, 0, 0, 0.2509803922)
$debossed_4_grey-90
inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 rgba(0, 0, 0, 0.2509803922)
$debossed_6_grey-90
inset -4px -4px 8px 0 white, inset 4px 4px 8px 0 rgba(0, 0, 0, 0.2509803922)
$debossed_8_grey-90
inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 rgba(0, 0, 0, 0.2509803922)
$debossed_10_grey-90
inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 rgba(0, 0, 0, 0.2509803922)
$debossed_1_grey-95
inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 rgba(0, 0, 0, 0.2)
$debossed_2_grey-95
inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 rgba(0, 0, 0, 0.2)
$debossed_4_grey-95
inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 rgba(0, 0, 0, 0.2)
$debossed_6_grey-95
inset -4px -4px 8px 0 white, inset 4px 4px 8px 0 rgba(0, 0, 0, 0.2)
$debossed_8_grey-95
inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 rgba(0, 0, 0, 0.2)
$debossed_10_grey-95
inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 rgba(0, 0, 0, 0.2)
$debossed_1_grey-98
inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 rgba(0, 0, 0, 0.1803921569)
$debossed_2_grey-98
inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 rgba(0, 0, 0, 0.1803921569)
$debossed_4_grey-98
inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 rgba(0, 0, 0, 0.1803921569)
$debossed_6_grey-98
inset -4px -4px 8px 6px white, inset 4px 4px 8px 0 rgba(0, 0, 0, 0.1803921569)
$debossed_8_grey-98
inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 rgba(0, 0, 0, 0.1803921569)
$debossed_10_grey-98
inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 rgba(0, 0, 0, 0.1803921569)
$debossed_1_lila-30
inset -1px -1px 2px 0 rgba(219, 116, 239, 0.6980392157), inset 1px 1px 2px 0 #311137, inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451)
$debossed_2_lila-30
inset -2px -2px 4px 0 rgba(219, 116, 239, 0.6980392157), inset 2px 2px 4px 0 #311137, inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451)
$debossed_1_grape-86
inset -1px -1px 2px 0 rgba(238, 249, 112, 0.8980392157), inset 1px 1px 2px 0 rgba(175, 185, 61, 0.8980392157), inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451)
$debossed_2_grape-86
inset -2px -2px 4px 0 rgba(238, 249, 112, 0.8980392157), inset 2px 2px 4px 0 rgba(175, 185, 61, 0.8980392157), inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451)
$debossed_1_cobalt-30
inset -1px -1px 2px 0 #2a81d7, inset 1px 1px 2px 0 #13263a, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$debossed_2_cobalt-30
inset -2px -2px 4px 0 #2a81d7, inset 2px 2px 4px 0 #13263a, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$debossed_1_cerulean-45
inset -1px -1px 2px 0 #4b9bdc, inset 1px 1px 2px 0 #184f7d, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$debossed_2_cerulean-45
inset -2px -2px 4px 0 #4b9bdc, inset 2px 2px 4px 0 #184f7d, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$debossed_1_turquoise-50
inset -1px -1px 2px 0 #28b984, inset 1px 1px 2px 0 #295847, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$debossed_2_turquoise-50
inset -2px -2px 4px 0 #28b984, inset 2px 2px 4px 0 #295847, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$--elevation-05
0 0.5px 0.5px 0 rgba(17, 17, 17, 0.1215686275), 0 0.5px 0.5px 0 rgba(17, 17, 17, 0.1411764706), 0 0.5px 1px 0 rgba(17, 17, 17, 0.2)
$--elevation-1
0 2px 1px -1px rgba(17, 17, 17, 0.1215686275), 0 1px 1px 0 rgba(17, 17, 17, 0.1411764706), 0 1px 3px 0 rgba(17, 17, 17, 0.2)
$--elevation-2
0 3px 1px -2px rgba(17, 17, 17, 0.1215686275), 0 2px 2px 0 rgba(17, 17, 17, 0.1411764706), 0 1px 5px 0 rgba(17, 17, 17, 0.2)
$--elevation-4
0 1px 10px 0 rgba(75, 75, 73, 0.1215686275), 0 4px 5px 0 rgba(75, 75, 73, 0.1411764706), 0 2px 4px -1px rgba(75, 75, 73, 0.2)
$--elevation-6
0 1px 18px 0 rgba(75, 75, 73, 0.1215686275), 0 6px 10px 0 rgba(75, 75, 73, 0.1411764706), 0 3px 5px -1px rgba(75, 75, 73, 0.2)
$--elevation-8
0 3px 14px 2px rgba(17, 17, 17, 0.1215686275), 0 8px 10px 1px rgba(17, 17, 17, 0.1411764706), 0 5px 5px -3px rgba(17, 17, 17, 0.2)
$--elevation-10
0 4px 18px 3px rgba(17, 17, 17, 0.1215686275), 0 10px 14px 1px rgba(17, 17, 17, 0.1411764706), 0 6px 6px -3px rgba(17, 17, 17, 0.2)
$--elevation-12
0 5px 22px 4px rgba(75, 75, 73, 0.1215686275), 0 12px 17px 2px rgba(75, 75, 73, 0.1411764706), 0 7px 8px -4px rgba(75, 75, 73, 0.2)
$--elevation-16
0 6px 30px 5px rgba(75, 75, 73, 0.1215686275), 0 16px 24px 2px rgba(75, 75, 73, 0.1411764706), 0 8px 10px -5px rgba(75, 75, 73, 0.2)
$--elevation-20
0 8px 38px 7px rgba(75, 75, 73, 0.1215686275), 0 20px 31px 3px rgba(75, 75, 73, 0.1411764706), 0 10px 13px -6px rgba(75, 75, 73, 0.2)
$--die-cut-05
inset 0 1px 0.5px -1px rgba(17, 17, 17, 0.1215686275), inset 0 0.5px 0.5px 0 rgba(17, 17, 17, 0.1411764706), inset 0 0.5px 1.5px 0 rgba(17, 17, 17, 0.4)
$--die-cut-1
inset 0 2px 1px -2px rgba(17, 17, 17, 0.1215686275), inset 0 1px 1px 0 rgba(17, 17, 17, 0.1411764706), inset 0 1px 3px 0 rgba(17, 17, 17, 0.4)
$--die-cut-2
inset 0 3px 1px -2px rgba(17, 17, 17, 0.1215686275), inset 0 2px 2px 0 rgba(17, 17, 17, 0.1411764706), inset 0 1px 5px 0 rgba(17, 17, 17, 0.4)
$--die-cut-4
inset 0 1px 10px -3px rgba(17, 17, 17, 0.1215686275), inset 0 4px 5px 0 rgba(17, 17, 17, 0.1411764706), inset 0 2px 4px -1px rgba(17, 17, 17, 0.4)
$--die-cut-6
inset 0 1px 18px 0 rgba(75, 75, 73, 0.1215686275), inset 0 6px 10px 0 rgba(75, 75, 73, 0.1411764706), inset 0 3px 5px -1px rgba(75, 75, 73, 0.2)
$--die-cut-8
inset 0 3px 14px 2px rgba(75, 75, 73, 0.1215686275), inset 0 8px 10px 1px rgba(75, 75, 73, 0.1411764706), inset 0 5px 5px -3px rgba(75, 75, 73, 0.2)
$--die-cut-10
inset 0 4px 18px 3px rgba(75, 75, 73, 0.1215686275), inset 0 10px 14px 1px rgba(75, 75, 73, 0.1411764706), inset 0 6px 6px -3px rgba(75, 75, 73, 0.2)
$--die-cut-12
inset 0 5px 22px 4px rgba(75, 75, 73, 0.1215686275), inset 0 12px 17px 2px rgba(75, 75, 73, 0.1411764706), inset 0 7px 8px -4px rgba(75, 75, 73, 0.2)
$--die-cut-16
inset 0 6px 30px 5px rgba(75, 75, 73, 0.1215686275), inset 0 16px 24px 2px rgba(75, 75, 73, 0.1411764706), inset 0 8px 10px -5px rgba(75, 75, 73, 0.2)
$--die-cut-20
inset 0 8px 38px 7px rgba(75, 75, 73, 0.1215686275), inset 0 20px 31px 3px rgba(75, 75, 73, 0.1411764706), inset 0 10px 13px -6px rgba(75, 75, 73, 0.2)
$--debossed-1--grey-90
inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 rgba(0, 0, 0, 0.2509803922)
$--debossed-2--grey-90
inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 rgba(0, 0, 0, 0.2509803922)
$--debossed-4--grey-90
inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 rgba(0, 0, 0, 0.2509803922)
$--debossed-6--grey-90
inset -4px -4px 8px 0 white, inset 4px 4px 8px 0 rgba(0, 0, 0, 0.2509803922)
$--debossed-8--grey-90
inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 rgba(0, 0, 0, 0.2509803922)
$--debossed-10--grey-90
inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 rgba(0, 0, 0, 0.2509803922)
$--debossed-1--grey-95
inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 rgba(0, 0, 0, 0.2)
$--debossed-2--grey-95
inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 rgba(0, 0, 0, 0.2)
$--debossed-4--grey-95
inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 rgba(0, 0, 0, 0.2)
$--debossed-6--grey-95
inset -4px -4px 8px 0 white, inset 4px 4px 8px 0 rgba(0, 0, 0, 0.2)
$--debossed-8--grey-95
inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 rgba(0, 0, 0, 0.2)
$--debossed-10--grey-95
inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 rgba(0, 0, 0, 0.2)
$--debossed-1--grey-98
inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 rgba(0, 0, 0, 0.1803921569)
$--debossed-2--grey-98
inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 rgba(0, 0, 0, 0.1803921569)
$--debossed-4--grey-98
inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 rgba(0, 0, 0, 0.1803921569)
$--debossed-6--grey-98
inset -4px -4px 8px 6px white, inset 4px 4px 8px 0 rgba(0, 0, 0, 0.1803921569)
$--debossed-8--grey-98
inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 rgba(0, 0, 0, 0.1803921569)
$--debossed-10--grey-98
inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 rgba(0, 0, 0, 0.1803921569)
$--debossed-1--lila-30
inset -1px -1px 2px 0 rgba(219, 116, 239, 0.6980392157), inset 1px 1px 2px 0 #311137, inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451)
$--debossed-2--lila-30
inset -2px -2px 4px 0 rgba(219, 116, 239, 0.6980392157), inset 2px 2px 4px 0 #311137, inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451)
$--debossed-1--grape-86
inset -1px -1px 2px 0 rgba(238, 249, 112, 0.8980392157), inset 1px 1px 2px 0 rgba(175, 185, 61, 0.8980392157), inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451)
$--debossed-2--grape-86
inset -2px -2px 4px 0 rgba(238, 249, 112, 0.8980392157), inset 2px 2px 4px 0 rgba(175, 185, 61, 0.8980392157), inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451)
$--debossed-1--cobalt-30
inset -1px -1px 2px 0 #2a81d7, inset 1px 1px 2px 0 #13263a, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$--debossed-2--cobalt-30
inset -2px -2px 4px 0 #2a81d7, inset 2px 2px 4px 0 #13263a, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$--debossed-1--cerulean-45
inset -1px -1px 2px 0 #4b9bdc, inset 1px 1px 2px 0 #184f7d, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$--debossed-2--cerulean-45
inset -2px -2px 4px 0 #4b9bdc, inset 2px 2px 4px 0 #184f7d, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$--debossed-1--turquoise-50
inset -1px -1px 2px 0 #28b984, inset 1px 1px 2px 0 #295847, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$--debossed-2--turquoise-50
inset -2px -2px 4px 0 #28b984, inset 2px 2px 4px 0 #295847, inset -0.1px -0.1px 1px 0 rgba(0, 0, 0, 0.168627451)
$--embossed-02--grey-95
-0.2px -0.2px 0.4px 0 rgba(255, 255, 255, 0.6980392157), 0.2px 0.2px 0.4px 0 rgba(0, 0, 0, 0.5019607843)
$--embossed-1--grey-95
-1px -1px 2px 0 white, 1px 1px 2px 0 rgba(0, 0, 0, 0.2)
$--embossed-2--grey-95
-2px -2px 4px 0 white, 2px 2px 4px 0 rgba(0, 0, 0, 0.2)
$--embossed-4--grey-95
-3px -3px 6px 0 white, 3px 3px 6px 0 rgba(0, 0, 0, 0.2)
$--embossed-6--grey-95
-4px -4px 8px 0 white, 4px 4px 8px 0 rgba(0, 0, 0, 0.2)
$--embossed-8--grey-95
-6px -6px 12px 0 white, 6px 6px 12px 0 rgba(0, 0, 0, 0.2)
$--embossed-10--grey-95
-8px -8px 16px 0 white, 8px 8px 16px 0 rgba(0, 0, 0, 0.2)
$--embossed-08--grey-90
-0.8px -0.8px 1.6px 0 white, 0.8px 0.8px 1.6px 0 rgba(0, 0, 0, 0.2509803922)
$--embossed-1--grey-90
-1px -1px 2px 0 rgba(255, 255, 255, 0.6980392157), 1px 1px 2px 0 rgba(0, 0, 0, 0.2509803922)
$--embossed-2--grey-90
-2px -2px 4px 0 rgba(255, 255, 255, 0.6980392157), 2px 2px 4px 0 rgba(0, 0, 0, 0.2509803922)
$--embossed-4--grey-90
-3px -3px 6px 0 rgba(255, 255, 255, 0.6980392157), 3px 3px 6px 0 rgba(0, 0, 0, 0.2509803922)
$--embossed-6--grey-90
-4px -4px 8px 0 rgba(255, 255, 255, 0.6980392157), 4px 4px 8px 0 rgba(0, 0, 0, 0.2509803922)
$--embossed-8--grey-90
-6px -6px 12px 0 rgba(255, 255, 255, 0.6980392157), 6px 6px 12px 0 rgba(0, 0, 0, 0.2509803922)
$--embossed-10--grey-90
-8px -8px 16px 0 rgba(255, 255, 255, 0.6980392157), 8px 8px 16px 0 rgba(0, 0, 0, 0.2509803922)
$--embossed-1--grey-98
-1px -1px 2px 0 white, 1px 1px 2px 0 rgba(0, 0, 0, 0.1803921569)
$--embossed-2--grey-98
-2px -2px 4px 0 white, 2px 2px 4px 0 rgba(0, 0, 0, 0.1803921569)
$--embossed-4--grey-98
-3px -3px 6px 0 white, 3px 3px 6px 0 rgba(0, 0, 0, 0.1803921569)
$--embossed-6--grey-98
-4px -4px 8px 6px white, 4px 4px 8px 0 rgba(0, 0, 0, 0.1803921569)
$--embossed-8--grey-98
-6px -6px 12px 0 white, 6px 6px 12px 0 rgba(0, 0, 0, 0.1803921569)
$--embossed-10--grey-98
-8px -8px 16px 0 white, 8px 8px 16px 0 rgba(0, 0, 0, 0.1803921569)
$--embossed-1--lila-30
-1px -1px 2px 0 rgba(182, 96, 199, 0.5019607843), 1px 1px 2px 0 #470f52
$--embossed-1--cobalt-30
-1px -1px 2px 0 rgba(118, 175, 232, 0.3019607843), 1px 1px 2px 0 #113356
$--embossed-1--cerulean-45
-1px -1px 2px 0 rgba(120, 176, 222, 0.4), 1px 1px 2px 0 #18466c
$--embossed-1--turquoise-50
-1px -1px 2px 0 rgba(26, 193, 132, 0.5019607843), 1px 1px 2px 0 #24634c
$}main#the-app-wrapper { --secondary-color
hsl(192, 88%, 30%)
$--tertiary-color
hsl(65, 74%, 53%)
$--bds-primaryText-color
hsl(0, 0%, 23%)
$--bds-secondaryText-color
hsl(0, 0%, 37%)
$--bds-tertiaryText-color
hsl(0, 0%, 51%)
$--color-white
--color-grey-98
$--color-dark
--color-grey-25
$--tertiary-debossed-1
--debossed-1--grape-86
$--tertiary-debossed-2
--debossed-2--grape-86
$color
--bds-primaryText-color
$}main#the-app-wrapper.pohlcon { --bds-brand-primary-color
hsl(288, 59%, 32%)
$--bds-brand-primary-bgColor
hsl(207, 79%, 40%)
$--primary-debossed-1
--debossed-1--cerulean-45
$--primary-debossed-2
--debossed-2--cerulean-45
$--primary-embossed-1
--embossed-1--cerulean-45
$--primary-embossed-2
--embossed-2--cerulean-45
$}main#the-app-wrapper.jordahl { --bds-brand-primary-color
hsl(210, 100%, 27%)
$}main#the-app-wrapper.hbau { --bds-brand-primary-color
hsl(158, 84%, 29%)
$}main#the-app-wrapper.puk { --bds-brand-primary-color
hsl(207, 79%, 40%)
$}main#the-app-wrapper.pohlcon { --bds-brand-primary-color-locked
hsl(290, 42%, 72%)
$}main#the-app-wrapper.jordahl { --bds-brand-primary-color-locked
hsl(210, 71%, 69%)
$}main#the-app-wrapper.hbau { --bds-brand-primary-color-locked
hsl(158, 66%, 60%)
$}main#the-app-wrapper.puk { --bds-brand-primary-color-locked
hsl(207, 61%, 67%)
$}main#the-app-wrapper.pohlcon { --bds-brand-primary-color-locked-lowContrast
hsl(290, 48%, 58%)
$}main#the-app-wrapper.jordahl { --bds-brand-primary-color-locked-lowContrast
hsl(210, 48%, 58%)
$}main#the-app-wrapper.hbau { --bds-brand-primary-color-locked-lowContrast
hsl(158, 76%, 43%)
$}main#the-app-wrapper.puk { --bds-brand-primary-color-locked-lowContrast
hsl(207, 48%, 58%)
$}main#the-app-wrapper.pohlcon { --bds-brand-color-hovered
hsl(290, 48%, 58%)
$}main#the-app-wrapper.jordahl { --bds-brand-color-hovered
hsl(210, 48%, 58%)
$}main#the-app-wrapper.hbau { --bds-brand-color-hovered
hsl(158, 76%, 43%)
$}main#the-app-wrapper.puk { --bds-brand-color-hovered
hsl(207, 48%, 58%)
$}main#the-app-wrapper.pohlcon { --bds-brand-bgColor--locked
hsl(290, 38%, 81%)
$}main#the-app-wrapper.jordahl { --bds-brand-bgColor--locked
hsl(210, 64%, 79%)
$}main#the-app-wrapper.hbau { --bds-brand-bgColor--locked
hsl(159, 51%, 84%)
$}main#the-app-wrapper.puk { --bds-brand-bgColor--locked
hsl(207, 54%, 78%)
$}main#the-app-wrapper.pohlcon { --primary-bgColor-selected
hsl(289, 33%, 90%)
$}main#the-app-wrapper.jordahl { --primary-bgColor-selected
hsl(210, 57%, 89%)
$}main#the-app-wrapper.hbau { --primary-bgColor-selected
hsl(159, 51%, 84%)
$}main#the-app-wrapper.puk { --primary-bgColor-selected
hsl(208, 46%, 89%)
$}main#the-app-wrapper.pohlcon { --bds-emphasis-boxShadow--active
--debossed-2--lila-30
$--bds-emphasis-boxShadow--active-input
--debossed-2--grey-93
$--bds-flatElement-brand--hovered
--embossed-1--cerulean-45
$--bds-flatElement-brand--active
--debossed-1--cerulean-45
$}main#the-app-wrapper.jordahl { --bds-emphasis-boxShadow--active
--debossed-2--cobalt-30
$}main#the-app-wrapper.hbau { --bds-emphasis-boxShadow--active
--debossed-2--turquoise-50
$}main#the-app-wrapper.puk { --bds-emphasis-boxShadow--active
--debossed-2--cerulean-45
$scrollbar-bgColor
--color-grey-90
$scrollbar-thumb
--color-grey-98
$scrollbar-thumb--hover
--color-grey-98
$scrollbar-thumb--active
--color-grey-98
$scrollbar-arrows-color
--color-grey-40
$scrollbar-arrows-bgColor
transparent
$scrollbar-arrows-bgColor--hover
--color-grey-90
$scrollbar-arrows-bgColor--active
--color-grey-90
$scrollbar-arrows-bgColor--locked
--color-grey-70
$scrollbar-thumb-boxshadow
--elevation-05
$scrollbar-thumb-boxshadow--hover
--elevation-1
$scrollbar-thumb-boxshadow--active
--elevation-2
$scrollbar-track-boxshadow
--die-cut-05
$scrollbar-cornerRadius
--gutter-l
$scrollbar-tiny-thumb-width
--gutter-xs
$scrollbar-tiny-thumb-bgColor
--color-grey-80
$scrollbar-tiny-thumb-bgColor--hover
--color-grey-70
$scrollbar-tiny-thumb-bgColor--active
--color-grey-70
$scrollbar-tiny-cornerRadius
--gutter-l

Playground ​

Developer Notes ​

The ScrollbarTiny uses a slot, which means, that you will have to wrap the content that the scrollbar should be applied to inside the corresponding component element

ts
<ScrollbarTiny>
  <TextSelect
    v-model="pg.choice"
    label="Demo choice"
    labelPosition="labelLeading"
    :options="demoOptions"
    :noOfOptionsToShow="5"
  />
</ScrollbarTiny>