@stackoverflow/stacks 2.7.3 → 2.7.5

package/lib/atomic/misc.less

@@ -1,374 +1,374 @@
-@import (reference) "../base/internal.less";
-@import (reference) "../exports/color-mixins.less";
-@import (reference) "../exports/constants-helpers.less";
-@import (reference) "../exports/mixins.less";
-
-//
-//  STACK OVERFLOW
-//  UTILITIES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  $  DISPLAY
-//  ----------------------------------------------------------------------------
-
-#stacks-internals #responsify('.d-block', { display: block !important; });
-#stacks-internals #responsify('.d-flex', { display: flex !important; });
-#stacks-internals #responsify('.d-inline-flex', { display: inline-flex !important; });
-#stacks-internals #responsify('.d-grid', { display: grid !important; });
-#stacks-internals #responsify('.d-inline-grid', { display: inline-grid !important; });
-#stacks-internals #responsify('.d-inline', { display: inline !important; });
-#stacks-internals #responsify('.d-inline-block', { display: inline-block !important; });
-.d-table { display: table !important; }
-.d-table-cell { display: table-cell !important; }
-#stacks-internals #responsify('.d-none', { display: none !important; });
-.d-unset { display: unset !important; }
-
-//  ============================================================================
-//  $  BACKGROUND-POSITIONS
-//  ----------------------------------------------------------------------------
-.bg-bottom { background-position: bottom !important; }
-.bg-center { background-position: center !important; }
-.bg-left { background-position: left !important; }
-.bg-left-bottom { background-position: left bottom !important; }
-.bg-left-top { background-position: left top !important; }
-.bg-right { background-position: right !important; }
-.bg-right-bottom { background-position: right bottom !important; }
-.bg-right-top { background-position: right top !important; }
-.bg-top { background-position: top !important; }
-
-//  ============================================================================
-//  $  BACKGROUND-REPEATS
-//  ----------------------------------------------------------------------------
-.bg-repeat { background-repeat: repeat !important; }
-.bg-no-repeat { background-repeat: no-repeat !important; }
-.bg-repeat-x { background-repeat: repeat-x !important; }
-.bg-repeat-y { background-repeat: repeat-y !important; }
-
-//  ============================================================================
-//  $  BACKGROUND-SIZE
-//  ----------------------------------------------------------------------------
-.bg-auto { background-size: auto !important; }
-.bg-cover { background-size: cover !important; }
-.bg-contain { background-size: contain !important; }
-
-//  ============================================================================
-//  $  BACKGROUND-ATTACHMENT
-//  ----------------------------------------------------------------------------
-.bg-fixed { background-attachment: fixed !important; }
-.bg-local { background-attachment: local !important; }
-.bg-scroll { background-attachment: scroll !important; }
-
-//  ============================================================================
-//  $  BACKGROUND-IMAGE
-//  ----------------------------------------------------------------------------
-.bg-image-none { background-image: none !important; }
-
-.bg-confetti-animated {
-    background-repeat: repeat-x;
-    background-position: top -10px center;
-    background-image: url("data:image/svg+xml;,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
-
-    @media (prefers-reduced-motion) {
-        background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
-    }
-}
-
-.bg-confetti-static {
-    background-repeat: repeat-x;
-    background-position: top -10px center;
-    background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
-}
-
-// Focus styles
-.focus,
-.f\:focus:focus,
-.f\:focus:focus-within {
-    .focus-styles();
-}
-
-.focus-inset,
-.f\:focus-inset:focus,
-.f\:focus-inset:focus-within {
-    .focus-styles(true);
-}
-
-.focus-bordered,
-.f\:focus-bordered:focus,
-.f\:focus-bordered:focus-within {
-    .focus-styles(false, true);
-}
-
-.focus-inset-bordered,
-.f\:focus-inset-bordered:focus,
-.f\:focus-inset-bordered:focus-within {
-    .focus-styles(true, true);
-}
-
-//  ============================================================================
-//  $  OBJECT-FIT / OBJECT-POSITION
-//  ----------------------------------------------------------------------------
-
-.of-contain { object-fit: contain !important; }
-.of-cover { object-fit: cover !important; }
-.of-fill { object-fit: fill !important; }
-.of-none { object-fit: none !important; }
-.of-scale-down { object-fit: scale-down !important; }
-
-.op-center { object-position: center !important; }
-
-//  ============================================================================
-//  $  CURSORS
-//  ----------------------------------------------------------------------------
-.c-auto { cursor: auto !important; }
-.c-default { cursor: default !important; }
-.c-pointer { cursor: pointer !important; }
-.c-text { cursor: text !important; }
-.c-wait { cursor: wait !important; }
-.c-move { cursor: move !important; }
-.c-not-allowed { cursor: not-allowed !important; }
-.c-help { cursor: help !important; }
-
-//  ============================================================================
-//  $  POINTER EVENTS
-//  ----------------------------------------------------------------------------
-.pe-auto { pointer-events: auto !important; }
-.pe-none { pointer-events: none !important; }
-
-//  ============================================================================
-//  $  USER SELECT
-//  ----------------------------------------------------------------------------
-.us-auto {
-    -webkit-user-select: auto !important;
-    -moz-user-select: auto !important;
-    -ms-user-select: auto !important;
-    user-select: auto !important;
-}
-
-.us-none {
-    -webkit-user-select: none !important;
-    -moz-user-select: none !important;
-    -ms-user-select: none !important;
-    user-select: none !important;
-}
-
-//  ============================================================================
-//  $  USER DRAG
-//  ----------------------------------------------------------------------------
-.ud-auto {
-    -webkit-user-drag: auto !important;
-    -moz-user-drag: auto !important;
-    -ms-user-drag: auto !important;
-}
-
-.ud-none {
-    -webkit-user-drag: none !important;
-    -moz-user-drag: none !important;
-    -ms-user-drag: none !important;
-}
-
-//  ============================================================================
-//  $  VISIBILITY
-//  ----------------------------------------------------------------------------
-.v-visible { visibility: visible !important; }
-.v-hidden { visibility: hidden !important; }
-.v-visible-sr {
-    // Borrowed from Wordpress
-    // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
-    border: 0;
-    clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
-    clip-path: inset(50%);
-    height: var(--su-static1);
-    margin: calc(var(--su-static1) * -1); // -1px
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width:  var(--su-static1);
-    overflow-wrap: normal;
-}
-
-//  ============================================================================
-//  $  FLOATS
-//  ----------------------------------------------------------------------------
-.float-left { float: left !important; }
-.float-right { float: right !important; }
-.float-none { float: none !important; }
-.clearfix { .clearfix(); }
-.clear-left { clear: left !important; }
-.clear-right { clear: right !important; }
-.clear-both { clear: both !important; }
-.clear-none { clear: none !important; }
-
-//  ============================================================================
-//  $  BOX SIZING
-//  ----------------------------------------------------------------------------
-.box-content { box-sizing: content-box !important; }
-.box-border { box-sizing: border-box !important; }
-.box-unset { box-sizing: unset !important; }
-
-//  ============================================================================
-//  $  VERTICAL ALIGNMENT
-//  ----------------------------------------------------------------------------
-.va-baseline { vertical-align: baseline !important; }
-.va-bottom { vertical-align: bottom !important; }
-.va-middle { vertical-align: middle !important; }
-.va-sub { vertical-align: sub !important; }
-.va-super { vertical-align: super !important; }
-.va-text-bottom { vertical-align: text-bottom !important; }
-.va-text-top { vertical-align: text-top !important; }
-.va-top { vertical-align: top !important; }
-.va-unset { vertical-align: unset !important; }
-
-//  ============================================================================
-//  $  POSITION
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.ps-absolute', { position: absolute !important; });
-#stacks-internals #responsify('.ps-fixed', { position: fixed !important; });
-#stacks-internals #responsify('.ps-relative', { position: relative !important; });
-#stacks-internals #responsify('.ps-static', { position: static !important; });
-#stacks-internals #responsify('.ps-sticky', { position: sticky !important; });
-.ps-unset { position: unset !important; }
-
-//  ============================================================================
-//  $  OVERFLOW
-//  ----------------------------------------------------------------------------
-.overflow-auto { overflow: auto !important; @scrollbar-styles(); }
-.overflow-x-auto { overflow-x: auto !important; @scrollbar-styles(); }
-.overflow-y-auto { overflow-y: auto !important; @scrollbar-styles(); }
-
-.overflow-hidden { overflow: hidden !important; @scrollbar-styles(); }
-.overflow-x-hidden { overflow-x: hidden !important; @scrollbar-styles(); }
-.overflow-y-hidden { overflow-y: hidden !important; @scrollbar-styles(); }
-
-.overflow-scroll { overflow: scroll !important; @scrollbar-styles(); }
-.overflow-x-scroll { overflow-x: scroll !important; @scrollbar-styles(); }
-.overflow-y-scroll { overflow-y: scroll !important; @scrollbar-styles(); }
-
-.overflow-visible { overflow: visible !important; }
-
-//  ============================================================================
-//  $  OPACITY
-//  ----------------------------------------------------------------------------
-.o0 { opacity: 0 !important; }
-.h\:o0:hover { .o0; }
-.o5 { opacity: 0.05 !important; }
-.h\:o5:hover { .o5; }
-.o10 { opacity: 0.1 !important; }
-.o20 { opacity: 0.2 !important; }
-.o30 { opacity: 0.3 !important; }
-.o40 { opacity: 0.4 !important; }
-.o50 { opacity: 0.5 !important; }
-.h\:o50:hover { .o50; }
-.o60 { opacity: 0.6 !important; }
-.o70 { opacity: 0.7 !important; }
-.o80 { opacity: 0.8 !important; }
-.h\:o80:hover { .o80; }
-.o90 { opacity: 0.9 !important; }
-.o100 { opacity: 1 !important; }
-.h\:o100:hover { .o100; }
-
-.f\:o100 {
-    &:focus,
-    &:focus-within {
-        .o100;
-    }
-}
-
-//  ============================================================================
-//  $  Z-INDEX
-//  ----------------------------------------------------------------------------
-.z-hide { z-index: var(--zi-hide) !important; }
-.z-base { z-index: var(--zi-base) !important; }
-.z-active { z-index: var(--zi-active) !important; }
-.z-selected { z-index: var(--zi-selected) !important; }
-.z-dropdown { z-index: var(--zi-dropdown) !important; }
-.z-popover { z-index: var(--zi-popovers) !important; }
-.z-tooltip { z-index: var(--zi-tooltips) !important; }
-.z-banner { z-index: var(--zi-banners) !important; }
-.z-nav { z-index: var(--zi-navigation) !important; }
-.z-nav-fixed { z-index: var(--zi-navigation-fixed) !important; }
-.z-modal { z-index: var(--zi-modals) !important; }
-.z-modal-bg { z-index: var(--zi-modals-background) !important; }
-
-//  ============================================================================
-//  $  OUTLINE
-//  ----------------------------------------------------------------------------
-.outline-none { outline: 0 !important; }
-.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); }
-
-.f\:outline-ring {
-    &:focus,
-    &:focus-within {
-        .outline-ring;
-    }
-}
-
-//  ============================================================================
-//  $  CURRENT COLOR
-//  ----------------------------------------------------------------------------
-.fill-current { fill: currentColor !important; }
-.stroke-current { stroke: currentColor !important; }
-
-//  ============================================================================
-//  $  BOX SHADOW
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.bs-none', { box-shadow: none !important; });
-.bs-sm { box-shadow: var(--bs-sm) !important; }
-.h\:bs-sm:hover { .bs-sm; }
-.bs-md { box-shadow: var(--bs-md) !important; }
-.h\:bs-md:hover { .bs-md; }
-.bs-lg { box-shadow: var(--bs-lg) !important; }
-.h\:bs-lg:hover { .bs-lg; }
-.bs-xl { box-shadow: var(--bs-xl) !important; }
-.bs-ring { box-shadow: 0 0 0 var(--su-static4) var(--focus-ring); }
-.h\:bs-ring:hover { .bs-ring; }
-.f\:bs-ring {
-    &:focus,
-    &:focus-within {
-        .bs-ring;
-    }
-}
-
-//  --  Added hover styles for box-shadow
-// TODO do we still need them? Can we deprecate/remove these weird hover classes?
-.bs-sm.bs-hover:hover { box-shadow: 0 var(--su-static2) var(--su-static8) .set-black()[150] !important; }
-.bs-md.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static8) .set-black()[225] !important; }
-.bs-lg.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static12) fade(.set-black()[350], 70%) !important; }
-.bs-i-sm.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(.set-black()[300], 75%) !important; }
-.bs-i-md.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(.set-black()[350], 80%) !important; }
-.bs-i-lg.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 .set-black()[350] !important; }
-
-//  ============================================================================
-//  $  TRANSITIONS
-//  ----------------------------------------------------------------------------
-
-// -- Provide a sensible default
-.t {
-    transition-duration: var(--transition-time);
-    transition-property: all;
-    transition-timing-function: var(--te-ease-in);
-    transition-delay: 0s;
-}
-
-// -- Durations
-.t-slow { transition-duration: 0.25s !important; }
-.t-fast { transition-duration: 0.05s !important; }
-
-// -- Properties
-.t-unset { transition-property: none !important; }
-.t-bg { transition-property: background-color !important; }
-.t-opacity { transition-property: opacity !important; }
-.t-shadow { transition-property: box-shadow !important; }
-
-// -- Delays
-.t-delay { transition-delay: 0.25s !important; }
-.t-delay-unset { transition-delay: 0s !important; }
-
-//  ============================================================================
-//  $  TABLE LAYOUT
-//  ----------------------------------------------------------------------------
-.tl-fixed { table-layout: fixed !important; }
-.tl-auto { table-layout: auto !important; }
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/color-mixins.less";
+@import (reference) "../exports/constants-helpers.less";
+@import (reference) "../exports/mixins.less";
+
+//
+//  STACK OVERFLOW
+//  UTILITIES
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  ============================================================================
+//  $  DISPLAY
+//  ----------------------------------------------------------------------------
+
+#stacks-internals #responsify('.d-block', { display: block !important; });
+#stacks-internals #responsify('.d-flex', { display: flex !important; });
+#stacks-internals #responsify('.d-inline-flex', { display: inline-flex !important; });
+#stacks-internals #responsify('.d-grid', { display: grid !important; });
+#stacks-internals #responsify('.d-inline-grid', { display: inline-grid !important; });
+#stacks-internals #responsify('.d-inline', { display: inline !important; });
+#stacks-internals #responsify('.d-inline-block', { display: inline-block !important; });
+.d-table { display: table !important; }
+.d-table-cell { display: table-cell !important; }
+#stacks-internals #responsify('.d-none', { display: none !important; });
+.d-unset { display: unset !important; }
+
+//  ============================================================================
+//  $  BACKGROUND-POSITIONS
+//  ----------------------------------------------------------------------------
+.bg-bottom { background-position: bottom !important; }
+.bg-center { background-position: center !important; }
+.bg-left { background-position: left !important; }
+.bg-left-bottom { background-position: left bottom !important; }
+.bg-left-top { background-position: left top !important; }
+.bg-right { background-position: right !important; }
+.bg-right-bottom { background-position: right bottom !important; }
+.bg-right-top { background-position: right top !important; }
+.bg-top { background-position: top !important; }
+
+//  ============================================================================
+//  $  BACKGROUND-REPEATS
+//  ----------------------------------------------------------------------------
+.bg-repeat { background-repeat: repeat !important; }
+.bg-no-repeat { background-repeat: no-repeat !important; }
+.bg-repeat-x { background-repeat: repeat-x !important; }
+.bg-repeat-y { background-repeat: repeat-y !important; }
+
+//  ============================================================================
+//  $  BACKGROUND-SIZE
+//  ----------------------------------------------------------------------------
+.bg-auto { background-size: auto !important; }
+.bg-cover { background-size: cover !important; }
+.bg-contain { background-size: contain !important; }
+
+//  ============================================================================
+//  $  BACKGROUND-ATTACHMENT
+//  ----------------------------------------------------------------------------
+.bg-fixed { background-attachment: fixed !important; }
+.bg-local { background-attachment: local !important; }
+.bg-scroll { background-attachment: scroll !important; }
+
+//  ============================================================================
+//  $  BACKGROUND-IMAGE
+//  ----------------------------------------------------------------------------
+.bg-image-none { background-image: none !important; }
+
+.bg-confetti-animated {
+    background-repeat: repeat-x;
+    background-position: top -10px center;
+    background-image: url("data:image/svg+xml;,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
+
+    @media (prefers-reduced-motion) {
+        background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
+    }
+}
+
+.bg-confetti-static {
+    background-repeat: repeat-x;
+    background-position: top -10px center;
+    background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
+}
+
+// Focus styles
+.focus,
+.f\:focus:focus,
+.f\:focus:focus-within {
+    .focus-styles();
+}
+
+.focus-inset,
+.f\:focus-inset:focus,
+.f\:focus-inset:focus-within {
+    .focus-styles(true);
+}
+
+.focus-bordered,
+.f\:focus-bordered:focus,
+.f\:focus-bordered:focus-within {
+    .focus-styles(false, true);
+}
+
+.focus-inset-bordered,
+.f\:focus-inset-bordered:focus,
+.f\:focus-inset-bordered:focus-within {
+    .focus-styles(true, true);
+}
+
+//  ============================================================================
+//  $  OBJECT-FIT / OBJECT-POSITION
+//  ----------------------------------------------------------------------------
+
+.of-contain { object-fit: contain !important; }
+.of-cover { object-fit: cover !important; }
+.of-fill { object-fit: fill !important; }
+.of-none { object-fit: none !important; }
+.of-scale-down { object-fit: scale-down !important; }
+
+.op-center { object-position: center !important; }
+
+//  ============================================================================
+//  $  CURSORS
+//  ----------------------------------------------------------------------------
+.c-auto { cursor: auto !important; }
+.c-default { cursor: default !important; }
+.c-pointer { cursor: pointer !important; }
+.c-text { cursor: text !important; }
+.c-wait { cursor: wait !important; }
+.c-move { cursor: move !important; }
+.c-not-allowed { cursor: not-allowed !important; }
+.c-help { cursor: help !important; }
+
+//  ============================================================================
+//  $  POINTER EVENTS
+//  ----------------------------------------------------------------------------
+.pe-auto { pointer-events: auto !important; }
+.pe-none { pointer-events: none !important; }
+
+//  ============================================================================
+//  $  USER SELECT
+//  ----------------------------------------------------------------------------
+.us-auto {
+    -webkit-user-select: auto !important;
+    -moz-user-select: auto !important;
+    -ms-user-select: auto !important;
+    user-select: auto !important;
+}
+
+.us-none {
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}
+
+//  ============================================================================
+//  $  USER DRAG
+//  ----------------------------------------------------------------------------
+.ud-auto {
+    -webkit-user-drag: auto !important;
+    -moz-user-drag: auto !important;
+    -ms-user-drag: auto !important;
+}
+
+.ud-none {
+    -webkit-user-drag: none !important;
+    -moz-user-drag: none !important;
+    -ms-user-drag: none !important;
+}
+
+//  ============================================================================
+//  $  VISIBILITY
+//  ----------------------------------------------------------------------------
+.v-visible { visibility: visible !important; }
+.v-hidden { visibility: hidden !important; }
+.v-visible-sr {
+    // Borrowed from Wordpress
+    // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
+    border: 0;
+    clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
+    clip-path: inset(50%);
+    height: var(--su-static1);
+    margin: calc(var(--su-static1) * -1); // -1px
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width:  var(--su-static1);
+    overflow-wrap: normal;
+}
+
+//  ============================================================================
+//  $  FLOATS
+//  ----------------------------------------------------------------------------
+.float-left { float: left !important; }
+.float-right { float: right !important; }
+.float-none { float: none !important; }
+.clearfix { .clearfix(); }
+.clear-left { clear: left !important; }
+.clear-right { clear: right !important; }
+.clear-both { clear: both !important; }
+.clear-none { clear: none !important; }
+
+//  ============================================================================
+//  $  BOX SIZING
+//  ----------------------------------------------------------------------------
+.box-content { box-sizing: content-box !important; }
+.box-border { box-sizing: border-box !important; }
+.box-unset { box-sizing: unset !important; }
+
+//  ============================================================================
+//  $  VERTICAL ALIGNMENT
+//  ----------------------------------------------------------------------------
+.va-baseline { vertical-align: baseline !important; }
+.va-bottom { vertical-align: bottom !important; }
+.va-middle { vertical-align: middle !important; }
+.va-sub { vertical-align: sub !important; }
+.va-super { vertical-align: super !important; }
+.va-text-bottom { vertical-align: text-bottom !important; }
+.va-text-top { vertical-align: text-top !important; }
+.va-top { vertical-align: top !important; }
+.va-unset { vertical-align: unset !important; }
+
+//  ============================================================================
+//  $  POSITION
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.ps-absolute', { position: absolute !important; });
+#stacks-internals #responsify('.ps-fixed', { position: fixed !important; });
+#stacks-internals #responsify('.ps-relative', { position: relative !important; });
+#stacks-internals #responsify('.ps-static', { position: static !important; });
+#stacks-internals #responsify('.ps-sticky', { position: sticky !important; });
+.ps-unset { position: unset !important; }
+
+//  ============================================================================
+//  $  OVERFLOW
+//  ----------------------------------------------------------------------------
+.overflow-auto { overflow: auto !important; @scrollbar-styles(); }
+.overflow-x-auto { overflow-x: auto !important; @scrollbar-styles(); }
+.overflow-y-auto { overflow-y: auto !important; @scrollbar-styles(); }
+
+.overflow-hidden { overflow: hidden !important; @scrollbar-styles(); }
+.overflow-x-hidden { overflow-x: hidden !important; @scrollbar-styles(); }
+.overflow-y-hidden { overflow-y: hidden !important; @scrollbar-styles(); }
+
+.overflow-scroll { overflow: scroll !important; @scrollbar-styles(); }
+.overflow-x-scroll { overflow-x: scroll !important; @scrollbar-styles(); }
+.overflow-y-scroll { overflow-y: scroll !important; @scrollbar-styles(); }
+
+.overflow-visible { overflow: visible !important; }
+
+//  ============================================================================
+//  $  OPACITY
+//  ----------------------------------------------------------------------------
+.o0 { opacity: 0 !important; }
+.h\:o0:hover { .o0; }
+.o5 { opacity: 0.05 !important; }
+.h\:o5:hover { .o5; }
+.o10 { opacity: 0.1 !important; }
+.o20 { opacity: 0.2 !important; }
+.o30 { opacity: 0.3 !important; }
+.o40 { opacity: 0.4 !important; }
+.o50 { opacity: 0.5 !important; }
+.h\:o50:hover { .o50; }
+.o60 { opacity: 0.6 !important; }
+.o70 { opacity: 0.7 !important; }
+.o80 { opacity: 0.8 !important; }
+.h\:o80:hover { .o80; }
+.o90 { opacity: 0.9 !important; }
+.o100 { opacity: 1 !important; }
+.h\:o100:hover { .o100; }
+
+.f\:o100 {
+    &:focus,
+    &:focus-within {
+        .o100;
+    }
+}
+
+//  ============================================================================
+//  $  Z-INDEX
+//  ----------------------------------------------------------------------------
+.z-hide { z-index: var(--zi-hide) !important; }
+.z-base { z-index: var(--zi-base) !important; }
+.z-active { z-index: var(--zi-active) !important; }
+.z-selected { z-index: var(--zi-selected) !important; }
+.z-dropdown { z-index: var(--zi-dropdown) !important; }
+.z-popover { z-index: var(--zi-popovers) !important; }
+.z-tooltip { z-index: var(--zi-tooltips) !important; }
+.z-banner { z-index: var(--zi-banners) !important; }
+.z-nav { z-index: var(--zi-navigation) !important; }
+.z-nav-fixed { z-index: var(--zi-navigation-fixed) !important; }
+.z-modal { z-index: var(--zi-modals) !important; }
+.z-modal-bg { z-index: var(--zi-modals-background) !important; }
+
+//  ============================================================================
+//  $  OUTLINE
+//  ----------------------------------------------------------------------------
+.outline-none { outline: 0 !important; }
+.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); }
+
+.f\:outline-ring {
+    &:focus,
+    &:focus-within {
+        .outline-ring;
+    }
+}
+
+//  ============================================================================
+//  $  CURRENT COLOR
+//  ----------------------------------------------------------------------------
+.fill-current { fill: currentColor !important; }
+.stroke-current { stroke: currentColor !important; }
+
+//  ============================================================================
+//  $  BOX SHADOW
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.bs-none', { box-shadow: none !important; });
+.bs-sm { box-shadow: var(--bs-sm) !important; }
+.h\:bs-sm:hover { .bs-sm; }
+.bs-md { box-shadow: var(--bs-md) !important; }
+.h\:bs-md:hover { .bs-md; }
+.bs-lg { box-shadow: var(--bs-lg) !important; }
+.h\:bs-lg:hover { .bs-lg; }
+.bs-xl { box-shadow: var(--bs-xl) !important; }
+.bs-ring { box-shadow: 0 0 0 var(--su-static4) var(--focus-ring); }
+.h\:bs-ring:hover { .bs-ring; }
+.f\:bs-ring {
+    &:focus,
+    &:focus-within {
+        .bs-ring;
+    }
+}
+
+//  --  Added hover styles for box-shadow
+// TODO do we still need them? Can we deprecate/remove these weird hover classes?
+.bs-sm.bs-hover:hover { box-shadow: 0 var(--su-static2) var(--su-static8) .set-black()[150] !important; }
+.bs-md.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static8) .set-black()[225] !important; }
+.bs-lg.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static12) fade(.set-black()[350], 70%) !important; }
+.bs-i-sm.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(.set-black()[300], 75%) !important; }
+.bs-i-md.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(.set-black()[350], 80%) !important; }
+.bs-i-lg.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 .set-black()[350] !important; }
+
+//  ============================================================================
+//  $  TRANSITIONS
+//  ----------------------------------------------------------------------------
+
+// -- Provide a sensible default
+.t {
+    transition-duration: var(--transition-time);
+    transition-property: all;
+    transition-timing-function: var(--te-ease-in);
+    transition-delay: 0s;
+}
+
+// -- Durations
+.t-slow { transition-duration: 0.25s !important; }
+.t-fast { transition-duration: 0.05s !important; }
+
+// -- Properties
+.t-unset { transition-property: none !important; }
+.t-bg { transition-property: background-color !important; }
+.t-opacity { transition-property: opacity !important; }
+.t-shadow { transition-property: box-shadow !important; }
+
+// -- Delays
+.t-delay { transition-delay: 0.25s !important; }
+.t-delay-unset { transition-delay: 0s !important; }
+
+//  ============================================================================
+//  $  TABLE LAYOUT
+//  ----------------------------------------------------------------------------
+.tl-fixed { table-layout: fixed !important; }
+.tl-auto { table-layout: auto !important; }