superdesk-ui-framework 3.1.8 → 3.1.12

package/app/styles/_helpers.scss

@@ -30,666 +30,990 @@
     cursor: pointer;
 }
 
-// DISPLAY HELPERS
-// Use classes with the form '.sd-display-- ', others will be deprecated
-.sd-display--none {
-    display: none !important;
-}
 
-.sd-display--inline {
-    display: inline !important;
+// WEBKIT SCROLL
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    margin: -1px 0;
+    position: fixed;
+    inset-inline-end: 10px;
 }
 
-.sd-display--inline-block {
-    display: inline-block !important;
+::-webkit-scrollbar:hover {
+    background-color: var(--sd-colour__webkit-scrollbar--hover);
+    cursor: pointer;
 }
 
-.sd-display--block {
-    display: block !important;
+::-webkit-scrollbar-thumb {
+    background: var(--sd-colour__webkit-scrollbar-thumb);
 }
 
-// Browser ignores this element from the flow.
-// Use it to wrap other elements without breaking the layout (e.g. flex or grid)
-.sd-display--contents {
-    display: contents !important;
+::-webkit-scrollbar-thumb:hover {
+    background: var(--sd-colour__webkit-scrollbar-thumb--hover);
+    cursor: pointer;
 }
 
-// Display Table
-.sd-display--table {
-    display: table;
+// HEADINGS
+.sd-heading-3 {
+    font-size: 1.6rem;
+    margin-block-end: 1.6rem;
 }
 
-.sd-display--table-cell {
-    display: table-cell;
+// Deafult text syles based on type of data
+p strong {
+    font-weight: 500;
 }
 
-.sd-display--table-row {
-    display: table-row;
-}
+time {
+    color: $sd-text-light;
+    font-weight: 400;
+    letter-spacing: .025em;
 
-.sd-display--table-column {
-    display: table-column;
+    &.small {
+        font-size: calc(100% - 0.1rem);
+    }
 }
 
-.sd-display--table-column-group {
-    display: table-column-group;
-}
+// TYPOGRAPHY HELPERS
+// -------------------------------------------------
 
-.sd-display--table-row-group {
-    display: table-row-group;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
 }
 
-.sd-display--table-footer-group {
-    display: table-footer-group;
+.sd-heading {
+    margin: 0;
 }
 
-.sd-display--table-header-group {
-    display: table-header-group;
+.sd-heading--h1 {
+    font-size: calc(var(--text-size--base) * 2.4);
+    font-weight: 400;
 }
 
-.sd-display--table-caption {
-    display: table-caption;
+.sd-heading--h2 {
+    font-size: calc(var(--text-size--base) * 2);
+    font-weight: 500;
 }
 
-.sd-display--inline-flex {
-    display: inline-flex !important;
+.sd-heading--h3 {
+    font-size: calc(var(--text-size--base) * 1.6);
+    font-weight: 400;
 }
 
-.sd-display--flex {
-    display: flex !important;
+.sd-heading--h4 {
+    font-size: calc(var(--text-size--base) * 1.5);
+    font-weight: 500;
 }
 
-// FLEXBOX PROPERTIES
-// Flex direction
-.sd-flex--direction-row {
-    flex-direction: row !important;
+.sd-heading--h5 {
+    font-size: calc(var(--text-size--base) * 1.4);
+    font-weight: 500;
 }
 
-.sd-flex--direction-col {
-    flex-direction: column !important;
-}
+.sd-heading--h6 {
+    font-size: calc(var(--text-size--base) * 1.2);
+    font-weight: 500;
+    text-transform: uppercase;
+    color: var(--color-text-light);
+    letter-spacing: 0.06em;
 
-.sd-flex--direction-row-reverse {
-    flex-direction: row-reverse !important;
 }
 
-.sd-flex--direction-col-reverse {
-    flex-direction: column-reverse !important;
+.sd-text {
+    font-size: 1.4rem;
+    line-height: 1.4;
 }
 
-// Flex wrap
-.sd-flex--wrap {
-    flex-wrap: wrap;
+.sd-time {
+    font-size: 1.2rem;
+    display: inline-block;
+    color: var(--color-text-light);
+    letter-spacing: 0.025em;
 }
 
-.sd-flex--wrap-reverse {
-    flex-wrap: wrap-reverse;
+// Superdesk specific text helpers
+.sd-text__slugline {
+    color: $sd-slugline;
+    font-weight: 500;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    margin-inline-end: 1rem;
 }
 
-.sd-flex--nowrap {
-    flex-wrap: nowrap;
+.sd-text__title {
+    color: inherit;
+    font-weight: 500;
+    font-size: 1.6rem;
+    line-height: 1.4;
 }
 
-// Flex flex
-.sd-flex--flex-1 {
-    flex: 1 1 0%;
+.sd-text__date-time {
+    color: var(--color-text-light);
+    font-weight: 400;
+    letter-spacing: .025em;
 }
 
-.sd-flex--flex-1 {
-    flex: 1 1 0%;
+.sd-text__date-time--small {
+    font-size: 1.2rem;
 }
 
-.sd-flex--flex-auto {
-    flex: 1 1 auto;
+.sd-text__date-and-author {
+    font-size: 1.3rem;
 }
 
-.sd-flex--flex-initial {
-    flex: 0 1 auto;
+.sd-text__author {
+    font-weight: 500;
 }
 
-.sd-flex--flex-none {
-    flex: none;
+.sd-text__info {
+    font-weight: 300;
+    color: var(--color-text-light);
 }
 
-// Flex shrink & grow
-.sd-flex--shrink {
-    flex-shrink: 1 !important;
-}
+.sd-text-icon {
+    display: inline-flex;
 
-.sd-flex--shrink-0 {
-    flex-shrink: 0 !important;
+    i {
+        margin-inline-end: 0.3rem;
+    }
 }
 
-.sd-flex--grow {
-    flex-grow: 1 !important;
+.sd-text-icon+.sd-text-icon {
+    margin-inline-end: 1rem;
 }
 
-.sd-flex--grow-0 {
-    flex-grow: 0 !important;
+.sd-text-icon.sd-text-icon--aligned-r+.sd-text-icon.sd-text-icon--aligned-r {
+    margin-inline-end: 0;
+    margin-inline-start: 1rem;
 }
 
-// Flex alignment
-.sd-flex--justify-start {
-    justify-content: flex-start !important;
-}
 
-.sd-flex--justify-end {
-    justify-content: flex-end !important;
+// padding all  (KILL THIS AFTER REFACTORING)
+.sd-padding-all--0 {
+    padding: 0 !important;
 }
 
-.sd-flex--justify-center {
-    justify-content: center !important;
+.sd-padding-all--0-5 {
+    padding: $sd-base-increment * 0.5 !important;
 }
 
-.sd-flex--justify-between {
-    justify-content: space-between !important;
+.sd-padding-all--1 {
+    padding: $sd-base-increment !important;
 }
 
-.sd-flex--justify-around {
-    justify-content: space-around !important;
+.sd-padding-all--1-5 {
+    padding: $sd-base-increment * 1.5 !important;
 }
 
-.sd-flex--justify-evenly {
-    justify-content: space-evenly !important;
+.sd-padding-all--2 {
+    padding: $sd-base-increment * 2 !important;
 }
 
-.sd-flex--items-start {
-    align-items: flex-start !important;
+.sd-padding-all--3 {
+    padding: $sd-base-increment * 3 !important;
 }
 
-.sd-flex--items-end {
-    align-items: flex-end !important;
+// margin all (KILL THIS AFTER REFACTORING)
+.sd-margin-all--0 {
+    margin: 0 !important;
 }
 
-.sd-flex--items-center {
-    align-items: center !important;
+.sd-margin-all--0-5 {
+    margin: $sd-base-increment * 0.5 !important;
 }
 
-.sd-flex--items-baseline {
-    align-items: baseline !important;
+.sd-margin-all--1 {
+    margin: $sd-base-increment * 1 !important;
 }
 
-.sd-flex--items-stretch {
-    align-items: stretch !important;
+.sd-margin-all--1-5 {
+    margin: $sd-base-increment * 1.5 !important;
 }
 
-// Hide if empty
-.sd-empty:empty {
-    display: none !important;
+.sd-margin-all--2 {
+    margin: $sd-base-increment * 2 !important;
 }
 
-// POSITION HELPERS
-.sd-position--static {
-    position: static;
+.sd-margin-all--3 {
+    margin: $sd-base-increment * 3 !important;
 }
 
-.sd-position--fixed {
-    position: fixed;
-}
 
-.sd-position--relative {
-    position: relative;
+.sd-wrap-helper {
+    display: contents !important;
 }
 
-.sd-position--absolute {
+.sd-accessibility__btn-text--invisible,
+.sd-accessibility__screenreader-text {
     position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    font-size: 0.1rem;
+    color: transparent !important;
+    pointer-events: none;
 }
 
-.sd-position--sticky {
-    position: sticky;
-}
-
-// OVERFLOW HELPERS
-.sd-overflow--auto {
+// remove this after refactoring
+.overflow-auto {
     overflow: auto !important;
 }
 
-.sd-overflow--hidden {
+.overflow-hidden {
     overflow: hidden !important;
 }
 
-.sd-overflow--visible {
-    overflow: visible !important;
+.overflow-x-hidden {
+    overflow-x: hidden !important;
 }
 
-.sd-overflow--scroll {
-    overflow: scroll !important;
+.sd-d-none {
+    display: none !important;
 }
 
-.sd-overflow--x-auto {
-    overflow-x: auto !important;
+.sd-d-inline {
+    display: inline !important;
 }
 
-.sd-overflow--y-auto {
-    overflow-y: auto !important;
+.sd-d-inline-block {
+    display: inline-block !important;
 }
 
-.sd-overflow--x-hidden {
-    overflow-x: hidden !important;
+.sd-d-block {
+    display: block !important;
 }
 
-.sd-overflow--y-hidden {
-    overflow-y: hidden !important;
+.sd-d-flex {
+    display: flex !important;
 }
 
-.sd-overflow--x-visible {
-    overflow-x: visible !important;
+.sd-d-inline-flex {
+    display: inline-flex !important;
 }
 
-.sd-overflow--y-visible {
-    overflow-y: visible !important;
+.sd-display-flex-column {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 }
 
-.sd-overflow--x-scroll {
-    overflow-x: scroll !important;
+.sd-flex-wrap {
+    flex-wrap: wrap;
 }
 
-.sd-overflow--y-scroll {
-    overflow-y: scroll !important;
+.sd-flex-shrink {
+    flex-shrink: 1 !important;
 }
 
-// TEXT OVERFLOW
-.sd-overflow-ellipsis,
-.sd-overflow--ellipsis {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+.sd-flex-no-shrink {
+    flex-shrink: 0 !important;
 }
 
-// OBJECT FIT HELPERS
-.sd-object-fit--contain {
-    object-fit: contain;
+.sd-flex-justify-end {
+    justify-content: flex-end !important;
 }
 
-.sd-object-fit--cover {
-    object-fit: cover;
+.sd-flex-justify-center {
+    justify-content: center !important;
 }
 
-.sd-object-fit--fill {
-    object-fit: fill;
+.sd-flex-justify-space-between {
+    justify-content: space-between !important;
 }
 
-.sd-object-fit--none {
-    object-fit: none;
+.sd-flex-align-items-center {
+    align-items: center !important;
 }
 
-.sd-object-fit--scale-down {
-    object-fit: scale-down;
+.sd-flex-grow {
+    flex-grow: 1 !important;
 }
 
-// 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;)
-
-.sd-object-position--bottom {
-    object-position: bottom;
+.sd-flex-no-grow {
+    flex-grow: 0 !important;
 }
 
-.sd-object-position--center {
-    object-position: center;
+.sd-no-wrap {
+    white-space: nowrap;
 }
 
-.sd-object-position--left {
-    object-position: inline-start;
-}
 
-.sd-object-position--left-bottom {
-    object-position: left bottom;
-}
 
-.sd-object-position--left-top {
-    object-position: left top;
-}
 
-.sd-object-position--right {
-    object-position: right;
-}
 
-.sd-object-position--right-bottom {
-    object-position: right bottom;
-}
 
-.sd-object-position--right-top {
-    object-position: right top;
+
+
+
+// FONT FAMILY
+.sd-text__serif,
+.sd-text--serif {
+    font-family: $baseFontFamilySerif;
+}
+.sd-text--sans {
+    font-family: $baseFontFamily;
+}
+.sd-text--mono {
+    font-family: $baseFontFamilyMono;
 }
 
-.sd-object-position--top {
-    object-position: top;
+// 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;
 }
 
-// SHADOW HELPER CLASSES
 
-$sd-shadowProperties: (
-    'z0': (none),
-    'z1': (0 1px 3px rgba(0, 0, 0, .16), 0 0 1px rgba(0, 0, 0, .1)),
-    'z2': (0 1px 4px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .12), 0 0 1px rgba(0, 0, 0, .1)),
-    'z3': (0 1px 6px rgba(0, 0, 0, .16), 0 3px 8px rgba(0, 0, 0, .24), 0 0 1px rgba(0, 0, 0, .1)),
-    'z4': (0 2px 10px rgba(0, 0, 0, .2), 0 6px 16px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .1)),
-);
-// Add more shadow items with this syntax and new classes will be generated:
-// z5: (0 2px 10px rgba(0,0,0,.2), ... ),
-// Output:
-// .sd-shadow--z5 { 0 2px 10px rgba(0,0,0,.2),...
 
-@mixin shadowMixinExtend {
-    transition: box-shadow 0.3s ease-out;
+// ==================================================== //
 
-    &.btn:active {
-        box-shadow: none !important;
-        transition: box-shadow 0.4s ease-out;
-    }
+// Background colours
+.sd-panel-bg--100 {
+    background-color: var(--sd-colour-panel-bg--100);
 }
 
-@each $name,
-$value in $sd-shadowProperties {
-    .sd-shadow--#{$name} {
-        box-shadow: #{$value} !important;
-        @include shadowMixinExtend;
-    }
+.sd-panel-bg--000 {
+    background-color: var(--sd-item__main-Bg);
 }
 
-// sd-shadow mixin
-// Uses items from $sd-shadowProperties as parameter (z1, z2...)
-// You can create new classes with this syntax:
-// .customClass { @include sd-shadow(z1); color: #fff; }
-// Output:
-// .customClass { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.1); color: #fff; }
-
-@mixin sd-shadow($sd-shadowPropertiesItem) {
-    box-shadow: #{map-get($sd-shadowProperties, $sd-shadowPropertiesItem)};
+.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%);
 }
 
-// How to use sd-shadow mixin
-// .nekaKlasa {
-//     color: red;
-//     @include sd-shadow('z1');
-// }
+.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;
+}
 
-// WEBKIT SCROLL
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-    margin: -1px 0;
-    position: fixed;
-    inset-inline-end: 10px;
+.sd-width--xx-small {
+    width: var(--width__container--xx-small);
 }
 
-::-webkit-scrollbar:hover {
-    background-color: var(--sd-colour__webkit-scrollbar--hover);
-    cursor: pointer;
+.sd-width--x-small {
+    width: var(--width__container--x-small);
 }
 
-::-webkit-scrollbar-thumb {
-    background: var(--sd-colour__webkit-scrollbar-thumb);
+.sd-width--small {
+    width: var(--width__container--small);
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: var(--sd-colour__webkit-scrollbar-thumb--hover);
-    cursor: pointer;
+.sd-width--medium {
+    width: var(--width__container--medium);
 }
 
-// HEADINGS
-.sd-heading-3 {
-    font-size: 1.6rem;
-    margin-block-end: 1.6rem;
+.sd-width--large {
+    width: var(--width__container--large);
 }
 
-// Deafult text syles based on type of data
-p strong {
-    font-weight: 500;
+.sd-width--x-large {
+    width: var(--width__container--x-large);
 }
 
-time {
-    color: $sd-text-light;
-    font-weight: 400;
-    letter-spacing: .025em;
+.sd-width--xx-large {
+    width: var(--width__container--xx-large);
+}
 
-    &.small {
-        font-size: calc(100% - 0.1rem);
-    }
+.sd-width--xxx-large {
+    width: var(--width__container--xxx-large);
 }
 
-// TYPOGRAPHY HELPERS
-// -------------------------------------------------
+.sd-width--full {
+    width: var(--width__container--full);
+}
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    margin: 0;
+.sd-gap--x-small {
+    gap: var(--gap--x-small);
 }
 
-.sd-heading {
-    margin: 0;
+.sd-gap--small {
+    gap: var(--gap--small);
 }
 
-.sd-heading--h1 {
-    font-size: calc(var(--text-size--base) * 2.4);
-    font-weight: 400;
+.sd-gap--medium {
+    gap: var(--gap--medium);
 }
 
-.sd-heading--h2 {
-    font-size: calc(var(--text-size--base) * 2);
-    font-weight: 500;
+.sd-gap--large {
+    gap: var(--gap--large);
 }
 
-.sd-heading--h3 {
-    font-size: calc(var(--text-size--base) * 1.6);
-    font-weight: 400;
+.sd-gap--x-large {
+    gap: var(--gap--x-large);
 }
 
-.sd-heading--h4 {
-    font-size: calc(var(--text-size--base) * 1.5);
-    font-weight: 500;
+.sd-gap--xx-large {
+    gap: var(--gap--xx-large);
 }
 
-.sd-heading--h5 {
-    font-size: calc(var(--text-size--base) * 1.4);
-    font-weight: 500;
+.sd-gap--auto {
+    gap: var(--gap--auto);
 }
 
-.sd-heading--h6 {
-    font-size: calc(var(--text-size--base) * 1.2);
-    font-weight: 500;
-    text-transform: uppercase;
-    color: var(--color-text-light);
-    letter-spacing: 0.06em;
+// MAX-HEIGHT:
 
+.max-h-5 {
+    max-height: calc(5 * var(--base-increment)) !important;
 }
-
-.sd-text {
-    font-size: 1.4rem;
-    line-height: 1.4;
+.max-h-6 {
+    max-height: calc(6 * var(--base-increment)) !important;
 }
-
-.sd-time {
-    font-size: 1.2rem;
-    display: inline-block;
-    color: var(--color-text-light);
-    letter-spacing: 0.025em;
+.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;
+}
 
 
 
-// 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;
-    -webkit-box-orient: vertical;
+// Hide if empty
+.sd-empty:empty,
+.empty-hidden:empty {
+    display: none !important;
 }
 
-.sd-line-clamp--1 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 1;
-}
 
-.sd-line-clamp--2 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 2;
-}
+// ================================================================================================
+// DOCUMENTED UTILITY CLASSES 
+// ================================================================================================
 
-.sd-line-clamp--3 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 3;
+// DISPLAY HELPERS --------------------------------------------------------------------------------
+// Use classes with the form '.d-block' etc., others will be deprecated
+.sd-display--block,
+.d-block {
+    display: block !important;
 }
-
-.sd-line-clamp--4 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 4;
+.sd-display--inline-block,
+.d-inline-block {
+    display: inline-block !important;
 }
-
-.sd-line-clamp--5 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 5;
+.sd-display--inline,
+.d-inline {
+    display: inline !important;
 }
-
-.sd-line-clamp--6 {
-    @include line-clamp-base;
-    -webkit-line-clamp: 6;
+.sd-display--flex,
+.d-flex  {
+    display: flex !important;
 }
-
-.sd-line-clamp--none {
-    -webkit-line-clamp: unset;
+.sd-display--inline-flex,
+.d-inline-flex  {
+    display: inline-flex !important;
 }
-
-// Superdesk specific text helpers
-.sd-text__slugline {
-    color: $sd-slugline;
-    font-weight: 500;
-    font-size: 1.2rem;
-    text-transform: uppercase;
-    margin-inline-end: 1rem;
+.d-grid  {
+    display: grid !important;
 }
-
-.sd-text__title {
-    color: inherit;
-    font-weight: 500;
-    font-size: 1.6rem;
-    line-height: 1.4;
+.d-inline-grid  {
+    display: grid !important;
 }
-
-.sd-text__date-time {
-    color: var(--color-text-light);
-    font-weight: 400;
-    letter-spacing: .025em;
+.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;
 }
 
-.sd-text__date-time--small {
-    font-size: 1.2rem;
+// 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;
 }
 
-.sd-text__date-and-author {
-    font-size: 1.3rem;
+// POSITION HELPERS -------------------------------------------------------------------------------
+.sd-position--static,
+.p-static  {
+    position: static;
 }
 
-.sd-text__author {
-    font-weight: 500;
+.sd-position--fixed,
+.p-fixed {
+    position: fixed;
 }
 
-.sd-text__info {
-    font-weight: 300;
-    color: var(--color-text-light);
+.sd-position--relative,
+.p-relative {
+    position: relative;
 }
 
-.sd-text-icon {
-    display: inline-flex;
-
-    i {
-        margin-inline-end: 0.3rem;
-    }
+.sd-position--absolute,
+.p-absolute {
+    position: absolute;
 }
 
-.sd-text-icon+.sd-text-icon {
-    margin-inline-end: 1rem;
+.sd-position--sticky,
+.p-sticky {
+    position: sticky;
 }
 
-.sd-text-icon.sd-text-icon--aligned-r+.sd-text-icon.sd-text-icon--aligned-r {
-    margin-inline-end: 0;
-    margin-inline-start: 1rem;
+// OVERFLOW HELPERS -------------------------------------------------------------------------------
+.sd-overflow--auto,
+.overflow-auto {
+    overflow: auto !important;
 }
-
-// Opacity helpers
-.sd-opacity--20 {
-    opacity: 0.2 !important;
+.sd-overflow--hidden,
+.overflow-hidden {
+    overflow: hidden !important;
 }
-
-.sd-opacity--25 {
-    opacity: 0.25 !important;
+.sd-overflow--visible,
+.overflow-visible {
+    overflow: visible !important;
 }
-
-.sd-opacity--30 {
-    opacity: 0.3 !important;
+.sd-overflow--scroll,
+.overflow-scroll {
+    overflow: scroll !important;
 }
-
-.sd-opacity--40 {
-    opacity: 0.4 !important;
+.sd-overflow--x-auto,
+.overflow-x-auto  {
+    overflow-x: auto !important;
 }
-
-.sd-opacity--50 {
-    opacity: 0.5 !important;
+.sd-overflow--y-auto,
+.overflow-y-auto  {
+    overflow-y: auto !important;
 }
-
-.sd-opacity--60 {
-    opacity: 0.6 !important;
+.sd-overflow--x-hidden,
+.overflow-x-hidden {
+    overflow-x: hidden !important;
 }
-
-.sd-opacity--75 {
-    opacity: 0.75 !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);
+}
 
-// Margin auto
+// 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;
 }
 
-
-// MARGINS ---------------------------------------------- //
 // MARGIN (all sides)
 .m-0,
 .sd-margin--0 {
@@ -937,7 +1261,8 @@ h6 {
     margin-block-start: calc(5 * var(--base-increment)) !important;
     margin-block-end: calc(5 * var(--base-increment)) !important;
 }
-// PADDINGS ---------------------------------------------- //
+
+// PADDINGS ---------------------------------------------------------------------------------------
 // PADDING (all sides)
 .p-0,
 .sd-padding--0 {
@@ -1146,261 +1471,73 @@ h6 {
 }
 // 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: calc(0.5 * var(--base-increment)) !important;
-    padding-block-end: calc(0.5 * var(--base-increment)) !important;
-}
-.py-1,
-.sd-padding-y--1 {
-    padding-block-start: calc(1 * var(--base-increment)) !important;
-    padding-block-end: calc(1 * var(--base-increment)) !important;
-}
-.py-1-5,
-.sd-padding-y--1-5 {
-    padding-block-start: calc(1.5 * var(--base-increment)) !important;
-    padding-block-end: calc(1.5 * var(--base-increment)) !important;
-}
-.py-2,
-.sd-padding-y--2 {
-    padding-block-start: calc(2 * var(--base-increment)) !important;
-    padding-block-end: calc(2 * var(--base-increment)) !important;
-}
-.py-3,
-.sd-padding-y--3 {
-    padding-block-start: calc(3 * var(--base-increment)) !important;
-    padding-block-end: calc(3 * var(--base-increment)) !important;
-}
-.py-4,
-.sd-padding-y--4 {
-    padding-block-start: calc(4 * var(--base-increment)) !important;
-    padding-block-end: calc(4 * var(--base-increment)) !important;
-}
-.py-5,
-.sd-padding-y--5 {
-    padding-block-start: calc(5 * var(--base-increment)) !important;
-    padding-block-end: calc(5 * var(--base-increment)) !important;
-}
-
-// padding all  (KILL THIS AFTER REFACTORING)
-.sd-padding-all--0 {
-    padding: 0 !important;
-}
-
-.sd-padding-all--0-5 {
-    padding: $sd-base-increment * 0.5 !important;
-}
-
-.sd-padding-all--1 {
-    padding: $sd-base-increment !important;
-}
-
-.sd-padding-all--1-5 {
-    padding: $sd-base-increment * 1.5 !important;
-}
-
-.sd-padding-all--2 {
-    padding: $sd-base-increment * 2 !important;
-}
-
-.sd-padding-all--3 {
-    padding: $sd-base-increment * 3 !important;
-}
-
-// margin all (KILL THIS AFTER REFACTORING)
-.sd-margin-all--0 {
-    margin: 0 !important;
-}
-
-.sd-margin-all--0-5 {
-    margin: $sd-base-increment * 0.5 !important;
-}
-
-.sd-margin-all--1 {
-    margin: $sd-base-increment * 1 !important;
-}
-
-.sd-margin-all--1-5 {
-    margin: $sd-base-increment * 1.5 !important;
-}
-
-.sd-margin-all--2 {
-    margin: $sd-base-increment * 2 !important;
-}
-
-.sd-margin-all--3 {
-    margin: $sd-base-increment * 3 !important;
-}
-
-// END
-
-
-.sd-wrap-helper {
-    display: contents !important;
-}
-
-.sd-accessibility__btn-text--invisible,
-.sd-accessibility__screenreader-text {
-    position: absolute;
-    top: 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-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;
+.sd-padding-y--0 {
+    padding-block-start: 0 !important;
+    padding-block-end: 0 !important;
 }
-
-
-// Border Radius
-.sd-radius--x-small {
-    border-radius: var(--b-radius--x-small);
+.py-0-5,
+.sd-padding-y--0-5 {
+    padding-block-start: calc(0.5 * var(--base-increment)) !important;
+    padding-block-end: calc(0.5 * var(--base-increment)) !important;
 }
-
-.sd-radius--small {
-    border-radius: var(--b-radius--small);
+.py-1,
+.sd-padding-y--1 {
+    padding-block-start: calc(1 * var(--base-increment)) !important;
+    padding-block-end: calc(1 * var(--base-increment)) !important;
 }
-
-.sd-radius--medium {
-    border-radius: var(--b-radius--medium);
+.py-1-5,
+.sd-padding-y--1-5 {
+    padding-block-start: calc(1.5 * var(--base-increment)) !important;
+    padding-block-end: calc(1.5 * var(--base-increment)) !important;
 }
-
-.sd-radius--large {
-    border-radius: var(--b-radius--large);
+.py-2,
+.sd-padding-y--2 {
+    padding-block-start: calc(2 * var(--base-increment)) !important;
+    padding-block-end: calc(2 * var(--base-increment)) !important;
 }
-
-.sd-radius--x-large {
-    border-radius: var(--b-radius--x-large);
+.py-3,
+.sd-padding-y--3 {
+    padding-block-start: calc(3 * var(--base-increment)) !important;
+    padding-block-end: calc(3 * var(--base-increment)) !important;
 }
-
-.sd-radius--full {
-    border-radius: var(--b-radius--full);
+.py-4,
+.sd-padding-y--4 {
+    padding-block-start: calc(4 * var(--base-increment)) !important;
+    padding-block-end: calc(4 * var(--base-increment)) !important;
 }
-
-// Border
-.sd-border--x-light {
-    border: 1px solid var(--sd-colour-line--x-light);
+.py-5,
+.sd-padding-y--5 {
+    padding-block-start: calc(5 * var(--base-increment)) !important;
+    padding-block-end: calc(5 * var(--base-increment)) !important;
 }
 
-.sd-border--light {
-    border: 1px solid var(--sd-colour-line--light);
+// GAP --------------------------------------------------------------------------------------------
+.gap-0 {
+    gap: var(--gap-0); // 0px
 }
-
-.sd-border--medium {
-    border: 1px solid var(--sd-colour-line--medium);
+.gap-0-5 {
+    gap: var(--gap-0-5); // 4px
 }
-
-.sd-border--strong {
-    border: 1px solid var(--sd-colour-line--strong);
+.gap-1 {
+    gap: var(--gap-1); // 8px
 }
-
-.sd-border--x-light {
-    border: 1px solid var(--sd-colour-line--x-light);
+.gap-1-5 {
+    gap: var(--gap-1-5); // 12px
 }
-
-.sd-border-style--dotted {
-    border-style: dotted !important;
+.gap-2 {
+    gap: var(--gap-2); // 16px
 }
-
-.sd-border-style--dashed {
-    border-style: dashed !important;
+.gap-3 {
+    gap: var(--gap-3); // 24px
 }
-
-.sd-border-width--2 {
-    border-width: 2px;
+.gap-4 {
+    gap: var(--gap-4); // 32px
 }
-
-.sd-border-width--3 {
-    border-width: 3px;
+.gap-5 {
+    gap: var(--gap-5); // 40px
 }
 
-// ==================== TYPOGRAPHY =================== //
-
+// TYPOGRAPHY -------------------------------------------------------------------------------------
 // FONT SIZE
 .text-2xs {
     font-size: calc(var(--text-size--base) * 1); // 12px;
@@ -1483,7 +1620,6 @@ h6 {
 .italic {
     font-style: italic;
 }
-
 .sd-text--non-italic,
 .non-italic {
     font-style: normal;
@@ -1512,59 +1648,19 @@ h6 {
     text-align: justify;
 }
 
-// FONT FAMILY
-.sd-text__serif,
-.sd-text--serif {
-    font-family: $baseFontFamilySerif;
-}
-.sd-text--sans {
-    font-family: $baseFontFamily;
-}
-.sd-text--mono {
-    font-family: $baseFontFamilyMono;
-}
-
-// 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;
-}
-
 // 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;
@@ -1668,151 +1764,188 @@ h6 {
     -webkit-line-clamp: none;
 }
 
-// ==================================================== //
-
-// Background colours
-.sd-panel-bg--100 {
-    background-color: var(--sd-colour-panel-bg--100);
+// BORDER RADIUS ----------------------------------------------------------------------------------
+.sd-radius--x-small,
+.radius-xs {
+    border-radius: var(--b-radius--x-small);
 }
-
-.sd-panel-bg--000 {
-    background-color: var(--sd-item__main-Bg);
+.sd-radius--small,
+.radius-sm {
+    border-radius: var(--b-radius--small);
 }
-
-.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-radius--medium,
+.radius-md {
+    border-radius: var(--b-radius--medium);
 }
-
-.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-radius--large,
+.radius-lg {
+    border-radius: var(--b-radius--large);
 }
-
-.sd-width--xxx-small {
-    width: var(--width__container--xxx-small) !important;
+.sd-radius--x-large,
+.radius-xl {
+    border-radius: var(--b-radius--x-large);
 }
-
-.sd-width--xx-small {
-    width: var(--width__container--xx-small);
+.sd-radius--full,
+.radius-full {
+    border-radius: var(--b-radius--full);
 }
 
-.sd-width--x-small {
-    width: var(--width__container--x-small);
+// BORDER -----------------------------------------------------------------------------------------
+.sd-border--x-light,
+.border-x-light {
+    border: 1px solid var(--sd-colour-line--x-light);
 }
-
-.sd-width--small {
-    width: var(--width__container--small);
+.sd-border--light,
+.border-light {
+    border: 1px solid var(--sd-colour-line--light);
 }
-
-.sd-width--medium {
-    width: var(--width__container--medium);
+.sd-border--medium,
+.border-medium {
+    border: 1px solid var(--sd-colour-line--medium);
 }
-
-.sd-width--large {
-    width: var(--width__container--large);
+.sd-border--strong,
+.border-strong {
+    border: 1px solid var(--sd-colour-line--strong);
 }
 
-.sd-width--x-large {
-    width: var(--width__container--x-large);
+// BORDER STYLE
+.sd-border-style--solid,
+.border-solid {
+    border-style: solid;
 }
-
-.sd-width--xx-large {
-    width: var(--width__container--xx-large);
+.sd-border-style--dotted,
+.border-dotted {
+    border-style: dotted;
 }
-
-.sd-width--xxx-large {
-    width: var(--width__container--xxx-large);
+.sd-border-style--dashed,
+.border-dashed {
+    border-style: dashed;
 }
-
-.sd-width--full {
-    width: var(--width__container--full);
+.border-double {
+    border-style: double;
 }
 
-.sd-gap--x-small {
-    gap: var(--gap--x-small);
+// BORDER WIDTH
+.sd-border-width--0,
+.border-0 {
+    border-width: 0px;
 }
-
-.sd-gap--small {
-    gap: var(--gap--small);
+.sd-border-width--1,
+.border-1 {
+    border-width: 1px;
 }
-
-.sd-gap--medium {
-    gap: var(--gap--medium);
+.sd-border-width--2,
+.border-2 {
+    border-width: 2px;
 }
-
-.sd-gap--large {
-    gap: var(--gap--large);
+.sd-border-width--3,
+.border-3 {
+    border-width: 3px;
 }
-
-.sd-gap--x-large {
-    gap: var(--gap--x-large);
+.sd-border-width--4,
+.border-4 {
+    border-width: 4px;
 }
-
-.sd-gap--xx-large {
-    gap: var(--gap--xx-large);
+.border-x-0 {
+    border-inline-start-width: 0px;
+    border-inline-end-width: 0px;
 }
-
-.sd-gap--auto {
-    gap: var(--gap--auto);
+.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;
 }
 
-// MAX-HEIGHT:
-
-.max-h-5 {
-    max-height: calc(5 * var(--base-increment)) !important;
+// OPACITY HELPERS --------------------------------------------------------------------------------
+.sd-opacity--0,
+.opacity-0 {
+    opacity: 0;
 }
-.max-h-6 {
-    max-height: calc(6 * var(--base-increment)) !important;
+.sd-opacity--20,
+.opacity-20 {
+    opacity: 0.2;
 }
-.max-h-8 {
-    max-height: calc(8 * var(--base-increment)) !important;
+.sd-opacity--25,
+.opacity-25 {
+    opacity: 0.25;
 }
-.max-h-10 {
-    max-height: calc(10 * var(--base-increment)) !important;
+.sd-opacity--30,
+.opacity-30 {
+    opacity: 0.3;
 }
-.max-h-15 {
-    max-height: calc(15 * var(--base-increment)) !important;
+.sd-opacity--40,
+.opacity-40 {
+    opacity: 0.4;
 }
-.max-h-20 {
-    max-height: calc(20 * var(--base-increment)) !important;
+.sd-opacity--50,
+.opacity-50 {
+    opacity: 0.5;
 }
-.max-h-25 {
-    max-height: calc(25 * var(--base-increment)) !important;
+.sd-opacity--60,
+.opacity-60 {
+    opacity: 0.6;
 }
-.max-h-30 {
-    max-height: calc(30 * var(--base-increment)) !important;
+.sd-opacity--75,
+.opacity-75 {
+    opacity: 0.75;
 }
 
-.max-h-full {
-    max-height: 100%;
+// OBJECT FIT HELPERS -----------------------------------------------------------------------------
+.object-contain {
+    object-fit: contain;
 }
-.max-h-screen {
-    max-height: 100svh;
+.object-cover {
+    object-fit: cover;
+}
+.object-fill {
+    object-fit: fill;
+}
+.object-none {
+    object-fit: none;
+}
+.object-scale-down {
+    object-fit: scale-down;
 }
 
-.gap-0 {
-    gap: var(--gap-0); // 0px
+// 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;
 }
-.gap-0-5 {
-    gap: var(--gap-0-5); // 4px
+.object-center {
+    object-position: center;
 }
-.gap-1 {
-    gap: var(--gap-1); // 8px
+.object-left {
+    object-position: left;
 }
-.gap-1-5 {
-    gap: var(--gap-1-5); // 12px
+.object-left-bottom {
+    object-position: left bottom;
 }
-.gap-2 {
-    gap: var(--gap-2); // 16px
+.object-left-top {
+    object-position: left top;
 }
-.gap-3 {
-    gap: var(--gap-3); // 24px
+.object-right {
+    object-position: right;
 }
-.gap-4 {
-    gap: var(--gap-4); // 32px
+.object-right-bottom {
+    object-position: right bottom;
 }
-.gap-5 {
-    gap: var(--gap-5); // 40px
+.object-right-top {
+    object-position: right top;
+}
+.object-top {
+    object-position: top;
 }