superdesk-ui-framework 4.0.46 → 4.0.48

package/examples/css/docs-page.css

@@ -1,1116 +1,1135 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic,500italic,700italic,300,300italic');
-@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400&subset=latin-ext');
-
-:root {
-    color: hsla(214, 13%, 20%, 1);
-    --docs-page-color-bg-default: hsl(0, 0%, 97%);
-    --docs-page-color-bg-00: hsla(214, 13%, 96%, 1);
-    --docs-page-color-bg-10: hsla(0, 0%, 100%, 1);
-    --docs-page-color-bg__window-bar: hsl(214, 13%, 90%);
-    --docs-page-color-bg__aside: hsla(214, 13%, 92%, 1);
-    --docs-page-color-bg__header: hsl(216, 45%, 24%);
-
-    --docs-page-color-bg__content-row--white: hsla(0, 0%, 100%, 1);
-    --docs-page-color-bg__content-row--grey: hsla(0, 0%, 95%, 1);
-    --docs-page-color-bg__example-box: hsla(214, 13%, 94%, 1);
-    --docs-page-color-bg__graphic-btn: hsla(0, 0%, 100%, 1);
-    --docs-page-color-bg__graphic-btn-graphic: linear-gradient(180deg, hsla(165, 57%, 95%, 1) 4%, hsla(191, 53%, 86%, 1) 96%);
-
-    --docs-page-border__window-bar--top: hsla(0, 0%, 100%, 0.9);
-    --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 1);
-    --docs-page-border__table: hsla(0, 0%, 0%, 0.16);
-    --docs-page-color-bg__table-divider-row: hsla(0, 0%, 100%, 0.8);
-
-    --docs-page-bg__table-tr-even: hsla(214, 13%, 50%, 0.08);
-}
-
-:root [data-theme="dark-ui"] {
-    color: hsla(214, 13%, 96%, 1);
-    --docs-page-color-bg-default: hsla(214, 13%, 96%, 1);
-    --docs-page-color-bg-00: hsla(214, 13%, 12%, 1);
-    --docs-page-color-bg-10: hsla(214, 13%, 12%, 1);
-    --docs-page-color-bg__window-bar: hsl(214, 13%, 8%);
-    --docs-page-color-bg__aside: hsla(214, 13%, 16%, 1);
-    --docs-page-color-bg__header: hsl(216, 40%, 18%);
-
-    --docs-page-color-bg__content-row--white: hsla(0, 0%, 8%, 1);
-    --docs-page-color-bg__content-row--grey: hsla(0, 0%, 12%, 1);
-    --docs-page-color-bg__example-box: hsla(214, 13%, 18%, 1);
-    --docs-page-color-bg__graphic-btn: hsla(214, 13%, 8%, 1);
-    --docs-page-color-bg__graphic-btn-graphic: hsla(214, 13%, 14%, 1);
-
-    --docs-page-border__window-bar--top: hsla(0, 0%, 91%, 0.02);
-    --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 0.12);
-    --docs-page-border__table: hsla(0, 0%, 100%, 0.2);
-}
-.docs-page {
-    font-family: 'Roboto', sans-serif;
-    font-weight: 400;
-    line-height: 140%;
-    margin: 0;
-    padding: 0;
-    background-color: var(--docs-page-color-bg-default);
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
-    height: 100vh;
-}
-
-.docs-page {
-    --docs-page-color-primary: #1397B9;
-    --docs-page-color-highlight: #33C5A0;
-}
-
-hr {
-    border: transparent;
-    border: 1px dotted var(--sd-colour-line--medium);
-    border-width: 1px 0 0;
-    margin: 24px 0;
-}
-
-h1.docs-page__h1 {
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 100%;
-    margin: 0;
-    flex-grow: 1;
-    font-family: 'Merriweather', serif;
-    letter-spacing: 0.02em;
-}
-h2.docs-page__h2 {
-    font-size: 32px;
-    font-weight: 700;
-    line-height: 140%;
-    font-family: 'Merriweather', serif;
-    margin: 0 0 0.6em 0;
-}
-
-h2.docs-page__group-heading {
-    font-size: 36px;
-    font-weight: 300;
-    margin: 1.6em 0 -0.6em 0;
-    line-height: 140%;
-    color: #747474;
-    color: #999;
-}
-h2.docs-page__group-heading:first-of-type {
-    margin-top: 1em;
-}
-.docs-page__hero {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    margin: 32px auto;
-}
-
-h3.docs-page__h3 {
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 140%;
-    font-family: 'Merriweather', serif;
-    margin: 2em 0 0.4em 0;
-}
-h3.docs-page__h3--small-top-m {
-    margin-top: 1em;
-}
-.docs-page__rule {
-    border: none;
-    border-width: 2px;
-    height: 1px;
-    border-radius: 1px;
-    background-color: rgba(0, 0, 0, 0.2);
-    margin: 0 0 2.4rem 0;
-}
-.docs-page__rule--large {
-    border-width: 4px;
-    height: 3px;
-    border-radius: 2px;
-    background-color: var(--docs-page-color-highlight);
-    margin: 0 0 2.4rem 0;
-}
-
-.docs-page__hero-h2 {
-    font-family: 'Merriweather', serif;
-    font-size: 28px;
-    font-weight: 700;
-    line-height: 140%;
-    margin: 0 auto 0.6em;
-    text-align: center;
-    max-width: 400px;
-}
-.docs-page__hero-image {
-    margin: 0 auto 1.6em;
-    text-align: center;
-    max-width: 340px;
-    height: auto;
-}
-.docs-page__hero-image.docs-page__hero-image--s {
-    max-width: 200px;
-}
-.docs-page__hero-image img {
-    max-width: 100%;
-}
-.docs-page__hero-text {
-    font-size: 18px;
-    line-height: 150%;
-    font-weight: 300;
-    opacity: 0.75;
-    max-width: 480px;
-    text-align: center;
-    margin: 0 auto 32px;
-}
-
-h4.docs-page__h4 {
-    font-size: 18px;
-    line-height: 140%;
-    margin: 0 0 0.4em 0;
-}
-p.docs-page__paragraph, div.docs-page__paragraph {
-    font-size: 16px;
-    margin: 1em 0;
-    line-height: 150%;
-    font-weight: 300;
-}
-p.docs-page__paragraph em,
-div.docs-page__paragraph em {
-    font-style: italic;
-    font-weight: 400;
-}
-.docs-page__paragraph--small {
-    font-size: 13px;
-    margin: 0 0px 20px; 
-    color: rgb(116, 116, 116);
-}
-p.docs-page__paragraph + .docs-page__paragraph--small {
-    margin-top: -10px;
-}
-.docs-page__code-example p.docs-page__paragraph {
-    color: #7abcd1;
-}
-
-p.docs-page__paragraph--topMarginL {
-    margin-top: 3em;
-}
-.docs-page__code-example p.docs-page__paragraph--small {
-    margin: -1em 0 1em;
-}
-p.docs-page__paragraph:first-child {
-    margin: 0 0 1em;
-}
-p.docs-page__paragraph b, div.docs-page__paragraph b {
-    font-weight: 400;
-}
-.docs-page .link {
-    color: #5eadc8;
-    text-decoration: none;
-}
-.docs-page .link:hover {
-    text-decoration: underline;
-}
-.docs-page__header {
-    background: var(--docs-page-color-bg__header);
-    color: white;
-    padding: 0 8px 0 24px;
-    height: 64px;
-    grid-column: 1 / 3;
-    grid-row: 1 / 2;
-    display: flex;  
-    align-items: center;
-    box-shadow: 0 1px 6px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.12);
-    z-index: 2;
-}
-.docs-page__header-button {
-    background: transparent;
-    color: white;
-    padding: 0;
-    height: 40px;
-    width: 40px;
-    border-radius: 999px;
-    margin-inline-start: 0px;
-    margin-inline-end: 8px;
-    display: flex;  
-    align-items: center;
-    justify-content: center;
-    opacity: 0.8;
-    transition: all 0.2s ease;
-}
-.docs-page__header-button i {
-    color: white !important;
-}
-.docs-page__header-button:hover {
-    background: hsla(0, 0%, 0%, 0.2);
-    opacity: 1;
-}
-.docs-page__header-button:active {
-    background: var(--sd-colour-interactive);
-    opacity: 1;
-}
-.docs-page__header-logo {
-    height: 40px;
-    width: 40px;
-    margin: 0 16px 0 -8px;
-    background: url('/sd-ui-framework__logo.svg') no-repeat;
-    background-size: 100%;
-}
-.docs-page__header-nav {
-    margin-inline-start: auto;
-    margin-inline-end: 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    height: 100%;
-}
-.docs-page__header-nav-item {
-    margin-left: auto;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    margin: 0 8px;
-}
-.docs-page__header-nav-link {
-    color: #fff;
-    font-size: 16px;
-    font-weight: 400;
-    border-bottom: 3px solid transparent;
-    text-decoration: none;
-    line-height: 64px;
-    transition: all 0.2s ease-in-out;
-    padding: 0 2px;
-    letter-spacing: 0.01em;
-    opacity: 0.75;
-}
-.docs-page__header-nav-link:hover {
-    opacity: 1;
-}
-.docs-page__header-nav-item--active .docs-page__header-nav-link {
-    border-color: rgb(27, 176, 108);
-    opacity: 1;
-}
-.docs-page__header .form__row {
-    padding-bottom: 0;
-}
-.docs-page__footer {
-    border-top: 1px solid #ddd;
-    text-align: center;
-    padding: 20px;
-    font-size: 12px;
-}
-.docs-page__container-fluid {
-    padding: 0;
-    grid-column: 1 / 2;
-    grid-row: 2 / 3;
-    overflow-y: auto;
-    padding: 24px 32px 40px 32px;
-}
-.docs-page__sidebar {
-    margin: 0;
-    transition: all .2s ease;
-    padding: 20px 0;
-    box-sizing: border-box;
-    transition: all .2s ease;
-    grid-column: 1 / 2;
-    grid-row: 2 / 3;
-    width: 280px;
-    background-color: var(--docs-page-color-bg__aside);
-    overflow-y: auto;
-}
-.docs-page__sidebar-searchbar-container {
-    position: sticky;
-    top: -20px;
-    margin-top: -20px;
-    padding-block: 16px 8px;
-    background-color: var(--docs-page-color-bg__aside);
-    z-index: 2;
-}
-
-.docs-page__sidebar.scroll {
-    top: 0;
-    margin-top: 0;
-}
-.docs-page__content {
-    grid-column: 2 / 3;
-    grid-row: 2 / 3;
-    overflow-y: auto;
-    position: relative;
-    background-color: var(--docs-page-color-bg-00);
-}
-.docs-page__masthead {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 320px;
-    background: rgb(30,176,108);
-    background: linear-gradient(to bottom, rgba(96,184,194,0.5) 0%, rgba(55,78,112,1) 100%), radial-gradient(at top center, rgba(30,176,108,1) 0%, rgba(0,0,0,0.10) 120%);
-    color: #fff;
-}
-.docs-page__masthead-hgroup {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 320px;
-    width: 860px;
-    background: url('/masthead-image.png') ;
-}
-.docs-page__masthead-heading {
-    font-family: 'Merriweather', serif;
-    text-align: center;
-    font-size: 40px;
-    font-weight: 700;
-    line-height: 100%;
-    margin: 32px auto 0;
-}
-.docs-page__masthead-subheading {
-    font-size: 18px;
-    font-weight: 300;
-    line-height: 150%;
-    text-align: center;
-    margin: 16px auto;
-    max-width: 400px;
-    opacity: 0.75;
-}
-.docs-page__nav {
-    margin-bottom: 40px;
-}
-.docs-page__nav-title {
-    text-transform: uppercase;
-    color: var(--color-text);
-    font-size: 12px;
-    font-weight: 500;
-    letter-spacing: 0.04em;
-    line-height: 1.2;
-    margin-block-start: 20px;
-    margin-block-end: 6px;
-    padding-inline-start: 16px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    transition: all 0.2s ease;
-    min-height: 16px;
-}
-.docs-page__nav-title:hover {
-    cursor: pointer;
-    color: var(--sd-colour-interactive);
-}
-
-.docs-page__nav-title-caret {
-    height: 16px;
-    width: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0.6;
-    margin-block-end: 2px;
-    transition: all 0.2s ease;
-}
-.docs-page__nav-title--open .docs-page__nav-title-caret {
-    transform: rotate(90deg)
-
-}
-
-.docs-page__nav > li:first-child .docs-page__nav-title {
-    margin-block-start: 0;
-}
-
-.docs-page__button-grid {
-    margin-block-start: 2.4rem;
-    margin-block-end: 2.4rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.docs-page__fla-button-container {
-    position: fixed;
-    top: 90px;
-    right:32px;
-    z-index: 10;
-    height: 4.8rem;
-    width: 4.8rem;
-}
-.docs-page__fla-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    cursor: pointer;
-    height: 4.8rem;
-    width: 4.8rem;
-    /* position: fixed;
-    top: 90px;
-    right:32px;
-    z-index: 10; */
-    /* left: calc(100vw - 380px); */
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 6px 24px rgba(0, 0, 0, 0.16);
-    transition: all 0.2s ease;
-    background-color: var(--sd-colour-background__base--00);
-}
-.docs-page__fla-button i[class^="icon-"] {
-    color: var(--color-text);
-    transition: all 0.2s ease;
-    opacity: 0.8;
-}
-.docs-page__fla-button:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 6px 32px rgba(0, 0, 0, 0.18);
-}
-.docs-page__fla-button:hover i[class^="icon-"] {
-    opacity: 1;
-}
-.docs-page__fla-button:active {
-    background-color: var(--docs-page-color-highlight);
-    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.24);
-}
-.docs-page__fla-button:active i[class^="icon-"] {
-    color: hsl(0, 0%, 100%);
-}
-.docs-page__graphic-btn {
-    min-width: 240px;
-    margin-right: 16px;
-    background-color: var(--docs-page-color-bg__graphic-btn);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
-    transition: 0.2s ease-in-out;
-    height: 72px;
-    padding: 8px;
-    display: flex;
-    flex-direction: row;
-    border-radius: 4px;
-    overflow: hidden;
-    cursor: pointer;
-    text-decoration: none;
-}
-.docs-page__graphic-btn:hover {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(31, 17, 17, 0.16);
-    transform: translate(0, -1px);
-}
-.docs-page__graphic-btn-graphic {
-    width: 56px;
-    border-radius: 3px;
-    background: var(--docs-page-color-bg__graphic-btn-graphic);
-    position: relative;
-}
-.docs-page__graphic-btn-graphic img {
-    max-width: 100%;
-    height: auto;
-}
-.docs-page__graphic-btn-label {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0 0.8rem 0 1.6rem;
-    color: var(--docs-page-color-primary);
-    font-size: 1.6rem;
-    line-height: 140%;
-    pointer-events: none;
-}
-.docs-page__small-text {
-    font-size: 1.3rem;
-    font-weight: 400;
-    color: var(--color-text-light);
-    opacity: 0.7;
-}
-
-.docs-page__nav-item {
-    position: relative; 
-}
-.docs-page__nav-item a {
-    font-size: 14px;
-    line-height: 32px;
-    display: block;
-    margin-inline-start: 22px;
-    padding-inline-start: 12px;
-    color: var(--color-text-light);
-    background-color: rgba(255, 255, 255, 0);
-    cursor: pointer;
-    text-decoration: none;
-    transition: all ease 0.2s;
-    border-inline-start: 1px solid var(--color-border-line--medium);
-}
-.docs-page__nav-item a:hover {
-    color: var(--color-text);
-    border-color: var(--color-border-line--strong);
-    /* background-color: var(--docs-page-color-bg-00); */
-}
-.docs-page__nav-item a:active {
-    color: var(--color-text);
-}
-
-.docs-page__nav-item a.docs-page__nav-item--active {
-    border-color: var(--sd-colour-interactive);
-    font-weight: 400;
-    color: var(--sd-colour-interactive);
-    box-shadow: -1px 0 0 var(--sd-colour-interactive), inset 1px 0 0 var(--sd-colour-interactive);
-}
-
-.docs-page__nav-item.docs-page__nav-item--active a {
-    color: var(--sd-colour-interactive);
-}
-
-.docs-page__section {
-    padding: 40px 0 0;
-}
-.docs-page__section:last-child {
-    padding: 40px 0 100px;
-}
-.docs-page__pre {
-    display: block;
-    padding: 9.5px;
-    margin: 0;
-    font-size: 13px;
-    line-height: 1.42857143;
-    color: hsl(214, 13%, 20%);
-    word-break: break-all;
-    word-wrap: break-word;
-    background-color: #eee;
-    border: 1px solid #ccc;
-    border-radius: 2px;
-}
-.docs-page__code-window {
-    border: 1px solid hsla(0, 0%, 48%, 0.2);
-    border-radius: var(--b-radius--large);
-    margin: 10px 0 20px;
-    -webkit-box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
-    box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
-}
-.docs-page__window-bar {
-    padding: 10px;
-    border-top: 1px solid var(--docs-page-border__window-bar--top);
-    border-bottom: 1px solid var(--docs-page-border__window-bar--bottom);
-    background: var(--docs-page-color-bg__window-bar);
-    border-radius: var(--b-radius--large) var(--b-radius--large) 0 0;
-}
-.docs-page__window-bar>a, .docs-page__window-bar>span {
-    font-size: 16px;
-    color: #999;
-    padding: 0 4px;
-    text-decoration: none;
-}
-.docs-page__window-bar>a.active {
-    color: #5eadc8;
-}
-.docs-page__code--large {
-    font-size: 1.5rem;
-    color: #555;
-    font-family: 'Source Code Pro', monospace;
-    line-height: 150%;
-    font-weight: 400;
-}
-.docs-page__code-example {
-    padding: 20px;
-}
-.docs-page__code-example--grey {
-    background-color: #f8f8f8;
-}
-.docs-page__code-example .docs-page__content-block {
-    margin-bottom: 20px;
-}
-.docs-page__code-example .docs-page__content-row > .btn,
-.docs-page__code-example .docs-page__content-row > .label,
-.docs-page__code-example .docs-page__content-row > .badge,
-.docs-page__code-example .docs-page__content-row > .label-icon {
-    margin-right: 12px;
-    margin-bottom: 14px;
-}
-
-.docs-page__content-row {
-    margin-bottom: 20px;
-}
-.docs-page__content-row--no-margin {
-    margin-bottom: 0;
-}
-.docs-page__content-row--ui-dark,
-.docs-page__content-row--white {
-    background: #3b3b3b;
-    padding: 8px;
-    border-radius: 4px;
-}
-.docs-page__content-row--white {
-    background: var(--docs-page-color-bg__content-row--white);
-}
-.docs-page__content-row--gray {
-    background: var(--docs-page-color-bg__content-row--grey);;
-    padding: 10px;
-}
-.docs-page__code-markup {
-    display: none;
-    background-color: hsl(214, 13%, 10%);
-    padding: 16px 16px 16px 36px;
-    overflow-y: scroll;
-    border-radius: 0 0 var(--b-radius--large) var(--b-radius--large);
-}
-.docs-page__code-markup ol {
-    margin-left: 10px;
-}
-
-
-pre.prettyprint {
-    font-family: 'Source Code Pro', monospace;
-    font-size: 14px;
-    line-height: 150%;
-    font-weight: 300;
-}
-
-.docs-page__paragraph code {
-    font-size: 85%;
-    padding: 0 0.4em;
-    background-color: var(--sd-colour-interactive--alpha-20);
-    border-radius: 3px;
-    font-family: 'Source Code Pro', monospace;
-    font-weight: 400;
-    line-height: inherit;
-    vertical-align: baseline;
-    color: var(--color-text);
-}
-
-.docs-page__unordered-list {
-    font-size: 16px;
-    margin: 1em 0 2em;
-    line-height: 150%;
-    font-weight: 300;
-}
-.docs-page__unordered-list li {
-    list-style-type: disc;
-    margin-bottom: 0.25em;
-    margin-left: 1.5em;  
-}
-.docs-page__unordered-list--plain {
-    font-weight: 300;
-}
-.docs-page__unordered-list--plain li {
-    font-weight: 300;
-    list-style-type: none;
-    margin-left: 0;
-}
-
-.docs-page__code-example .flex-grid .flex-grid__item,
-.docs-page__code-example .grid .grid__item {
-    background-color: #fff;
-    min-height: 60px;
-    border: 1px dotted rgba(0,0,0,0.2);
-}
-.docs-page__code-example .grid.grid--boxed .grid__item {
-    background-color: transparent;
-}
-.docs-page__code-example .grid.grid--boxed.grid--boxed-styled .grid__item {
-    background-color: #fff;
-}
-.docs-page__code-example .grid .grid .grid__item {
-    border: 1px dotted #5eadc8;
-}
-.docs-page__code-example .flex-grid .flex-grid__item {
-    padding: 20px;
-}
-.docs-page__code-example .flex-grid.flex-grid--boxed .flex-grid__item {
-    background-color: var(--docs-page-color-bg-10) !important;
-    border:none;
-    border-radius: 2px;
-    box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
-}
-.docs-page__icon-font-list {
-    margin: 40px auto 20px;
-    max-width: 1200px;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-    transition: all 0.2s ease;
-}
-.docs-page__icon-font-list li {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 24px 0;
-    margin: 0 24px;
-    box-sizing: border-box;
-    border-radius: 2px;
-    transition: all 0.2s ease-in-out;
-}
-.docs-page__icon-font-list li:hover {
-    box-shadow: 0 0 0 1px var(--sd-shadow-outline), 0 1px 2px hsla(0, 0%, 0%, 0.12), 0 1px 6px hsla(0, 0%, 0%, 0.24);
-}
-
-.docs-page__icon-font-list li i {
-    margin-bottom: 8px;
-}
-
-.docs-page__container {
-    max-width: 1200px;
-    margin: 30px auto 0;
-}
-.docs-page__container--large {
-    max-width: 1200px;
-}
-.docs-page__container--medium {
-    max-width: 1000px;
-}
-.docs-page__container--full-h {
-    height: calc(100vh - 64px);
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-
-.docs-page__container .docs-page__code-window {
-    max-width: none !important;
-}
-
-.docs-page__container .docs-page__h2,
-.docs-page__container .docs-page__h3,
-.docs-page__container .docs-page__paragraph,
-.docs-page__container .docs-page__paragraph--small {
-    max-width: 85ch;
-}
-
-.docs-page__content-block {
-    display: flex;
-    flex-direction: row;
-    margin: 0 -16px;
-}
-.docs-page__content-block + .docs-page__content-block {
-    margin-top: 32px;
-}
-.docs-page__content-block-item {
-    flex: 1 1;
-    margin: 0 16px;
-}
-/* .docs-page__figure {
-
-} */
-.docs-page__figure-media {
-    width: 100%;
-    background: #F8F8F8;
-    border: 1px solid #cccccc;
-    min-height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-}
-.docs-page__figure-media img {
-    max-width: 100%;
-    display: block;
-}
-.docs-page__figure-media--light {
-    background: #FFF;
-}
-.docs-page__figure-caption {
-    font-size: 14px;
-    margin-top: 12px;
-    line-height: 150%;
-}
-.docs-page__caption-heading {
-    border-top: 6px solid;
-    font-size: 15px;
-    font-weight: 500;
-    margin: 0;
-    max-width: 100%;
-    padding: 6px 0 6px 8px;
-    margin-bottom: 12px;
-    line-height: 120%;
-}
-.docs-page__caption-heading--do {
-    border-color: rgba(68, 165, 72, 1);
-    color: rgb(47, 134, 51);
-    background-color: rgba(68, 165, 72, 0.1);
-}
-.docs-page__caption-heading--dont {
-    border-color: rgba(222, 44, 44, 1);
-    color: rgb(197, 38, 38);
-    background-color: rgba(222, 44, 44, 0.1);
-}
-.docs-page__caption-heading--caution {
-    border-color: rgba(241, 162, 36, 1);
-    color: rgb(225, 150, 25);
-    background-color: rgba(241, 162, 36, 0.1);
-}
-
-.docs-page__text-align--center {
-    text-align: center;
-    margin-right: auto !important;
-    margin-left: auto !important;
-}
-
-.docs-page__icon-font-list li span {
-    font-size: 13px;
-    text-align: center;
-    color: #747474;
-}
-
-.docs-page__icon-font-list--dark {
-    background: #666;
-    color: lightgray !important;
-}
-.docs-page__icon-font-list--dark span {
-    color: lightgray !important;
-}
-
-.docs-page__playground_picker {
-    text-align: end;
-}
-
-.docs-page__playground_picker .dropdown__toggle {
-    color: white !important;
-    letter-spacing: 0.02em;
-}
-
-.docs-page__playground_picker .dropdown__toggle .dropdown__caret {
-    border-top-color: #fff !important;
-}
-
-[react-playground] {
-    grid-column: 2/3;
-}
-
-.docs-page__grid-page-example {
-    position: relative;
-    min-height: 600px;
-    background-color: var(--sd-colour-background__main-list);
-    overflow: hidden;
-    border: 1px solid var(--color-border-line--light);
-    display: grid;
-    grid-template-rows: auto 1fr;
-    grid-template-columns: auto 1fr;
-}
-.docs-page__grid-page-example__top {
-    grid-row: 1/2;
-    grid-column: 1/3;
-}
-.docs-page__grid-page-example__top .sd-top-menu {
-    position: static !important;
-}
-.docs-page__grid-page-example__side {
-    grid-row: 2/3;
-    grid-column: 1/2;
-}
-.docs-page__grid-page-example__main {
-    grid-row: 2/3;
-    grid-column: 2/3;
-}
-
-#scrollContainer {
-    overflow: scroll;
-    scroll-behavior: smooth;
-}
-
-/* ---------------- COLOR SWATCHES ---------------- */
-
-.doc-swatches__grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-    grid-column-gap: 1.6rem;
-    grid-row-gap: 2.4rem;
-    margin: 0;
-}
-
-.doc-swatches__wrapper {
-    flex: auto;
-  }
-  
-.doc-swatches__title {
-    padding: 6px 12px;
-    margin-bottom: 4px;
-    text-transform: capitalize;
-}
-    
-.doc-swatches__title h3 {
-    font-size: 14px;
-    font-weight: 400;
-    font-family: 'Merriweather', serif;
-    letter-spacing: 0.02em;
-    margin: 0;
-    color: #fff;
-}
-
-
-.doc-swatches__swatch-item:nth-child(n+7) {
-    color: #fff;
-}
-
-.doc-swatches__swatch-item {
-    padding: 6px 12px;
-    display: block;
-    font-size: 12px;
-    letter-spacing: 0.06em;
-}
-
-.docs-page__example-box {
-    background-color: var(--docs-page-color-bg__example-box);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 16rem;
-    border-radius: 4px;
-}
-.docs-page__example-box p {
-    text-align: center;
-    color: #969696;
-    font-size: 1.6rem;
-    font-weight: 300; 
-    margin: 0;
-}
-
-.docs-page__full-width-helper { /* helps to override some docs page containers in full width layouts */
-    width: 100vw;
-}
-
-.docs-page__paragraph--light {
-    font-size: 15px;
-    font-weight: 300;
-    line-height: 150%;
-    color: var(--color-text-light);
-}
-.docs-page__color--primary {
-    color: var(--docs-page-color-primary) !important;
-}
-.docs-page__color--highlight {
-    color: var(--docs-page-color-highlight) !important;
-}
-
-.docs-page__test-helper {
-    padding: 4px !important;
-    border: 1px dashed rgba(255, 0, 255, 0.4);
-    border-radius: 2px;
-}
-
-.docs-page__test-helper-2 {
-    padding: 4px !important;
-    border: 1px dashed rgba(100, 100, 100, 0.3);
-    border-radius: 2px;
-}
-
-doc-gif-img:hover img {
-    cursor: pointer;
-}
-
-.docs-page__container table {
-    margin-bottom: 32px;
-    border-color: var(--docs-page-border__table) !important;
-}
-.docs-page__container table th,
-.docs-page__container table td {
-    border-color: var(--docs-page-border__table) !important;
-}
-
-.docs-page__container table:not(.utilities-table) tr td:nth-child(3) {
-    white-space: nowrap;
-}
-
-.docs-page__container table:not(.utilities-table) tr:nth-child(even),
-.docs-page__container table:not(.utilities-table) thead tr {
-    background-color: var(--docs-page-bg__table-tr-even);
-}
-
-
-.docs-page__container table.utilities-table {
-    width: 100%;
-    border-block-start: none !important;
-    margin: 0;
-    font-size: 14px;
-}
-.docs-page__container table.utilities-table thead th {
-    font-size: 14px;
-	position: sticky;
-    top: 0;
-    background-color: var(--docs-page-color-bg-00);
-    border-bottom: ;
-}
-
-.docs-page__container table.utilities-table tbody td  {
-    width: 100%;
-    font-family: monospace;
-    line-height: 1.4;
-    color: var(--color-text-light);
-}
-.docs-page__container table.utilities-table tbody td:first-child {
-    min-width: 280px;
-    width: auto;
-    color: var(--color-text);
-}
-.docs-page__container table.utilities-table tbody td:nth-child(3){
-    min-width: 200px;
-    width: auto;
-    text-align: end;
-    padding-inline-end: var(--space--1-5);
-    font-weight: 700;
-}
-
-.docs-page__container table.utilities-table tbody tr.utilities-table__divider-row td {
-    color: var(--color-text);
-    font-family: 'Roboto', sans-serif;
-    font-size: 13px;
-    letter-spacing: 0.025em;
-    font-weight: 500;
-    padding-block: 8px !important;
-    background-color: var(--docs-page-color-bg__table-divider-row);
-}
-
-.utilities-table__container {
-    position: relative;
-    max-height: 438px;
-    overflow-y: auto;
-    border-block-start:1px solid var(--sd-colour-line--medium);
-    margin-block-end: var(--space--4);
-}
-
-.utilities-table__container--no-height {
-    max-height: none;
-}
-
-.docs-page__container .doc-text--highlight {
-    color: var(--docs-page-color-primary) !important;
-}
-
-table.utilities-table td .border-example-box {
-    min-width: 160px;
-    height: 32px;
-}
-
-/* -------------- END COLOR SWATCHES -------------- */
-/* -------------- PrismJS overrides -------------- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-    font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-    font-size: 1.1em;
-    border-radius: var(--b-radius--large);
-}
-pre[class*="language-"] {
-    background: hsl(214, 13%, 8%);
-}
-
-/*// extra large screen media query /100em = 1600px/*/
-@media only screen and (min-width: 100em) {
-    .docs-page__section {
-        max-width: 80%;
-    } 
-}
-
-
-/* -------------- DOC PAGE SPECIFIC OVERRIDES -------------- */
-
-doc-react-playground {
-    display: contents;
-}
-
-.docs-page doc-react-playground .sd-main-content-grid {
-    grid-column: 2 / 3;
-    overflow: auto;
-}
-
-.docs-page .sd-editor-grid {
-    grid-row: 2 / 3;
-    grid-column: 2 / 3;
-    overflow-y: auto;
-}
-.docs-page doc-react-playground .sd-editor-grid {
-    grid-row: 2 / 3;
-    grid-column: 2 / 3;
-    overflow-y: auto;
-}
-
-/* ------------ END DOC PAGE SPECIFIC OVERRIDES ------------ */
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic,500italic,700italic,300,300italic');
+@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400&subset=latin-ext');
+
+:root {
+    color: hsla(214, 13%, 20%, 1);
+    --docs-page-color-bg-default: hsl(0, 0%, 97%);
+    --docs-page-color-bg-00: hsla(214, 13%, 96%, 1);
+    --docs-page-color-bg-10: hsla(0, 0%, 100%, 1);
+    --docs-page-color-bg__window-bar: hsl(214, 13%, 90%);
+    --docs-page-color-bg__aside: hsla(214, 13%, 92%, 1);
+    --docs-page-color-bg__header: hsl(216, 45%, 24%);
+
+    --docs-page-color-bg__content-row--white: hsla(0, 0%, 100%, 1);
+    --docs-page-color-bg__content-row--grey: hsla(0, 0%, 95%, 1);
+    --docs-page-color-bg__example-box: hsla(214, 13%, 94%, 1);
+    --docs-page-color-bg__graphic-btn: hsla(0, 0%, 100%, 1);
+    --docs-page-color-bg__graphic-btn-graphic: linear-gradient(
+        180deg,
+        hsla(165, 57%, 95%, 1) 4%,
+        hsla(191, 53%, 86%, 1) 96%
+    );
+
+    --docs-page-border__window-bar--top: hsla(0, 0%, 100%, 0.9);
+    --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 1);
+    --docs-page-border__table: hsla(0, 0%, 0%, 0.16);
+    --docs-page-color-bg__table-divider-row: hsla(0, 0%, 100%, 0.8);
+
+    --docs-page-bg__table-tr-even: hsla(214, 13%, 50%, 0.08);
+}
+
+:root [data-theme='dark-ui'] {
+    color: hsla(214, 13%, 96%, 1);
+    --docs-page-color-bg-default: hsla(214, 13%, 96%, 1);
+    --docs-page-color-bg-00: hsla(214, 13%, 12%, 1);
+    --docs-page-color-bg-10: hsla(214, 13%, 12%, 1);
+    --docs-page-color-bg__window-bar: hsl(214, 13%, 8%);
+    --docs-page-color-bg__aside: hsla(214, 13%, 16%, 1);
+    --docs-page-color-bg__header: hsl(216, 40%, 18%);
+
+    --docs-page-color-bg__content-row--white: hsla(0, 0%, 8%, 1);
+    --docs-page-color-bg__content-row--grey: hsla(0, 0%, 12%, 1);
+    --docs-page-color-bg__example-box: hsla(214, 13%, 18%, 1);
+    --docs-page-color-bg__graphic-btn: hsla(214, 13%, 8%, 1);
+    --docs-page-color-bg__graphic-btn-graphic: hsla(214, 13%, 14%, 1);
+
+    --docs-page-border__window-bar--top: hsla(0, 0%, 91%, 0.02);
+    --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 0.12);
+    --docs-page-border__table: hsla(0, 0%, 100%, 0.2);
+}
+.docs-page {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    line-height: 140%;
+    margin: 0;
+    padding: 0;
+    background-color: var(--docs-page-color-bg-default);
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    height: 100vh;
+}
+
+.docs-page {
+    --docs-page-color-primary: #1397b9;
+    --docs-page-color-highlight: #33c5a0;
+}
+
+hr {
+    border: transparent;
+    border: 1px dotted var(--sd-colour-line--medium);
+    border-width: 1px 0 0;
+    margin: 24px 0;
+}
+
+h1.docs-page__h1 {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 100%;
+    margin: 0;
+    flex-grow: 1;
+    font-family: 'Merriweather', serif;
+    letter-spacing: 0.02em;
+}
+h2.docs-page__h2 {
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 140%;
+    font-family: 'Merriweather', serif;
+    margin: 0 0 0.6em 0;
+}
+
+h2.docs-page__group-heading {
+    font-size: 36px;
+    font-weight: 300;
+    margin: 1.6em 0 -0.6em 0;
+    line-height: 140%;
+    color: #747474;
+    color: #999;
+}
+h2.docs-page__group-heading:first-of-type {
+    margin-top: 1em;
+}
+.docs-page__hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: 32px auto;
+}
+
+h3.docs-page__h3 {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 140%;
+    font-family: 'Merriweather', serif;
+    margin: 2em 0 0.4em 0;
+}
+h3.docs-page__h3--small-top-m {
+    margin-top: 1em;
+}
+.docs-page__rule {
+    border: none;
+    border-width: 2px;
+    height: 1px;
+    border-radius: 1px;
+    background-color: rgba(0, 0, 0, 0.2);
+    margin: 0 0 2.4rem 0;
+}
+.docs-page__rule--large {
+    border-width: 4px;
+    height: 3px;
+    border-radius: 2px;
+    background-color: var(--docs-page-color-highlight);
+    margin: 0 0 2.4rem 0;
+}
+
+.docs-page__hero-h2 {
+    font-family: 'Merriweather', serif;
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 140%;
+    margin: 0 auto 0.6em;
+    text-align: center;
+    max-width: 400px;
+}
+.docs-page__hero-image {
+    margin: 0 auto 1.6em;
+    text-align: center;
+    max-width: 340px;
+    height: auto;
+}
+.docs-page__hero-image.docs-page__hero-image--s {
+    max-width: 200px;
+}
+.docs-page__hero-image img {
+    max-width: 100%;
+}
+.docs-page__hero-text {
+    font-size: 18px;
+    line-height: 150%;
+    font-weight: 300;
+    opacity: 0.75;
+    max-width: 480px;
+    text-align: center;
+    margin: 0 auto 32px;
+}
+
+h4.docs-page__h4 {
+    font-size: 18px;
+    line-height: 140%;
+    margin: 0 0 0.4em 0;
+}
+p.docs-page__paragraph,
+div.docs-page__paragraph {
+    font-size: 16px;
+    margin: 1em 0;
+    line-height: 150%;
+    font-weight: 300;
+}
+p.docs-page__paragraph em,
+div.docs-page__paragraph em {
+    font-style: italic;
+    font-weight: 400;
+}
+.docs-page__paragraph--small {
+    font-size: 13px;
+    margin: 0 0px 20px;
+    color: rgb(116, 116, 116);
+}
+p.docs-page__paragraph + .docs-page__paragraph--small {
+    margin-top: -10px;
+}
+.docs-page__code-example p.docs-page__paragraph {
+    color: #7abcd1;
+}
+
+p.docs-page__paragraph--topMarginL {
+    margin-top: 3em;
+}
+.docs-page__code-example p.docs-page__paragraph--small {
+    margin: -1em 0 1em;
+}
+p.docs-page__paragraph:first-child {
+    margin: 0 0 1em;
+}
+p.docs-page__paragraph b,
+div.docs-page__paragraph b {
+    font-weight: 400;
+}
+.docs-page .link {
+    color: #5eadc8;
+    text-decoration: none;
+}
+.docs-page .link:hover {
+    text-decoration: underline;
+}
+.docs-page__header {
+    background: var(--docs-page-color-bg__header);
+    color: white;
+    padding: 0 8px 0 24px;
+    height: 64px;
+    grid-column: 1 / 3;
+    grid-row: 1 / 2;
+    display: flex;
+    align-items: center;
+    box-shadow:
+        0 1px 6px rgba(0, 0, 0, 0.2),
+        0 1px 1px rgba(0, 0, 0, 0.12);
+    z-index: 2;
+}
+.docs-page__header-button {
+    background: transparent;
+    color: white;
+    padding: 0;
+    height: 40px;
+    width: 40px;
+    border-radius: 999px;
+    margin-inline-start: 0px;
+    margin-inline-end: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+    transition: all 0.2s ease;
+}
+.docs-page__header-button i {
+    color: white !important;
+}
+.docs-page__header-button:hover {
+    background: hsla(0, 0%, 0%, 0.2);
+    opacity: 1;
+}
+.docs-page__header-button:active {
+    background: var(--sd-colour-interactive);
+    opacity: 1;
+}
+.docs-page__header-logo {
+    height: 40px;
+    width: 40px;
+    margin: 0 16px 0 -8px;
+    background: url('/sd-ui-framework__logo.svg') no-repeat;
+    background-size: 100%;
+}
+.docs-page__header-nav {
+    margin-inline-start: auto;
+    margin-inline-end: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    height: 100%;
+}
+.docs-page__header-nav-item {
+    margin-left: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    margin: 0 8px;
+}
+.docs-page__header-nav-link {
+    color: #fff;
+    font-size: 16px;
+    font-weight: 400;
+    border-bottom: 3px solid transparent;
+    text-decoration: none;
+    line-height: 64px;
+    transition: all 0.2s ease-in-out;
+    padding: 0 2px;
+    letter-spacing: 0.01em;
+    opacity: 0.75;
+}
+.docs-page__header-nav-link:hover {
+    opacity: 1;
+}
+.docs-page__header-nav-item--active .docs-page__header-nav-link {
+    border-color: rgb(27, 176, 108);
+    opacity: 1;
+}
+.docs-page__header .form__row {
+    padding-bottom: 0;
+}
+.docs-page__footer {
+    border-top: 1px solid #ddd;
+    text-align: center;
+    padding: 20px;
+    font-size: 12px;
+}
+.docs-page__container-fluid {
+    padding: 0;
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+    overflow-y: auto;
+    padding: 24px 32px 40px 32px;
+}
+.docs-page__sidebar {
+    margin: 0;
+    transition: all 0.2s ease;
+    padding: 20px 0;
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+    width: 280px;
+    background-color: var(--docs-page-color-bg__aside);
+    overflow-y: auto;
+}
+.docs-page__sidebar-searchbar-container {
+    position: sticky;
+    top: -20px;
+    margin-top: -20px;
+    padding-block: 16px 8px;
+    background-color: var(--docs-page-color-bg__aside);
+    z-index: 2;
+}
+
+.docs-page__sidebar.scroll {
+    top: 0;
+    margin-top: 0;
+}
+.docs-page__content {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+    overflow-y: auto;
+    position: relative;
+    background-color: var(--docs-page-color-bg-00);
+}
+.docs-page__masthead {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 320px;
+    background: rgb(30, 176, 108);
+    background:
+        linear-gradient(to bottom, rgba(96, 184, 194, 0.5) 0%, rgba(55, 78, 112, 1) 100%),
+        radial-gradient(at top center, rgba(30, 176, 108, 1) 0%, rgba(0, 0, 0, 0.1) 120%);
+    color: #fff;
+}
+.docs-page__masthead-hgroup {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 320px;
+    width: 860px;
+    background: url('/masthead-image.png');
+}
+.docs-page__masthead-heading {
+    font-family: 'Merriweather', serif;
+    text-align: center;
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 100%;
+    margin: 32px auto 0;
+}
+.docs-page__masthead-subheading {
+    font-size: 18px;
+    font-weight: 300;
+    line-height: 150%;
+    text-align: center;
+    margin: 16px auto;
+    max-width: 400px;
+    opacity: 0.75;
+}
+.docs-page__nav {
+    margin-bottom: 40px;
+}
+.docs-page__nav-title {
+    text-transform: uppercase;
+    color: var(--color-text);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    line-height: 1.2;
+    margin-block-start: 20px;
+    margin-block-end: 6px;
+    padding-inline-start: 16px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s ease;
+    min-height: 16px;
+}
+.docs-page__nav-title:hover {
+    cursor: pointer;
+    color: var(--sd-colour-interactive);
+}
+
+.docs-page__nav-title-caret {
+    height: 16px;
+    width: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.6;
+    margin-block-end: 2px;
+    transition: all 0.2s ease;
+}
+.docs-page__nav-title--open .docs-page__nav-title-caret {
+    transform: rotate(90deg);
+}
+
+.docs-page__nav > li:first-child .docs-page__nav-title {
+    margin-block-start: 0;
+}
+
+.docs-page__button-grid {
+    margin-block-start: 2.4rem;
+    margin-block-end: 2.4rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.docs-page__fla-button-container {
+    position: fixed;
+    top: 90px;
+    right: 32px;
+    z-index: 10;
+    height: 4.8rem;
+    width: 4.8rem;
+}
+.docs-page__fla-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    cursor: pointer;
+    height: 4.8rem;
+    width: 4.8rem;
+    /* position: fixed;
+    top: 90px;
+    right:32px;
+    z-index: 10; */
+    /* left: calc(100vw - 380px); */
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.12),
+        0 6px 24px rgba(0, 0, 0, 0.16);
+    transition: all 0.2s ease;
+    background-color: var(--sd-colour-background__base--00);
+}
+.docs-page__fla-button i[class^='icon-'] {
+    color: var(--color-text);
+    transition: all 0.2s ease;
+    opacity: 0.8;
+}
+.docs-page__fla-button:hover {
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.16),
+        0 6px 32px rgba(0, 0, 0, 0.18);
+}
+.docs-page__fla-button:hover i[class^='icon-'] {
+    opacity: 1;
+}
+.docs-page__fla-button:active {
+    background-color: var(--docs-page-color-highlight);
+    box-shadow:
+        0 0px 2px rgba(0, 0, 0, 0.18),
+        0 2px 8px rgba(0, 0, 0, 0.24);
+}
+.docs-page__fla-button:active i[class^='icon-'] {
+    color: hsl(0, 0%, 100%);
+}
+.docs-page__graphic-btn {
+    min-width: 240px;
+    margin-right: 16px;
+    background-color: var(--docs-page-color-bg__graphic-btn);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
+    transition: 0.2s ease-in-out;
+    height: 72px;
+    padding: 8px;
+    display: flex;
+    flex-direction: row;
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    text-decoration: none;
+}
+.docs-page__graphic-btn:hover {
+    box-shadow:
+        0 1px 4px rgba(0, 0, 0, 0.1),
+        0 2px 8px rgba(31, 17, 17, 0.16);
+    transform: translate(0, -1px);
+}
+.docs-page__graphic-btn-graphic {
+    width: 56px;
+    border-radius: 3px;
+    background: var(--docs-page-color-bg__graphic-btn-graphic);
+    position: relative;
+}
+.docs-page__graphic-btn-graphic img {
+    max-width: 100%;
+    height: auto;
+}
+.docs-page__graphic-btn-label {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0 0.8rem 0 1.6rem;
+    color: var(--docs-page-color-primary);
+    font-size: 1.6rem;
+    line-height: 140%;
+    pointer-events: none;
+}
+.docs-page__small-text {
+    font-size: 1.3rem;
+    font-weight: 400;
+    color: var(--color-text-light);
+    opacity: 0.7;
+}
+
+.docs-page__nav-item {
+    position: relative;
+}
+.docs-page__nav-item a {
+    font-size: 14px;
+    line-height: 32px;
+    display: block;
+    margin-inline-start: 22px;
+    padding-inline-start: 12px;
+    color: var(--color-text-light);
+    background-color: rgba(255, 255, 255, 0);
+    cursor: pointer;
+    text-decoration: none;
+    transition: all ease 0.2s;
+    border-inline-start: 1px solid var(--color-border-line--medium);
+}
+.docs-page__nav-item a:hover {
+    color: var(--color-text);
+    border-color: var(--color-border-line--strong);
+    /* background-color: var(--docs-page-color-bg-00); */
+}
+.docs-page__nav-item a:active {
+    color: var(--color-text);
+}
+
+.docs-page__nav-item a.docs-page__nav-item--active {
+    border-color: var(--sd-colour-interactive);
+    font-weight: 400;
+    color: var(--sd-colour-interactive);
+    box-shadow:
+        -1px 0 0 var(--sd-colour-interactive),
+        inset 1px 0 0 var(--sd-colour-interactive);
+}
+
+.docs-page__nav-item.docs-page__nav-item--active a {
+    color: var(--sd-colour-interactive);
+}
+
+.docs-page__section {
+    padding: 40px 0 0;
+}
+.docs-page__section:last-child {
+    padding: 40px 0 100px;
+}
+.docs-page__pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: hsl(214, 13%, 20%);
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #eee;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+}
+.docs-page__code-window {
+    border: 1px solid hsla(0, 0%, 48%, 0.2);
+    border-radius: var(--b-radius--large);
+    margin: 10px 0 20px;
+    -webkit-box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
+    box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
+}
+.docs-page__window-bar {
+    padding: 10px;
+    border-top: 1px solid var(--docs-page-border__window-bar--top);
+    border-bottom: 1px solid var(--docs-page-border__window-bar--bottom);
+    background: var(--docs-page-color-bg__window-bar);
+    border-radius: var(--b-radius--large) var(--b-radius--large) 0 0;
+}
+.docs-page__window-bar > a,
+.docs-page__window-bar > span {
+    font-size: 16px;
+    color: #999;
+    padding: 0 4px;
+    text-decoration: none;
+}
+.docs-page__window-bar > a.active {
+    color: #5eadc8;
+}
+.docs-page__code--large {
+    font-size: 1.5rem;
+    color: #555;
+    font-family: 'Source Code Pro', monospace;
+    line-height: 150%;
+    font-weight: 400;
+}
+.docs-page__code-example {
+    padding: 20px;
+}
+.docs-page__code-example--grey {
+    background-color: #f8f8f8;
+}
+.docs-page__code-example .docs-page__content-block {
+    margin-bottom: 20px;
+}
+.docs-page__code-example .docs-page__content-row > .btn,
+.docs-page__code-example .docs-page__content-row > .label,
+.docs-page__code-example .docs-page__content-row > .badge,
+.docs-page__code-example .docs-page__content-row > .label-icon {
+    margin-right: 12px;
+    margin-bottom: 14px;
+}
+
+.docs-page__content-row {
+    margin-bottom: 20px;
+}
+.docs-page__content-row--no-margin {
+    margin-bottom: 0;
+}
+.docs-page__content-row--ui-dark,
+.docs-page__content-row--white {
+    background: #3b3b3b;
+    padding: 8px;
+    border-radius: 4px;
+}
+.docs-page__content-row--white {
+    background: var(--docs-page-color-bg__content-row--white);
+}
+.docs-page__content-row--gray {
+    background: var(--docs-page-color-bg__content-row--grey);
+    padding: 10px;
+}
+.docs-page__code-markup {
+    display: none;
+    background-color: hsl(214, 13%, 10%);
+    padding: 16px 16px 16px 36px;
+    overflow-y: scroll;
+    border-radius: 0 0 var(--b-radius--large) var(--b-radius--large);
+}
+.docs-page__code-markup ol {
+    margin-left: 10px;
+}
+
+pre.prettyprint {
+    font-family: 'Source Code Pro', monospace;
+    font-size: 14px;
+    line-height: 150%;
+    font-weight: 300;
+}
+
+.docs-page__paragraph code {
+    font-size: 85%;
+    padding: 0 0.4em;
+    background-color: var(--sd-colour-interactive--alpha-20);
+    border-radius: 3px;
+    font-family: 'Source Code Pro', monospace;
+    font-weight: 400;
+    line-height: inherit;
+    vertical-align: baseline;
+    color: var(--color-text);
+}
+
+.docs-page__unordered-list {
+    font-size: 16px;
+    margin: 1em 0 2em;
+    line-height: 150%;
+    font-weight: 300;
+}
+.docs-page__unordered-list li {
+    list-style-type: disc;
+    margin-bottom: 0.25em;
+    margin-left: 1.5em;
+}
+.docs-page__unordered-list--plain {
+    font-weight: 300;
+}
+.docs-page__unordered-list--plain li {
+    font-weight: 300;
+    list-style-type: none;
+    margin-left: 0;
+}
+
+.docs-page__code-example .flex-grid .flex-grid__item,
+.docs-page__code-example .grid .grid__item {
+    background-color: #fff;
+    min-height: 60px;
+    border: 1px dotted rgba(0, 0, 0, 0.2);
+}
+.docs-page__code-example .grid.grid--boxed .grid__item {
+    background-color: transparent;
+}
+.docs-page__code-example .grid.grid--boxed.grid--boxed-styled .grid__item {
+    background-color: #fff;
+}
+.docs-page__code-example .grid .grid .grid__item {
+    border: 1px dotted #5eadc8;
+}
+.docs-page__code-example .flex-grid .flex-grid__item {
+    padding: 20px;
+}
+.docs-page__code-example .flex-grid.flex-grid--boxed .flex-grid__item {
+    background-color: var(--docs-page-color-bg-10) !important;
+    border: none;
+    border-radius: 2px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
+}
+.docs-page__icon-font-list {
+    margin: 40px auto 20px;
+    max-width: 1200px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    transition: all 0.2s ease;
+}
+.docs-page__icon-font-list li {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px 0;
+    margin: 0 24px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    transition: all 0.2s ease-in-out;
+}
+.docs-page__icon-font-list li:hover {
+    box-shadow:
+        0 0 0 1px var(--sd-shadow-outline),
+        0 1px 2px hsla(0, 0%, 0%, 0.12),
+        0 1px 6px hsla(0, 0%, 0%, 0.24);
+}
+
+.docs-page__icon-font-list li i {
+    margin-bottom: 8px;
+}
+
+.docs-page__container {
+    max-width: 1200px;
+    margin: 30px auto 0;
+}
+.docs-page__container--large {
+    max-width: 1200px;
+}
+.docs-page__container--medium {
+    max-width: 1000px;
+}
+.docs-page__container--full-h {
+    height: calc(100vh - 64px);
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.docs-page__container .docs-page__code-window {
+    max-width: none !important;
+}
+
+.docs-page__container .docs-page__h2,
+.docs-page__container .docs-page__h3,
+.docs-page__container .docs-page__paragraph,
+.docs-page__container .docs-page__paragraph--small {
+    max-width: 85ch;
+}
+
+.docs-page__content-block {
+    display: flex;
+    flex-direction: row;
+    margin: 0 -16px;
+}
+.docs-page__content-block + .docs-page__content-block {
+    margin-top: 32px;
+}
+.docs-page__content-block-item {
+    flex: 1 1;
+    margin: 0 16px;
+}
+/* .docs-page__figure {
+
+} */
+.docs-page__figure-media {
+    width: 100%;
+    background: #f8f8f8;
+    border: 1px solid #cccccc;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+}
+.docs-page__figure-media img {
+    max-width: 100%;
+    display: block;
+}
+.docs-page__figure-media--light {
+    background: #fff;
+}
+.docs-page__figure-caption {
+    font-size: 14px;
+    margin-top: 12px;
+    line-height: 150%;
+}
+.docs-page__caption-heading {
+    border-top: 6px solid;
+    font-size: 15px;
+    font-weight: 500;
+    margin: 0;
+    max-width: 100%;
+    padding: 6px 0 6px 8px;
+    margin-bottom: 12px;
+    line-height: 120%;
+}
+.docs-page__caption-heading--do {
+    border-color: rgba(68, 165, 72, 1);
+    color: rgb(47, 134, 51);
+    background-color: rgba(68, 165, 72, 0.1);
+}
+.docs-page__caption-heading--dont {
+    border-color: rgba(222, 44, 44, 1);
+    color: rgb(197, 38, 38);
+    background-color: rgba(222, 44, 44, 0.1);
+}
+.docs-page__caption-heading--caution {
+    border-color: rgba(241, 162, 36, 1);
+    color: rgb(225, 150, 25);
+    background-color: rgba(241, 162, 36, 0.1);
+}
+
+.docs-page__text-align--center {
+    text-align: center;
+    margin-right: auto !important;
+    margin-left: auto !important;
+}
+
+.docs-page__icon-font-list li span {
+    font-size: 13px;
+    text-align: center;
+    color: #747474;
+}
+
+.docs-page__icon-font-list--dark {
+    background: #666;
+    color: lightgray !important;
+}
+.docs-page__icon-font-list--dark span {
+    color: lightgray !important;
+}
+
+.docs-page__playground_picker {
+    text-align: end;
+}
+
+.docs-page__playground_picker .dropdown__toggle {
+    color: white !important;
+    letter-spacing: 0.02em;
+}
+
+.docs-page__playground_picker .dropdown__toggle .dropdown__caret {
+    border-top-color: #fff !important;
+}
+
+[react-playground] {
+    grid-column: 2/3;
+}
+
+.docs-page__grid-page-example {
+    position: relative;
+    min-height: 600px;
+    background-color: var(--sd-colour-background__main-list);
+    overflow: hidden;
+    border: 1px solid var(--color-border-line--light);
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: auto 1fr;
+}
+.docs-page__grid-page-example__top {
+    grid-row: 1/2;
+    grid-column: 1/3;
+}
+.docs-page__grid-page-example__top .sd-top-menu {
+    position: static !important;
+}
+.docs-page__grid-page-example__side {
+    grid-row: 2/3;
+    grid-column: 1/2;
+}
+.docs-page__grid-page-example__main {
+    grid-row: 2/3;
+    grid-column: 2/3;
+}
+
+#scrollContainer {
+    overflow: scroll;
+    scroll-behavior: smooth;
+}
+
+/* ---------------- COLOR SWATCHES ---------------- */
+
+.doc-swatches__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    grid-column-gap: 1.6rem;
+    grid-row-gap: 2.4rem;
+    margin: 0;
+}
+
+.doc-swatches__wrapper {
+    flex: auto;
+}
+
+.doc-swatches__title {
+    padding: 6px 12px;
+    margin-bottom: 4px;
+    text-transform: capitalize;
+}
+
+.doc-swatches__title h3 {
+    font-size: 14px;
+    font-weight: 400;
+    font-family: 'Merriweather', serif;
+    letter-spacing: 0.02em;
+    margin: 0;
+    color: #fff;
+}
+
+.doc-swatches__swatch-item:nth-child(n + 7) {
+    color: #fff;
+}
+
+.doc-swatches__swatch-item {
+    padding: 6px 12px;
+    display: block;
+    font-size: 12px;
+    letter-spacing: 0.06em;
+}
+
+.docs-page__example-box {
+    background-color: var(--docs-page-color-bg__example-box);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 16rem;
+    border-radius: 4px;
+}
+.docs-page__example-box p {
+    text-align: center;
+    color: #969696;
+    font-size: 1.6rem;
+    font-weight: 300;
+    margin: 0;
+}
+
+.docs-page__full-width-helper {
+    /* helps to override some docs page containers in full width layouts */
+    width: 100vw;
+}
+
+.docs-page__paragraph--light {
+    font-size: 15px;
+    font-weight: 300;
+    line-height: 150%;
+    color: var(--color-text-light);
+}
+.docs-page__color--primary {
+    color: var(--docs-page-color-primary) !important;
+}
+.docs-page__color--highlight {
+    color: var(--docs-page-color-highlight) !important;
+}
+
+.docs-page__test-helper {
+    padding: 4px !important;
+    border: 1px dashed rgba(255, 0, 255, 0.4);
+    border-radius: 2px;
+}
+
+.docs-page__test-helper-2 {
+    padding: 4px !important;
+    border: 1px dashed rgba(100, 100, 100, 0.3);
+    border-radius: 2px;
+}
+
+doc-gif-img:hover img {
+    cursor: pointer;
+}
+
+.docs-page__container table {
+    margin-bottom: 32px;
+    border-color: var(--docs-page-border__table) !important;
+}
+.docs-page__container table th,
+.docs-page__container table td {
+    border-color: var(--docs-page-border__table) !important;
+}
+
+.docs-page__container table:not(.utilities-table) tr td:nth-child(3) {
+    white-space: nowrap;
+}
+
+.docs-page__container table:not(.utilities-table) tr:nth-child(even),
+.docs-page__container table:not(.utilities-table) thead tr {
+    background-color: var(--docs-page-bg__table-tr-even);
+}
+
+.docs-page__container table.utilities-table {
+    width: 100%;
+    border-block-start: none !important;
+    margin: 0;
+    font-size: 14px;
+}
+.docs-page__container table.utilities-table thead th {
+    font-size: 14px;
+    position: sticky;
+    top: 0;
+    background-color: var(--docs-page-color-bg-00);
+    border-bottom:;
+}
+
+.docs-page__container table.utilities-table tbody td {
+    width: 100%;
+    font-family: monospace;
+    line-height: 1.4;
+    color: var(--color-text-light);
+}
+.docs-page__container table.utilities-table tbody td:first-child {
+    min-width: 280px;
+    width: auto;
+    color: var(--color-text);
+}
+.docs-page__container table.utilities-table tbody td:nth-child(3) {
+    min-width: 200px;
+    width: auto;
+    text-align: end;
+    padding-inline-end: var(--space--1-5);
+    font-weight: 700;
+}
+
+.docs-page__container table.utilities-table tbody tr.utilities-table__divider-row td {
+    color: var(--color-text);
+    font-family: 'Roboto', sans-serif;
+    font-size: 13px;
+    letter-spacing: 0.025em;
+    font-weight: 500;
+    padding-block: 8px !important;
+    background-color: var(--docs-page-color-bg__table-divider-row);
+}
+
+.utilities-table__container {
+    position: relative;
+    max-height: 438px;
+    overflow-y: auto;
+    border-block-start: 1px solid var(--sd-colour-line--medium);
+    margin-block-end: var(--space--4);
+}
+
+.utilities-table__container--no-height {
+    max-height: none;
+}
+
+.docs-page__container .doc-text--highlight {
+    color: var(--docs-page-color-primary) !important;
+}
+
+table.utilities-table td .border-example-box {
+    min-width: 160px;
+    height: 32px;
+}
+
+/* -------------- END COLOR SWATCHES -------------- */
+/* -------------- PrismJS overrides -------------- */
+
+code[class*='language-'],
+pre[class*='language-'] {
+    font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1.1em;
+    border-radius: var(--b-radius--large);
+}
+pre[class*='language-'] {
+    background: hsl(214, 13%, 8%);
+}
+
+/*// extra large screen media query /100em = 1600px/*/
+@media only screen and (min-width: 100em) {
+    .docs-page__section {
+        max-width: 80%;
+    }
+}
+
+/* -------------- DOC PAGE SPECIFIC OVERRIDES -------------- */
+
+doc-react-playground {
+    display: contents;
+}
+
+.docs-page doc-react-playground .sd-main-content-grid {
+    grid-column: 2 / 3;
+    overflow: auto;
+}
+
+.docs-page .sd-editor-grid {
+    grid-row: 2 / 3;
+    grid-column: 2 / 3;
+    overflow-y: auto;
+}
+.docs-page doc-react-playground .sd-editor-grid {
+    grid-row: 2 / 3;
+    grid-column: 2 / 3;
+    overflow-y: auto;
+}
+
+/* ------------ END DOC PAGE SPECIFIC OVERRIDES ------------ */