superdesk-ui-framework 6.1.0-dev1 → 7.0.0-dev-hg0

package/app/styles/_helpers.scss

@@ -1,2220 +0,0 @@
-@use "mixins";
-@use "variables/colors";
-@use "variables/dimensions";
-@use "variables/typography";
-
-.pull-left {
-    float: inline-start;
-}
-
-.pull-right {
-    float: inline-end;
-}
-
-.clearfix {
-    @include mixins.clearfix();
-}
-
-.no-padding {
-    padding: 0 !important;
-}
-
-.no-margin {
-    margin: 0 !important;
-}
-
-.no-border {
-    border: 0 !important;
-}
-
-.no-line-height {
-    line-height: 0 !important;
-}
-
-.cursor-pointer {
-    cursor: pointer;
-}
-
-
-// WEBKIT SCROLL
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-    margin: -1px 0;
-    position: fixed;
-    inset-inline-end: 10px;
-}
-
-::-webkit-scrollbar:hover {
-    background-color: var(--sd-colour__webkit-scrollbar--hover);
-    cursor: pointer;
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--sd-colour__webkit-scrollbar-thumb);
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--sd-colour__webkit-scrollbar-thumb--hover);
-    cursor: pointer;
-}
-
-// HEADINGS
-.sd-heading-3 {
-    font-size: 1.6rem;
-    margin-block-end: 1.6rem;
-}
-
-// Deafult text syles based on type of data
-p strong {
-    font-weight: 500;
-}
-
-time {
-    color: colors.$sd-text-light;
-    font-weight: 400;
-    letter-spacing: .025em;
-
-    &.small {
-        font-size: calc(100% - 0.1rem);
-    }
-}
-
-// TYPOGRAPHY HELPERS
-// -------------------------------------------------
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    margin: 0;
-}
-
-.sd-heading {
-    margin: 0;
-}
-
-.sd-heading--h1 {
-    font-size: calc(var(--text-size--base) * 2.4);
-    font-weight: 400;
-}
-
-.sd-heading--h2 {
-    font-size: calc(var(--text-size--base) * 2);
-    font-weight: 500;
-}
-
-.sd-heading--h3 {
-    font-size: calc(var(--text-size--base) * 1.6);
-    font-weight: 400;
-}
-
-.sd-heading--h4 {
-    font-size: calc(var(--text-size--base) * 1.5);
-    font-weight: 500;
-}
-
-.sd-heading--h5 {
-    font-size: calc(var(--text-size--base) * 1.4);
-    font-weight: 500;
-}
-
-.sd-heading--h6 {
-    font-size: calc(var(--text-size--base) * 1.2);
-    font-weight: 500;
-    text-transform: uppercase;
-    color: var(--color-text-muted);
-    letter-spacing: 0.06em;
-
-}
-
-.sd-text {
-    font-size: 1.4rem;
-    line-height: 1.4;
-}
-
-.sd-time {
-    font-size: 1.2rem;
-    display: inline-block;
-    color: var(--color-text-muted);
-    letter-spacing: 0.025em;
-}
-
-// Superdesk specific text helpers
-.sd-text__slugline {
-    color: colors.$sd-slugline;
-    font-weight: 500;
-    font-size: 1.2rem;
-    text-transform: uppercase;
-    margin-inline-end: 1rem;
-}
-
-.sd-text__title {
-    color: inherit;
-    font-weight: 500;
-    font-size: 1.6rem;
-    line-height: 1.4;
-}
-
-.sd-text__date-time {
-    color: var(--color-text-muted);
-    font-weight: 400;
-    letter-spacing: .025em;
-}
-
-.sd-text__date-time--small {
-    font-size: 1.2rem;
-}
-
-.sd-text__date-and-author {
-    font-size: 1.3rem;
-}
-
-.sd-text__author {
-    font-weight: 500;
-}
-
-.sd-text__info {
-    font-weight: 300;
-    color: var(--color-text-muted);
-}
-
-.sd-text-icon {
-    display: inline-flex;
-
-    i {
-        margin-inline-end: 0.3rem;
-    }
-}
-
-.sd-text-icon+.sd-text-icon {
-    margin-inline-end: 1rem;
-}
-
-.sd-text-icon.sd-text-icon--aligned-r+.sd-text-icon.sd-text-icon--aligned-r {
-    margin-inline-end: 0;
-    margin-inline-start: 1rem;
-}
-
-
-// padding all  (KILL THIS AFTER REFACTORING)
-.sd-padding-all--0 {
-    padding: 0 !important;
-}
-
-.sd-padding-all--0-5 {
-    padding: dimensions.$sd-base-increment * 0.5 !important;
-}
-
-.sd-padding-all--1 {
-    padding: dimensions.$sd-base-increment !important;
-}
-
-.sd-padding-all--1-5 {
-    padding: dimensions.$sd-base-increment * 1.5 !important;
-}
-
-.sd-padding-all--2 {
-    padding: dimensions.$sd-base-increment * 2 !important;
-}
-
-.sd-padding-all--3 {
-    padding: dimensions.$sd-base-increment * 3 !important;
-}
-
-// margin all (KILL THIS AFTER REFACTORING)
-.sd-margin-all--0 {
-    margin: 0 !important;
-}
-
-.sd-margin-all--0-5 {
-    margin: dimensions.$sd-base-increment * 0.5 !important;
-}
-
-.sd-margin-all--1 {
-    margin: dimensions.$sd-base-increment * 1 !important;
-}
-
-.sd-margin-all--1-5 {
-    margin: dimensions.$sd-base-increment * 1.5 !important;
-}
-
-.sd-margin-all--2 {
-    margin: dimensions.$sd-base-increment * 2 !important;
-}
-
-.sd-margin-all--3 {
-    margin: dimensions.$sd-base-increment * 3 !important;
-}
-
-
-.sd-wrap-helper {
-    display: contents !important;
-}
-
-.sd-accessibility__btn-text--invisible,
-.sd-accessibility__screenreader-text {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    font-size: 0.1rem;
-    color: transparent !important;
-    pointer-events: none;
-}
-
-// remove this after refactoring
-.overflow-auto {
-    overflow: auto !important;
-}
-
-.overflow-hidden {
-    overflow: hidden !important;
-}
-
-.overflow-x-hidden {
-    overflow-x: hidden !important;
-}
-
-.sd-d-none {
-    display: none !important;
-}
-
-.sd-d-inline {
-    display: inline !important;
-}
-
-.sd-d-inline-block {
-    display: inline-block !important;
-}
-
-.sd-d-block {
-    display: block !important;
-}
-
-.sd-d-flex {
-    display: flex !important;
-}
-
-.sd-d-inline-flex {
-    display: inline-flex !important;
-}
-
-.sd-display-flex-column {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-
-.sd-flex-wrap {
-    flex-wrap: wrap;
-}
-
-.sd-flex-shrink {
-    flex-shrink: 1 !important;
-}
-
-.sd-flex-no-shrink {
-    flex-shrink: 0 !important;
-}
-
-.sd-flex-justify-end {
-    justify-content: flex-end !important;
-}
-
-.sd-flex-justify-start {
-    justify-content: flex-start !important;
-}
-
-.sd-flex-justify-center {
-    justify-content: center !important;
-}
-
-.sd-flex-justify-space-between {
-    justify-content: space-between !important;
-}
-
-.sd-flex-align-items-center {
-    align-items: center !important;
-}
-
-.sd-flex-grow {
-    flex-grow: 1 !important;
-}
-
-.sd-flex-no-grow {
-    flex-grow: 0 !important;
-}
-
-.sd-no-wrap {
-    white-space: nowrap;
-}
-
-// FONT FAMILY (DEPRECATED)
-.sd-text__serif,
-.sd-text--serif {
-    font-family: typography.$baseFontFamilySerif;
-}
-.sd-text--sans {
-    font-family: typography.$baseFontFamily;
-}
-.sd-text--mono {
-    font-family: typography.$baseFontFamilyMono;
-}
-
-// FONT FAMILY VARIABLES -------------------------------------------------------------------------
-// Use these utility classes to change the font family of the text. Useful for overriding the font family of the text.
-.font-primary {
-    font-family: var(--font-primary);
-}
-.font-secondary {
-    font-family: var(--font-secondary);
-}
-.font-mono {
-    font-family: var(--font-mono);
-}
-.font-alt {
-    font-family: var(--font-alt);
-}
-
-
-
-// WHITESPACE
-.sd-whitespace--normal,
-.whitespace-normal {
-    white-space: normal;
-}
-.sd-whitespace--nowrap,
-.whitespace-nowrap {
-    white-space: nowrap;
-}
-.sd-whitespace--pre,
-.whitespace-pre {
-    white-space: pre;
-}
-.sd-whitespace--pre-line,
-.whitespace-pre-line {
-    white-space: pre-line;
-}
-.sd-whitespace--pre-wrap,
-.whitespace-pre-wrap {
-    white-space: pre-wrap;
-}
-.whitespace-break-spaces {
-    white-space: break-spaces;
-}
-
-
-// ==================================================== //
-
-// Background colours
-.sd-panel-bg--100 {
-    background-color: var(--sd-colour-panel-bg--100);
-}
-
-.sd-panel-bg--000 {
-    background-color: var(--sd-item__main-Bg);
-}
-
-.sd-panel-bg--gradient-1 {
-    background-color: var(--sd-item__main-Bg);
-    background: linear-gradient(180deg, var(--sd-colour-interactive--alpha-20) 0%, var(--sd-item__main-Bg) 40%);
-}
-
-.sd-state--focus:focus-within,
-.sd-state--active {
-    box-shadow: var(--sd-shadow__item--selected) !important;
-    transition: box-shadow 0.3s ease, filter 0.3s ease;
-}
-
-.sd-width--xxx-small {
-    width: var(--width__container--xxx-small) !important;
-}
-
-.sd-width--xx-small {
-    width: var(--width__container--xx-small);
-}
-
-.sd-width--x-small {
-    width: var(--width__container--x-small);
-}
-
-.sd-width--small {
-    width: var(--width__container--small);
-}
-
-.sd-width--medium {
-    width: var(--width__container--medium);
-}
-
-.sd-width--large {
-    width: var(--width__container--large);
-}
-
-.sd-width--x-large {
-    width: var(--width__container--x-large);
-}
-
-.sd-width--xx-large {
-    width: var(--width__container--xx-large);
-}
-
-.sd-width--xxx-large {
-    width: var(--width__container--xxx-large);
-}
-
-.sd-width--full {
-    width: var(--width__container--full);
-}
-
-.sd-gap--x-small {
-    gap: var(--gap--x-small);
-}
-
-.sd-gap--small {
-    gap: var(--gap--small);
-}
-
-.sd-gap--medium {
-    gap: var(--gap--medium);
-}
-
-.sd-gap--large {
-    gap: var(--gap--large);
-}
-
-.sd-gap--x-large {
-    gap: var(--gap--x-large);
-}
-
-.sd-gap--xx-large {
-    gap: var(--gap--xx-large);
-}
-
-.sd-gap--auto {
-    gap: var(--gap--auto);
-}
-
-// MAX-HEIGHT:
-
-.max-h-5 {
-    max-height: calc(5 * var(--base-increment)) !important;
-}
-.max-h-6 {
-    max-height: calc(6 * var(--base-increment)) !important;
-}
-.max-h-8 {
-    max-height: calc(8 * var(--base-increment)) !important;
-}
-.max-h-10 {
-    max-height: calc(10 * var(--base-increment)) !important;
-}
-.max-h-15 {
-    max-height: calc(15 * var(--base-increment)) !important;
-}
-.max-h-20 {
-    max-height: calc(20 * var(--base-increment)) !important;
-}
-.max-h-25 {
-    max-height: calc(25 * var(--base-increment)) !important;
-}
-.max-h-30 {
-    max-height: calc(30 * var(--base-increment)) !important;
-}
-
-.max-h-full {
-    max-height: 100%;
-}
-.max-h-screen {
-    max-height: 100svh;
-}
-
-
-
-// Hide if empty
-.sd-empty:empty,
-.empty-hidden:empty {
-    display: none !important;
-}
-
-
-// ================================================================================================
-// DOCUMENTED UTILITY CLASSES 
-// ================================================================================================
-
-// DISPLAY HELPERS --------------------------------------------------------------------------------
-// Use classes with the form '.d-block' etc., others will be deprecated
-.sd-display--block,
-.d-block {
-    display: block !important;
-}
-.sd-display--inline-block,
-.d-inline-block {
-    display: inline-block !important;
-}
-.sd-display--inline,
-.d-inline {
-    display: inline !important;
-}
-.sd-display--flex,
-.d-flex  {
-    display: flex !important;
-}
-.sd-display--inline-flex,
-.d-inline-flex  {
-    display: inline-flex !important;
-}
-.d-grid  {
-    display: grid !important;
-}
-.d-inline-grid  {
-    display: grid !important;
-}
-.sd-display--contents, // Browser ignores this element from the flow. se it to wrap other elements without breaking the layout (e.g. flex or grid)
-.d-contents {
-    display: contents !important;
-}
-.sd-display--none,
-.d-none {
-    display: none !important;
-}
-.d-flow-root {
-    display: flow-root !important;
-}
-.d-list-item {
-    display: list-item !important;
-}
-// Display Table
-.sd-display--table,
-.d-table {
-    display: table;
-}
-.d-inline-table {
-    display: table;
-}
-.sd-display--table-caption,
-.d-table-caption {
-    display: table-caption;
-}
-.sd-display--table-cell,
-.d-table-cell {
-    display: table-cell;
-}
-.sd-display--table-column,
-.d-table-column {
-    display: table-column;
-}
-.sd-display--table-column-group,
-.d-table-column-group {
-    display: table-column-group;
-}
-.sd-display--table-footer-group,
-.d-table-footer-group {
-    display: table-footer-group;
-}
-.sd-display--table-header-group,
-.d-table-header-group {
-    display: table-header-group;
-}
-.sd-display--table-row,
-.d-table-row {
-    display: table-row;
-}
-.sd-display--table-row-group,
-.d-table-row-group {
-    display: table-row-group;
-}
-
-// FLEXBOX & GRID PROPERTIES ----------------------------------------------------------------------
-// Flex direction
-.sd-flex--direction-row,
-.flex-row {
-    flex-direction: row !important;
-}
-.sd-flex--direction-col,
-.flex-col {
-    flex-direction: column !important;
-}
-.sd-flex--direction-row-reverse,
-.flex-row-reverse {
-    flex-direction: row-reverse !important;
-}
-.sd-flex--direction-col-reverse,
-.flex-col-reverse {
-    flex-direction: column-reverse !important;
-}
-// Flex wrap
-.sd-flex--wrap,
-.flex-wrap {
-    flex-wrap: wrap;
-}
-.sd-flex--wrap-reverse,
-.flex-wrap-reverse {
-    flex-wrap: wrap-reverse;
-}
-.sd-flex--nowrap,
-.flex-nowrap {
-    flex-wrap: nowrap;
-}
-// Flex flex
-.sd-flex--flex-1,
-.flex-1 {
-    flex: 1 1 0%;
-}
-.sd-flex--flex-auto,
-.flex-auto  {
-    flex: 1 1 auto;
-}
-.sd-flex--flex-initial,
-.flex-initial  {
-    flex: 0 1 auto;
-}
-.sd-flex--flex-none,
-.flex-none {
-    flex: none;
-}
-// Flex grow & shrink
-.sd-flex--grow,
-.flex-grow {
-    flex-grow: 1 !important;
-}
-.sd-flex--grow-0,
-.flex-grow-0 {
-    flex-grow: 0 !important;
-}
-.sd-flex--shrink,
-.flex-shrink {
-    flex-shrink: 1 !important;
-}
-.sd-flex--shrink-0,
-.flex-shrink-0 {
-    flex-shrink: 0 !important;
-}
-// Flex justify content
-.sd-flex--justify-start,
-.justify-start {
-    justify-content: flex-start !important;
-}
-.sd-flex--justify-end,
-.justify-end {
-    justify-content: flex-end !important;
-}
-.sd-flex--justify-center,
-.justify-center {
-    justify-content: center !important;
-}
-.sd-flex--justify-between,
-.justify-between {
-    justify-content: space-between !important;
-}
-.sd-flex--justify-around,
-.justify-around {
-    justify-content: space-around !important;
-}
-.sd-flex--justify-evenly,
-.justify-evenly {
-    justify-content: space-evenly !important;
-}
-.justify-normal {
-    justify-content: normal !important;
-}
-.justify-stretch {
-    justify-content: stretch !important;
-}
-// Flex align items
-.sd-flex--items-start,
-.items-start {
-    align-items: flex-start !important;
-}
-.sd-flex--items-end,
-.items-end {
-    align-items: flex-end !important;
-}
-.sd-flex--items-center,
-.items-center  {
-    align-items: center !important;
-}
-.sd-flex--items-baseline,
-.items-baseline  {
-    align-items: baseline !important;
-}
-.sd-flex--items-stretch,
-.items-stretch {
-    align-items: stretch !important;
-}
-// Grid Justify Items
-.justify-items-start {
-    justify-items: start;
-}
-.justify-items-end {
-    justify-items: end;
-}
-.justify-items-center  {
-    justify-items: center;
-}
-.justify-items-stretch  {
-    justify-items: stretch;
-}
-// Flex & Grid Align Content
-.content-normal {
-    align-content: normal;
-}
-.content-center {
-    align-content: center;
-}
-.content-start {
-    align-content: start;
-}
-.content-end {
-    align-content: end;
-}
-.content-between {
-    align-content: space-between;
-}
-.content-around {
-    align-content: space-around;
-}
-.content-evenly {
-    align-content: space-evenly;
-}
-.content-baseline {
-    align-content: baseline;
-}
-.content-stretch {
-    align-content: stretch;
-}
-// Flex & Grid Align Self
-.self-auto {
-    align-self: auto;
-}
-.self-start {
-    align-self: flex-start;
-}
-.self-end {
-    align-self: flex-end;
-}
-.self-center {
-    align-self: center;
-}
-.self-stretch {
-    align-self: stretch;
-}
-.self-baseline {
-    align-self: baseline;
-}
-// Grid Justify Self
-.justify-self-auto {
-    justify-self: auto;
-}
-.justify-self-start {
-    justify-self: start;
-}
-.justify-self-end {
-    justify-self: end;
-}
-.justify-self-center {
-    justify-self: center;
-}
-.justify-self-stretch {
-    justify-self: stretch;
-}
-// Place Content
-.place-content-center {
-    place-content: center;
-}
-.place-content-start {
-    place-content: start;
-}
-.place-content-end {
-    place-content: end;
-}
-.place-content-between {
-    place-content: space-between;
-}
-.place-content-around {
-    place-content: space-around;
-}
-.place-content-evenly {
-    place-content: space-evenly;
-}
-.place-content-baseline {
-    place-content: baseline;
-}
-.place-content-stretch {
-    place-content: stretch;
-}
-// Place Items
-.place-items-start {
-    place-items: start;
-}
-.place-items-end {
-    place-items: end;
-}
-.place-items-center {
-    place-items: center;
-}
-.place-items-baseline {
-    place-items: baseline;
-}
-.place-items-stretch {
-    place-items: stretch;
-}
-// Place Self
-.place-self-auto {
-    place-self: auto;
-}
-.place-self-start {
-    place-self: start;
-}
-.place-self-end {
-    place-self: end;
-}
-.place-self-center {
-    place-self: center;
-}
-.place-self-stretch {
-    place-self: stretch;
-}
-
-// POSITION HELPERS -------------------------------------------------------------------------------
-.sd-position--static,
-.p-static  {
-    position: static;
-}
-
-.sd-position--fixed,
-.p-fixed {
-    position: fixed;
-}
-
-.sd-position--relative,
-.p-relative {
-    position: relative;
-}
-
-.sd-position--absolute,
-.p-absolute {
-    position: absolute;
-}
-
-.sd-position--sticky,
-.p-sticky {
-    position: sticky;
-}
-
-// INSET ------------------------------------------------------------------------------------------
-.inset-0 {
-    inset: 0;
-}
-.inset-0-5 {
-    inset: var(--space--0-5);
-}
-.inset-1 {
-    inset: var(--space--1);
-}
-.inset-1-5 {
-    inset: var(--space--1-5);
-}
-.inset-2 {
-    inset: var(--space--2);
-}
-.inset-3 {
-    inset: var(--space--3);
-}
-.inset-auto {
-    inset: auto;
-}
-.inset-x-auto {
-    inset-inline-start: auto;
-    inset-inline-end: auto;
-}
-.inset-y-auto {
-    inset-block-start: auto;
-    inset-block-end: auto;
-}
-.inset-x-0 {
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-}
-.inset-y-0 {
-    inset-block-start: 0;
-    inset-block-end: 0;
-}
-.inset-x-auto {
-    inset-inline-start: auto;
-    inset-inline-end: auto;
-}
-.inset-y-auto {
-    inset-block-start: auto;
-    inset-block-end: auto;
-}
-.inset-x-1 {
-    inset-inline-start: var(--space--1);
-    inset-inline-end: var(--space--1);
-}
-.inset-y-1 {
-    inset-block-start: var(--space--1);
-    inset-block-end: var(--space--1);
-}
-.inset-x-1-5 {
-    inset-inline-start: var(--space--1-5);
-    inset-inline-end: var(--space--1-5);
-}
-.inset-y-1-5 {
-    inset-block-start: var(--space--1-5);
-    inset-block-end: var(--space--1-5);
-}
-.inset-x-2 {
-    inset-inline-start: var(--space--2);
-    inset-inline-end: var(--space--2);
-}
-.inset-y-2 {
-    inset-block-start: var(--space--2);
-    inset-block-end: var(--space--2);
-}
-.top-0 {
-    inset-block-start: var(--space--0);
-}
-.top-0-5 {
-    inset-block-start: var(--space--0-5);
-}
-.top-1 {
-    inset-block-start: var(--space--1);
-}
-.top-1-5 {
-    inset-block-start: var(--space--1-5);
-}
-.top-2 {
-    inset-block-start: var(--space--2);
-}
-
-.bottom-0 {
-    inset-inline-end: var(--space--0);
-}
-.bottom-0-5 {
-    inset-inline-end: var(--space--0-5);
-}
-.bottom-1 {
-    inset-inline-end: var(--space--1);
-}
-.bottom-1-5 {
-    inset-inline-end: var(--space--1-5);
-}
-.bottom-2 {
-    inset-inline-end: var(--space--2);
-}
-.start-0 {
-    inset-inline-start: var(--space--0);
-}
-.start-0-5 {
-    inset-inline-start: var(--space--0-5);
-}
-.start-1 {
-    inset-inline-start: var(--space--1);
-}
-.start-1-5 {
-    inset-inline-start: var(--space--1-5);
-}
-.start-2 {
-    inset-inline-start: var(--space--2);
-}
-.end-0 {
-    inset-inline-end: var(--space--0);
-}
-.end-0-5 {
-    inset-inline-end: var(--space--0-5);
-}
-.end-1 {
-    inset-inline-end: var(--space--1);
-}
-.end-1-5 {
-    inset-inline-end: var(--space--1-5);
-}
-.end-2 {
-    inset-inline-end: var(--space--2);
-}
-
-
-// OVERFLOW HELPERS -------------------------------------------------------------------------------
-.sd-overflow--auto,
-.overflow-auto {
-    overflow: auto !important;
-}
-.sd-overflow--hidden,
-.overflow-hidden {
-    overflow: hidden !important;
-}
-.sd-overflow--visible,
-.overflow-visible {
-    overflow: visible !important;
-}
-.sd-overflow--scroll,
-.overflow-scroll {
-    overflow: scroll !important;
-}
-.sd-overflow--x-auto,
-.overflow-x-auto  {
-    overflow-x: auto !important;
-}
-.sd-overflow--y-auto,
-.overflow-y-auto  {
-    overflow-y: auto !important;
-}
-.sd-overflow--x-hidden,
-.overflow-x-hidden {
-    overflow-x: hidden !important;
-}
-.sd-overflow--y-hidden,
-.overflow-y-hidden {
-    overflow-y: hidden !important;
-}
-.sd-overflow--x-visible,
-.overflow-x-visible {
-    overflow-x: visible !important;
-}
-.sd-overflow--y-visible,
-.overflow-y-visible {
-    overflow-y: visible !important;
-}
-.sd-overflow--x-scroll,
-.overflow-x-scroll {
-    overflow-x: scroll !important;
-}
-.sd-overflow--y-scroll,
-.overflow-y-scroll {
-    overflow-y: scroll !important;
-}
-.overflow-clip {
-    overflow: clip !important;
-}
-.overflow-x-clip {
-    overflow-x: clip !important;
-}
-.overflow-y-clip {
-    overflow-y: clip !important;
-}
-
-// SHADOW HELPER CLASSES --------------------------------------------------------------------------
-.sd-shadow--z1 {
-    box-shadow: var(--sd-shadow--z1);
-}
-.sd-shadow--z2 {
-    box-shadow: var(--sd-shadow--z2);  
-}
-.sd-shadow--z3 {
-    box-shadow: var(--sd-shadow--z3);
-}
-.sd-shadow--z4 {
-    box-shadow: var(--sd-shadow--z4);
-}
-.sd-shadow--none {
-    box-shadow: none;
-}
-// Uses the drop-shadow filter property
-.sd-drop-shadow--z1 {
-    filter: var(--sd-drop-shadow--z1);
-}
-.sd-drop-shadow--z2 {
-    filter: var(--sd-drop-shadow--z2);  
-}
-.sd-drop-shadow--z3 {
-    filter: var(--sd-drop-shadow--z3);
-}
-.sd-drop-shadow--z4 {
-    filter: var(--sd-drop-shadow--z4);
-}
-
-// MARGINS ----------------------------------------------------------------------------------------
-
-// MARGIN AUTO
-.m-auto,
-.sd-margin--auto {
-    margin: auto !important;
-}
-.ml-auto,
-.ms-auto,
-.sd-margin-l--auto,
-.sd-margin-s--auto {
-    margin-inline-start: auto !important;
-}
-.mr-auto,
-.me-auto,
-.sd-margin-r--auto,
-.sd-margin-e--auto {
-    margin-inline-end: auto !important;
-}
-.mt-auto,
-.sd-margin-t--auto {
-    margin-block-start: auto !important;
-}
-.mb-auto,
-.sd-margin-b--auto {
-    margin-block-end: auto !important;
-}
-.mlr-auto,
-.mx-auto,
-.sd-margin-x--auto {
-    margin-inline-start: auto !important;
-    margin-inline-end: auto !important;
-}
-.my-auto,
-.sd-margin-y--auto {
-    margin-block-start: auto !important;
-    margin-block-end: auto !important;
-}
-
-// MARGIN (all sides)
-.m-0,
-.sd-margin--0 {
-    margin: 0 !important;
-}
-.m-0-5,
-.sd-margin--0-5 {
-    margin: var(--space--0-5) !important;
-}
-.m-1,
-.sd-margin--1 {
-    margin: var(--space--1) !important;
-}
-.m-1-5,
-.sd-margin--1-5 {
-    margin: var(--space--1-5) !important;
-}
-.m-2,
-.sd-margin--2 {
-    margin: var(--space--2) !important;
-}
-.m-3,
-.sd-margin--3 {
-    margin: var(--space--3) !important;
-}
-.m-4,
-.sd-margin--4 {
-    margin: var(--space--4) !important;
-}
-.m-5,
-.sd-margin--5 {
-    margin: var(--space--5) !important;
-}
-// MARGIN INLINE START (left)
-.ms-0,
-.sd-margin-l--0 {
-    margin-inline-start: 0 !important;
-}
-.ms-0-5,
-.sd-margin-l--0-5 {
-    margin-inline-start: var(--space--0-5) !important;
-}
-.ms-1,
-.sd-margin-l--1 {
-    margin-inline-start: var(--space--1) !important;
-}
-.ms-1-5,
-.sd-margin-l--1-5 {
-    margin-inline-start: var(--space--1-5) !important;
-}
-.ms-2,
-.sd-margin-l--2 {
-    margin-inline-start: var(--space--2) !important;
-}
-.ms-3,
-.sd-margin-l--3 {
-    margin-inline-start: var(--space--3) !important;
-}
-.ms-4,
-.sd-margin-l--4 {
-    margin-inline-start: var(--space--4) !important;
-}
-.ms-5,
-.sd-margin-l--5 {
-    margin-inline-start: var(--space--5) !important;
-}
-// MARGIN INLINE END (right)
-.me-0,
-.sd-margin-r--0 {
-    margin-inline-end: 0 !important;
-}
-.me-0-5,
-.sd-margin-r--0-5 {
-    margin-inline-end: var(--space--0-5) !important;
-}
-.me-1,
-.sd-margin-r--1 {
-    margin-inline-end: var(--space--1) !important;
-}
-.me-1-5,
-.sd-margin-r--1-5 {
-    margin-inline-end: var(--space--1-5) !important;
-}
-.me-2,
-.sd-margin-r--2 {
-    margin-inline-end: var(--space--2) !important;
-}
-.me-3,
-.sd-margin-r--3 {
-    margin-inline-end: var(--space--3) !important;
-}
-.me-4,
-.sd-margin-r--4 {
-    margin-inline-end: var(--space--4) !important;
-}
-.me-5,
-.sd-margin-r--5 {
-    margin-inline-end: var(--space--5) !important;
-}
-// MARGIN INLINE (x, left and right)
-.mx-0,
-.sd-margin-x--0 {
-    margin-inline-start: 0 !important;
-    margin-inline-end: 0 !important;
-}
-.mx-0-5,
-.sd-margin-r--0-5 {
-    margin-inline-start: var(--space--0-5) !important;
-    margin-inline-end: var(--space--0-5) !important;
-}
-.mx-1,
-.sd-margin-x--1 {
-    margin-inline-start: var(--space--1) !important;
-    margin-inline-end: var(--space--1) !important;
-}
-.mx-1-5,
-.sd-margin-x--1-5 {
-    margin-inline-start: var(--space--1-5) !important;
-    margin-inline-end: var(--space--1-5) !important;
-}
-.mx-2,
-.sd-margin-x--2 {
-    margin-inline-start: var(--space--2) !important;
-    margin-inline-end: var(--space--2) !important;
-}
-.mx-3,
-.sd-margin-x--3 {
-    margin-inline-start: var(--space--3) !important;
-    margin-inline-end: var(--space--3) !important;
-}
-.mx-4,
-.sd-margin-x--4 {
-    margin-inline-start: var(--space--4) !important;
-    margin-inline-end: var(--space--4) !important;
-}
-.mx-5,
-.sd-margin-x--5 {
-    margin-inline-start: var(--space--5) !important;
-    margin-inline-end: var(--space--5) !important;
-}
-// MARGIN BLOCK START (top)
-.mt-0,
-.sd-margin-t--0 {
-    margin-block-start: 0 !important;
-}
-.mt-0-5,
-.sd-margin-t--0-5 {
-    margin-block-start: var(--space--0-5) !important;
-}
-.mt-1,
-.sd-margin-t--1 {
-    margin-block-start: var(--space--1) !important;
-}
-.mt-1-5,
-.sd-margin-t--1-5 {
-    margin-block-start: var(--space--1-5) !important;
-}
-.mt-2,
-.sd-margin-t--2 {
-    margin-block-start: var(--space--2) !important;
-}
-.mt-3,
-.sd-margin-t--3 {
-    margin-block-start: var(--space--3) !important;
-}
-.mt-4,
-.sd-margin-t--4 {
-    margin-block-start: var(--space--4) !important;
-}
-.mt-5,
-.sd-margin-t--5 {
-    margin-block-start: var(--space--5) !important;
-}
-// MARGIN BLOCK END (bottom)
-.mb-0,
-.sd-margin-b--0 {
-    margin-block-end: 0 !important;
-}
-.mb-0-5,
-.sd-margin-b--0-5 {
-    margin-block-end: var(--space--0-5) !important;
-}
-.mb-1,
-.sd-margin-b--1 {
-    margin-block-end: var(--space--1) !important;
-}
-.mb-1-5,
-.sd-margin-b--1-5 {
-    margin-block-end: var(--space--1-5) !important;
-}
-.mb-2,
-.sd-margin-b--2 {
-    margin-block-end: var(--space--2) !important;
-}
-.mb-3,
-.sd-margin-b--3 {
-    margin-block-end: var(--space--3) !important;
-}
-.mb-4,
-.sd-margin-b--4 {
-    margin-block-end: var(--space--4) !important;
-}
-.mb-5,
-.sd-margin-b--5 {
-    margin-block-end: var(--space--5) !important;
-}
-// MARGIN BLOCK (y, top & bottom)
-.my-0,
-.sd-margin-y--0 {
-    margin-block-start: 0 !important;
-    margin-block-end: 0 !important;
-}
-.my-0-5,
-.sd-margin-y--0-5 {
-    margin-block-start: var(--space--0-5) !important;
-    margin-block-end: var(--space--0-5) !important;
-}
-.my-1,
-.sd-margin-y--1 {
-    margin-block-start: var(--space--1) !important;
-    margin-block-end: var(--space--1) !important;
-}
-.my-1-5,
-.sd-margin-y--1-5 {
-    margin-block-start: var(--space--1-5) !important;
-    margin-block-end: var(--space--1-5) !important;
-}
-.my-2,
-.sd-margin-y--2 {
-    margin-block-start: var(--space--2) !important;
-    margin-block-end: var(--space--2) !important;
-}
-.my-3,
-.sd-margin-y--3 {
-    margin-block-start: var(--space--3) !important;
-    margin-block-end: var(--space--3) !important;
-}
-.my-4,
-.sd-margin-y--4 {
-    margin-block-start: var(--space--4) !important;
-    margin-block-end: var(--space--4) !important;
-}
-.my-5,
-.sd-margin-y--5 {
-    margin-block-start: var(--space--5) !important;
-    margin-block-end: var(--space--5) !important;
-}
-
-// PADDINGS ---------------------------------------------------------------------------------------
-// PADDING (all sides)
-.p-0,
-.sd-padding--0 {
-    padding: 0 !important;
-}
-.p-0-5,
-.sd-padding--0-5 {
-    padding: var(--space--0-5) !important;
-}
-.p-1,
-.sd-padding--1 {
-    padding: var(--space--1) !important;
-}
-.p-1-5,
-.sd-padding--1-5 {
-    padding: var(--space--1-5) !important;
-}
-.p-2,
-.sd-padding--2 {
-    padding: var(--space--2) !important;
-}
-.p-3,
-.sd-padding--3 {
-    padding: var(--space--3) !important;
-}
-.p-4,
-.sd-padding--4 {
-    padding: var(--space--4) !important;
-}
-.p-5,
-.sd-padding--5 {
-    padding: var(--space--5) !important;
-}
-// PADDING INLINE START (left)
-.ps-0,
-.sd-padding-l--0 {
-    padding-inline-start: 0 !important;
-}
-.ps-0-5,
-.sd-padding-l--0-5 {
-    padding-inline-start: var(--space--0-5) !important;
-}
-.ps-1,
-.sd-padding-l--1 {
-    padding-inline-start: var(--space--1) !important;
-}
-.ps-1-5,
-.sd-padding-l--1-5 {
-    padding-inline-start: var(--space--1-5) !important;
-}
-.ps-2,
-.sd-padding-l--2 {
-    padding-inline-start: var(--space--2) !important;
-}
-.ps-3,
-.sd-padding-l--3 {
-    padding-inline-start: var(--space--3) !important;
-}
-.ps-4,
-.sd-padding-l--4 {
-    padding-inline-start: var(--space--4) !important;
-}
-.ps-5,
-.sd-padding-l--5 {
-    padding-inline-start: var(--space--5) !important;
-}
-// PADDING INLINE END (right)
-.pe-0,
-.sd-padding-r--0 {
-    padding-inline-end: 0 !important;
-}
-.pe-0-5,
-.sd-padding-r--0-5 {
-    padding-inline-end: var(--space--0-5) !important;
-}
-.pe-1,
-.sd-padding-r--1 {
-    padding-inline-end: var(--space--1) !important;
-}
-.pe-1-5,
-.sd-padding-r--1-5 {
-    padding-inline-end: var(--space--1-5) !important;
-}
-.pe-2,
-.sd-padding-r--2 {
-    padding-inline-end: var(--space--2) !important;
-}
-.pe-3,
-.sd-padding-r--3 {
-    padding-inline-end: var(--space--3) !important;
-}
-.pe-4,
-.sd-padding-r--4 {
-    padding-inline-end: var(--space--4) !important;
-}
-.pe-5,
-.sd-padding-r--5 {
-    padding-inline-end: var(--space--5) !important;
-}
-// PADDING INLINE (x, left and right)
-.px-0,
-.sd-padding-x--0 {
-    padding-inline-start: 0 !important;
-    padding-inline-end: 0 !important;
-}
-.px-0-5,
-.sd-padding-r--0-5 {
-    padding-inline-start: var(--space--0-5) !important;
-    padding-inline-end: var(--space--0-5) !important;
-}
-.px-1,
-.sd-padding-x--1 {
-    padding-inline-start: var(--space--1) !important;
-    padding-inline-end: var(--space--1) !important;
-}
-.px-1-5,
-.sd-padding-x--1-5 {
-    padding-inline-start: var(--space--1-5) !important;
-    padding-inline-end: var(--space--1-5) !important;
-}
-.px-2,
-.sd-padding-x--2 {
-    padding-inline-start: var(--space--2) !important;
-    padding-inline-end: var(--space--2) !important;
-}
-.px-3,
-.sd-padding-x--3 {
-    padding-inline-start: var(--space--3) !important;
-    padding-inline-end: var(--space--3) !important;
-}
-.px-4,
-.sd-padding-x--4 {
-    padding-inline-start: var(--space--4) !important;
-    padding-inline-end: var(--space--4) !important;
-}
-.px-5,
-.sd-padding-x--5 {
-    padding-inline-start: var(--space--5) !important;
-    padding-inline-end: var(--space--5) !important;
-}
-// PADDING BLOCK START (top)
-.pt-0,
-.sd-padding-t--0 {
-    padding-block-start: 0 !important;
-}
-.pt-0-5,
-.sd-padding-t--0-5 {
-    padding-block-start: var(--space--0-5) !important;
-}
-.pt-1,
-.sd-padding-t--1 {
-    padding-block-start: var(--space--1) !important;
-}
-.pt-1-5,
-.sd-padding-t--1-5 {
-    padding-block-start: var(--space--1-5) !important;
-}
-.pt-2,
-.sd-padding-t--2 {
-    padding-block-start: var(--space--2) !important;
-}
-.pt-3,
-.sd-padding-t--3 {
-    padding-block-start: var(--space--3) !important;
-}
-.pt-4,
-.sd-padding-t--4 {
-    padding-block-start: var(--space--4) !important;
-}
-.pt-5,
-.sd-padding-t--5 {
-    padding-block-start: var(--space--5) !important;
-}
-// PADDING BLOCK END (bottom)
-.pb-0,
-.sd-padding-b--0 {
-    padding-block-end: 0 !important;
-}
-.pb-0-5,
-.sd-padding-b--0-5 {
-    padding-block-end: var(--space--0-5) !important;
-}
-.pb-1,
-.sd-padding-b--1 {
-    padding-block-end: var(--space--1) !important;
-}
-.pb-1-5,
-.sd-padding-b--1-5 {
-    padding-block-end: var(--space--1-5) !important;
-}
-.pb-2,
-.sd-padding-b--2 {
-    padding-block-end: var(--space--2) !important;
-}
-.pb-3,
-.sd-padding-b--3 {
-    padding-block-end: var(--space--3) !important;
-}
-.pb-4,
-.sd-padding-b--4 {
-    padding-block-end: var(--space--4) !important;
-}
-.pb-5,
-.sd-padding-b--5 {
-    padding-block-end: var(--space--5) !important;
-}
-// PADDING BLOCK (y, top & bottom)
-.py-0,
-.sd-padding-y--0 {
-    padding-block-start: 0 !important;
-    padding-block-end: 0 !important;
-}
-.py-0-5,
-.sd-padding-y--0-5 {
-    padding-block-start: var(--space--0-5) !important;
-    padding-block-end: var(--space--0-5) !important;
-}
-.py-1,
-.sd-padding-y--1 {
-    padding-block-start: var(--space--1) !important;
-    padding-block-end: var(--space--1) !important;
-}
-.py-1-5,
-.sd-padding-y--1-5 {
-    padding-block-start: var(--space--1-5) !important;
-    padding-block-end: var(--space--1-5) !important;
-}
-.py-2,
-.sd-padding-y--2 {
-    padding-block-start: var(--space--2) !important;
-    padding-block-end: var(--space--2) !important;
-}
-.py-3,
-.sd-padding-y--3 {
-    padding-block-start: var(--space--3) !important;
-    padding-block-end: var(--space--3) !important;
-}
-.py-4,
-.sd-padding-y--4 {
-    padding-block-start: var(--space--4) !important;
-    padding-block-end: var(--space--4) !important;
-}
-.py-5,
-.sd-padding-y--5 {
-    padding-block-start: var(--space--5) !important;
-    padding-block-end: var(--space--5) !important;
-}
-
-// GAP --------------------------------------------------------------------------------------------
-.gap-0 {
-    gap: var(--gap-0); // 0px
-}
-.gap-0-5 {
-    gap: var(--gap-0-5); // 4px
-}
-.gap-1 {
-    gap: var(--gap-1); // 8px
-}
-.gap-1-5 {
-    gap: var(--gap-1-5); // 12px
-}
-.gap-2 {
-    gap: var(--gap-2); // 16px
-}
-.gap-3 {
-    gap: var(--gap-3); // 24px
-}
-.gap-4 {
-    gap: var(--gap-4); // 32px
-}
-.gap-5 {
-    gap: var(--gap-5); // 40px
-}
-
-// TYPOGRAPHY -------------------------------------------------------------------------------------
-// FONT SIZE
-.text-2xs {
-    font-size: var(--text-size-xx-small); // 10px;
-}
-.sd-font-size--x-small,
-.text-xs {
-    font-size: var(--text-size-x-small); // 12px;
-}
-.sd-font-size--small,
-.text-sm {
-    font-size: var(--text-size-small); // 14px;
-}
-.sd-font-size--medium ,
-.text-md {
-    font-size: var(--text-size-medium); // 16px;
-}
-.sd-font-size--large,
-.text-lg {
-    font-size: var(--text-size-large); // 20px;
-}
-.sd-font-size--x-large,
-.text-xl {
-    font-size: var(--text-size-x-large); // 24px;
-}
-.text-2xl {
-    font-size: var(--text-size-xx-large); // 32px;
-}
-
-// TEXT COLOR
-.sd-text-color--normal,
-.text-color-normal {
-    color: var(--color-text) !important;
-}
-.sd-text-color--light,
-.text-color-muted {
-    color: var(--color-text-muted) !important;
-}
-.sd-text-color--lighter,
-.text-color-subdued {
-    color: var(--color-text-subdued) !important;
-}
-.sd-text-color--inverse,
-.text-color-inverse {
-    color: var(--color-text-inverse) !important;
-}
-.text-color-on-dark {
-    color: var(--color-text-ondark) !important;
-}
-.text-color-on-light {
-    color: var(--color-text-onlight) !important;
-}
-
-// FONT WEIGHTS
-.sd-text__light,
-.sd-text--light,
-.font-light {
-    font-weight: 300;
-}
-.sd-text__normal,
-.sd-text--normal,
-.font-normal {
-    font-weight: 400;
-}
-.sd-text--medium,
-.font-medium {
-    font-weight: 500;
-}
-.sd-text--medium,
-.font-semibold {
-    font-weight: 500;
-}
-.sd-text__strong,
-.sd-text--strong,
-.sd-text--bold,
-.font-bold {
-    font-weight: 700;
-}
-.font-black {
-    font-weight: 900;
-}
-
-// FONT STYLE
-.sd-text__italic,
-.sd-text--italic,
-.italic {
-    font-style: italic;
-}
-.sd-text--non-italic,
-.non-italic {
-    font-style: normal;
-}
-
-// TEXT ALIGN
-.sd-text-align--left,
-.sd-text-align--start,
-.text-start,
-.text-left {
-    text-align: start;
-}
-.sd-text__center,
-.sd-text-align--center,
-.text-center {
-    text-align: center;
-}
-.sd-text__right,
-.sd-text-align--right,
-.sd-text-align--end,
-.text-end {
-    text-align: end;
-}
-.sd-text-align--justify,
-.text-justify {
-    text-align: justify;
-}
-
-// TEXT TRANSFORM
-.sd-txt-transform--uppercase,
-.text-uppercase {
-    text-transform: uppercase;
-}
-.sd-txt-transform--lowercase,
-.text-lowercase {
-    text-transform: lowercase;
-}
-.sd-txt-transform--capitalize,
-.text-capitalize {
-    text-transform: capitalize;
-}
-.sd-txt-transform--none,
-.text-normal-case {
-    text-transform: none;
-}
-
-// TEXT DECORATION
-.sd-txt-decoration--underline,
-.text-underline {
-    text-decoration: underline;
-}
-.sd-txt-decoration--line-through,
-.text-line-through {
-    text-decoration: line-through;
-}
-.sd-txt-decoration--none,
-.text-no-underline  {
-    text-decoration: none;
-}
-
-// TEXT OVERFLOW
-.sd-overflow-ellipsis,
-.sd-overflow--ellipsis,
-.text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.text-clip {
-    text-overflow: clip;
-}
-
-// TEXT WRAP
-.text-wrap {
-    text-wrap: wrap;
-}
-.text-nowrap {
-    text-wrap: clip;
-}
-.text-balance {
-    text-wrap: balance;
-}
-.text-pretty {
-    text-wrap: pretty;
-}
-
-// WORD BREAK
-.sd-word-break--normal,
-.break-normal {
-    overflow-wrap: normal;
-    word-break: normal;
-}
-.sd-word-break--words,
-.break-words {
-    overflow-wrap: break-word;
-}
-.sd-word-break--all,
-.break-all {
-    word-break: break-all;
-}
-
-// LINE HIGHT
-.line-height-1 {
-    line-height: var(--l-height-none);
-}
-.line-height-xs {
-    line-height: var(--l-height-xs);
-}
-.line-height-sm {
-    line-height: var(--l-height-sm);
-}
-.line-height-md {
-    line-height: var(--l-height-md);
-}
-.line-height-lg {
-    line-height: var(--l-height-lg);
-}
-
-
-// LINE CLAMP
-// limit the number of horizontal lines in an elemnt (e.g. <p>)
-// it doesn't work if the element has set flex-grow: 1;
-@mixin line-clamp-base {
-    overflow: hidden;
-    display: -webkit-box !important;
-    -webkit-box-orient: vertical;
-}
-.sd-line-clamp--1,
-.line-clamp-1 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 1;
-}
-.sd-line-clamp--2,
-.line-clamp-2 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 2;
-}
-.sd-line-clamp--3,
-.line-clamp-3 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 3;
-}
-.sd-line-clamp--4,
-.line-clamp-4 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 4;
-}
-.sd-line-clamp--5,
-.line-clamp-5 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 5;
-}
-.sd-line-clamp--6,
-.line-clamp-6 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 6;
-}
-.sd-line-clamp--none,
-.line-clamp-none {
-    -webkit-line-clamp: none;
-}
-
-// BORDER RADIUS ----------------------------------------------------------------------------------
-.sd-radius--x-small,
-.radius-xs {
-    border-radius: var(--b-radius--x-small);
-}
-.sd-radius--small,
-.radius-sm {
-    border-radius: var(--b-radius--small);
-}
-.sd-radius--medium,
-.radius-md {
-    border-radius: var(--b-radius--medium);
-}
-.sd-radius--large,
-.radius-lg {
-    border-radius: var(--b-radius--large);
-}
-.sd-radius--x-large,
-.radius-xl {
-    border-radius: var(--b-radius--x-large);
-}
-.sd-radius--full,
-.radius-full {
-    border-radius: var(--b-radius--full);
-}
-
-// BORDER -----------------------------------------------------------------------------------------
-// Shorthand classes for solid border, 1px width, and different colors
-.sd-border--x-light {
-    border: 1px solid var(--sd-colour-line--x-light);
-}
-.sd-border--light {
-    border: 1px solid var(--sd-colour-line--light);
-}
-.sd-border--medium {
-    border: 1px solid var(--sd-colour-line--medium);
-}
-.sd-border--strong {
-    border: 1px solid var(--sd-colour-line--strong);
-}
-
-// BORDER COLOR
-.border-color-x-light {
-    border-color: var(--color-line-x-light);
-}
-.border-color-light {
-    border-color: var(--color-line-light);
-}
-.border-color-medium {
-    border-color: var(--color-line-medium);
-}
-.border-color-strong {
-    border-color: var(--color-line-strong);
-}
-
-// BORDER STYLE
-.sd-border-style--solid,
-.border-solid {
-    border-style: solid;
-}
-.sd-border-style--dotted,
-.border-dotted {
-    border-style: dotted;
-}
-.sd-border-style--dashed,
-.border-dashed {
-    border-style: dashed;
-}
-.border-double {
-    border-style: double;
-}
-
-// BORDER WIDTH
-.sd-border-width--0,
-.border-0 {
-    border-width: 0px;
-}
-.sd-border-width--1,
-.border-1 {
-    border-width: 1px;
-}
-.sd-border-width--2,
-.border-2 {
-    border-width: 2px;
-}
-.sd-border-width--3,
-.border-3 {
-    border-width: 3px;
-}
-.sd-border-width--4,
-.border-4 {
-    border-width: 4px;
-}
-.border-x-0 {
-    border-inline-start-width: 0px;
-    border-inline-end-width: 0px;
-}
-.border-y-0 {
-    border-block-start-width: 0px;
-    border-block-end-width: 0px;
-}
-.border-s-0 {
-    border-inline-start-width: 0px;
-}
-.border-e-0 {
-    border-inline-end-width: 0px;
-}
-.border-t-0 {
-    border-top: 0px;
-}
-.border-b-0 {
-    border-bottom: 0px;
-}
-
-// OPACITY HELPERS --------------------------------------------------------------------------------
-.sd-opacity--0,
-.opacity-0 {
-    opacity: 0;
-}
-.sd-opacity--20,
-.opacity-20 {
-    opacity: 0.2;
-}
-.sd-opacity--25,
-.opacity-25 {
-    opacity: 0.25;
-}
-.sd-opacity--30,
-.opacity-30 {
-    opacity: 0.3;
-}
-.sd-opacity--40,
-.opacity-40 {
-    opacity: 0.4;
-}
-.sd-opacity--50,
-.opacity-50 {
-    opacity: 0.5;
-}
-.sd-opacity--60,
-.opacity-60 {
-    opacity: 0.6;
-}
-.sd-opacity--75,
-.opacity-75 {
-    opacity: 0.75;
-}
-
-// OBJECT FIT HELPERS -----------------------------------------------------------------------------
-.object-contain {
-    object-fit: contain;
-}
-.object-cover {
-    object-fit: cover;
-}
-.object-fill {
-    object-fit: fill;
-}
-.object-none {
-    object-fit: none;
-}
-.object-scale-down {
-    object-fit: scale-down;
-}
-
-// OBJECT POSITION HELPERS ------------------------------------------------------------------------
-// Defines the positin of any selected replaced element (e.g., an <img>)
-// within the box that contains it. For it to work it must be used with 'sd-object-fit--none' (object-fit: none;)
-
-.object-bottom {
-    object-position: bottom;
-}
-.object-center {
-    object-position: center;
-}
-.object-left {
-    object-position: left;
-}
-.object-left-bottom {
-    object-position: left bottom;
-}
-.object-left-top {
-    object-position: left top;
-}
-.object-right {
-    object-position: right;
-}
-.object-right-bottom {
-    object-position: right bottom;
-}
-.object-right-top {
-    object-position: right top;
-}
-.object-top {
-    object-position: top;
-}
-
-
-// SEMANTIC & TEXT COLORS ------------------------------------------------------------------------
-// Neutral
-.surface-color-base {
-    background-color: var(--color-surface-base) !important;
-}
-.surface-color-muted {
-    background-color: var(--color-surface-muted) !important;
-}
-.surface-color-subdued {
-    background-color: var(--color-surface-subdued) !important;
-}
-.surface-color-faded {
-    background-color: var(--color-surface-faded) !important;
-}
-// Primary
-.surface-color-primary {
-    background-color: var(--color-primary-default);
-}
-.surface-color-primary-translucent {
-    background-color: var(--color-primary-translucent);
-}
-.text-color-primary {
-    color: var(--color-primary-text);
-}
-
-// Success
-.surface-color-success {
-    background-color: var(--color-success-default);
-}
-.surface-color-success-translucent {
-    background-color: var(--color-success-translucent);
-}
-.text-color-success {
-    color: var(--color-success-text);
-}
-// Warning
-.surface-color-warning {
-    background-color: var(--color-warning-default);
-}
-.surface-color-warning-translucent {
-    background-color: var(--color-warning-translucent);
-}
-.text-color-warning {
-    color: var(--color-warning-text);
-}
-// Alert
-.surface-color-alert {
-    background-color: var(--color-alert-default);
-}
-.surface-color-alert-translucent {
-    background-color: var(--color-alert-translucent);
-}
-.text-color-alert {
-    color: var(--color-alert-text);
-}
-// Highlight
-.surface-color-highlight {
-    background-color: var(--color-highlight-default);
-}
-.surface-color-highlight-translucent {
-    background-color: var(--color-highlight-translucent);
-}
-.text-color-highlight {
-    color: var(--color-highlight-text);
-}
-// Info
-.surface-color-info {
-    background-color: var(--color-info-default);
-}
-.surface-color-info-translucent {
-    background-color: var(--color-info-translucent);
-}
-.text-color-info {
-    color: var(--color-info-text);
-}
-
-
-// ------------------------------------------------------------------------
-.left-panel {
-    container-type: inline-size;
-    container-name: left-panel;
-}
-