/* Spacing Utilities */
/*
--spacing-xxs: 2px;
--spacing-xs: 4px;
--spacing-s: 8px;
--spacing-sm: 12px;
--spacing-ms: 16px;
--spacing-md: 20px;
--spacing-ld: 24px;
--spacing-xl: 32px;
--spacing-xxl: 48px;
*/

/* Padding Vertical (Y) */
.ss-spacing-y-xxl {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
}
.ss-spacing-y-xl {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}
.ss-spacing-y-ld {
    padding-top: var(--spacing-ld);
    padding-bottom: var(--spacing-ld);
}
.ss-spacing-y-md {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}
.ss-spacing-y-ms {
    padding-top: var(--spacing-ms);
    padding-bottom: var(--spacing-ms);
}
.ss-spacing-y-sm {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}
.ss-spacing-y-s {
    padding-top: var(--spacing-s);
    padding-bottom: var(--spacing-s);
}
.ss-spacing-y-xs {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
}
.ss-spacing-y-xxs {
    padding-top: var(--spacing-xxs);
    padding-bottom: var(--spacing-xxs);
}

/* Padding Horizontal (X) */
.ss-spacing-x-xxl {
    padding-left: var(--spacing-xxl);
    padding-right: var(--spacing-xxl);
}
.ss-spacing-x-xl {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
}
.ss-spacing-x-ld {
    padding-left: var(--spacing-ld);
    padding-right: var(--spacing-ld);
}
.ss-spacing-x-md {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}
.ss-spacing-x-ms {
    padding-left: var(--spacing-ms);
    padding-right: var(--spacing-ms);
}
.ss-spacing-x-sm {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}
.ss-spacing-x-s {
    padding-left: var(--spacing-s);
    padding-right: var(--spacing-s);
}
.ss-spacing-x-xs {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
}
.ss-spacing-x-xxs {
    padding-left: var(--spacing-xxs);
    padding-right: var(--spacing-xxs);
}

/* Padding All Sides */
.ss-spacing-xxl {
    padding: var(--spacing-xxl);
}
.ss-spacing-xl {
    padding: var(--spacing-xl);
}
.ss-spacing-ld {
    padding: var(--spacing-ld);
}
.ss-spacing-md {
    padding: var(--spacing-md);
}
.ss-spacing-ms {
    padding: var(--spacing-ms);
}
.ss-spacing-sm {
    padding: var(--spacing-sm);
}
.ss-spacing-s {
    padding: var(--spacing-s);
}
.ss-spacing-xs {
    padding: var(--spacing-xs);
}
.ss-spacing-xxs {
    padding: var(--spacing-xxs);
}

/* Padding Top */
.ss-spacing-t-xxl, .ss-spacing-top-xxl {
    padding-top: var(--spacing-xxl);
}
.ss-spacing-t-xl, .ss-spacing-top-xl {
    padding-top: var(--spacing-xl);
}
.ss-spacing-t-ld, .ss-spacing-top-ld {
    padding-top: var(--spacing-ld);
}
.ss-spacing-t-md, .ss-spacing-top-md {
    padding-top: var(--spacing-md);
}
.ss-spacing-t-ms, .ss-spacing-top-ms {
    padding-top: var(--spacing-ms);
}
.ss-spacing-t-sm, .ss-spacing-top-sm {
    padding-top: var(--spacing-sm);
}
.ss-spacing-t-s, .ss-spacing-top-s {
    padding-top: var(--spacing-s);
}
.ss-spacing-t-xs, .ss-spacing-top-xs {
    padding-top: var(--spacing-xs);
}
.ss-spacing-t-xxs, .ss-spacing-top-xxs {
    padding-top: var(--spacing-xxs);
}

/* Padding Bottom */
.ss-spacing-b-xxl, .ss-spacing-bottom-xxl {
    padding-bottom: var(--spacing-xxl);
}
.ss-spacing-b-xl, .ss-spacing-bottom-xl {
    padding-bottom: var(--spacing-xl);
}
.ss-spacing-b-ld, .ss-spacing-bottom-ld {
    padding-bottom: var(--spacing-ld);
}
.ss-spacing-b-md, .ss-spacing-bottom-md {
    padding-bottom: var(--spacing-md);
}
.ss-spacing-b-ms, .ss-spacing-bottom-ms {
    padding-bottom: var(--spacing-ms);
}
.ss-spacing-b-sm, .ss-spacing-bottom-sm {
    padding-bottom: var(--spacing-sm);
}
.ss-spacing-b-s, .ss-spacing-bottom-s {
    padding-bottom: var(--spacing-s);
}
.ss-spacing-b-xs, .ss-spacing-bottom-xs {
    padding-bottom: var(--spacing-xs);
}
.ss-spacing-b-xxs, .ss-spacing-bottom-xxs {
    padding-bottom: var(--spacing-xxs);
}

/* Padding Left */
.ss-spacing-l-xxl, .ss-spacing-left-xxl {
    padding-left: var(--spacing-xxl);
}
.ss-spacing-l-xl, .ss-spacing-left-xl {
    padding-left: var(--spacing-xl);
}
.ss-spacing-l-ld, .ss-spacing-left-ld {
    padding-left: var(--spacing-ld);
}
.ss-spacing-l-md, .ss-spacing-left-md {
    padding-left: var(--spacing-md);
}
.ss-spacing-l-ms, .ss-spacing-left-ms {
    padding-left: var(--spacing-ms);
}
.ss-spacing-l-sm, .ss-spacing-left-sm {
    padding-left: var(--spacing-sm);
}
.ss-spacing-l-s, .ss-spacing-left-s {
    padding-left: var(--spacing-s);
}
.ss-spacing-l-xs, .ss-spacing-left-xs {
    padding-left: var(--spacing-xs);
}
.ss-spacing-l-xxs, .ss-spacing-left-xxs {
    padding-left: var(--spacing-xxs);
}

/* Padding Right */
.ss-spacing-r-xxl, .ss-spacing-right-xxl {
    padding-right: var(--spacing-xxl);
}
.ss-spacing-r-xl, .ss-spacing-right-xl {
    padding-right: var(--spacing-xl);
}
.ss-spacing-r-ld, .ss-spacing-right-ld {
    padding-right: var(--spacing-ld);
}
.ss-spacing-r-md, .ss-spacing-right-md {
    padding-right: var(--spacing-md);
}
.ss-spacing-r-ms, .ss-spacing-right-ms {
    padding-right: var(--spacing-ms);
}
.ss-spacing-r-sm, .ss-spacing-right-sm {
    padding-right: var(--spacing-sm);
}
.ss-spacing-r-s, .ss-spacing-right-s {
    padding-right: var(--spacing-s);
}
.ss-spacing-r-xs, .ss-spacing-right-xs {
    padding-right: var(--spacing-xs);
}
.ss-spacing-r-xxs, .ss-spacing-right-xxs {
    padding-right: var(--spacing-xxs);
}

/* Margin Vertical (Y) */
.ss-margin-y-xxl {
    margin-top: var(--spacing-xxl);
    margin-bottom: var(--spacing-xxl);
}
.ss-margin-y-xl {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}
.ss-margin-y-ld {
    margin-top: var(--spacing-ld);
    margin-bottom: var(--spacing-ld);
}
.ss-margin-y-md {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.ss-margin-y-ms {
    margin-top: var(--spacing-ms);
    margin-bottom: var(--spacing-ms);
}
.ss-margin-y-sm {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.ss-margin-y-s {
    margin-top: var(--spacing-s);
    margin-bottom: var(--spacing-s);
}
.ss-margin-y-xs {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}
.ss-margin-y-xxs {
    margin-top: var(--spacing-xxs);
    margin-bottom: var(--spacing-xxs);
}

/* Margin Horizontal (X) */
.ss-margin-x-xxl {
    margin-left: var(--spacing-xxl);
    margin-right: var(--spacing-xxl);
}
.ss-margin-x-xl {
    margin-left: var(--spacing-xl);
    margin-right: var(--spacing-xl);
}
.ss-margin-x-ld {
    margin-left: var(--spacing-ld);
    margin-right: var(--spacing-ld);
}
.ss-margin-x-md {
    margin-left: var(--spacing-md);
    margin-right: var(--spacing-md);
}
.ss-margin-x-ms {
    margin-left: var(--spacing-ms);
    margin-right: var(--spacing-ms);
}
.ss-margin-x-sm {
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
}
.ss-margin-x-s {
    margin-left: var(--spacing-s);
    margin-right: var(--spacing-s);
}
.ss-margin-x-xs {
    margin-left: var(--spacing-xs);
    margin-right: var(--spacing-xs);
}
.ss-margin-x-xxs {
    margin-left: var(--spacing-xxs);
    margin-right: var(--spacing-xxs);
}

/* Margin All Sides */
.ss-margin-xxl {
    margin: var(--spacing-xxl);
}
.ss-margin-xl {
    margin: var(--spacing-xl);
}
.ss-margin-ld {
    margin: var(--spacing-ld);
}
.ss-margin-md {
    margin: var(--spacing-md);
}
.ss-margin-ms {
    margin: var(--spacing-ms);
}
.ss-margin-sm {
    margin: var(--spacing-sm);
}
.ss-margin-s {
    margin: var(--spacing-s);
}
.ss-margin-xs {
    margin: var(--spacing-xs);
}
.ss-margin-xxs {
    margin: var(--spacing-xxs);
}

/* Margin Top */
.ss-margin-t-xxl, .ss-margin-top-xxl {
    margin-top: var(--spacing-xxl);
}
.ss-margin-t-xl, .ss-margin-top-xl {
    margin-top: var(--spacing-xl);
}
.ss-margin-t-ld, .ss-margin-top-ld {
    margin-top: var(--spacing-ld);
}
.ss-margin-t-md, .ss-margin-top-md {
    margin-top: var(--spacing-md);
}
.ss-margin-t-ms, .ss-margin-top-ms {
    margin-top: var(--spacing-ms);
}
.ss-margin-t-sm, .ss-margin-top-sm {
    margin-top: var(--spacing-sm);
}
.ss-margin-t-s, .ss-margin-top-s {
    margin-top: var(--spacing-s);
}
.ss-margin-t-xs, .ss-margin-top-xs {
    margin-top: var(--spacing-xs);
}
.ss-margin-t-xxs, .ss-margin-top-xxs {
    margin-top: var(--spacing-xxs);
}

/* Margin Bottom */
.ss-margin-b-xxl, .ss-margin-bottom-xxl {
    margin-bottom: var(--spacing-xxl);
}
.ss-margin-b-xl, .ss-margin-bottom-xl {
    margin-bottom: var(--spacing-xl);
}
.ss-margin-b-ld, .ss-margin-bottom-ld {
    margin-bottom: var(--spacing-ld);
}
.ss-margin-b-md, .ss-margin-bottom-md {
    margin-bottom: var(--spacing-md);
}
.ss-margin-b-ms, .ss-margin-bottom-ms {
    margin-bottom: var(--spacing-ms);
}
.ss-margin-b-sm, .ss-margin-bottom-sm {
    margin-bottom: var(--spacing-sm);
}
.ss-margin-b-s, .ss-margin-bottom-s {
    margin-bottom: var(--spacing-s);
}
.ss-margin-b-xs, .ss-margin-bottom-xs {
    margin-bottom: var(--spacing-xs);
}
.ss-margin-b-xxs, .ss-margin-bottom-xxs {
    margin-bottom: var(--spacing-xxs);
}

/* Margin Left */
.ss-margin-l-xxl, .ss-margin-left-xxl {
    margin-left: var(--spacing-xxl);
}
.ss-margin-l-xl, .ss-margin-left-xl {
    margin-left: var(--spacing-xl);
}
.ss-margin-l-ld, .ss-margin-left-ld {
    margin-left: var(--spacing-ld);
}
.ss-margin-l-md, .ss-margin-left-md {
    margin-left: var(--spacing-md);
}
.ss-margin-l-ms, .ss-margin-left-ms {
    margin-left: var(--spacing-ms);
}
.ss-margin-l-sm, .ss-margin-left-sm {
    margin-left: var(--spacing-sm);
}
.ss-margin-l-s, .ss-margin-left-s {
    margin-left: var(--spacing-s);
}
.ss-margin-l-xs, .ss-margin-left-xs {
    margin-left: var(--spacing-xs);
}
.ss-margin-l-xxs, .ss-margin-left-xxs {
    margin-left: var(--spacing-xxs);
}

/* Margin Right */
.ss-margin-r-xxl, .ss-margin-right-xxl {
    margin-right: var(--spacing-xxl);
}
.ss-margin-r-xl, .ss-margin-right-xl {
    margin-right: var(--spacing-xl);
}
.ss-margin-r-ld, .ss-margin-right-ld {
    margin-right: var(--spacing-ld);
}
.ss-margin-r-md, .ss-margin-right-md {
    margin-right: var(--spacing-md);
}
.ss-margin-r-ms, .ss-margin-right-ms {
    margin-right: var(--spacing-ms);
}
.ss-margin-r-sm, .ss-margin-right-sm {
    margin-right: var(--spacing-sm);
}
.ss-margin-r-s, .ss-margin-right-s {
    margin-right: var(--spacing-s);
}
.ss-margin-r-xs, .ss-margin-right-xs {
    margin-right: var(--spacing-xs);
}
.ss-margin-r-xxs, .ss-margin-right-xxs {
    margin-right: var(--spacing-xxs);
}

/* Gap (Flexbox / Grid) */
.ss-gap-xxl {
    gap: var(--spacing-xxl);
}
.ss-gap-xl {
    gap: var(--spacing-xl);
}
.ss-gap-ld {
    gap: var(--spacing-ld);
}
.ss-gap-md {
    gap: var(--spacing-md);
}
.ss-gap-ms {
    gap: var(--spacing-ms);
}
.ss-gap-sm {
    gap: var(--spacing-sm);
}
.ss-gap-s {
    gap: var(--spacing-s);
}
.ss-gap-xs {
    gap: var(--spacing-xs);
}
.ss-gap-xxs {
    gap: var(--spacing-xxs);
}

.ss-gap-x-xxl {
    column-gap: var(--spacing-xxl);
}
.ss-gap-x-xl {
    column-gap: var(--spacing-xl);
}
.ss-gap-x-ld {
    column-gap: var(--spacing-ld);
}
.ss-gap-x-md {
    column-gap: var(--spacing-md);
}
.ss-gap-x-ms {
    column-gap: var(--spacing-ms);
}
.ss-gap-x-sm {
    column-gap: var(--spacing-sm);
}
.ss-gap-x-s {
    column-gap: var(--spacing-s);
}
.ss-gap-x-xs {
    column-gap: var(--spacing-xs);
}
.ss-gap-x-xxs {
    column-gap: var(--spacing-xxs);
}

.ss-gap-y-xxl {
    row-gap: var(--spacing-xxl);
}
.ss-gap-y-xl {
    row-gap: var(--spacing-xl);
}
.ss-gap-y-ld {
    row-gap: var(--spacing-ld);
}
.ss-gap-y-md {
    row-gap: var(--spacing-md);
}
.ss-gap-y-ms {
    row-gap: var(--spacing-ms);
}
.ss-gap-y-sm {
    row-gap: var(--spacing-sm);
}
.ss-gap-y-s {
    row-gap: var(--spacing-s);
}
.ss-gap-y-xs {
    row-gap: var(--spacing-xs);
}
.ss-gap-y-xxs {
    row-gap: var(--spacing-xxs);
}

/* ==========================================================================
   Radius Utilities
   ========================================================================== */
/*
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-xxl: 16px;
--radius-2xxl: 24px;
--radius-3xxxl: 32px;
--radius-xxxl: 999px;
*/

/* Border Radius - All Corners */
.ss-radius-0, .ss-radius-none,
.ss-rounded-0, .ss-rounded-none {
    border-radius: 0;
}
.ss-radius-xs, .ss-rounded-xs {
    border-radius: var(--radius-xs);
}
.ss-radius-sm, .ss-rounded-sm {
    border-radius: var(--radius-sm);
}
.ss-radius-md, .ss-rounded-md {
    border-radius: var(--radius-md);
}
.ss-radius-lg, .ss-rounded-lg {
    border-radius: var(--radius-lg);
}
.ss-radius-xl, .ss-rounded-xl {
    border-radius: var(--radius-xl);
}
.ss-radius-xxl, .ss-rounded-xxl {
    border-radius: var(--radius-xxl);
}
.ss-radius-2xxl, .ss-rounded-2xxl {
    border-radius: var(--radius-2xxl);
}
.ss-radius-3xxxl, .ss-rounded-3xxxl {
    border-radius: var(--radius-3xxxl);
}
.ss-radius-xxxl, .ss-rounded-xxxl,
.ss-radius-full, .ss-rounded-full,
.ss-radius-circle, .ss-rounded-circle,
.ss-radius-pill, .ss-rounded-pill {
    border-radius: var(--radius-xxxl);
}

/* Border Radius - Top Corners */
.ss-radius-t-0, .ss-radius-top-0,
.ss-radius-t-none, .ss-radius-top-none,
.ss-rounded-t-0, .ss-rounded-top-0,
.ss-rounded-t-none, .ss-rounded-top-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.ss-radius-t-xs, .ss-radius-top-xs,
.ss-rounded-t-xs, .ss-rounded-top-xs {
    border-top-left-radius: var(--radius-xs);
    border-top-right-radius: var(--radius-xs);
}
.ss-radius-t-sm, .ss-radius-top-sm,
.ss-rounded-t-sm, .ss-rounded-top-sm {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}
.ss-radius-t-md, .ss-radius-top-md,
.ss-rounded-t-md, .ss-rounded-top-md {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}
.ss-radius-t-lg, .ss-radius-top-lg,
.ss-rounded-t-lg, .ss-rounded-top-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}
.ss-radius-t-xl, .ss-radius-top-xl,
.ss-rounded-t-xl, .ss-rounded-top-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}
.ss-radius-t-xxl, .ss-radius-top-xxl,
.ss-rounded-t-xxl, .ss-rounded-top-xxl {
    border-top-left-radius: var(--radius-xxl);
    border-top-right-radius: var(--radius-xxl);
}
.ss-radius-t-2xxl, .ss-radius-top-2xxl,
.ss-rounded-t-2xxl, .ss-rounded-top-2xxl {
    border-top-left-radius: var(--radius-2xxl);
    border-top-right-radius: var(--radius-2xxl);
}
.ss-radius-t-3xxxl, .ss-radius-top-3xxxl,
.ss-rounded-t-3xxxl, .ss-rounded-top-3xxxl {
    border-top-left-radius: var(--radius-3xxxl);
    border-top-right-radius: var(--radius-3xxxl);
}
.ss-radius-t-xxxl, .ss-radius-top-xxxl,
.ss-rounded-t-xxxl, .ss-rounded-top-xxxl,
.ss-radius-t-full, .ss-radius-top-full,
.ss-rounded-t-full, .ss-rounded-top-full {
    border-top-left-radius: var(--radius-xxxl);
    border-top-right-radius: var(--radius-xxxl);
}

/* Border Radius - Bottom Corners */
.ss-radius-b-0, .ss-radius-bottom-0,
.ss-radius-b-none, .ss-radius-bottom-none,
.ss-rounded-b-0, .ss-rounded-bottom-0,
.ss-rounded-b-none, .ss-rounded-bottom-none {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ss-radius-b-xs, .ss-radius-bottom-xs,
.ss-rounded-b-xs, .ss-rounded-bottom-xs {
    border-bottom-left-radius: var(--radius-xs);
    border-bottom-right-radius: var(--radius-xs);
}
.ss-radius-b-sm, .ss-radius-bottom-sm,
.ss-rounded-b-sm, .ss-rounded-bottom-sm {
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.ss-radius-b-md, .ss-radius-bottom-md,
.ss-rounded-b-md, .ss-rounded-bottom-md {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}
.ss-radius-b-lg, .ss-radius-bottom-lg,
.ss-rounded-b-lg, .ss-rounded-bottom-lg {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}
.ss-radius-b-xl, .ss-radius-bottom-xl,
.ss-rounded-b-xl, .ss-rounded-bottom-xl {
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
}
.ss-radius-b-xxl, .ss-radius-bottom-xxl,
.ss-rounded-b-xxl, .ss-rounded-bottom-xxl {
    border-bottom-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}
.ss-radius-b-2xxl, .ss-radius-bottom-2xxl,
.ss-rounded-b-2xxl, .ss-rounded-bottom-2xxl {
    border-bottom-left-radius: var(--radius-2xxl);
    border-bottom-right-radius: var(--radius-2xxl);
}
.ss-radius-b-3xxxl, .ss-radius-bottom-3xxxl,
.ss-rounded-b-3xxxl, .ss-rounded-bottom-3xxxl {
    border-bottom-left-radius: var(--radius-3xxxl);
    border-bottom-right-radius: var(--radius-3xxxl);
}
.ss-radius-b-xxxl, .ss-radius-bottom-xxxl,
.ss-rounded-b-xxxl, .ss-rounded-bottom-xxxl,
.ss-radius-b-full, .ss-radius-bottom-full,
.ss-rounded-b-full, .ss-rounded-bottom-full {
    border-bottom-left-radius: var(--radius-xxxl);
    border-bottom-right-radius: var(--radius-xxxl);
}

/* Border Radius - Left / Start Corners */
.ss-radius-l-0, .ss-radius-left-0, .ss-radius-start-0, .ss-radius-s-0,
.ss-radius-l-none, .ss-radius-left-none, .ss-radius-start-none, .ss-radius-s-none,
.ss-rounded-l-0, .ss-rounded-left-0, .ss-rounded-start-0, .ss-rounded-s-0,
.ss-rounded-l-none, .ss-rounded-left-none, .ss-rounded-start-none, .ss-rounded-s-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.ss-radius-l-xs, .ss-radius-left-xs, .ss-radius-start-xs, .ss-radius-s-xs,
.ss-rounded-l-xs, .ss-rounded-left-xs, .ss-rounded-start-xs, .ss-rounded-s-xs {
    border-top-left-radius: var(--radius-xs);
    border-bottom-left-radius: var(--radius-xs);
}
.ss-radius-l-sm, .ss-radius-left-sm, .ss-radius-start-sm, .ss-radius-s-sm,
.ss-rounded-l-sm, .ss-rounded-left-sm, .ss-rounded-start-sm, .ss-rounded-s-sm {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}
.ss-radius-l-md, .ss-radius-left-md, .ss-radius-start-md, .ss-radius-s-md,
.ss-rounded-l-md, .ss-rounded-left-md, .ss-rounded-start-md, .ss-rounded-s-md {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}
.ss-radius-l-lg, .ss-radius-left-lg, .ss-radius-start-lg, .ss-radius-s-lg,
.ss-rounded-l-lg, .ss-rounded-left-lg, .ss-rounded-start-lg, .ss-rounded-s-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}
.ss-radius-l-xl, .ss-radius-left-xl, .ss-radius-start-xl, .ss-radius-s-xl,
.ss-rounded-l-xl, .ss-rounded-left-xl, .ss-rounded-start-xl, .ss-rounded-s-xl {
    border-top-left-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
}
.ss-radius-l-xxl, .ss-radius-left-xxl, .ss-radius-start-xxl, .ss-radius-s-xxl,
.ss-rounded-l-xxl, .ss-rounded-left-xxl, .ss-rounded-start-xxl, .ss-rounded-s-xxl {
    border-top-left-radius: var(--radius-xxl);
    border-bottom-left-radius: var(--radius-xxl);
}
.ss-radius-l-2xxl, .ss-radius-left-2xxl, .ss-radius-start-2xxl, .ss-radius-s-2xxl,
.ss-rounded-l-2xxl, .ss-rounded-left-2xxl, .ss-rounded-start-2xxl, .ss-rounded-s-2xxl {
    border-top-left-radius: var(--radius-2xxl);
    border-bottom-left-radius: var(--radius-2xxl);
}
.ss-radius-l-3xxxl, .ss-radius-left-3xxxl, .ss-radius-start-3xxxl, .ss-radius-s-3xxxl,
.ss-rounded-l-3xxxl, .ss-rounded-left-3xxxl, .ss-rounded-start-3xxxl, .ss-rounded-s-3xxxl {
    border-top-left-radius: var(--radius-3xxxl);
    border-bottom-left-radius: var(--radius-3xxxl);
}
.ss-radius-l-xxxl, .ss-radius-left-xxxl, .ss-radius-start-xxxl, .ss-radius-s-xxxl,
.ss-rounded-l-xxxl, .ss-rounded-left-xxxl, .ss-rounded-start-xxxl, .ss-rounded-s-xxxl,
.ss-radius-l-full, .ss-radius-left-full, .ss-radius-start-full, .ss-radius-s-full,
.ss-rounded-l-full, .ss-rounded-left-full, .ss-rounded-start-full, .ss-rounded-s-full {
    border-top-left-radius: var(--radius-xxxl);
    border-bottom-left-radius: var(--radius-xxxl);
}

/* Border Radius - Right / End Corners */
.ss-radius-r-0, .ss-radius-right-0, .ss-radius-end-0, .ss-radius-e-0,
.ss-radius-r-none, .ss-radius-right-none, .ss-radius-end-none, .ss-radius-e-none,
.ss-rounded-r-0, .ss-rounded-right-0, .ss-rounded-end-0, .ss-rounded-e-0,
.ss-rounded-r-none, .ss-rounded-right-none, .ss-rounded-end-none, .ss-rounded-e-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ss-radius-r-xs, .ss-radius-right-xs, .ss-radius-end-xs, .ss-radius-e-xs,
.ss-rounded-r-xs, .ss-rounded-right-xs, .ss-rounded-end-xs, .ss-rounded-e-xs {
    border-top-right-radius: var(--radius-xs);
    border-bottom-right-radius: var(--radius-xs);
}
.ss-radius-r-sm, .ss-radius-right-sm, .ss-radius-end-sm, .ss-radius-e-sm,
.ss-rounded-r-sm, .ss-rounded-right-sm, .ss-rounded-end-sm, .ss-rounded-e-sm {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.ss-radius-r-md, .ss-radius-right-md, .ss-radius-end-md, .ss-radius-e-md,
.ss-rounded-r-md, .ss-rounded-right-md, .ss-rounded-end-md, .ss-rounded-e-md {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}
.ss-radius-r-lg, .ss-radius-right-lg, .ss-radius-end-lg, .ss-radius-e-lg,
.ss-rounded-r-lg, .ss-rounded-right-lg, .ss-rounded-end-lg, .ss-rounded-e-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}
.ss-radius-r-xl, .ss-radius-right-xl, .ss-radius-end-xl, .ss-radius-e-xl,
.ss-rounded-r-xl, .ss-rounded-right-xl, .ss-rounded-end-xl, .ss-rounded-e-xl {
    border-top-right-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
}
.ss-radius-r-xxl, .ss-radius-right-xxl, .ss-radius-end-xxl, .ss-radius-e-xxl,
.ss-rounded-r-xxl, .ss-rounded-right-xxl, .ss-rounded-end-xxl, .ss-rounded-e-xxl {
    border-top-right-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}
.ss-radius-r-2xxl, .ss-radius-right-2xxl, .ss-radius-end-2xxl, .ss-radius-e-2xxl,
.ss-rounded-r-2xxl, .ss-rounded-right-2xxl, .ss-rounded-end-2xxl, .ss-rounded-e-2xxl {
    border-top-right-radius: var(--radius-2xxl);
    border-bottom-right-radius: var(--radius-2xxl);
}
.ss-radius-r-3xxxl, .ss-radius-right-3xxxl, .ss-radius-end-3xxxl, .ss-radius-e-3xxxl,
.ss-rounded-r-3xxxl, .ss-rounded-right-3xxxl, .ss-rounded-end-3xxxl, .ss-rounded-e-3xxxl {
    border-top-right-radius: var(--radius-3xxxl);
    border-bottom-right-radius: var(--radius-3xxxl);
}
.ss-radius-r-xxxl, .ss-radius-right-xxxl, .ss-radius-end-xxxl, .ss-radius-e-xxxl,
.ss-rounded-r-xxxl, .ss-rounded-right-xxxl, .ss-rounded-end-xxxl, .ss-rounded-e-xxxl,
.ss-radius-r-full, .ss-radius-right-full, .ss-radius-end-full, .ss-radius-e-full,
.ss-rounded-r-full, .ss-rounded-right-full, .ss-rounded-end-full, .ss-rounded-e-full {
    border-top-right-radius: var(--radius-xxxl);
    border-bottom-right-radius: var(--radius-xxxl);
}

/* Border Radius - Individual Corners */
/* Top Left */
.ss-radius-tl-0, .ss-radius-top-left-0 { border-top-left-radius: 0; }
.ss-radius-tl-xs, .ss-radius-top-left-xs { border-top-left-radius: var(--radius-xs); }
.ss-radius-tl-sm, .ss-radius-top-left-sm { border-top-left-radius: var(--radius-sm); }
.ss-radius-tl-md, .ss-radius-top-left-md { border-top-left-radius: var(--radius-md); }
.ss-radius-tl-lg, .ss-radius-top-left-lg { border-top-left-radius: var(--radius-lg); }
.ss-radius-tl-xl, .ss-radius-top-left-xl { border-top-left-radius: var(--radius-xl); }
.ss-radius-tl-xxl, .ss-radius-top-left-xxl { border-top-left-radius: var(--radius-xxl); }
.ss-radius-tl-2xxl, .ss-radius-top-left-2xxl { border-top-left-radius: var(--radius-2xxl); }
.ss-radius-tl-3xxxl, .ss-radius-top-left-3xxxl { border-top-left-radius: var(--radius-3xxxl); }
.ss-radius-tl-xxxl, .ss-radius-top-left-xxxl { border-top-left-radius: var(--radius-xxxl); }

/* Top Right */
.ss-radius-tr-0, .ss-radius-top-right-0 { border-top-right-radius: 0; }
.ss-radius-tr-xs, .ss-radius-top-right-xs { border-top-right-radius: var(--radius-xs); }
.ss-radius-tr-sm, .ss-radius-top-right-sm { border-top-right-radius: var(--radius-sm); }
.ss-radius-tr-md, .ss-radius-top-right-md { border-top-right-radius: var(--radius-md); }
.ss-radius-tr-lg, .ss-radius-top-right-lg { border-top-right-radius: var(--radius-lg); }
.ss-radius-tr-xl, .ss-radius-top-right-xl { border-top-right-radius: var(--radius-xl); }
.ss-radius-tr-xxl, .ss-radius-top-right-xxl { border-top-right-radius: var(--radius-xxl); }
.ss-radius-tr-2xxl, .ss-radius-top-right-2xxl { border-top-right-radius: var(--radius-2xxl); }
.ss-radius-tr-3xxxl, .ss-radius-top-right-3xxxl { border-top-right-radius: var(--radius-3xxxl); }
.ss-radius-tr-xxxl, .ss-radius-top-right-xxxl { border-top-right-radius: var(--radius-xxxl); }

/* Bottom Left */
.ss-radius-bl-0, .ss-radius-bottom-left-0 { border-bottom-left-radius: 0; }
.ss-radius-bl-xs, .ss-radius-bottom-left-xs { border-bottom-left-radius: var(--radius-xs); }
.ss-radius-bl-sm, .ss-radius-bottom-left-sm { border-bottom-left-radius: var(--radius-sm); }
.ss-radius-bl-md, .ss-radius-bottom-left-md { border-bottom-left-radius: var(--radius-md); }
.ss-radius-bl-lg, .ss-radius-bottom-left-lg { border-bottom-left-radius: var(--radius-lg); }
.ss-radius-bl-xl, .ss-radius-bottom-left-xl { border-bottom-left-radius: var(--radius-xl); }
.ss-radius-bl-xxl, .ss-radius-bottom-left-xxl { border-bottom-left-radius: var(--radius-xxl); }
.ss-radius-bl-2xxl, .ss-radius-bottom-left-2xxl { border-bottom-left-radius: var(--radius-2xxl); }
.ss-radius-bl-3xxxl, .ss-radius-bottom-left-3xxxl { border-bottom-left-radius: var(--radius-3xxxl); }
.ss-radius-bl-xxxl, .ss-radius-bottom-left-xxxl { border-bottom-left-radius: var(--radius-xxxl); }

/* Bottom Right */
.ss-radius-br-0, .ss-radius-bottom-right-0 { border-bottom-right-radius: 0; }
.ss-radius-br-xs, .ss-radius-bottom-right-xs { border-bottom-right-radius: var(--radius-xs); }
.ss-radius-br-sm, .ss-radius-bottom-right-sm { border-bottom-right-radius: var(--radius-sm); }
.ss-radius-br-md, .ss-radius-bottom-right-md { border-bottom-right-radius: var(--radius-md); }
.ss-radius-br-lg, .ss-radius-bottom-right-lg { border-bottom-right-radius: var(--radius-lg); }
.ss-radius-br-xl, .ss-radius-bottom-right-xl { border-bottom-right-radius: var(--radius-xl); }
.ss-radius-br-xxl, .ss-radius-bottom-right-xxl { border-bottom-right-radius: var(--radius-xxl); }
.ss-radius-br-2xxl, .ss-radius-bottom-right-2xxl { border-bottom-right-radius: var(--radius-2xxl); }
.ss-radius-br-3xxxl, .ss-radius-bottom-right-3xxxl { border-bottom-right-radius: var(--radius-3xxxl); }
.ss-radius-br-xxxl, .ss-radius-bottom-right-xxxl { border-bottom-right-radius: var(--radius-xxxl); }

/* ==========================================================================
   Content Utilities
   ========================================================================== */
/*
--content-bg: #EEF3EF;
--content-bg-hover: #FFFFFF;
--content-stroke: #FFFFFF;
--content-box-bg: #0000000D;
*/

/* Content Backgrounds */
.ss-bg-content,
.ss-content-bg {
    background-color: var(--content-bg);
}
.ss-bg-content-hover,
.ss-content-bg-hover {
    background-color: var(--content-bg-hover);
}
.ss-bg-content-box,
.ss-content-box-bg {
    background-color: var(--content-box-bg);
}

/* Content Background Hover States */
.ss-hover-bg-content:hover {
    background-color: var(--content-bg);
}
.ss-hover-bg-content-hover:hover {
    background-color: var(--content-bg-hover);
}
.ss-hover-bg-content-box:hover {
    background-color: var(--content-box-bg);
}

/* Content Stroke / Border */
.ss-stroke-content,
.ss-border-content,
.ss-border-content-stroke {
    border-color: var(--content-stroke);
}
.ss-border-t-content,
.ss-border-top-content {
    border-top-color: var(--content-stroke);
}
.ss-border-b-content,
.ss-border-bottom-content {
    border-bottom-color: var(--content-stroke);
}
.ss-border-l-content,
.ss-border-left-content,
.ss-border-start-content {
    border-left-color: var(--content-stroke);
}
.ss-border-r-content,
.ss-border-right-content,
.ss-border-end-content {
    border-right-color: var(--content-stroke);
}

/* Content Box Utility */
.ss-content-box {
    background-color: var(--content-box-bg);
    border: 1px solid var(--content-stroke);
}