\n///\n////\n\nblockquote {\n border-left: 3px solid map-fetch($color, ui, base);\n padding-left: spacer(1.5);\n}\n","////\n/// Buttons\n/// @example[html] Button colors\n/// \n/// \n/// \n/// \n/// \n/// \n/// \n/// @example[html] Tiny buttons\n/// \n/// \n/// @example[html] Full width buttons\n/// \n/// @example[html] Disabled buttons\n/// \n/// \n////\n@use \"@optimizely/design-tokens/dist/scss/colors\" as axiom-colors;\n\n%#{$namespace}button,\n.#{$namespace}button,\n%oui-button,\n.oui-button {\n display: inline-block;\n vertical-align: middle;\n white-space: nowrap;\n font-family: inherit;\n cursor: pointer;\n margin: 0;\n line-height: map-fetch($button, size, base, line-height);\n border-width: 1px;\n border-style: solid;\n font-size: map-fetch($button, size, base, font-size);\n font-weight: map-fetch($button, size, base, font-weight);\n user-select: none;\n border-radius: map-fetch($button, size, base, border-radius);\n height: map-fetch($button, size, base, height);\n padding: map-fetch($button, size, base, padding);\n transition: color map-fetch($transition-duration, base), background-color map-fetch($transition-duration, base),\n box-shadow map-fetch($transition-duration, base), border-color map-fetch($transition-duration, base);\n\n // Unique styles for the base, button start here.\n background-color: $base-white;\n border-color: $grey-base;\n color: map-fetch($button, type, base, color);\n\n &:visited {\n color: map-fetch($button, type, base, color);\n }\n\n &:hover {\n color: $brand-blue-dark;\n border: 1px solid $brand-blue-base;\n }\n\n &:focus {\n outline: none;\n color: $brand-blue-dark;\n border: 1px solid $brand-blue-dark;\n }\n\n &.is-active,\n &:active {\n background: $base-white;\n border-color: map-fetch($button, type, base, active, border);\n color: $brand-blue-dark;\n box-shadow: map-fetch($button, type, base, active, box-shadow);\n }\n\n &--highlight {\n background-color: map-fetch($button, type, highlight, background);\n border-color: map-fetch($button, type, highlight, border);\n color: map-fetch($color, text, white);\n\n &:hover {\n background: map-fetch($button, type, highlight, hover, background);\n border-color: map-fetch($button, type, highlight, hover, border);\n }\n\n &:focus {\n border: 1px solid map-fetch($button, type, highlight, focus, border);\n }\n\n &:active {\n background: map-fetch($button, type, highlight, active, background);\n border-color: map-fetch($button, type, highlight, active, border);\n box-shadow: map-fetch($button, type, highlight, active, box-shadow);\n }\n\n &:visited,\n &:hover,\n &:active,\n &:focus {\n color: map-fetch($color, text, white);\n }\n }\n\n &--outline {\n background-color: map-fetch($button, type, outline, background);\n border-color: map-fetch($button, type, outline, border);\n color: map-fetch($button, type, outline, color);\n\n &:visited {\n color: map-fetch($button, type, outline, color);\n }\n\n &:focus {\n color: map-fetch($button, type, outline, color);\n border: 1px solid map-fetch($button, type, outline, hover, border);\n }\n\n &:hover {\n background-color: map-fetch($button, type, outline, background);\n border-color: map-fetch($button, type, outline, hover, border);\n color: map-fetch($button, type, outline, hover, color);\n box-shadow: none;\n }\n\n &:active {\n background-color: map-fetch($button, type, outline, background);\n border-color: map-fetch($button, type, outline, active, border);\n color: map-fetch($button, type, outline, active, color);\n box-shadow: none;\n }\n }\n\n &--danger {\n background-color: map-fetch($button, type, danger, background);\n border-color: map-fetch($button, type, danger, border);\n color: map-fetch($color, text, white);\n\n &:hover {\n background: map-fetch($button, type, danger, hover, background);\n border-color: map-fetch($button, type, danger, hover, border);\n }\n\n &:active {\n background: map-fetch($button, type, danger, active, background);\n border-color: map-fetch($button, type, danger, active, border);\n }\n\n &:focus {\n border: 1px solid shade(map-fetch($button, type, danger, background), 30%);\n }\n\n &:visited,\n &:hover,\n &:active,\n &:focus {\n color: map-fetch($color, text, white);\n }\n }\n\n &--danger-outline {\n color: map-fetch($button, type, danger-outline, color);\n border-color: map-fetch($button, type, danger-outline, border);\n background-color: transparent;\n box-shadow: none;\n\n &:focus {\n color: map-fetch($button, type, danger-outline, color);\n border: 1px solid shade(map-fetch($button, type, danger, background), 30%);\n }\n\n &:hover {\n color: map-fetch($button, type, danger-outline, hover, color);\n border-color: map-fetch($button, type, danger-outline, hover, border);\n background-color: transparent;\n box-shadow: none;\n }\n\n &:active {\n border-color: map-fetch($button, type, danger-outline, active, border);\n background-color: transparent;\n color: map-fetch($button, type, danger-outline, active, color);\n box-shadow: none;\n }\n }\n\n &--plain {\n color: map-fetch($button, type, plain, color);\n border-color: transparent;\n background-color: transparent;\n box-shadow: none;\n\n &:hover,\n &:focus {\n color: map-fetch($button, type, plain, hover, color);\n border: 1px solid $brand-blue-base;\n }\n\n &:active,\n &:active {\n color: axiom-colors.$button-plain-pressed-label-color;\n border-color: axiom-colors.$button-plain-pressed-border-color;\n background-color: axiom-colors.$button-plain-pressed-background-color;\n }\n &.is-active:hover,\n &.is-active:focus {\n color: map-fetch($button, type, base, active, color);\n }\n }\n\n &--underline {\n border-radius: 0 !important;\n border-color: transparent;\n background-color: transparent;\n box-shadow: none;\n border-bottom: 2px solid map-fetch($button, type, underline, border);\n color: map-fetch($button, type, base, color);\n padding-left: spacer(0.5);\n padding-right: spacer(0.5);\n\n &:visited,\n &:hover,\n &:active,\n &:focus {\n border-color: transparent;\n background-color: transparent;\n box-shadow: none;\n }\n\n &:hover {\n border-bottom-width: 2px;\n border-bottom-color: map-fetch($button, type, underline, hover, border);\n color: map-fetch($button, type, underline, color);\n & .oui-arrow-inline--down {\n color: map-fetch($button, type, underline, hover, arrow-color);\n }\n }\n\n &:focus {\n border-bottom-width: 2px;\n border-bottom-color: map-fetch($button, type, underline, focus, border);\n & .oui-arrow-inline--down {\n color: map-fetch($button, type, underline, focus, border);\n }\n }\n\n &:active {\n border-bottom-width: 2px;\n border-bottom-color: map-fetch($button, type, underline, active, border);\n color: map-fetch($button, type, underline, active, color);\n & .oui-arrow-inline--down {\n color: map-fetch($button, type, underline, active, arrow-color);\n }\n }\n }\n\n &--toggle {\n background-color: transparent;\n border-color: transparent;\n\n &:hover,\n &:focus {\n color: axiom-colors.$button-toggle-hover-icon-color;\n border-color: axiom-colors.$button-toggle-hover-border-color;\n }\n\n &:active,\n &.is-active {\n color: axiom-colors.$button-toggle-pressed-icon-color;\n background: axiom-colors.$button-toggle-pressed-background-color;\n border-color: axiom-colors.$button-toggle-pressed-border-color;\n box-shadow: inset 0px 0px 3px 1px axiom-colors.$button-toggle-pressed-shadow-color;\n }\n\n &:active:hover,\n &:active:focus,\n &.is-active:hover,\n &.is-active:focus {\n color: axiom-colors.$button-toggle-pressed-hover-icon-color;\n background: axiom-colors.$button-toggle-pressed-hover-background-color;\n border-color: axiom-colors.$button-toggle-pressed-hover-border-color;\n box-shadow: inset 0px 0px 3px 1px axiom-colors.$button-toggle-pressed-hover-shadow-color;\n }\n }\n\n // Button Sizes\n\n &--tiny {\n font-size: map-fetch($button, size, tiny, font-size);\n font-weight: map-fetch($button, size, tiny, font-weight);\n border-radius: map-fetch($button, size, tiny, border-radius);\n line-height: map-fetch($button, size, tiny, line-height);\n height: map-fetch($button, size, tiny, height);\n padding: map-fetch($button, size, tiny, padding);\n }\n\n &--small {\n font-size: map-fetch($button, size, small, font-size);\n font-weight: map-fetch($button, size, small, font-weight);\n border-radius: map-fetch($button, size, small, border-radius);\n line-height: map-fetch($button, size, small, line-height);\n height: map-fetch($button, size, small, height);\n padding: map-fetch($button, size, small, padding);\n }\n\n &--large {\n font-size: map-fetch($button, size, large, font-size);\n font-weight: map-fetch($button, size, large, font-weight);\n border-radius: map-fetch($button, size, large, border-radius);\n line-height: map-fetch($button, size, large, line-height);\n height: map-fetch($button, size, large, height);\n padding: map-fetch($button, size, large, padding);\n }\n\n &--narrow {\n padding-left: spacer(1);\n padding-right: spacer(1);\n }\n\n &--tight {\n padding-left: spacer(0.5);\n padding-right: spacer(0.5);\n }\n\n &--full {\n width: 100%;\n text-align: center;\n }\n\n // With Icon\n // Some extra help is needed to get the icon and text to line up.\n\n &--icon {\n line-height: 1.4;\n\n .#{$namespace}icon {\n vertical-align: sub;\n }\n }\n\n &--unstyled {\n // scss-lint:disable ImportantRule\n background: inherit !important;\n border: none !important;\n border-radius: inherit !important;\n box-shadow: inherit !important;\n color: inherit !important;\n font-size: inherit !important;\n font-weight: inherit !important;\n height: inherit !important;\n line-height: 1 !important;\n margin: 0 !important;\n padding: 0 !important;\n text-shadow: inherit !important;\n transition: none;\n\n &:hover,\n &:focus {\n color: map-fetch($color, link, hover) !important;\n }\n\n &:focus {\n border: 1px solid var(--light-blue-25) !important;\n box-shadow: 0px 0px 3px $brand-blue-dark !important;\n }\n }\n\n // Disabled State\n // Used either an attribute or a class, depending on the use case.\n\n &[disabled],\n &--disabled,\n &--disabled:visited,\n &--disabled:hover,\n &--disabled:active,\n &--disabled:focus {\n cursor: default;\n box-shadow: none;\n background-color: map-fetch($button, type, disabled, background);\n border-color: map-fetch($button, type, disabled, border);\n color: map-fetch($button, type, disabled, color);\n box-shadow: none;\n\n &.#{$namespace}button--plain,\n &.#{$namespace}button--toggle,\n &.oui-button--plain,\n &.oui-button--toggle {\n background-color: transparent;\n border-color: transparent;\n }\n\n &.#{$namespace}button--outline-reverse,\n &.oui-button--outline-reverse {\n background-color: transparent;\n }\n\n &.oui-button--underline {\n background-color: transparent;\n border-color: transparent;\n border-bottom: 2px solid map-fetch($button, type, disabled, border);\n }\n }\n\n &--loading {\n .oui-spinner {\n margin-bottom: spacer(-0.5);\n margin-right: spacer(0.5);\n }\n }\n}\n","// Do not edit directly\n// Generated on Thu, 16 Sep 2021 06:14:20 GMT\n\n$neutral-colors-black: hsla(0, 0%, 0%, 1);\n$neutral-colors-white: hsla(0, 0%, 100%, 1);\n$blue-dark: hsla(207, 77%, 38%, 1);\n$blue-base: hsla(207, 90%, 54%, 1);\n$blue-light: hsla(207, 89%, 82%, 1);\n$blue-extra-light: hsla(209, 91%, 95%, 1);\n$aqua-blue-dark: hsla(187, 100%, 27%, 1);\n$aqua-blue-base: hsla(187, 100%, 42%, 1);\n$aqua-blue-light: hsla(187, 73%, 77%, 1);\n$aqua-blue-extra-light: hsla(189, 72%, 94%, 1);\n$green-dark: hsla(122, 39%, 34%, 1);\n$green-base: hsla(122, 39%, 49%, 1);\n$green-light: hsla(123, 38%, 80%, 1);\n$green-extra-light: hsla(120, 38%, 95%, 1);\n$yellow-dark: hsla(45, 96%, 43%, 1);\n$yellow-base: hsla(45, 100%, 51%, 1);\n$yellow-light: hsla(45, 100%, 80%, 1);\n$yellow-extra-light: hsla(46, 100%, 95%, 1);\n$orange-dark: hsla(36, 100%, 32%, 1);\n$orange-base: hsla(36, 100%, 50%, 1);\n$orange-light: hsla(36, 100%, 80%, 1);\n$orange-extra-light: hsla(36, 100%, 95%, 1);\n$red-dark: hsla(0, 67%, 45%, 1);\n$red-base: hsla(0, 89%, 57%, 1);\n$red-light: hsla(0, 89%, 83%, 1);\n$red-extra-light: hsla(0, 91%, 96%, 1);\n$pink-dark: hsla(341, 55%, 48%, 1);\n$pink-base: hsla(340, 82%, 52%, 1);\n$pink-light: hsla(341, 87%, 85%, 1);\n$pink-extra-light: hsla(340, 86%, 95%, 1);\n$magenta-dark: hsla(311, 94%, 26%, 1);\n$magenta-base: hsla(311, 95%, 37%, 1);\n$magenta-light: hsla(311, 56%, 75%, 1);\n$magenta-extra-light: hsla(310, 56%, 94%, 1);\n$purple-dark: hsla(263, 51%, 33%, 1);\n$purple-base: hsla(263, 52%, 47%, 1);\n$purple-light: hsla(263, 46%, 79%, 1);\n$purple-extra-light: hsla(263, 48%, 95%, 1);\n$grey-dark: hsla(0, 0%, 44%, 1);\n$grey-base: hsla(0, 0%, 62%, 1);\n$grey-light: hsla(0, 0%, 85%, 1);\n$grey-extra-light: hsla(0, 0%, 96%, 1);\n$smoke-dark: hsla(0, 0%, 84%, 1);\n$smoke-base: hsla(0, 0%, 93%, 1);\n$smoke-light: hsla(0, 0%, 96%, 1);\n$smoke-extra-light: hsla(0, 0%, 98%, 1);\n$brand-purple-dark: hsla(241, 77%, 12%, 1);\n$brand-purple-base: hsla(240, 11%, 65%, 1);\n$brand-purple-light: hsla(246, 11%, 82%, 1);\n$brand-purple-extra-light: hsla(240, 9%, 96%, 1);\n$brand-blue-dark: hsla(227, 100%, 50%, 1);\n$brand-blue-base: hsla(227, 100%, 85%, 1);\n$brand-blue-light: hsla(227, 100%, 95%, 1);\n$brand-blue-extra-light: hsla(226, 100%, 97%, 1);\n$tooltip-text-color: #c4c4c4;\n$tooltip-background-color: #c4c4c4;\n$tile-selected-icon-action-color: #0037ff;\n$tile-selected-icon-alert-color: #080736;\n$tile-selected-icon-grab-color: #c4c4c4;\n$tile-selected-text-label-color: #c4c4c4;\n$tile-selected-text-description-color: #c4c4c4;\n$tile-selected-text-title-color: #080736;\n$tile-selected-border-color: #0037ff;\n$tile-selected-background-color: #c4c4c4;\n$tile-hover-icon-action-color: #0037ff;\n$tile-hover-icon-alert-color: #080736;\n$tile-hover-icon-grab-color: #c4c4c4;\n$tile-hover-text-label-color: #c4c4c4;\n$tile-hover-text-description-color: #c4c4c4;\n$tile-hover-text-title-color: #080736;\n$tile-hover-border-color: #0037ff;\n$tile-hover-background-color: #c4c4c4;\n$tile-active-icon-action-color: #0037ff;\n$tile-active-icon-alert-color: #080736;\n$tile-active-icon-grab-color: #c4c4c4;\n$tile-active-text-label-color: #c4c4c4;\n$tile-active-text-description-color: #c4c4c4;\n$tile-active-text-title-color: #080736;\n$tile-active-border-color: #c4c4c4;\n$tile-active-background-color: #c4c4c4;\n$tabs-selected-text-color: #080736;\n$tabs-selected-border-color: #c4c4c4;\n$tabs-hover-text-color: #0037ff;\n$tabs-disabled-text-color: #c4c4c4;\n$tabs-active-text-color: #080736;\n$tabs-border-color: #0037ff;\n$tabs-background-color: #c4c4c4;\n$table-disclose-row-selected-background-color: #c4c4c4;\n$table-disclose-row-hover-background-color: #c4c4c4;\n$table-disclose-row-link-color: #0037ff;\n$table-disclose-row-text-color: #080736;\n$table-disclose-header-border-color: #c4c4c4;\n$table-disclose-header-text-color: #080736;\n$table-disclose-border-color: #c4c4c4;\n$table-disclose-icon-color: #080736;\n$table-disclose-background-color: #c4c4c4;\n$table-row-selected-background-color: #c4c4c4;\n$table-row-hover-background-color: #c4c4c4;\n$table-row-link-color: #0037ff;\n$table-row-text-color: #080736;\n$table-header-hover-icon-color: #c4c4c4;\n$table-header-hover-text-color: #c4c4c4;\n$table-header-focus-icon-color: #c4c4c4;\n$table-header-focus-text-color: #c4c4c4;\n$table-header-icon-color: #c4c4c4;\n$table-header-border-color: #c4c4c4;\n$table-header-text-color: #c4c4c4;\n$table-border-color: #c4c4c4;\n$table-background-color: #c4c4c4;\n$summary-bar-content-neutral-text-color: #080736;\n$summary-bar-content-good-text-color: #c4c4c4;\n$summary-bar-content-bad-text-color: #c4c4c4;\n$summary-bar-content-icon-color: #c4c4c4;\n$summary-bar-content-text-color: #c4c4c4;\n$summary-bar-content-title-color: #c4c4c4;\n$summary-bar-header-label-color: #c4c4c4;\n$summary-bar-header-title-color: #080736;\n$summary-bar-border-color: #c4c4c4;\n$steps-not-started-icon-border-color: #c4c4c4;\n$steps-not-started-icon-background-color: #c4c4c4;\n$steps-not-started-text-color: #080736;\n$steps-in-progress-icon-border-color: #0037ff;\n$steps-in-progress-icon-background-color: #c4c4c4;\n$steps-in-progress-text-color: #0037ff;\n$steps-complete-icon-border-color: #0037ff;\n$steps-complete-icon-background-color: #0037ff;\n$steps-complete-text-color: #080736;\n$spinner-highlight-color: #0037ff;\n$spinner-border-color: #c4c4c4;\n$sidebar-body-text-color: #080736;\n$sidebar-header-text-color: #080736;\n$sidebar-border-color: #c4c4c4;\n$sidebar-background-color: #c4c4c4;\n$select-disabled-icon-color: #c4c4c4;\n$select-disabled-border-color: #c4c4c4;\n$select-disabled-placeholder-color: #c4c4c4;\n$select-disabled-optional-color: #c4c4c4;\n$select-disabled-required-color: #c4c4c4;\n$select-disabled-label-color: #c4c4c4;\n$select-hover-icon-color: #c4c4c4;\n$select-hover-border-color: #c4c4c4;\n$select-hover-placeholder-color: #c4c4c4;\n$select-hover-optional-color: #c4c4c4;\n$select-hover-required-color: #c4c4c4;\n$select-hover-label-color: #c4c4c4;\n$select-active-icon-color: #080736;\n$select-active-border-color: #c4c4c4;\n$select-active-placeholder-color: #c4c4c4;\n$select-active-optional-color: #c4c4c4;\n$select-active-required-color: #c4c4c4;\n$select-active-label-color: #080736;\n$radio-button-unchecked-focus-description-color: #080736;\n$radio-button-unchecked-focus-label-color: #080736;\n$radio-button-unchecked-focus-icon-color: #c4c4c4;\n$radio-button-unchecked-focus-background-color: #c4c4c4;\n$radio-button-unchecked-hover-description-color: #080736;\n$radio-button-unchecked-hover-label-color: #080736;\n$radio-button-unchecked-hover-icon-color: #c4c4c4;\n$radio-button-unchecked-hover-background-color: #c4c4c4;\n$radio-button-unchecked-disabled-description-color: #c4c4c4;\n$radio-button-unchecked-disabled-label-color: #c4c4c4;\n$radio-button-unchecked-disabled-icon-color: #c4c4c4;\n$radio-button-unchecked-disabled-background-color: #c4c4c4;\n$radio-button-unchecked-active-description-color: #080736;\n$radio-button-unchecked-active-label-color: #080736;\n$radio-button-unchecked-active-icon-color: #c4c4c4;\n$radio-button-unchecked-active-background-color: #c4c4c4;\n$radio-button-checked-focus-description-color: #080736;\n$radio-button-checked-focus-label-color: #080736;\n$radio-button-checked-focus-icon-color: #0037ff;\n$radio-button-checked-focus-background-color: #c4c4c4;\n$radio-button-checked-hover-description-color: #080736;\n$radio-button-checked-hover-label-color: #080736;\n$radio-button-checked-hover-icon-color: #c4c4c4;\n$radio-button-checked-hover-background-color: #c4c4c4;\n$radio-button-checked-disabled-description-color: #c4c4c4;\n$radio-button-checked-disabled-label-color: #c4c4c4;\n$radio-button-checked-disabled-icon-color: #c4c4c4;\n$radio-button-checked-disabled-background-color: #c4c4c4;\n$radio-button-checked-active-description-color: #080736;\n$radio-button-checked-active-label-color: #080736;\n$radio-button-checked-active-icon-color: #0037ff;\n$radio-button-checked-active-background-color: #c4c4c4;\n$progress-dots-light-color: #c4c4c4;\n$progress-dots-medium-color: #c4c4c4;\n$progress-dots-dark-color: #0037ff;\n$progress-bar-fill-color: #0037ff;\n$progress-bar-background-color: #c4c4c4;\n$popover-text-color: #080736;\n$popover-title-color: #080736;\n$popover-border-color: #c4c4c4;\n$popover-background-color: #c4c4c4;\n$pill-error-dismissible-icon-color: #c4c4c4;\n$pill-error-draggable-icon-color: #c4c4c4;\n$pill-error-label-color: #c4c4c4;\n$pill-error-background-color: #c4c4c4;\n$pill-tertiary-dismissible-icon-color: #c4c4c4;\n$pill-tertiary-draggable-icon-color: #c4c4c4;\n$pill-tertiary-label-color: #c4c4c4;\n$pill-tertiary-background-color: #c4c4c4;\n$pill-secondary-dismissible-icon-color: #c4c4c4;\n$pill-secondary-draggable-icon-color: #c4c4c4;\n$pill-secondary-label-color: #c4c4c4;\n$pill-secondary-background-color: #c4c4c4;\n$pill-primary-dismissible-icon-color: #c4c4c4;\n$pill-primary-draggable-icon-color: #c4c4c4;\n$pill-primary-label-color: #c4c4c4;\n$pill-primary-background-color: #c4c4c4;\n$pill-well-border-color: #c4c4c4;\n$pill-well-background-color: #c4c4c4;\n$pagination-label-color: #c4c4c4;\n$pagination-link-disabled-color: #c4c4c4;\n$pagination-link-selected-color: #080736;\n$pagination-link-focus-color: #0037ff;\n$pagination-link-hover-color: #c4c4c4;\n$pagination-link-color: #0037ff;\n$nav-bar-copy-right-text-color: #c4c4c4;\n$nav-bar-account-focus-text-color: #080736;\n$nav-bar-account-hover-text-color: #0037ff;\n$nav-bar-account-avatar-background-color: #c4c4c4;\n$nav-bar-account-avatar-border-color: #c4c4c4;\n$nav-bar-account-text-color: #080736;\n$nav-bar-item-name-focus-background-color: #c4c4c4;\n$nav-bar-item-name-focus-icon-color: #080736;\n$nav-bar-item-name-focus-text-color: #080736;\n$nav-bar-item-name-hover-background-color: #c4c4c4;\n$nav-bar-item-name-hover-icon-color: #0037ff;\n$nav-bar-item-name-hover-text-color: #0037ff;\n$nav-bar-item-name-icon-color: #080736;\n$nav-bar-item-name-text-color: #080736;\n$nav-bar-project-name-color: #c4c4c4;\n$nav-bar-divider-color: #c4c4c4;\n$nav-bar-border-color: #c4c4c4;\n$nav-bar-background-color: #c4c4c4;\n$link-reverse-focus-icon-color: #c4c4c4;\n$link-reverse-focus-label-color: #c4c4c4;\n$link-reverse-hover-icon-color: #c4c4c4;\n$link-reverse-hover-label-color: #c4c4c4;\n$link-reverse-disabled-icon-color: #c4c4c4;\n$link-reverse-disabled-label-color: #c4c4c4;\n$link-reverse-icon-color: #c4c4c4;\n$link-reverse-label-color: #c4c4c4;\n$link-bad-news-focus-icon-color: #080736;\n$link-bad-news-focus-label-color: #080736;\n$link-bad-news-hover-icon-color: #c4c4c4;\n$link-bad-news-hover-label-color: #c4c4c4;\n$link-bad-news-disabled-icon-color: #c4c4c4;\n$link-bad-news-disabled-label-color: #c4c4c4;\n$link-bad-news-icon-color: #080736;\n$link-bad-news-label-color: #080736;\n$link-muted-focus-icon-color: #c4c4c4;\n$link-muted-focus-label-color: #c4c4c4;\n$link-muted-hover-icon-color: #0037ff;\n$link-muted-hover-label-color: #0037ff;\n$link-muted-disabled-icon-color: #c4c4c4;\n$link-muted-disabled-label-color: #c4c4c4;\n$link-muted-icon-color: #c4c4c4;\n$link-muted-label-color: #c4c4c4;\n$link-dark-focused-icon-color: #080736;\n$link-dark-focused-label-color: #080736;\n$link-dark-hover-icon-color: #0037ff;\n$link-dark-hover-label-color: #0037ff;\n$link-dark-disabled-icon-color: #c4c4c4;\n$link-dark-disabled-label-color: #c4c4c4;\n$link-dark-icon-color: #080736;\n$link-dark-label-color: #080736;\n$link-default-focus-icon-color: #0037ff;\n$link-default-focus-text-color: #0037ff;\n$link-default-hover-icon-color: #c4c4c4;\n$link-default-hover-text-color: #c4c4c4;\n$link-default-disabled-icon-color: #c4c4c4;\n$link-default-disabled-text-color: #c4c4c4;\n$link-default-icon-color: #0037ff;\n$link-default-text-color: #0037ff;\n$input-text-area-disabled-note-color: #c4c4c4;\n$input-text-area-disabled-placeholder-color: #c4c4c4;\n$input-text-area-disabled-label-color: #c4c4c4;\n$input-text-area-disabled-border-color: #c4c4c4;\n$input-text-area-disabled-background-color: #c4c4c4;\n$input-text-area-error-focus-note-color: #c4c4c4;\n$input-text-area-error-focus-placeholder-color: #c4c4c4;\n$input-text-area-error-focus-label-color: #c4c4c4;\n$input-text-area-error-focus-border-color: #c4c4c4;\n$input-text-area-error-focus-background-color: #c4c4c4;\n$input-text-area-error-hover-note-color: #c4c4c4;\n$input-text-area-error-hover-placeholder-color: #c4c4c4;\n$input-text-area-error-hover-label-color: #c4c4c4;\n$input-text-area-error-hover-border-color: #c4c4c4;\n$input-text-area-error-hover-background-color: #c4c4c4;\n$input-text-area-error-active-note-color: #c4c4c4;\n$input-text-area-error-active-placeholder-color: #c4c4c4;\n$input-text-area-error-active-label-color: #c4c4c4;\n$input-text-area-error-active-border-color: #c4c4c4;\n$input-text-area-error-active-background-color: #c4c4c4;\n$input-text-area-default-focus-note-color: #080736;\n$input-text-area-default-focus-placeholder-color: #c4c4c4;\n$input-text-area-default-focus-label-color: #080736;\n$input-text-area-default-focus-border-color: #c4c4c4;\n$input-text-area-default-focus-background-color: #c4c4c4;\n$input-text-area-default-hover-note-color: #080736;\n$input-text-area-default-hover-placeholder-color: #c4c4c4;\n$input-text-area-default-hover-label-color: #080736;\n$input-text-area-default-hover-border-color: #c4c4c4;\n$input-text-area-default-hover-background-color: #c4c4c4;\n$input-text-area-default-active-note-color: #080736;\n$input-text-area-default-active-placeholder-color: #c4c4c4;\n$input-text-area-default-active-label-color: #080736;\n$input-text-area-default-active-border-color: #c4c4c4;\n$input-text-area-default-active-background-color: #c4c4c4;\n$input-range-handle-dimple-background-color: #c4c4c4;\n$input-range-handle-background-color: #c4c4c4;\n$input-range-scale-fill-color: #0037ff;\n$input-range-scale-background-color: #c4c4c4;\n$input-range-border-color: #c4c4c4;\n$input-range-label-color: #080736;\n$input-error-focus-note-color: #c4c4c4;\n$input-error-focus-value-color: #c4c4c4;\n$input-error-focus-placeholder-color: #c4c4c4;\n$input-error-focus-label-color: #c4c4c4;\n$input-error-focus-border-color: #c4c4c4;\n$input-error-focus-background-color: #c4c4c4;\n$input-error-hover-note-color: #c4c4c4;\n$input-error-hover-value-color: #c4c4c4;\n$input-error-hover-placeholder-color: #c4c4c4;\n$input-error-hover-label-color: #c4c4c4;\n$input-error-hover-border-color: #c4c4c4;\n$input-error-hover-background-color: #c4c4c4;\n$input-error-disabled-note-color: #c4c4c4;\n$input-error-disabled-value-color: #c4c4c4;\n$input-error-disabled-placeholder-color: #c4c4c4;\n$input-error-disabled-label-color: #c4c4c4;\n$input-error-disabled-border-color: #c4c4c4;\n$input-error-disabled-background-color: #c4c4c4;\n$input-error-active-note-color: #c4c4c4;\n$input-error-active-value-color: #c4c4c4;\n$input-error-active-placeholder-color: #c4c4c4;\n$input-error-active-label-color: #c4c4c4;\n$input-error-active-border-color: #c4c4c4;\n$input-error-active-background-color: #c4c4c4;\n$input-default-focus-note-color: #080736;\n$input-default-focus-value-color: #080736;\n$input-default-focus-placeholder-color: #c4c4c4;\n$input-default-focus-label-color: #080736;\n$input-default-focus-border-color: #c4c4c4;\n$input-default-focus-background-color: #c4c4c4;\n$input-default-hover-note-color: #080736;\n$input-default-hover-value-color: #080736;\n$input-default-hover-placeholder-color: #c4c4c4;\n$input-default-hover-label-color: #080736;\n$input-default-hover-border-color: #c4c4c4;\n$input-default-hover-background-color: #c4c4c4;\n$input-default-disabled-note-color: #c4c4c4;\n$input-default-disabled-value-color: #c4c4c4;\n$input-default-disabled-placeholder-color: #c4c4c4;\n$input-default-disabled-label-color: #c4c4c4;\n$input-default-disabled-border-color: #c4c4c4;\n$input-default-disabled-background-color: #c4c4c4;\n$input-default-active-note-color: #080736;\n$input-default-active-value-color: #080736;\n$input-default-active-placeholder-color: #c4c4c4;\n$input-default-active-label-color: #080736;\n$input-default-active-border-color: #c4c4c4;\n$input-default-active-background-color: #c4c4c4;\n$filter-picker-item-focus-description-color: #c4c4c4;\n$filter-picker-item-focus-text-color: #0037ff;\n$filter-picker-item-focus-icon-color: #0037ff;\n$filter-picker-item-hover-description-color: #c4c4c4;\n$filter-picker-item-hover-text-color: #0037ff;\n$filter-picker-item-hover-icon-color: #0037ff;\n$filter-picker-item-icon-color: #0037ff;\n$dropdown-error-focus-icon-color: #c4c4c4;\n$dropdown-error-focus-note-color: #c4c4c4;\n$dropdown-error-focus-placeholder-color: #c4c4c4;\n$dropdown-error-focus-label-color: #c4c4c4;\n$dropdown-error-focus-border-color: #c4c4c4;\n$dropdown-error-focus-background-color: #c4c4c4;\n$dropdown-error-hover-icon-color: #c4c4c4;\n$dropdown-error-hover-note-color: #c4c4c4;\n$dropdown-error-hover-placeholder-color: #c4c4c4;\n$dropdown-error-hover-label-color: #c4c4c4;\n$dropdown-error-hover-border-color: #c4c4c4;\n$dropdown-error-hover-background-color: #c4c4c4;\n$dropdown-error-active-placeholder-color: #c4c4c4;\n$dropdown-default-focus-border-color: hsla(227, 100%, 50%, 0.7);\n$dropdown-default-hover-border-color: hsla(227, 100%, 50%, 0.7);\n$date-picker-day-range-focus-text-color: #c4c4c4;\n$date-picker-day-range-hover-background-color: #c4c4c4;\n$date-picker-day-range-selected-text-color: #c4c4c4;\n$date-picker-day-focus-text-color: #c4c4c4;\n$date-picker-day-hover-background-color: #c4c4c4;\n$date-picker-day-selected-text-color: #c4c4c4;\n$date-picker-month-title-color: #080736;\n$checkbox-unchecked-focus-border-color: #c4c4c4;\n$checkbox-unchecked-focus-background-color: #c4c4c4;\n$checkbox-unchecked-hover-border-color: #c4c4c4;\n$checkbox-unchecked-hover-background-color: #c4c4c4;\n$checkbox-checked-focus-icon-color: #c4c4c4;\n$checkbox-checked-hover-icon-color: #c4c4c4;\n$checkbox-checked-hover-background-color: #c4c4c4;\n$checkbox-checked-active-icon-color: #ffffff;\n$button-underline-pressed-label-color: #c4c4c4;\n$button-underline-pressed-border-bottom-color: #c4c4c4;\n$button-underline-pressed-background-color: #c4c4c4;\n$button-underline-focus-label-color: #c4c4c4;\n$button-underline-focus-border-bottom-color: #c4c4c4;\n$button-underline-focus-background-color: #c4c4c4;\n$button-underline-hover-label-color: #c4c4c4;\n$button-underline-hover-border-bottom-color: #c4c4c4;\n$button-underline-hover-background-color: #c4c4c4;\n$button-danger-hover-border-color: hsla(0, 89%, 57%, 0.2);\n$button-danger-hover-background-color: hsla(0, 89%, 57%, 0.8);\n$button-highlight-hover-border-color: hsla(227, 100%, 50%, 0.2);\n$button-highlight-hover-background-color: hsla(227, 100%, 50%, 0.8);\n$butterbar-border-color: #c4c4c4;\n$butterbar-background-color: #c4c4c4;\n$avatar-icon-color: #c4c4c4;\n$avatar-border-color: #c4c4c4;\n$avatar-background-color: #c4c4c4;\n$alert-warning-border-color: #c4c4c4;\n$alert-warning-background-color: #c4c4c4;\n$alert-good-border-color: #c4c4c4;\n$alert-good-background-color: #c4c4c4;\n$alert-bad-background-color: #c4c4c4;\n$alert-neutral-border-color: #c4c4c4;\n$alert-neutral-background-color: #c4c4c4;\n$switch-off-disabled-background-color: $grey-light;\n$switch-off-active-icon-color: $neutral-colors-white;\n$switch-off-active-background-color: $grey-dark;\n$switch-on-disabled-background-color: $grey-light;\n$switch-on-active-icon-color: $neutral-colors-white;\n$icon-disabled-color: $grey-base;\n$icon-base-color: $brand-purple-dark;\n$dropdown-default-focus-outline-color: $brand-blue-base;\n$button-toggle-pressed-hover-shadow-color: $brand-blue-base;\n$button-toggle-pressed-hover-background-color: $brand-blue-light;\n$button-toggle-pressed-shadow-color: $brand-blue-base;\n$button-toggle-pressed-border-color: $brand-blue-base;\n$button-toggle-pressed-background-color: $brand-blue-light;\n$button-toggle-focus-border-color: $brand-blue-base;\n$button-toggle-hover-border-color: $brand-blue-base;\n$button-plain-focus-outline-color: $brand-blue-base;\n$button-plain-hover-border-color: $brand-blue-base;\n$button-danger-outline-focus-outline-color: $red-light;\n$button-danger-outline-hover-border-color: $red-light;\n$button-danger-pressed-label-color: $neutral-colors-white;\n$button-danger-focus-outline-color: $red-light;\n$button-danger-focus-label-color: $neutral-colors-white;\n$button-danger-hover-label-color: $neutral-colors-white;\n$button-danger-active-label-color: $neutral-colors-white;\n$button-outline-focus-outline-color: $brand-blue-base;\n$button-outline-hover-border-color: $brand-blue-base;\n$button-highlight-pressed-label-color: $neutral-colors-white;\n$button-highlight-focus-outline-color: $brand-blue-base;\n$button-highlight-focus-label-color: $neutral-colors-white;\n$button-highlight-hover-label-color: $neutral-colors-white;\n$button-highlight-active-label-color: $neutral-colors-white;\n$button-default-focus-outline-color: $brand-blue-base;\n$button-default-hover-border-color: $brand-blue-base;\n$border-disabled-color: $grey-light;\n$border-divider-color: $smoke-dark;\n$border-user-input-color: $grey-base;\n$badge-primary-label-color: $neutral-colors-white;\n$badge-bad-label-color: $neutral-colors-white;\n$badge-bad-background-color: $red-dark;\n$badge-live-label-color: $neutral-colors-white;\n$badge-live-background-color: $green-dark;\n$badge-draft-label-color: $neutral-colors-white;\n$badge-draft-background-color: $orange-base;\n$badge-default-label-color: $neutral-colors-white;\n$badge-default-background-color: $grey-dark;\n$brand-text-disabled-color: $grey-dark;\n$brand-text-secondary-color: $grey-dark;\n$brand-text-primary-color: $brand-purple-dark;\n$brand-background-disabled-color: $smoke-light;\n$brand-background-secondary-color: $smoke-extra-light;\n$brand-background-primary-color: $neutral-colors-white;\n$brand-error-color: $red-base;\n$brand-primary-color: $brand-blue-dark;\n$switch-off-disabled-icon-color: $icon-disabled-color;\n$switch-on-disabled-icon-color: $icon-disabled-color;\n$switch-on-active-background-color: $brand-primary-color;\n$footer-border-color: $border-divider-color;\n$footer-background-color: $brand-background-secondary-color;\n$filter-picker-item-description-text-color: $brand-text-secondary-color;\n$filter-picker-item-text-color: $brand-primary-color;\n$filter-picker-group-header-text-color: $brand-text-secondary-color;\n$filter-picker-search-text-color: $brand-text-secondary-color;\n$filter-picker-search-icon-color: $icon-base-color;\n$filter-picker-background-color: $brand-background-primary-color;\n$filter-picker-border-color: $border-divider-color;\n$empty-state-description-color: $brand-text-secondary-color;\n$empty-state-title-color: $brand-text-primary-color;\n$dropdown-error-disabled-icon-color: $icon-disabled-color;\n$dropdown-error-disabled-note-color: $brand-text-disabled-color;\n$dropdown-error-disabled-placeholder-color: $brand-text-disabled-color;\n$dropdown-error-disabled-label-color: $brand-text-disabled-color;\n$dropdown-error-disabled-border-color: $border-disabled-color;\n$dropdown-error-disabled-background-color: $brand-background-primary-color;\n$dropdown-error-active-icon-color: $brand-error-color;\n$dropdown-error-active-note-color: $brand-error-color;\n$dropdown-error-active-label-color: $brand-error-color;\n$dropdown-error-active-border-color: $brand-error-color;\n$dropdown-error-active-background-color: $brand-background-primary-color;\n$dropdown-default-focus-icon-color: $brand-primary-color;\n$dropdown-default-focus-note-color: $brand-text-primary-color;\n$dropdown-default-focus-placeholder-color: $brand-primary-color;\n$dropdown-default-focus-label-color: $brand-text-primary-color;\n$dropdown-default-focus-background-color: $brand-background-primary-color;\n$dropdown-default-hover-icon-color: $brand-primary-color;\n$dropdown-default-hover-note-color: $brand-text-primary-color;\n$dropdown-default-hover-placeholder-color: $brand-primary-color;\n$dropdown-default-hover-label-color: $brand-text-primary-color;\n$dropdown-default-hover-background-color: $brand-background-primary-color;\n$dropdown-default-disabled-icon-color: $icon-disabled-color;\n$dropdown-default-disabled-note-color: $brand-text-disabled-color;\n$dropdown-default-disabled-placeholder-color: $brand-text-disabled-color;\n$dropdown-default-disabled-label-color: $brand-text-disabled-color;\n$dropdown-default-disabled-border-color: $border-disabled-color;\n$dropdown-default-disabled-background-color: $brand-background-disabled-color;\n$dropdown-default-active-icon-color: $icon-base-color;\n$dropdown-default-active-note-color: $brand-text-primary-color;\n$dropdown-default-active-placeholder-color: $brand-text-primary-color;\n$dropdown-default-active-label-color: $brand-text-primary-color;\n$dropdown-default-active-border-color: $border-user-input-color;\n$dropdown-default-active-background-color: $brand-background-primary-color;\n$disclose-title-focus-color: $brand-text-primary-color;\n$disclose-title-hover-color: $brand-primary-color;\n$disclose-title-color: $brand-text-primary-color;\n$disclose-icon-color: $icon-base-color;\n$dialog-footer-background-color: $brand-background-secondary-color;\n$dialog-footer-divider-color: $border-divider-color;\n$dialog-body-text-color: $brand-text-primary-color;\n$dialog-body-subtitle-color: $brand-text-primary-color;\n$dialog-header-icon-color: $brand-text-primary-color;\n$dialog-header-title-color: $brand-text-primary-color;\n$dialog-background-color: $brand-background-primary-color;\n$date-picker-disabled-text-color: $brand-text-disabled-color;\n$date-picker-day-range-focus-background-color: $brand-primary-color;\n$date-picker-day-range-hover-text-color: $brand-text-primary-color;\n$date-picker-day-range-selected-background-color: $brand-primary-color;\n$date-picker-day-focus-background-color: $brand-primary-color;\n$date-picker-day-hover-text-color: $brand-text-primary-color;\n$date-picker-day-selected-background-color: $brand-primary-color;\n$date-picker-week-title-color: $brand-text-secondary-color;\n$date-picker-text-color: $brand-text-primary-color;\n$date-picker-icon-color: $icon-base-color;\n$date-picker-background-color: $brand-background-primary-color;\n$date-picker-border-color: $border-divider-color;\n$code-number-border-color: $border-divider-color;\n$code-number-background-color: $brand-background-secondary-color;\n$code-number-text-color: $brand-text-secondary-color;\n$code-background-color: $brand-background-primary-color;\n$code-text-color: $brand-text-primary-color;\n$checkbox-unchecked-focus-description-color: $brand-text-primary-color;\n$checkbox-unchecked-focus-label-color: $brand-text-primary-color;\n$checkbox-unchecked-hover-description-color: $brand-text-primary-color;\n$checkbox-unchecked-hover-label-color: $brand-text-primary-color;\n$checkbox-unchecked-disabled-description-color: $brand-text-disabled-color;\n$checkbox-unchecked-disabled-label-color: $brand-text-disabled-color;\n$checkbox-unchecked-disabled-border-color: $border-disabled-color;\n$checkbox-unchecked-disabled-background-color: $brand-background-disabled-color;\n$checkbox-unchecked-active-description-color: $brand-text-primary-color;\n$checkbox-unchecked-active-label-color: $brand-text-primary-color;\n$checkbox-unchecked-active-border-color: $border-user-input-color;\n$checkbox-unchecked-active-background-color: $brand-background-primary-color;\n$checkbox-checked-focus-description-color: $brand-text-primary-color;\n$checkbox-checked-focus-label-color: $brand-text-primary-color;\n$checkbox-checked-focus-background-color: $brand-primary-color;\n$checkbox-checked-hover-description-color: $brand-text-primary-color;\n$checkbox-checked-hover-label-color: $brand-text-primary-color;\n$checkbox-checked-disabled-description-color: $brand-text-disabled-color;\n$checkbox-checked-disabled-label-color: $brand-text-disabled-color;\n$checkbox-checked-disabled-icon-color: $icon-disabled-color;\n$checkbox-checked-disabled-background-color: $brand-background-disabled-color;\n$checkbox-checked-active-description-color: $brand-text-primary-color;\n$checkbox-checked-active-label-color: $brand-text-primary-color;\n$checkbox-checked-active-background-color: $brand-primary-color;\n$card-body-text-color: $brand-text-primary-color;\n$card-header-divider-color: $border-divider-color;\n$card-header-icon-color: $icon-base-color;\n$card-header-title-color: $brand-text-primary-color;\n$card-border-color: $border-divider-color;\n$card-background-color: $brand-background-primary-color;\n$button-toggle-pressed-hover-icon-color: $brand-primary-color;\n$button-toggle-pressed-hover-label-color: $brand-primary-color;\n$button-toggle-pressed-hover-border-color: $brand-primary-color;\n$button-toggle-static-icon-color: $icon-base-color;\n$button-toggle-static-label-color: $brand-text-primary-color;\n$button-toggle-static-border-color: $brand-background-primary-color;\n$button-toggle-static-background-color: $brand-background-primary-color;\n$button-toggle-disabled-icon-color: $brand-text-disabled-color;\n$button-toggle-disabled-label-color: $brand-text-disabled-color;\n$button-toggle-disabled-border-color: $border-disabled-color;\n$button-toggle-disabled-background-color: $brand-background-disabled-color;\n$button-toggle-pressed-icon-color: $brand-primary-color;\n$button-toggle-pressed-label-color: $brand-primary-color;\n$button-toggle-focus-icon-color: $brand-primary-color;\n$button-toggle-focus-label-color: $brand-primary-color;\n$button-toggle-focus-background-color: $brand-background-primary-color;\n$button-toggle-hover-icon-color: $brand-primary-color;\n$button-toggle-hover-label-color: $brand-primary-color;\n$button-toggle-hover-background-color: $brand-background-primary-color;\n$button-underline-disabled-label-color: $brand-text-disabled-color;\n$button-underline-disabled-border-bottom-color: $border-disabled-color;\n$button-underline-disabled-background-color: $brand-background-disabled-color;\n$button-underline-active-label-color: $brand-text-primary-color;\n$button-underline-active-bottom-border-color: $border-user-input-color;\n$button-underline-active-background-color: $brand-background-primary-color;\n$button-plain-disabled-label-color: $brand-text-disabled-color;\n$button-plain-disabled-border-color: $border-disabled-color;\n$button-plain-disabled-background-color: $brand-background-disabled-color;\n$button-plain-pressed-label-color: $brand-primary-color;\n$button-plain-pressed-border-color: $brand-primary-color;\n$button-plain-pressed-background-color: $brand-background-primary-color;\n$button-plain-focus-label-color: $brand-primary-color;\n$button-plain-focus-border-color: $brand-primary-color;\n$button-plain-hover-label-color: $brand-primary-color;\n$button-plain-active-label-color: $brand-text-primary-color;\n$button-danger-outline-disabled-label-color: $brand-text-disabled-color;\n$button-danger-outline-disabled-border-color: $border-disabled-color;\n$button-danger-outline-disabled-background-color: $brand-background-disabled-color;\n$button-danger-outline-pressed-label-color: $brand-error-color;\n$button-danger-outline-pressed-border-color: $brand-error-color;\n$button-danger-outline-pressed-background-color: $brand-background-primary-color;\n$button-danger-outline-focus-label-color: $brand-error-color;\n$button-danger-outline-focus-border-color: $brand-error-color;\n$button-danger-outline-focus-background-color: $brand-background-primary-color;\n$button-danger-outline-hover-label-color: $brand-error-color;\n$button-danger-outline-hover-background-color: $brand-background-primary-color;\n$button-danger-outline-active-label-color: $brand-error-color;\n$button-danger-outline-active-border-color: $brand-error-color;\n$button-danger-outline-active-background-color: $brand-background-primary-color;\n$button-danger-disabled-label-color: $brand-text-disabled-color;\n$button-danger-disabled-border-color: $border-disabled-color;\n$button-danger-disabled-background-color: $brand-background-disabled-color;\n$button-danger-pressed-border-color: $brand-error-color;\n$button-danger-pressed-background-color: $brand-error-color;\n$button-danger-focus-border-color: $brand-error-color;\n$button-danger-focus-background-color: $brand-error-color;\n$button-danger-active-border-color: $brand-error-color;\n$button-danger-active-background-color: $brand-error-color;\n$button-outline-disabled-label-color: $brand-text-disabled-color;\n$button-outline-disabled-border-color: $border-disabled-color;\n$button-outline-disabled-background-color: $brand-background-disabled-color;\n$button-outline-pressed-label-color: $brand-primary-color;\n$button-outline-pressed-border-color: $brand-primary-color;\n$button-outline-pressed-background-color: $brand-background-primary-color;\n$button-outline-focus-label-color: $brand-primary-color;\n$button-outline-focus-border-color: $brand-primary-color;\n$button-outline-focus-background-color: $brand-background-primary-color;\n$button-outline-hover-label-color: $brand-primary-color;\n$button-outline-hover-background-color: $brand-background-primary-color;\n$button-outline-active-label-color: $brand-primary-color;\n$button-outline-active-border-color: $brand-primary-color;\n$button-outline-active-background-color: $brand-background-primary-color;\n$button-highlight-disabled-label-color: $brand-text-disabled-color;\n$button-highlight-disabled-border-color: $border-disabled-color;\n$button-highlight-disabled-background-color: $brand-background-disabled-color;\n$button-highlight-pressed-border-color: $brand-primary-color;\n$button-highlight-pressed-background-color: $brand-primary-color;\n$button-highlight-focus-border-color: $brand-primary-color;\n$button-highlight-focus-background-color: $brand-primary-color;\n$button-highlight-active-border-color: $brand-primary-color;\n$button-highlight-active-background-color: $brand-primary-color;\n$button-default-disabled-label-color: $brand-text-disabled-color;\n$button-default-disabled-border-color: $border-disabled-color;\n$button-default-disabled-background-color: $brand-background-disabled-color;\n$button-default-pressed-label-color: $brand-text-primary-color;\n$button-default-pressed-border-color: $border-user-input-color;\n$button-default-pressed-background-color: $brand-background-primary-color;\n$button-default-focus-label-color: $brand-primary-color;\n$button-default-focus-border-color: $brand-primary-color;\n$button-default-focus-background-color: $brand-background-primary-color;\n$button-default-hover-label-color: $brand-primary-color;\n$button-default-hover-background-color: $brand-background-primary-color;\n$button-default-active-label-color: $brand-text-primary-color;\n$button-default-active-border-color: $border-user-input-color;\n$button-default-active-background-color: $brand-background-primary-color;\n$butterbar-text-color: $brand-text-primary-color;\n$block-list-text-description-color: $brand-text-secondary-color;\n$block-list-text-item-color: $brand-text-primary-color;\n$block-list-text-header-link-color: $brand-primary-color;\n$block-list-text-header-color: $brand-text-secondary-color;\n$block-list-background-color: $brand-background-primary-color;\n$block-list-divider-color: $border-divider-color;\n$block-list-border-color: $border-user-input-color;\n$badge-primary-background-color: $brand-primary-color;\n$badge-plain-label-color: $brand-text-secondary-color;\n$alert-warning-text-color: $brand-text-primary-color;\n$alert-good-text-color: $brand-text-primary-color;\n$alert-bad-text-color: $brand-text-primary-color;\n$alert-bad-border-color: $brand-error-color;\n$alert-neutral-text-color: $brand-text-primary-color;\n","// These tokens have been deprecated. Use @optimizely/design-tokens instead.\n$brand-blue-x-light: hsla(226, 100%, 97%, 1);\n$brand-blue-light: hsla(227, 100%, 95%, 1);\n$brand-blue-base: hsla(227, 100%, 85%, 1);\n$brand-blue-dark: hsla(227, 100%, 50%, 1);\n$brand-purple-x-light: hsla(240, 9%, 96%, 1);\n$brand-purple-light: hsla(246, 11%, 82%, 1);\n$brand-purple-base: hsla(240, 11%, 65%, 1);\n$brand-purple-dark: hsla(241, 77%, 12%, 1);\n$smoke-x-light: hsla(0, 0%, 98%, 1);\n$smoke-light: hsla(0, 0%, 96%, 1);\n$smoke-base: hsla(0, 0%, 93%, 1);\n$smoke-dark: hsla(0, 0%, 84%, 1);\n$grey-x-light: hsla(0, 0%, 96%, 1);\n$grey-light: hsla(0, 0%, 85%, 1);\n$grey-base: hsla(0, 0%, 62%, 1);\n$grey-dark: hsla(0, 0%, 44%, 1);\n$purple-x-light: hsla(263, 48%, 95%, 1);\n$purple-light: hsla(263, 46%, 79%, 1);\n$purple-base: hsla(263, 52%, 47%, 1);\n$purple-dark: hsla(263, 51%, 33%, 1);\n$magenta-x-light: hsla(310, 56%, 94%, 1);\n$magenta-light: hsla(311, 56%, 75%, 1);\n$magenta-base: hsla(311, 95%, 37%, 1);\n$magenta-dark: hsla(311, 94%, 26%, 1);\n$pink-x-light: hsla(340, 86%, 95%, 1);\n$pink-light: hsla(341, 87%, 85%, 1);\n$pink-base: hsla(340, 82%, 52%, 1);\n$pink-dark: hsla(341, 55%, 48%, 1);\n$red-x-light: hsla(0, 91%, 96%, 1);\n$red-light: hsla(0, 89%, 83%, 1);\n$red-base: hsla(0, 89%, 57%, 1);\n$red-dark: hsla(0, 67%, 45%, 1);\n$orange-x-light: hsla(36, 100%, 95%, 1);\n$orange-light: hsla(36, 100%, 80%, 1);\n$orange-base: hsla(36, 100%, 50%, 1);\n$orange-dark: hsla(36, 100%, 32%, 1);\n$yellow-x-light: hsla(46, 100%, 95%, 1);\n$yellow-light: hsla(45, 100%, 80%, 1);\n$yellow-base: hsla(45, 100%, 51%, 1);\n$yellow-dark: hsla(45, 96%, 43%, 1);\n$green-x-light: hsla(120, 38%, 95%, 1);\n$green-light: hsla(123, 38%, 80%, 1);\n$green-base: hsla(122, 39%, 49%, 1);\n$green-dark: hsla(122, 39%, 34%, 1);\n$aqua-x-light: hsla(189, 72%, 94%, 1);\n$aqua-light: hsla(187, 73%, 77%, 1);\n$aqua-base: hsla(187, 100%, 42%, 1);\n$aqua-dark: hsla(187, 100%, 27%, 1);\n$blue-x-light: hsla(209, 91%, 95%, 1);\n$blue-light: hsla(207, 89%, 82%, 1);\n$blue-base: hsla(207, 90%, 54%, 1);\n$blue-dark: hsla(207, 77%, 38%, 1);\n$white: hsla(0, 0%, 100%, 1);\n$black: hsla(0, 0%, 0%, 1);\n$icon-small: 12px;\n$icon-large: 16px;\n$nubbin-size: 24px;\n","////\n/// Code\n/// @description Monospace code snippets, both inline and multiline.\n/// @example[html] Inline code\n/// Text can haveLorem ipsum dolor sit amet, consectetur adipiscing elit.
\n///
code snippets in a sentence.\n/// @example[html] Multiline code\n/// <!DOCTYPE html>\n/// <html>\n/// <body>\n///\n/// <h1>My First Heading</h1>\n///\n/// <p>My first paragraph.</p>\n///\n/// </body>\n/// </html>| one | \n///two | \n///three | \n///
|---|---|---|
| one | \n///two | \n///three | \n///
This Text is Editable
\n\n.editable {\n &:hover {\n color: map-fetch($color, text, muted);\n\n &::after {\n display: inline-block;\n color: map-fetch($color, text, muted);\n content: \"\\270E\";\n font-size: 1em;\n padding-right: spacer(0.5);\n transform: scaleX(-1);\n }\n }\n}\n\n/// Monospace font\n/// @description Useful for code examples.\n\n.monospace {\n font-family: map-fetch($font, family, monospace);\n}\n\n/// Pseudo Content\n/// @description Content that is applied as a pseudo-element and defined as an\n/// attribute on an empty element. This is useful for preventing an element's\n/// text from being copied to the clipboard.\n/// @example[html] Try to highlight and copy the plus sign\n/// Some text\n\n[data-lego-pseudo-content]::before {\n content: attr(data-lego-pseudo-content);\n}\n\n/// Number font\n// @description Used on results page and for certain types of tabular data.\n.oui-numerical,\n.number-display {\n font-family: map-fetch($font, family, number);\n font-feature-settings: \"tnum\"; // Enables monospaced numbers for Inter\n}\n","////\n/// Array\n/// @description Create a row of any number of items at equal height and width.\n/// @example[html] Background classes are added to show the equal dimensions.\n///Dimensions can be used to track extra data about visitors. You can use dimensions to filter your results or de fine new audiences for targeting. Learn more.
\n///Dimensions can be used to track extra data about visitors. You can use dimensions to filter your results or de fine new audiences for targeting. Learn more.
\n///Dimensions can be used to track extra data about visitors. You can use dimensions to filter your results or de fine new audiences for targeting. Learn more.
\n///Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi id voluptas vitae eius expedita alias iste deserunt rndis earum voluptatibus quae, numquam dolorum perspiciatis accusantium corporis, beatae maxime quasi. Tempora.
\n///This is the active item.
\n///This is good.
\n///This is probably not good.
\n///This is not active but holds the space if needed.
\n///Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!
\n///Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!
\n///Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!
\n///Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae sapiente nemo voluptates quam nam sint fugit!
\n///Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae sapiente nemo voluptates quam nam sint fugit!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!
\n///This is a paragraph with default bottom margin.
\n///This is a paragraph with a killed bottom margin.
\n///This is base color text
\n///This is brand color text
\n///This is good news text
\n///This is warning text
\n///This is bad news text
\n///This is charcoal
\n/// @example[html]\n/// \n/// \n/// \n/// \n/// \n/// \n/// @example[html]\n///Light weight
\n///Normal weight
\n///Bold weight
\n/// @example[html]\n///