@orfeas126/box-ui-elements
Version:
Box UI Elements
1 lines • 117 kB
Source Map (JSON)
{"version":3,"file":"content-sidebar.css","mappings":"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","sources":["webpack://@orfeas126/box-ui-elements/./src/components/guide-tooltip/GuideTooltip.scss","webpack://@orfeas126/box-ui-elements/./src/styles/constants/_colors.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/additional-tabs/AdditionalTabTooltip.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/additional-tabs/AdditionalTab.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/_mixins.scss","webpack://@orfeas126/box-ui-elements/./src/styles/mixins/_animation.scss","webpack://@orfeas126/box-ui-elements/./src/styles/common/_animations.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/additional-tabs/AdditionalTabsLoading.scss","webpack://@orfeas126/box-ui-elements/./src/styles/constants/_layout.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/additional-tabs/AdditionalTabs.scss","webpack://@orfeas126/box-ui-elements/./src/elements/common/nav-button/BackButton.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/SidebarNavButton.scss","webpack://@orfeas126/box-ui-elements/./src/styles/constants/_media-queries.scss","webpack://@orfeas126/box-ui-elements/./src/elements/common/_variables.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/SidebarNavSignButton.scss","webpack://@orfeas126/box-ui-elements/./src/components/close-button/CloseButton.scss","webpack://@orfeas126/box-ui-elements/./src/styles/constants/_buttons.scss","webpack://@orfeas126/box-ui-elements/./src/components/menu/MenuHeader.scss","webpack://@orfeas126/box-ui-elements/./src/styles/mixins/_typography.scss","webpack://@orfeas126/box-ui-elements/./src/components/menu/SubmenuItem.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/SidebarNavSign.scss","webpack://@orfeas126/box-ui-elements/./src/components/sidebar-toggle-button/SidebarToggleButton.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/SidebarNav.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/SidebarContent.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/SidebarSection.scss","webpack://@orfeas126/box-ui-elements/./src/styles/constants/_animation.scss","webpack://@orfeas126/box-ui-elements/./src/styles/_deprecated.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/SidebarLoading.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/SidebarLoadingError.scss","webpack://@orfeas126/box-ui-elements/./src/elements/common/modal.scss","webpack://@orfeas126/box-ui-elements/./src/styles/mixins/_buttons.scss","webpack://@orfeas126/box-ui-elements/./src/styles/constants/_typography.scss","webpack://@orfeas126/box-ui-elements/./node_modules/@box/blueprint-web-assets/tokens/tokens.scss","webpack://@orfeas126/box-ui-elements/./src/elements/content-sidebar/ContentSidebar.scss"],"sourcesContent":["@import '../../styles/variables';\n\n$bdl-guide-tooltip-max-width: 408px;\n\n.bdl-GuideTooltip {\n display: flex;\n}\n\n.bdl-GuideTooltip.bdl-Tooltip {\n max-width: $bdl-guide-tooltip-max-width;\n padding: ($bdl-grid-unit * 6) ($bdl-grid-unit * 12) ($bdl-grid-unit * 6) ($bdl-grid-unit * 6);\n}\n\n.bdl-GuideTooltip-bottom {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: ($bdl-grid-unit * 6);\n}\n\n.bdl-GuideTooltip-icon {\n width: 32px;\n margin-right: ($bdl-grid-unit * 4);\n}\n\n.bdl-GuideTooltip-image {\n margin-right: -($bdl-grid-unit * 6);\n margin-left: -($bdl-grid-unit * 6);\n padding: ($bdl-grid-unit * 4) 0 ($bdl-grid-unit * 5) 0;\n text-align: center;\n\n img {\n max-width: $bdl-guide-tooltip-max-width;\n }\n}\n\n.bdl-GuideTooltip-title {\n padding-bottom: ($bdl-grid-unit * 2);\n font-weight: bold;\n font-size: 16px;\n line-height: 1.5;\n}\n\n.bdl-GuideTooltip-body {\n font-size: 14px;\n line-height: 1.57;\n}\n\n.bdl-GuideTooltip-title,\n.bdl-GuideTooltip-body {\n letter-spacing: .3px;\n}\n\nbutton.bdl-GuideTooltip-previousButton,\nbutton.bdl-GuideTooltip-previousButton:not(.is-disabled):hover,\nbutton.bdl-GuideTooltip-previousButton:not(.is-disabled):active {\n color: $bdl-dark-blue-02;\n background-color: $bdl-dark-blue;\n}\n\nbutton.bdl-GuideTooltip-previousButton {\n border: 1px solid $bdl-dark-blue-02;\n}\n\nbutton.bdl-GuideTooltip-previousButton:not(.is-disabled):hover {\n border: 1px solid $bdl-dark-blue-20;\n}\n\nbutton.bdl-GuideTooltip-previousButton:not(.is-disabled):active {\n border: 1px solid $bdl-dark-blue-50;\n}\n\nbutton.bdl-GuideTooltip-nextButton {\n color: $bdl-dark-blue;\n background-color: $bdl-dark-blue-02;\n border: 1px solid $bdl-dark-blue-02;\n}\n\nbutton.bdl-GuideTooltip-nextButton:not(.is-disabled):hover {\n background-color: $bdl-dark-blue-10;\n border: 1px solid $bdl-dark-blue-10;\n}\n\nbutton.bdl-GuideTooltip-nextButton:not(.is-disabled):active {\n background-color: $bdl-dark-blue-20;\n border: 1px solid $bdl-dark-blue-20;\n}\n\n.bdl-GuideTooltip-navigation button:first-of-type {\n margin-left: 0;\n}\n","// Box Design Language Colors\n// confirm with design before extending\n\n$white: #fff !default;\n$black: #000 !default;\n$countBadgeBackground: #e9163c !default;\n\n// Box/Primary Blues\n$bdl-box-blue: #0061d5 !default;\n$bdl-box-blue-80: #3381dd !default;\n$bdl-box-blue-50: #7fb0ea !default;\n$bdl-box-blue-40: #99c0ee !default;\n$bdl-box-blue-30: #b2cff2 !default;\n$bdl-box-blue-20: #ccdff7 !default;\n$bdl-box-blue-10: #e5effa !default;\n$bdl-box-blue-05: #f2f7fd !default;\n$bdl-box-blue-02: #fafcfe !default;\n\n// Box/Primary Grays\n$bdl-gray: #222 !default;\n$bdl-gray-80: #4e4e4e !default;\n$bdl-gray-65: #6f6f6f !default;\n$bdl-gray-50: #909090 !default;\n$bdl-gray-40: #a7a7a7 !default;\n$bdl-gray-30: #bcbcbc !default;\n$bdl-gray-20: #d3d3d3 !default;\n$bdl-gray-10: #e8e8e8 !default;\n$bdl-gray-05: #f4f4f4 !default;\n$bdl-gray-02: #fbfbfb !default;\n\n// Dark Blues\n$bdl-dark-blue: #003c84 !default;\n$bdl-dark-blue-50: #7f9dc1 !default;\n$bdl-dark-blue-20: #ccd8e6 !default;\n$bdl-dark-blue-10: #e5ebf2 !default;\n$bdl-dark-blue-05: #f2f5f9 !default;\n$bdl-dark-blue-02: #fafbfd !default;\n\n// Light Blues\n$bdl-light-blue: #2486fc !default;\n$bdl-light-blue-50: #91c2fd !default;\n$bdl-light-blue-20: #d3e7fe !default;\n$bdl-light-blue-10: #e9f2fe !default;\n$bdl-light-blue-05: #f4f9ff !default;\n$bdl-light-blue-02: #fbfdff !default;\n\n// Yelloranges\n$bdl-yellorange: #f5b31b !default;\n$bdl-yellorange-50: #fad98d !default;\n$bdl-yellorange-20: #fdf0d1 !default;\n$bdl-yellorange-10: #fef7e8 !default;\n$bdl-yellorange-05: #fefbf3 !default;\n$bdl-yellorange-02: #fffefb !default;\n\n// Yellows\n$bdl-yellow: #ffd700 !default;\n$bdl-yellow-50: #ffeb7f !default;\n$bdl-yellow-20: #fff7cc !default;\n$bdl-yellow-10: #fffbe5 !default;\n$bdl-yellow-05: #fffdf2 !default;\n$bdl-yellow-02: #fffefa !default;\n\n// Green Lights\n$bdl-green-light: #26c281 !default;\n$bdl-green-light-50: #92e0c0 !default;\n$bdl-green-light-20: #d4f3e6 !default;\n$bdl-green-light-10: #e9f8f2 !default;\n$bdl-green-light-05: #f4fcf8 !default;\n$bdl-green-light-02: #fbfefd !default;\n\n// Grimaces\n$bdl-grimace: #4826c2 !default;\n$bdl-grimace-50: #a392e0 !default;\n$bdl-grimace-20: #dad4f3 !default;\n$bdl-grimace-10: #ece9f8 !default;\n$bdl-grimace-05: #f6f4fc !default;\n$bdl-grimace-02: #fbfbfe !default;\n\n// Orange\n$bdl-orange: #f1811a !default;\n$bdl-orange-50: #f8c08c !default;\n$bdl-orange-20: #fce6d1 !default;\n$bdl-orange-10: #fdf2e8 !default;\n$bdl-orange-05: #fef8f3 !default;\n$bdl-orange-02: #fffdfb !default;\n\n// Purple Rains\n$bdl-purple-rain: #9f3fed !default;\n$bdl-purple-rain-50: #cf9ff6 !default;\n$bdl-purple-rain-20: #ecd9fb !default;\n$bdl-purple-rain-10: #f5ebfd !default;\n$bdl-purple-rain-05: #faf5fe !default;\n$bdl-purple-rain-02: #fdfbff !default;\n\n// Watermelon Reds\n$bdl-watermelon-red: #ed3757 !default;\n$bdl-watermelon-red-50: #f69bab !default;\n$bdl-watermelon-red-20: #fbd7dd !default;\n$bdl-watermelon-red-10: #fdebee !default;\n$bdl-watermelon-red-05: #fef5f6 !default;\n$bdl-watermelon-red-02: #fffbfc !default;\n",".bdl-AdditionalTabTooltip.tooltip {\n // Max-width is chosen so the tooltip is small enough to fit on the right-hand side of\n // the sidebar. Using the default max-width forces the tooltip to the left-hand side.\n max-width: 250px;\n}\n","@import '../../../styles/variables';\n@import '../../../styles/common/_animations';\n@import '../mixins';\n\n.bdl-AdditionalTab {\n @include bdl-SidebarNavButton;\n\n &:hover {\n svg path {\n fill: $bdl-gray-80;\n }\n }\n}\n\n.bdl-AdditionalTab-icon {\n @include bdl-openComponentAnimation(.5s);\n @include bdl-SidebarNavIcon;\n\n border-radius: 5px;\n}\n","@import '../common/variables';\n\n@mixin bdl-SidebarNavButton {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 59px; // 1px for left border\n height: 60px;\n background-color: transparent;\n\n &:hover {\n background-color: $bdl-gray-05;\n }\n\n &.bdl-is-disabled {\n opacity: .5;\n }\n\n &.bdl-is-hidden {\n display: none;\n }\n}\n\n@mixin bdl-SidebarNavIcon {\n width: 24px;\n height: 24px;\n}\n\n@mixin bcs-SidebarSection {\n margin: 0 8px 20px 25px;\n\n &:empty {\n margin: 0;\n }\n}\n","@import '../constants/animation';\n\n@mixin bdl-transition($time-length, $properties...) {\n transition-timing-function: $bdl-timingFunction;\n transition-duration: $time-length;\n transition-property: $properties;\n}\n\n@mixin bdl-openComponentAnimation($time-length) {\n animation: fade-in $bdl-timingFunction $time-length;\n}\n\n@mixin bdl-loadingPulseAnimation($start-color, $end-color, $time-length) {\n // TODO: this will create duplicate @keyframes definitions upon each usage\n @keyframes loading-pulse {\n 0% {\n background-color: $start-color;\n }\n\n 100% {\n background-color: $end-color;\n }\n }\n\n animation: loading-pulse .5s ease-in-out infinite alternate, fade-in $time-length $bdl-timingFunction;\n}\n","@import '../constants/animation';\n@import '../mixins/animation';\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@mixin bdl-fadeIn($fade-in-time) {\n @warn 'This mixin is deprecated. Use `bdl-openComponentAnimation` in mixins/animations';\n\n @include bdl-openComponentAnimation($fade-in-time);\n}\n\n@mixin bdl-loadingPulse($start-color, $end-color, $fade-in-time) {\n @warn 'This mixin is deprecated. Use `bdl-loadingPulseAnimation` in mixins/animations';\n\n @include bdl-loadingPulseAnimation($start-color, $end-color, $fade-in-time);\n}\n","@import '../../../styles/variables';\n@import '../../../styles/common/animations.scss';\n@import '../mixins';\n\n$bdl-AdditionalTabs-fade-in-time: .5s;\n\n.bdl-AdditionalTabPlaceholder {\n @include bdl-SidebarNavButton;\n}\n\n.bdl-AdditionalTabPlaceholder-icon {\n @include bdl-openComponentAnimation($bdl-AdditionalTabs-fade-in-time);\n\n width: 24px;\n height: 24px;\n background-color: $bdl-gray-50;\n border-radius: $bdl-border-radius-size-med;\n}\n\n.bdl-AdditionalTabPlaceholder-icon--loading {\n @include bdl-loadingPulseAnimation(#f4f4f4, $bdl-gray-10, $bdl-AdditionalTabs-fade-in-time);\n}\n\n.bdl-AdditionalTabPlaceholder-moreIcon {\n @include bdl-openComponentAnimation($bdl-AdditionalTabs-fade-in-time);\n}\n","// Z-Indexes\n$modal-dialog-z-index: 160 !default;\n$menu-z-index: 170 !default;\n$submenu-z-index: 171 !default;\n$overlay-z-index: 190 !default;\n$tooltip-z-index: 190 !default;\n$notifications-wrapper-z-index: 200 !default;\n\n// Borders\n$bdl-border-radius-size: 4px;\n$bdl-border-radius-size-med: $bdl-border-radius-size * 1.5;\n$bdl-border-radius-size-large: $bdl-border-radius-size * 2;\n$bdl-border-radius-size-xlarge: $bdl-border-radius-size * 3;\n\n// Drop shadows\n$bdl-header-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);\n\n// Spacing\n$bdl-grid-unit: 4px !default;\n$bdl-grid-unit-px: 4 !default; // unitless grid unit (defined in pixels for manual multiplication in JS)\n\n// Headers\n$bdl-header-height: 64px;\n",".bdl-AdditionalTabs {\n display: flex;\n flex-direction: column;\n}\n",".bdl-BackButton {\n &,\n &:hover,\n &:focus {\n display: flex;\n }\n}\n","@import '../common/variables';\n@import './mixins';\n\n.bcs .bcs-NavButton {\n @include bdl-SidebarNavButton;\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: -1px;\n display: block;\n width: 3px;\n content: '';\n pointer-events: none;\n }\n\n &:hover {\n svg .fill-color {\n fill: $bdl-gray-80;\n }\n }\n\n &.bcs-is-selected {\n &::before {\n background-color: $blue;\n }\n\n svg .fill-color {\n fill: $blue;\n }\n }\n}\n\n@include breakpoint($medium-screen) {\n .bcs .bcs-NavButton {\n width: $sidebarTabResponsiveSize;\n height: $sidebarTabResponsiveSize;\n margin-right: $bdl-grid-unit * 3;\n\n &::before {\n top: $sidebarTabResponsiveSize;\n right: 0;\n bottom: 0;\n left: 0;\n width: auto;\n height: 2px;\n }\n }\n}\n","$size-small-medium-min: 375px;\n$size-medium-min: 461px;\n$size-large-min: 768px;\n\n$size-small-max: 374px;\n$size-small-medium-max: 460px;\n$size-medium-max: 767px;\n$size-large-max: 1023px;\n$size-xlarge-max: 1219px;\n\n$small-screen: unquote('(max-width: #{$size-small-max})');\n$small-medium-screen: unquote('(max-width: #{$size-small-medium-max})');\n$medium-screen: unquote('(max-width: #{$size-medium-max})');\n$large-screen: unquote('(max-width: #{$size-large-max})');\n$xlarge-screen: unquote('(max-width: #{$size-xlarge-max})');\n\n@mixin breakpoint($media-query) {\n @media #{$media-query} {\n @content;\n }\n}\n","@import '../../styles/variables';\n@import '../../styles/inputs';\n\n$font: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\n$minimumWidth: 300px;\n$sidebarHeaderHeight: 60px;\n$sidebarContentWidth: 340px;\n$sidebarContentMinHeight: 93px;\n$sidebarActivityFeedSpacingHorizontal: 20px;\n$sidebarActivityFeedSpacingVertical: 20px;\n$sidebarActivityFeedSelectedItemSpacing: 10px;\n$sidebarTabResponsiveSize: 48px;\n\n@mixin rendering {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n@mixin reset {\n @include rendering;\n\n /* stylelint-disable declaration-no-important */\n box-sizing: border-box !important;\n font-size: 13px;\n /* stylelint-enable declaration-no-important */\n font-family: $font;\n\n * {\n @include rendering;\n\n /* stylelint-disable declaration-no-important */\n box-sizing: border-box !important;\n /* stylelint-enable declaration-no-important */\n font-family: inherit;\n\n &::after,\n &::before {\n box-sizing: inherit;\n color: inherit;\n font-family: inherit;\n text-rendering: inherit;\n }\n }\n}\n\n@mixin placeholder {\n color: $bdl-gray-65;\n font-weight: normal;\n font-family: $font;\n // Firefox sets opacity for placeholder to less than 100%\n // See https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#opaque_text\n opacity: 1;\n}\n","@import './mixins';\n@import '../common/variables';\n\n.bcs-SidebarNavSignButton {\n @include bdl-SidebarNavButton;\n}\n\n.bcs-SidebarNavSignButton-icon {\n @include bdl-SidebarNavIcon;\n}\n\n.bcs-SidebarNavSignButton-icon--grayscale {\n display: none;\n margin-top: 2px; //for visual alignment\n}\n\n@include breakpoint($medium-screen) {\n .bcs-SidebarNavSignButton-icon {\n display: none;\n }\n\n .bcs-SidebarNavSignButton-icon--grayscale {\n display: inline;\n }\n}\n","@import '../../styles/variables';\n\n.btn.bdl-CloseButton {\n width: $bdl-btn-height;\n height: $bdl-btn-height;\n padding: 0;\n background-color: $bdl-gray-10;\n border: none;\n border-radius: $bdl-border-radius-size-med;\n}\n","$bdl-btn-border-width: 1px;\n$bdl-btn-height: 32px;\n$bdl-btn-height-large: 40px;\n$bdl-btn-icon-size: 20px;\n$bdl-btn-text-icon-size: 16px;\n$bdl-btn-padding-horizontal: $bdl-grid-unit * 4;\n$bdl-btn-primary-box-shadow: inset 0 0 0 1px fade-out($white, .2), 0 1px 2px fade-out($black, .9);\n","@import '../../styles/variables';\n\n.bdl-MenuHeader {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n max-width: 100%;\n}\n\n.bdl-MenuHeader-content {\n display: flex;\n flex: 1;\n padding-right: 5px;\n}\n\n.bdl-MenuHeader-title-container {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.bdl-MenuHeader-title {\n @include bdl-lineClamp;\n\n margin: 0;\n color: $bdl-gray;\n font-weight: bold;\n font-size: 16px;\n}\n\n.bdl-MenuHeader-subtitle {\n margin: 0;\n color: $bdl-gray-65;\n font-size: 12px;\n}\n","@import '../constants/colors';\n@import '../constants/typography';\n\n@mixin font-family {\n font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}\n\n@mixin font-aliasing {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n@mixin fonts {\n @include font-family;\n @include font-aliasing;\n\n font-weight: normal;\n font-size: $bdl-fontSize;\n}\n\n@mixin bdl-fonts-dejaBlue {\n @include font-family;\n @include font-aliasing;\n\n font-weight: normal;\n font-size: $bdl-fontSize--dejaBlue;\n}\n\n@mixin common-typography {\n @include fonts;\n\n color: $bdl-gray;\n line-height: $bdl-line-height;\n letter-spacing: .3px;\n}\n\n@mixin bdl-commonTypography-dejaBlue {\n @include bdl-fonts-dejaBlue;\n\n color: $bdl-gray;\n line-height: $bdl-line-height;\n letter-spacing: .3px;\n}\n\n@mixin bdl-targetIE11 {\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n @content;\n }\n}\n\n@mixin bdl-lineClamp($max-lines: 2, $line-height: 1.5) {\n display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */\n overflow: hidden;\n line-height: $line-height;\n white-space: normal;\n word-break: normal;\n overflow-wrap: anywhere;\n -webkit-box-orient: vertical; /* stylelint-disable-line property-no-vendor-prefix */\n -webkit-line-clamp: $max-lines;\n\n // On IE11 we truncate to a single line since line-clamp\n // is not supported\n @include bdl-targetIE11 {\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n","@import '../../styles/variables';\n\n.submenu-target {\n $bdl-submenu-offset: $bdl-grid-unit * -3;\n\n position: relative;\n\n .submenu {\n position: absolute;\n top: $bdl-submenu-offset;\n right: auto;\n left: calc(100% - #{$bdl-submenu-offset});\n z-index: $submenu-z-index;\n\n &.is-left-aligned {\n right: 100%;\n left: auto;\n }\n\n &.is-hidden {\n right: auto;\n left: -9999px;\n }\n\n &.is-bottom-aligned {\n top: auto;\n bottom: $bdl-submenu-offset;\n }\n }\n\n .menu-item-arrow {\n position: absolute;\n top: $bdl-grid-unit * 3;\n right: $bdl-grid-unit * 2;\n }\n}\n","@import '../../styles/variables';\n\n.bcs-SidebarNavSign-icon path {\n fill: $bdl-gray;\n}\n","@import '../../styles/variables';\n\n.bdl-SidebarToggleButton {\n margin: 0 3px;\n padding: 4px;\n border-radius: $bdl-border-radius-size;\n\n path {\n fill: $bdl-gray-50;\n }\n\n &:not(.bdl-is-disabled):hover,\n &:not(.is-disabled):hover {\n background-color: $bdl-gray-05;\n }\n\n &:not(.bdl-is-disabled):focus,\n &:not(.is-disabled):focus {\n border-color: #96a0a6;\n box-shadow: 0 1px 2px rgba(0, 0, 0, .1);\n }\n\n &.bdl-is-collapsed,\n &.bdl-is-collapsed:hover {\n background-color: $bdl-box-blue;\n\n path {\n fill: $white;\n }\n }\n}\n","@import '../common/variables';\n@import './mixins';\n\n.bcs {\n .bcs-SidebarNav {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n border-left: 1px solid $bdl-gray-10;\n }\n\n .bcs-SidebarNav-tabs {\n display: flex;\n flex: 1 1 100%;\n flex-direction: column;\n }\n\n .bcs-SidebarNav-main,\n .bcs-SidebarNav-secondary {\n flex: 0 1 auto;\n }\n\n .bcs-SidebarNav-icon {\n @include bdl-SidebarNavIcon;\n }\n\n .bcs-SidebarNav-overflow {\n display: flex;\n flex: 1 1 1px; // IE11 doesn't support flex-basis of 0\n flex-direction: column;\n overflow: hidden;\n\n &::after,\n &::before {\n display: block;\n flex: 0 0 1px;\n width: 44px;\n height: 1px;\n margin: 8px auto 0;\n background: $bdl-gray-10;\n content: '';\n }\n\n .bdl-AdditionalTab {\n flex-shrink: 0;\n }\n\n .bdl-AdditionalTabs {\n flex: 1 1 100%;\n padding-top: 8px;\n padding-bottom: 8px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n }\n\n .bcs-SidebarNav-footer {\n display: flex;\n flex: 0 0 60px;\n align-items: center;\n justify-content: center;\n\n // Need to add these overriding styles because there is a specificity issue with .btn-plain\n .btn-plain.bdl-SidebarToggleButton {\n height: 24px;\n margin: 0 3px;\n padding: 4px;\n }\n }\n}\n\n@include breakpoint($medium-screen) {\n .bcs {\n .bcs-SidebarNav,\n .bcs-SidebarNav-tabs,\n .bcs-SidebarNav-main {\n display: flex;\n flex-direction: row;\n }\n\n .bcs-SidebarNav-secondary .btn-plain,\n .bdl-AdditionalTab {\n width: $sidebarTabResponsiveSize;\n height: $sidebarTabResponsiveSize;\n margin-right: 12px;\n }\n\n .bcs-SidebarNav-secondary > :last-child,\n .bdl-AdditionalTabs > :last-child {\n margin-right: 0;\n }\n\n .bdl-AdditionalTab:not(.bdl-is-overflow),\n .bdl-AdditionalTabPlaceholder {\n display: none;\n }\n\n .bcs-SidebarNav-overflow {\n &::after,\n &::before {\n display: none;\n }\n\n .bdl-AdditionalTabs {\n padding: 0;\n }\n }\n\n .bcs-SidebarNav-footer {\n .btn-plain.bdl-SidebarToggleButton {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background-color: $bdl-gray-10;\n transform: rotate(90deg);\n }\n\n .btn-plain.bdl-SidebarToggleButton.bdl-is-collapsed {\n background-color: $bdl-box-blue;\n }\n }\n }\n}\n\n@include breakpoint($small-screen) {\n .bcs {\n .bcs-NavButton,\n .bcs-SidebarNav-secondary .btn-plain,\n .bdl-AdditionalTab {\n width: $sidebarTabResponsiveSize - 2; // Reducing by 2px allows all the icons to fit on the smallest supported screen size (320px)\n margin-right: 0;\n }\n }\n}\n","@import '../common/variables';\n\n.bcs-content {\n position: relative;\n width: 341px; // 1px extra to account for the margin left\n margin-left: -1px; // -1px to make nav button hover not have blank space\n border-left: 1px solid $bdl-gray-10;\n\n .bcs-content-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: $sidebarHeaderHeight;\n margin: 0 $sidebarActivityFeedSpacingHorizontal;\n padding: 0;\n border-bottom: 1px solid $bdl-gray-10;\n\n .bcs-title {\n display: flex;\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: 16px;\n }\n }\n\n .bcs-scroll-content-wrapper {\n position: absolute; // Prevents non-sidebar parts from re-painting\n top: $sidebarHeaderHeight; // Same as title above\n right: 0;\n bottom: 0;\n left: 0;\n overflow: auto;\n }\n\n .bcs-scroll-content {\n // Styles can be overriden by each sidebar\n width: 323px; // 17px less than the total width for scroll bar\n }\n}\n\n@include breakpoint($medium-screen) {\n .bcs-content {\n flex-basis: 100%;\n width: auto;\n\n .bcs-scroll-content {\n width: auto;\n }\n }\n}\n","@import '../common/variables';\n\n.bcs-section-content {\n padding: 15px 0 5px;\n}\n\n.bcs-section {\n margin: 0 8px 20px 25px;\n}\n\n.be .btn-plain.bcs-section-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 5px 0 10px;\n color: initial;\n text-align: left;\n border-bottom: 1px solid $bdl-gray-10;\n\n .icon-caret-down {\n @include bdl-transition($bdl-transitionDurationBase, transform);\n }\n\n &:active,\n &:focus {\n text-decoration: none;\n border-bottom-color: $blue;\n\n svg path {\n fill: $bdl-gray;\n }\n }\n}\n\n.be .bcs-section-open .btn-plain.bcs-section-title .icon-caret-down {\n transform: rotateZ(180deg);\n}\n","$bdl-transitionDurationBase: .15s;\n$bdl-timingFunction: cubic-bezier(0, 0, .6, 1);\n","// DEPRECATED VALUES\n// DO NOT USE IN NEW CODE\n\n@import './constants/colors';\n\n// src/styles/_variables.scss\n$box-blue: $bdl-box-blue !default;\n$primary-color: $bdl-box-blue !default;\n$koray-ing: #2a62b9 !default;\n$picton-blue: #3392ec !default;\n$hover-blue-background: #f6fafd !default;\n$hover-blue-border: #d9e3e9 !default;\n$selected-blue-background: #ecf4fc !default;\n$selected-blue-border: #bfd4df !default;\n$bdl-secondary-blue: $bdl-dark-blue !default;\n$bdl-gray-62: #767676 !default;\n$bdl-neutral-01: $bdl-gray !default;\n$bdl-neutral-02: $bdl-gray-62 !default;\n$bdl-neutral-03: $bdl-gray-50 !default;\n$bdl-neutral-04: $bdl-gray-10 !default;\n$bdl-neutral-05: $bdl-gray-05 !default;\n$bdl-neutral-06: $bdl-gray-02 !default;\n$baby-blue: #bed4de !default;\n$blue-purple: #6d83ff !default;\n$hover-blue: #48b6f3 !default;\n$dusty-plum: #9b59b6 !default;\n$sad-sunjin: #72388f !default;\n$pale-mint: #eefbf5 !default;\n$thats-mint: $bdl-green-light !default;\n$shady-acres: #15aa61 !default;\n$wild-rice: #ede097 !default;\n$early-dawn: #fffbe5 !default;\n$lemon-meringue: #ffd522 !default;\n$dehydrated: $bdl-yellorange !default;\n$kumera: #81721b !default;\n$mad-max: #f39c12 !default;\n$ayers-rock: #e06e2b !default;\n$amaranth: $bdl-watermelon-red !default;\n$lavender-blush: #feeff2 !default;\n$carissma: #eb8b9c !default;\n$great-balls-of-fire: #ef4836 !default;\n$king-crimson: #c82341 !default;\n$bfive: #b5b5b5 !default;\n$dtwo: #d2d2d2 !default;\n$efive: #e5e5e5 !default;\n$ffive: #f5f5f5 !default;\n$fnine: #f9f9f9 !default;\n$seesee: #ccc !default;\n$haze: #fcfcfc !default;\n$off-white: $bdl-neutral-04 !default;\n$sf-fog: #bdc3c7 !default;\n$karl-fog: #fbfbfc !default;\n$silver-chalice: #afafaf !default;\n$storms-a-comin: #737f8b !default;\n$blue-steel: #2c3e50 !default;\n$better-black: #494949 !default;\n$downtown-grey: #999ea4 !default;\n$twos: $bdl-gray !default;\n$fours: #444 !default;\n$sevens: #777 !default;\n$eights: #888 !default;\n$nines: #999 !default;\n$eees: #eee !default;\n$tendemob-grey: #64686d !default;\n$sunset-grey: #464a4f !default;\n$seventy-sixers: $bdl-gray-62 !default;\n$approx-mischka-grey: #a3adb9 !default;\n$lightest-charcoal: #c4c4c4;\n$purple-rain: $bdl-purple-rain;\n\n// src/elements/common/_variables.scss SOLID COLORS\n$blue: #0061d5 !default;\n$light-blue: #e4f4ff !default;\n$grey-blue: #bed4de !default;\n$dark-cerulean: #1a5976 !default;\n$white: #fff !default;\n$black: #000 !default;\n$threes: #333 !default;\n$fivef: #f5f5f5 !default;\n$almost-white: #fcfcfc !default;\n$red: #c82341 !default;\n$see-see: #ccc !default;\n$grey: #bdc3c7 !default;\n\n// src/elements/common/_variables.scss TRANSPARENT COLORS\n$transparent-black: rgba($threes, .04) !default;\n$lightest-black: rgba($threes, .1) !default;\n$lighter-black: rgba($threes, .2) !default;\n$darker-black: rgba($threes, .4) !default;\n$lighter-white: rgba($white, .9) !default;\n$lighter-grey-blue: rgba($grey-blue, .4) !default;\n$lighter-light-blue: rgba($light-blue, .4) !default;\n",".be {\n .bcs-sidebar-loading {\n padding-top: 5px;\n }\n}\n","@import '../common/variables';\n\n.be {\n .bcs-loading-error {\n width: $sidebarContentWidth;\n }\n}\n","@use '@box/blueprint-web-assets/tokens/tokens.scss';\n\n@import './variables';\n\n.be-modal {\n .be-modal-btns {\n display: flex;\n justify-content: center;\n padding: 15px 0 0;\n\n .btn {\n @include bdl-Button--large;\n\n margin-left: 8px;\n }\n }\n\n .be-modal-error {\n color: $red;\n }\n}\n\n.be-modal-wrapper-content,\n.be-modal-dialog-content-full-bleed {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: 0;\n padding: 0;\n background-color: $white;\n border: 0 none;\n border-radius: 0;\n outline: none;\n}\n\n.be-modal-wrapper-overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: $darker-black;\n}\n\n.be-modal-rename .be-modal-dialog-content,\n.be-modal-share .be-modal-dialog-content,\n.be-modal-delete .be-modal-dialog-content {\n padding: 0;\n border-radius: tokens.$radius-4;\n}\n\n.be-modal-rename .be-modal-dialog-content {\n input[type='text'] {\n width: 100%;\n }\n}\n\n.be-modal-dialog-content {\n @extend .be-modal-wrapper-content;\n\n position: absolute;\n top: 50%;\n right: auto;\n bottom: auto;\n left: 50%;\n width: 400px;\n margin-right: -50%;\n padding: 25px;\n border-radius: $bdl-border-radius-size;\n transform: translate(-50%, -50%);\n\n .be-is-small & {\n width: 340px;\n }\n}\n\n.be-modal-dialog-overlay {\n @extend .be-modal-wrapper-overlay;\n\n position: absolute;\n}\n","@import '../constants/buttons';\n\n/**\n * Mixin for PlainButton to handle overriding margins for the hover/active states.\n */\n@mixin bdl-Button-margins($margin) {\n margin: $margin;\n\n &:hover,\n &:active {\n margin: $margin;\n }\n}\n\n/**\n * Mixin to create large buttons. Should not often be needed directly,\n * use the size=\"large\" prop on the Button component instead.\n */\n@mixin bdl-Button--large {\n padding: 0 $bdl-btn-padding-horizontal;\n font-size: $bdl-fontSize--dejaBlue;\n line-height: $bdl-btn-height-large - 2 * $bdl-btn-border-width;\n}\n","$bdl-line-height: 20px;\n\n// Font sizes\n$bdl-fontSize: 13px;\n$bdl-fontSize-minimum: 11px;\n$bdl-fontSize--dejaBlue: 14px;\n\n// \"--dejaBlue\" size will become default at some point\n// Migration Steps:\n// 1. New or restyled code should use --dejaBlue variable\n// 2. Find any hardcoded font sizes and change to use variables\n// 3. Once most components are DJB styled, change bdl-fontSize to 14px\n// 4. Fix any issues with components due to change of base variable\n// 5. Replace all references to $bdl-fontSize--dejaBlue with $bdl-fontSize and delete --dejaBlue\n","$background-background: #ffffff !default;\n$surface-surface: #ffffff !default;\n$surface-surface-hover: #f4f4f4 !default;\n$surface-surface-secondary: #fbfbfb !default;\n$surface-surface-tertiary: #e8e8e8 !default;\n$surface-surface-quaternary: #d3d3d3 !default;\n$surface-surface-secondary-hover: #f4f4f4 !default;\n$surface-surface-secondary-focus: #fbfbfb !default;\n$surface-card-surface: #ffffff !default;\n$surface-card-surface-hover: #ffffff !default;\n$surface-card-surface-focus: #f2f7fd !default;\n$surface-card-surface-pressed: #fbfbfb !default;\n$surface-menu-surface: #ffffff !default;\n$surface-menu-surface-hover: #f4f4f4 !default;\n$surface-menu-surface-pressed: #f4f4f4 !default;\n$surface-menu-surface-focus: #f4f4f4 !default;\n$surface-surface-brand: #0061d5 !default;\n$surface-surface-brand-hover: #006ae9 !default;\n$surface-surface-brand-pressed: #004eac !default;\n$surface-surface-brand-secondary: #e5effa !default;\n$surface-surface-brand-busy: #0061d5 !default;\n$surface-surface-brand-disabled: #0061d5 !default;\n$surface-cta-surface-secondary: #ffffff !default;\n$surface-cta-surface-secondary-busy: #ffffff !default;\n$surface-cta-surface-secondary-disabled: #ffffff !default;\n$surface-cta-surface-secondary-hover: #f4f4f4 !default;\n$surface-cta-surface-secondary-focus: #f4f4f4 !default;\n$surface-cta-surface-secondary-pressed: #e8e8e8 !default;\n$surface-cta-surface-secondary-focus-pressed: #e8e8e8 !default;\n$surface-dropdown-surface: #ffffff !default;\n$surface-dropdown-surface-hover: #ffffff !default;\n$surface-dropdown-surface-focus: #ffffff !default;\n$surface-dropdown-surface-error: #ffffff !default;\n$surface-dropdown-surface-error-hover: #ffffff !default;\n$surface-dropdown-surface-error-focus: #ffffff !default;\n$surface-input-surface: #ffffff !default;\n$surface-input-surface-hover: #ffffff !default;\n$surface-input-surface-focus: #ffffff !default;\n$surface-input-surface-error: #ffffff !default;\n$surface-input-surface-error-hover: #ffffff !default;\n$surface-input-surface-error-focus: #ffffff !default;\n$surface-toggle-surface-off-hover: #f4f4f4 !default;\n$surface-toggle-surface-on: #e5effa !default;\n$surface-toggle-surface-on-hover: #ccdff7 !default;\n$surface-message-surface-warning: #fdf0d1 !default;\n$surface-message-surface-warning-secondary: #fef7e8 !default;\n$surface-message-surface-error: #fbd7dd !default;\n$surface-message-surface-error-secondary: #fdebee !default;\n$surface-tooltip-surface: #4e4e4e !default;\n$surface-tooltip-surface-error: #fdebee !default;\n$surface-message-surface-generic: #e8e8e8 !default;\n$surface-message-surface-generic-secondary: #e8e8e8 !default;\n$surface-message-surface-info: #d3e7fe !default;\n$surface-message-surface-info-secondary: #e9f2fe !default;\n$surface-message-surface-success: #d4f3e6 !default;\n$surface-message-surface-success-secondary: #e9f8f2 !default;\n$surface-message-surface-promo-secondary: #ece9f8 !default;\n$surface-pill-surface: #e8e8e8 !default;\n$surface-pill-surface-hover: #e8e8e8 !default;\n$surface-pill-surface-focus: #e8e8e8 !default;\n$surface-filter-surface: #0061d5 !default;\n$surface-filter-surface-hover: #0061d5 !default;\n$surface-filter-surface-focus: #0061d5 !default;\n$surface-filter-surface-selected: #0061d5 !default;\n$surface-filter-surface-selected-focus: #0061d5 !default;\n$surface-status-surface-generic: #a7a7a7 !default;\n$surface-status-surface-success: #26c281 !default;\n$surface-status-surface-error: #ed3757 !default;\n$surface-status-surface-pending: #a7a7a7 !default;\n$surface-status-surface-scheduled: #9f3fed !default;\n$surface-status-surface-uploading: #0061d5 !default;\n$surface-status-surface-inprogress: #f5b31b !default;\n$surface-cta-surface-outline: rgba(0, 0, 0, 0) !default;\n$surface-cta-surface-outline-hover: rgba(0, 0, 0, 0.04) !default;\n$surface-cta-surface-outline-pressed: rgba(0, 0, 0, 0.08) !default;\n$surface-cta-surface-icon: rgba(0, 0, 0, 0) !default;\n$surface-cta-surface-icon-disabled: rgba(0, 0, 0, 0) !default;\n$surface-cta-surface-icon-hover: rgba(0, 0, 0, 0.04) !default;\n$surface-cta-surface-icon-pressed: rgba(0, 0, 0, 0.08) !default;\n$surface-cta-surface-icon-utility: #e8e8e8 !default;\n$surface-cta-surface-icon-utility-hover: #d3d3d3 !default;\n$surface-cta-surface-icon-utility-pressed: #bcbcbc !default;\n$surface-cta-surface-tertiary: #ffffff !default;\n$surface-cta-surface-tertiary-hover: #f4f4f4 !default;\n$surface-cta-surface-tertiary-pressed: #e8e8e8 !default;\n$surface-cta-surface-tertiary-promo: #ece9f8 !default;\n$surface-cta-surface-tertiary-promo-hover: #f6f4fc !default;\n$surface-cta-surface-tertiary-promo-pressed: #dad4f3 !default;\n$surface-cta-surface-tertiary-promo-focus: #f6f4fc !default;\n$surface-cta-surface-tertiary-promo-focus-pressed: #dad4f3 !default;\n$surface-status-surface-yellow: #ffeb7f !default;\n$surface-status-surface-yellow-hover: #ffeb7f !default;\n$surface-status-surface-yellow-focus: #ffeb7f !default;\n$surface-status-surface-orange: #f8c08c !default;\n$surface-status-surface-orange-hover: #f8c08c !default;\n$surface-status-surface-orange-focus: #f8c08c !default;\n$surface-status-surface-red: #f69bab !default;\n$surface-status-surface-red-hover: #f69bab !default;\n$surface-status-surface-red-focus: #f69bab !default;\n$surface-status-surface-purple: #cf9ff6 !default;\n$surface-status-surface-purple-hover: #cf9ff6 !default;\n$surface-status-surface-purple-focus: #cf9ff6 !default;\n$surface-status-surface-light-blue: #91c2fd !default;\n$surface-status-surface-light-blue-hover: #91c2fd !default;\n$surface-status-surface-light-blue-focus: #91c2fd !default;\n$surface-status-surface-dark-blue: #7f9dc1 !default;\n$surface-status-surface-dark-blue-hover: #7f9dc1 !default;\n$surface-status-surface-dark-blue-focus: #7f9dc1 !default;\n$surface-status-surface-green: #92e0c0 !default;\n$surface-status-surface-green-hover: #92e0c0 !default;\n$surface-status-surface-green-focus: #92e0c0 !default;\n$surface-status-surface-boxblue: #0061d5 !default;\n$surface-status-surface-boxblue-hover: #0061d5 !default;\n$surface-status-surface-boxblue-focus: #0061d5 !default;\n$surface-status-surface-gray: #e8e8e8 !default;\n$surface-status-surface-gray-hover: #e8e8e8 !default;\n$surface-status-surface-gray-focus: #e8e8e8 !default;\n$surface-item-surface-hover: #ffffff !default;\n$surface-item-surface-selected: #f2f7fd !default;\n$surface-item-small-surface: #ffffff !default;\n$surface-item-small-surface-hover: #f4f4f4 !default;\n$surface-item-small-surface-selected: #f2f7fd !default;\n$surface-switch-surface: #ffffff !default;\n$surface-switch-surface-hover: #ffffff !default;\n$surface-switch-surface-off: #d3d3d3 !default;\n$surface-switch-surface-off-hover: #bcbcbc !default;\n$surface-switch-surface-on: #0061d5 !default;\n$surface-switch-surface-on-hover: #2079e3 !default;\n$surface-radio-surface: #ffffff !default;\n$surface-radio-surface-hover: #ffffff !default;\n$surface-radio-surface-selected: #0061d5 !default;\n$surface-radio-surface-selected-hover: #2079e3 !default;\n$surface-checkbox-surface: #ffffff !default;\n$surface-checkbox-surface-hover: #ffffff !default;\n$surface-checkbox-surface-selected: #0061d5 !default;\n$surface-checkbox-surface-selected-hover: #2079e3 !default;\n$surface-ghost-surface: #fbfbfb !default;\n$surface-ghost-surface-secondary: #f4f4f4 !default;\n$surface-inputchip-surface: #e8e8e8 !default;\n$surface-inputchip-surface-hover: #e8e8e8 !default;\n$surface-inputchip-surface-error: #fdebee !default;\n$surface-filterchip-surface-multi: rgba(0, 0, 0, 0.04) !default;\n$surface-filterchip-surface-multi-hover: rgba(0, 0, 0, 0.08) !default;\n$surface-filterchip-surface-multi-on: #e5effa !default;\n$surface-filterchip-surface-multi-on-hover: #ccdff7 !default;\n$surface-filterchip-surface-single: rgba(0, 0, 0, 0.04) !default;\n$surface-filterchip-surface-single-hover: rgba(0, 0, 0, 0.08) !default;\n$surface-filterchip-surface-single-on: #0061d5 !default;\n$surface-filterchip-surface-single-on-hover: #0061d5 !default;\n$surface-slidertrack-surface: #6f6f6f !default;\n$surface-sliderthumb-surface: #0061d5 !default;\n$surface-sliderthumb-surface-hover: #2486fc !default;\n$surface-scrollbar-surface: rgba(0, 0, 0, 0.5) !default;\n$surface-search-surface: #f4f4f4 !default;\n$surface-search-global-surface: #f4f4f4 !default;\n$surface-search-surface-hover: #fbfbfb !default;\n$surface-search-surface-focused: #ffffff !default;\n$surface-day-surface: #ffffff !default;\n$surface-day-surface-hover: #f4f4f4 !default;\n$surface-day-surface-selected: #0061d5 !default;\n$surface-day-surface-selected-hover: #003c84 !default;\n$surface-tab-surface-hover: #f4f4f4 !default;\n$surface-tab-surface-pressed: #e8e8e8 !default;\n$surface-accordion-surface: #ffffff !default;\n$surface-accordion-surface-hover: #f4f4f4 !default;\n$surface-badge-image-surface: #26c281 !default;\n$surface-badge-canvas-surface: #f1811a !default;\n$surface-badge-boxnote-surface: #e8e8e8 !default;\n$surface-badge-folderexternal-surface: #6f6f6f !default;\n$surface-badge-foldershared-surface: #2486fc !default;\n$surface-badge-relay-surface: #1d6bca !default;\n$surface-badge-mention-surface: #1d6bca !default;\n$surface-badge-task-surface: #2486fc !default;\n$surface-badge-taskapproval-surface: #1d6bca !default;\n$surface-badge-annotation-surface: #f5b31b !default;\n$surface-badge-completed-surface: #26c281 !default;\n$surface-badge-rejected-surface: #d5324e !default;\n$surface-badge-error-surface: #d5324e !default;\n$surface-badge-external-surface: #909090 !default;\n$surface-badge-admin-surface: #003c84 !default;\n$surface-badge-coadmin-surface: #9f3fed !default;\n$surface-badge-online-surface: #1e9b67 !default;\n$surface-badge-pin-surface: #e8e8e8 !default;\n$surface-badge-collection-surface: #e8e8e8 !default;\n$surface-badge-offline-surface: #26c281 !default;\n$surface-badge-progress-surface: #f5b31b !default;\n$surface-badge-notification-surface: #d5324e !default;\n$surface-badge-pdf-surface: #d0021b !default;\n$surface-badge-docs-surface: #4083f7 !default;\n$surface-badge-sheets-surface: #21a464 !default;\n$surface-badge-pages-surface: #ff9500 !default;\n$surface-badge-keynote-surface: #0a84ff !default;\n$surface-badge-video-surface: #009aed !default;\n$surface-chip-button-surface: rgba(0, 0, 0, 0.04) !default;\n$surface-chip-button-surface-hover: rgba(0, 0, 0, 0.08) !default;\n$surface-page-surface: #ffffff !default;\n$surface-option-grid-surface-hover: rgba(0, 0, 0, 0.04) !default;\n$surface-option-grid-surface-selected: rgba(0, 0, 0, 0.08) !default;\n$surface-dropdown-primary-surface-hover: #f4f4f4 !default;\n$surface-dropdown-primary-surface-pressed: #e8e8e8 !default;\n$surface-dropdown-secondary-surface: #ffffff !default;\n$surface-dropdown-secondary-surface-hover: #f4f4f4 !default;\n$surface-dropdown-secondary-surface-pressed: #e8e8e8 !default;\n$surface-toggle-surface: #ffffff !default;\n$surface-toggle-surface-hover: #f4f4f4 !default;\n$surface-toggle-surface-pressed: #0061d5 !default;\n$surface-toggle-surface-pressed-hover: #3381dd !default;\n$surface-text-highlight-surface: #fff7cc !default;\n$surface-nav-surface-brand: #0061d5 !default;\n$surface-progressbar-surface-brand: #0061d5 !default;\n$surface-illustration-surface-box-neutral: #0061d5 !default;\n$surface-illustration-surface-box: #0061d5 !default;\n$surface-upload-surface-brand-neutral: #0061d5 !default;\n$surface-cta-surface-promo: #4122af !default;\n$surface-cta-surface-promo-hover: #4826c2 !default;\n$surface-cta-surface-promo-pressed: #3a1e9b !default;\n$surface-cta-surface-promo-focus: #4826c2 !default;\n$surface-cta-surface-promo-focus-pressed: #3a1e9b !default;\n$surface-contentbutton-surface-surface-selected: #ffffff !default;\n$surface-contentswitcher-surface: #e8e8e8 !default;\n$surface-toolbar-surface: #222222 !default;\n$surface-toggle-surface-off-pressed: #e8e8e8 !default;\n$surface-toggle-surface-on-pressed: #b2cff2 !default;\n$surface-cta-surface-disabled: #b2cff2 !default;\n$surface-radiotile-surface: #ffffff !default;\n$surface-radiotile-surface-hover: #f4f4f4 !default;\n$surface-radiotile-surface-selected: #f2f7fd !default;\n$surface-toggletext-surface-on: #f2f7fd !default;\n$surface-toggletext-surface-on-hover: #ccdff7 !default;\n$surface-toggletext-surface-on-pressed: #b2cff2 !default;\n$surface-toggletext-surface-on-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;\n$surface-toggletext-surface-on-ai-hover: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%) !default;\n$surface-toggletext-surface-on-ai-pressed: linear-gradient(135deg, #980284 0%, #174f96 100%) !default;\n$surface-toggletext-surface-off-ai: #ffffff !default;\n$surface-toggletext-surface-off-ai-hover: #f4f4f4 !default;\n$surface-toggletext-surface-off-ai-pressed: #e8e8e8 !default;\n$border-cta-border-secondary: #bcbcbc !default;\n$border-cta-border-secondary-pressed: #bcbcbc !default;\n$border-cta-border-secondary-hover: #bcbcbc !default;\n$border-card-border: #e8e8e8 !default;\n$border-card-border-hover: #e8e8e8 !default;\n$border-card-border-focus: #0061d5 !default;\n$border-message-border-generic: #222222 !default;\n$border-message-border-generic-sec