@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;600&family=Lato:wght@400;700&family=Montserrat:wght@400;600&display=swap");

@import url("https://fonts.cdnfonts.com/css/geist");

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');

/* * TOKEN IMPORTS * */

/*
 * ===========================================================================
 *  REFERENCE TOKENS INDEX
 * ===========================================================================
 */

/*
 * ===========================================================================
 *  COLOR REFERENCE TOKENS
 *  sb-ref-color-*
 * ---------------------------------------------------------------------------
 *  Color token values are stored as HSL color components. This format allows
 *  for flexible usage with the `hsl()` function and supports alpha channel
 *  when needed. Each palette follows a 50-950 scale where 50 is the lightest
 *  and 950 is the darkest.
 * ===========================================================================
 */

:root {
  --sb-ref-color-white: 0 0% 100%;
  --sb-ref-color-black: 0 0% 0%;
  --sb-ref-color-transparent: 0 0% 0% / 0;

  /* * BASE * */
  /* The base palette consists of neutral colors. It is the foundational color
  of the UI, used for backgrounds, borders, text, and more. */
  --sb-ref-color-base-50: 0 0% 98%;
  --sb-ref-color-base-100: 0 0% 96%;
  --sb-ref-color-base-200: 0 0% 90%;
  --sb-ref-color-base-300: 0 0% 83%;
  --sb-ref-color-base-400: 0 0% 64%;
  --sb-ref-color-base-500: 0 0% 45%;
  --sb-ref-color-base-600: 0 0% 32%;
  --sb-ref-color-base-700: 0 0% 25%;
  --sb-ref-color-base-800: 0 0% 15%;
  --sb-ref-color-base-900: 0 0% 9%;
  --sb-ref-color-base-950: 0 0% 4%;

  /* * BRAND * */
  /* The brand palette is built on the primary color of the brand. It is mainly
  used for key actions and interactive components throughout the UI. */
  --sb-ref-color-brand-50: 0 0% 98%;
  --sb-ref-color-brand-100: 0 0% 96%;
  --sb-ref-color-brand-200: 0 0% 90%;
  --sb-ref-color-brand-300: 0 0% 83%;
  --sb-ref-color-brand-400: 0 0% 64%;
  --sb-ref-color-brand-500: 0 0% 45%;
  --sb-ref-color-brand-600: 0 0% 32%;
  --sb-ref-color-brand-700: 0 0% 25%;
  --sb-ref-color-brand-800: 0 0% 15%;
  --sb-ref-color-brand-900: 0 0% 9%;
  --sb-ref-color-brand-950: 0 0% 4%;

  /* * DESTRUCTIVE * */
  /* The destructive palette is used for desturctive actions, error states, and
  critical alerts. */
  --sb-ref-color-destructive-50: 0 86% 97%;
  --sb-ref-color-destructive-100: 0 93% 94%;
  --sb-ref-color-destructive-200: 0 96% 89%;
  --sb-ref-color-destructive-300: 0 94% 82%;
  --sb-ref-color-destructive-400: 0 91% 71%;
  --sb-ref-color-destructive-500: 0 84% 60%;
  --sb-ref-color-destructive-600: 0 72% 51%;
  --sb-ref-color-destructive-700: 0 74% 42%;
  --sb-ref-color-destructive-800: 0 70% 35%;
  --sb-ref-color-destructive-900: 0 63% 31%;
  --sb-ref-color-destructive-950: 0 75% 15%;

  /* * WARNING * */
  /* The warning palette is used for warning states and cautionary messages,
  alerting users to potential issues or information requiring attention. */
  --sb-ref-color-warning-50: 33 100% 96%;
  --sb-ref-color-warning-100: 34 100% 92%;
  --sb-ref-color-warning-200: 32 98% 83%;
  --sb-ref-color-warning-300: 31 97% 72%;
  --sb-ref-color-warning-400: 27 96% 61%;
  --sb-ref-color-warning-500: 25 95% 53%;
  --sb-ref-color-warning-600: 21 90% 48%;
  --sb-ref-color-warning-700: 17 88% 40%;
  --sb-ref-color-warning-800: 15 79% 34%;
  --sb-ref-color-warning-900: 15 75% 28%;
  --sb-ref-color-warning-950: 13 81% 15%;

  /* * SUCCESS * */
  /* The success palette is used for success states, positive feedback, and
  completed actions. */
  --sb-ref-color-success-50: 138 76% 97%;
  --sb-ref-color-success-100: 141 84% 93%;
  --sb-ref-color-success-200: 141 79% 85%;
  --sb-ref-color-success-300: 142 77% 73%;
  --sb-ref-color-success-400: 142 69% 58%;
  --sb-ref-color-success-500: 142 71% 45%;
  --sb-ref-color-success-600: 142 76% 36%;
  --sb-ref-color-success-700: 142 72% 29%;
  --sb-ref-color-success-800: 143 64% 24%;
  --sb-ref-color-success-900: 144 61% 20%;
  --sb-ref-color-success-950: 145 80% 10%;

  /* * INFO * */
  /* The info palette is used for informational messages, providing helpful
  context, tips, or general information to users. */
  --sb-ref-color-info-50: 214 100% 97%;
  --sb-ref-color-info-100: 214 95% 93%;
  --sb-ref-color-info-200: 213 97% 87%;
  --sb-ref-color-info-300: 212 96% 78%;
  --sb-ref-color-info-400: 213 94% 68%;
  --sb-ref-color-info-500: 217 91% 60%;
  --sb-ref-color-info-600: 221 83% 53%;
  --sb-ref-color-info-700: 224 76% 48%;
  --sb-ref-color-info-800: 226 71% 40%;
  --sb-ref-color-info-900: 224 64% 33%;
  --sb-ref-color-info-950: 226 57% 21%;
}

/*
 * ===========================================================================
 *  FONT REFERENCE TOKENS
 *  sb-ref-font-*
 * ===========================================================================
 */

:root {
  /* * FONT FAMILY * */
  --sb-ref-font-family-geist: 'Geist', sans-serif;
  --sb-ref-font-family-geist-mono: 'Geist Mono', monospace;

  /* * FONT WEIGHT * */
  --sb-ref-font-weight-thin: 100;
  --sb-ref-font-weight-extralight: 200;
  --sb-ref-font-weight-light: 300;
  --sb-ref-font-weight-normal: 400;
  --sb-ref-font-weight-medium: 500;
  --sb-ref-font-weight-semibold: 600;
  --sb-ref-font-weight-bold: 700;
  --sb-ref-font-weight-extrabold: 800;
  --sb-ref-font-weight-black: 900;

  /* * FONT SIZE * */
  --sb-ref-font-size-xs: 0.75rem;
  --sb-ref-font-size-xs-sm: 0.8rem;
  --sb-ref-font-size-sm: 0.875rem;
  --sb-ref-font-size-sm-base: 0.9375rem;
  --sb-ref-font-size-base: 1rem;
  --sb-ref-font-size-base-lg: 1.05rem;
  --sb-ref-font-size-lg: 1.125rem;
  --sb-ref-font-size-xl: 1.25rem;
  --sb-ref-font-size-2xl: 1.5rem;
  --sb-ref-font-size-3xl: 1.875rem;
  --sb-ref-font-size-4xl: 2.25rem;
  --sb-ref-font-size-5xl: 3rem;
  --sb-ref-font-size-6xl: 3.75rem;
  --sb-ref-font-size-7xl: 4.5rem;
  --sb-ref-font-size-8xl: 6rem;
  --sb-ref-font-size-9xl: 8rem;

  /* * LINE HEIGHT * */
  --sb-ref-font-line-height-shortest: 1;
  --sb-ref-font-line-height-shorter: 1.25;
  --sb-ref-font-line-height-short: 1.375;
  --sb-ref-font-line-height-normal: 1.5;
  --sb-ref-font-line-height-tall: 1.625;
  --sb-ref-font-line-height-taller: 2;
  --sb-ref-font-line-height-tallest: 7;

  --sb-ref-font-line-height-of-xs: calc(1 / 0.75);
  --sb-ref-font-line-height-of-xs-sm: calc(1.1 / 0.8);
  --sb-ref-font-line-height-of-sm: calc(1.25 / 0.875);
  --sb-ref-font-line-height-of-sm-base: calc(1.35 / 0.9375);
  --sb-ref-font-line-height-of-base: calc(1.5 / 1);
  --sb-ref-font-line-height-of-base-lg: calc(1.75 / 1.05);
  --sb-ref-font-line-height-of-lg: calc(1.75 / 1.125);
  --sb-ref-font-line-height-of-xl: calc(1.75 / 1.25);
  --sb-ref-font-line-height-of-2xl: calc(2 / 1.5);
  --sb-ref-font-line-height-of-3xl: calc(2.25 / 1.875);
  --sb-ref-font-line-height-of-4xl: calc(2.5 / 2.25);
  --sb-ref-font-line-height-of-5xl: 1;
  --sb-ref-font-line-height-of-6xl: 1;
  --sb-ref-font-line-height-of-7xl: 1;
  --sb-ref-font-line-height-of-8xl: 1;
  --sb-ref-font-line-height-of-9xl: 1;

  /* * LETTER SPACING * */
  --sb-ref-font-letter-spacing-tighter: -0.05em;
  --sb-ref-font-letter-spacing-tight: -0.025em;
  --sb-ref-font-letter-spacing-normal: 0em;
  --sb-ref-font-letter-spacing-wide: 0.025em;
  --sb-ref-font-letter-spacing-wider: 0.05em;
  --sb-ref-font-letter-spacing-widest: 0.1em;
}

/*
 * ===========================================================================
 *  MOTION REFERENCE TOKENS
 *  sb-ref-motion-*
 * ===========================================================================
 */

:root {
  --sb-ref-motion-duration-0: 0ms;
  --sb-ref-motion-duration-50: 50ms;
  --sb-ref-motion-duration-100: 100ms;
  --sb-ref-motion-duration-150: 150ms;
  --sb-ref-motion-duration-200: 200ms;
  --sb-ref-motion-duration-250: 250ms;
  --sb-ref-motion-duration-300: 300ms;
  --sb-ref-motion-duration-350: 350ms;
  --sb-ref-motion-duration-400: 400ms;
  --sb-ref-motion-duration-450: 450ms;
  --sb-ref-motion-duration-500: 500ms;
  --sb-ref-motion-duration-600: 600ms;
  --sb-ref-motion-duration-700: 700ms;
  --sb-ref-motion-duration-800: 800ms;
  --sb-ref-motion-duration-900: 900ms;
  --sb-ref-motion-duration-1000: 1000ms;
  --sb-ref-motion-duration-2000: 2000ms;
  --sb-ref-motion-duration-3000: 3000ms;
  --sb-ref-motion-duration-4000: 4000ms;
  --sb-ref-motion-duration-5000: 5000ms;

  --sb-ref-motion-fn-linear: cubic-bezier(0, 0, 1, 1);
  
  --sb-ref-motion-fn-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sb-ref-motion-fn-ease-in: cubic-bezier(0.42, 0, 1, 1);
  --sb-ref-motion-fn-ease-out: cubic-bezier(0, 0, 0.58, 1);
  --sb-ref-motion-fn-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  --sb-ref-motion-fn-ease-in-subtle: cubic-bezier(0.4, 0, 1, 1);
  --sb-ref-motion-fn-ease-out-subtle: cubic-bezier(0, 0, 0.2, 1);
  --sb-ref-motion-fn-ease-in-out-subtle: cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * ===========================================================================
 *  OPACITY REFERENCE TOKENS
 *  sb-ref-opacity-*
 * ===========================================================================
 */

:root {
  --sb-ref-opacity-0: 0;
  --sb-ref-opacity-4-5: 0.045;
  --sb-ref-opacity-5: 0.05;
  --sb-ref-opacity-7-5: 0.075;
  --sb-ref-opacity-10: 0.1;
  --sb-ref-opacity-12: 0.12;
  --sb-ref-opacity-15: 0.15;
  --sb-ref-opacity-20: 0.2;
  --sb-ref-opacity-25: 0.25;
  --sb-ref-opacity-30: 0.3;
  --sb-ref-opacity-35: 0.35;
  --sb-ref-opacity-40: 0.4;
  --sb-ref-opacity-45: 0.45;
  --sb-ref-opacity-50: 0.5;
  --sb-ref-opacity-55: 0.55;
  --sb-ref-opacity-60: 0.6;
  --sb-ref-opacity-65: 0.65;
  --sb-ref-opacity-70: 0.7;
  --sb-ref-opacity-75: 0.75;
  --sb-ref-opacity-80: 0.8;
  --sb-ref-opacity-85: 0.85;
  --sb-ref-opacity-90: 0.9;
  --sb-ref-opacity-95: 0.95;
  --sb-ref-opacity-100: 1;
}

/*
 * ===========================================================================
 *  RADIUS REFERENCE TOKENS
 *  sb-ref-radius-*
 * ===========================================================================
 */

:root {
  /* Used as the base value for calculating radius reference token values. */
  --sb-ref-radius: 0.625rem;

  --sb-ref-radius-xs: calc(var(--sb-ref-radius) - 6px);
  --sb-ref-radius-xs-sm: calc(var(--sb-ref-radius) - 5px);
  --sb-ref-radius-sm: calc(var(--sb-ref-radius) - 4px);
  --sb-ref-radius-sm-md: calc(var(--sb-ref-radius) - 3px);
  --sb-ref-radius-md: calc(var(--sb-ref-radius) - 2px);
  --sb-ref-radius-lg: var(--sb-ref-radius);
  --sb-ref-radius-lg-xl: calc(var(--sb-ref-radius) + 2px);
  --sb-ref-radius-xl: calc(var(--sb-ref-radius) + 4px);
  --sb-ref-radius-full: calc(var(--sb-ref-radius) * infinity);

  /* Equivalent radius values using the pixels unit */
  --sb-ref-radius-as-px: 10px;

  --sb-ref-radius-xs-as-px: calc(var(--sb-ref-radius-as-px) - 6px);
  --sb-ref-radius-xs-sm-as-px: calc(var(--sb-ref-radius-as-px) - 5px);
  --sb-ref-radius-sm-as-px: calc(var(--sb-ref-radius-as-px) - 4px);
  --sb-ref-radius-sm-md-as-px: calc(var(--sb-ref-radius-as-px) - 3px);
  --sb-ref-radius-md-as-px: calc(var(--sb-ref-radius-as-px) - 2px);
  --sb-ref-radius-lg-as-px: var(--sb-ref-radius-as-px);
  --sb-ref-radius-lg-xl-as-px: calc(var(--sb-ref-radius-as-px) + 2px);
  --sb-ref-radius-xl-as-px: calc(var(--sb-ref-radius-as-px) + 4px);
}

/*
 * ===========================================================================
 *  SHADOW REFERENCE TOKENS
 *  sb-ref-shadow-*
 * ===========================================================================
 */

:root {
  --sb-ref-shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --sb-ref-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sb-ref-shadow-sm:
    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --sb-ref-shadow-md:
    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sb-ref-shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sb-ref-shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --sb-ref-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/*
 * ===========================================================================
 *  SPACE REFERENCE TOKENS
 *  sb-ref-space-*
 * ===========================================================================
 */

:root {
  --sb-ref-space-width-auto: auto;

  --sb-ref-space-fit: fit-content;
  --sb-ref-space-full: 100%;
  --sb-ref-space-auto: auto;
  --sb-ref-space-max: max-content;

  /* Used as the base value for calculating space reference token values. */
  --sb-ref-space: 0.25rem;

  --sb-ref-space-0: calc(var(--sb-ref-space) * 0);
  --sb-ref-space-0-5: calc(var(--sb-ref-space) * 0.5);
  --sb-ref-space-1: calc(var(--sb-ref-space) * 1);
  --sb-ref-space-1-5: calc(var(--sb-ref-space) * 1.5);
  --sb-ref-space-2: calc(var(--sb-ref-space) * 2);
  --sb-ref-space-2-5: calc(var(--sb-ref-space) * 2.5);
  --sb-ref-space-3: calc(var(--sb-ref-space) * 3);
  --sb-ref-space-3-5: calc(var(--sb-ref-space) * 3.5);
  --sb-ref-space-4: calc(var(--sb-ref-space) * 4);
  --sb-ref-space-4-5: calc(var(--sb-ref-space) * 4.5);
  --sb-ref-space-4-6: calc(var(--sb-ref-space) * 4.6);
  --sb-ref-space-5: calc(var(--sb-ref-space) * 5);
  --sb-ref-space-6: calc(var(--sb-ref-space) * 6);
  --sb-ref-space-7: calc(var(--sb-ref-space) * 7);
  --sb-ref-space-8: calc(var(--sb-ref-space) * 8);
  --sb-ref-space-8-25: calc(var(--sb-ref-space) * 8.25);
  --sb-ref-space-9: calc(var(--sb-ref-space) * 9);
  --sb-ref-space-10: calc(var(--sb-ref-space) * 10);
  --sb-ref-space-11: calc(var(--sb-ref-space) * 11);
  --sb-ref-space-12: calc(var(--sb-ref-space) * 12);
  --sb-ref-space-13: calc(var(--sb-ref-space) * 13);
  --sb-ref-space-14: calc(var(--sb-ref-space) * 14);
  --sb-ref-space-15: calc(var(--sb-ref-space) * 15);
  --sb-ref-space-16: calc(var(--sb-ref-space) * 16);
  --sb-ref-space-17: calc(var(--sb-ref-space) * 17);
  --sb-ref-space-18: calc(var(--sb-ref-space) * 18);
  --sb-ref-space-19: calc(var(--sb-ref-space) * 19);
  --sb-ref-space-20: calc(var(--sb-ref-space) * 20);
  --sb-ref-space-21: calc(var(--sb-ref-space) * 21);
  --sb-ref-space-22: calc(var(--sb-ref-space) * 22);
  --sb-ref-space-23: calc(var(--sb-ref-space) * 23);
  --sb-ref-space-24: calc(var(--sb-ref-space) * 24);
  --sb-ref-space-25: calc(var(--sb-ref-space) * 25);
  --sb-ref-space-48: calc(var(--sb-ref-space) * 48);
  --sb-ref-space-55: calc(var(--sb-ref-space) * 55);
  --sb-ref-space-64: calc(var(--sb-ref-space) * 64);
  --sb-ref-space-75: calc(var(--sb-ref-space) * 75);

  /* * NEGATIVE * */
  --sb-ref-space-neg-1: calc(var(--sb-ref-space) * -1);
  --sb-ref-space-neg-1-5: calc(var(--sb-ref-space) * -1.5);
  --sb-ref-space-neg-2: calc(var(--sb-ref-space) * -2);
  --sb-ref-space-neg-3: calc(var(--sb-ref-space) * -3);

  /* * CONTAINER * */
  --sb-ref-space-container-3xs: 16rem;
  --sb-ref-space-container-2xs: 18rem;
  --sb-ref-space-container-xs: 20rem;
  --sb-ref-space-container-sm: 24rem;
  --sb-ref-space-container-md: 28rem;
  --sb-ref-space-container-lg: 32rem;
  --sb-ref-space-container-xl: 36rem;
  --sb-ref-space-container-2xl: 42rem;
  --sb-ref-space-container-3xl: 48rem;
  --sb-ref-space-container-4xl: 56rem;
  --sb-ref-space-container-5xl: 64rem;
  --sb-ref-space-container-6xl: 72rem;
  --sb-ref-space-container-7xl: 80rem;
}

/*
 * ===========================================================================
 *  WIDTH REFERENCE TOKENS
 *  sb-ref-width-*
 * ---------------------------------------------------------------------------
 *  Width tokens are assined to border/ring width variables.
 *  They use the `px` unit in contrast to `space` tokens which use `rem`.
 * ===========================================================================
 */

:root {
  --sb-ref-width-1: 1px;
  --sb-ref-width-2: 2px;
  --sb-ref-width-3: 3px;
}

/*
 * ===========================================================================
 *  BREAKPOINT REFERENCE TOKENS
 *  sb-ref-breakpoint-*
 * ===========================================================================
 */

/*
 * ===========================================================================
 *  SEMANTIC TOKENS INDEX
 * ===========================================================================
 */

/*
 * ===========================================================================
 *  COLOR SEMANTIC TOKENS
 *  sb-sem-color-*
 * ===========================================================================
 */

/*
 * ---------------------------------------------------------------------------
 *  LIGHT THEME
 * ---------------------------------------------------------------------------
 */

/*
 * --------------------------------------------------
 *  ROLE
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-role-bg: var(--sb-ref-color-white);
  --sb-sem-color-role-text: var(--sb-ref-color-base-950);
  --sb-sem-color-role-focus: var(--sb-ref-color-brand-400);

  --sb-sem-color-role-brand: var(--sb-ref-color-brand-900);
  --sb-sem-color-role-on-brand: var(--sb-ref-color-brand-50);

  --sb-sem-color-role-destructive: var(--sb-ref-color-destructive-600);
  --sb-sem-color-role-on-destructive: var(--sb-ref-color-white);

  --sb-sem-color-role-warning: var(--sb-ref-color-warning-600);
  --sb-sem-color-role-on-warning: var(--sb-ref-color-white);

  --sb-sem-color-role-success: var(--sb-ref-color-success-600);
  --sb-sem-color-role-on-success: var(--sb-ref-color-white);

  --sb-sem-color-role-info: var(--sb-ref-color-info-600);
  --sb-sem-color-role-on-info: var(--sb-ref-color-white);
}

/*
 * --------------------------------------------------
 *  BACKGROUND (bg)
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-bg: var(--sb-sem-color-role-bg);
}

/*
 * --------------------------------------------------
 *  BACKGROUND SCRIM (bg-scrim)
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-bg-scrim: var(--sb-ref-color-black) /
    var(--sb-sem-opacity-scrim);
}

/*
 * --------------------------------------------------
 *  BACKGROUND SURFACE (bg-surface)
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-bg-surface: var(--sb-sem-color-role-bg);
  --sb-sem-color-bg-surface-secondary: var(--sb-ref-color-white);
  --sb-sem-color-bg-surface-tertiary: var(--sb-ref-color-base-100);
  --sb-sem-color-bg-surface-quaternary: var(--sb-ref-color-base-100) /
    var(--sb-ref-opacity-50);

  --sb-sem-color-bg-surface-brand: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-destructive: var(--sb-sem-color-role-destructive) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-warning: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-success: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-info: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-surface);
}

/*
 * --------------------------------------------------
 *  BACKGROUND FILL (bg-fill)
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-bg-fill-disabled: var(--sb-ref-color-base-200) /
    var(--sb-ref-opacity-50);

  --sb-sem-color-bg-fill-unchecked: var(--sb-ref-color-base-200);
  --sb-sem-color-bg-fill-on-fill-unchecked: var(--sb-ref-color-white);

  --sb-sem-color-bg-fill-secondary: var(--sb-ref-color-base-100);
  --sb-sem-color-bg-fill-secondary-hover: var(--sb-ref-color-base-100) /
    var(--sb-sem-opacity-secondary-hover);
  /* Secondary badge hover bg */
  --sb-sem-color-bg-fill-secondary-alt-hover: var(--sb-ref-color-base-100) /
    var(--sb-sem-opacity-hover);

  --sb-sem-color-bg-fill-tertiary: var(--sb-ref-color-white);
  --sb-sem-color-bg-fill-tertiary-hover: var(--sb-ref-color-base-100);

  /* Used for select */
  --sb-sem-color-bg-fill-quaternary: var(--sb-ref-color-transparent);
  --sb-sem-color-bg-fill-quaternary-hover: var(--sb-ref-color-transparent);

  --sb-sem-color-bg-fill-inverse: var(--sb-sem-color-role-text);

  /* BRAND */
  --sb-sem-color-bg-fill-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-bg-fill-brand-hover: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-hover);

  --sb-sem-color-bg-fill-brand-on-fill: var(--sb-ref-color-white);

  /* DESTRUCTIVE */
  --sb-sem-color-bg-fill-destructive: var(--sb-sem-color-role-destructive);
  --sb-sem-color-bg-fill-destructive-hover: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-sem-opacity-hover);
  --sb-sem-color-bg-fill-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-10);
  --sb-sem-color-bg-fill-destructive-secondary-hover: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-20);

  --sb-sem-color-bg-fill-transparent: var(--sb-ref-color-transparent);

  /* WARNING */
  --sb-sem-color-bg-fill-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-bg-fill-warning-hover: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-hover);

  /* SUCCESS */
  --sb-sem-color-bg-fill-success: var(--sb-sem-color-role-success);
  --sb-sem-color-bg-fill-success-hover: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-hover);

  /* INFO */
  --sb-sem-color-bg-fill-info: var(--sb-sem-color-role-info);
  --sb-sem-color-bg-fill-info-hover: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-hover);
}

/*
 * --------------------------------------------------
 *  TEXT
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-text: var(--sb-sem-color-role-text);

  --sb-sem-color-text-secondary: var(--sb-ref-color-base-500);
  --sb-sem-color-text-secondary-on-fill: var(--sb-ref-color-base-900);

  --sb-sem-color-text-tertiary: var(--sb-ref-color-base-950) /
    var(--sb-ref-opacity-60);

  --sb-sem-color-text-inverse: var(--sb-sem-color-role-bg);

  /* BRAND */
  --sb-sem-color-text-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-text-brand-on-fill: var(--sb-sem-color-role-on-brand);

  --sb-sem-color-text-brand-secondary: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-text-secondary);

  /* DESTRUCTIVE */
  --sb-sem-color-text-destructive: var(--sb-sem-color-role-destructive);
  --sb-sem-color-text-destructive-on-fill: var(
    --sb-sem-color-role-on-destructive
  );

  --sb-sem-color-text-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-90);
  --sb-sem-color-text-destructive-secondary-on-fill: var(
    --sb-sem-color-role-destructive
  );

  /* WARNING */
  --sb-sem-color-text-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-text-warning-on-fill: var(--sb-sem-color-role-on-warning);

  --sb-sem-color-text-warning-secondary: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-text-secondary);

  /* SUCCESS */
  --sb-sem-color-text-success: var(--sb-sem-color-role-success);
  --sb-sem-color-text-success-on-fill: var(--sb-sem-color-role-on-success);

  --sb-sem-color-text-success-secondary: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-text-secondary);

  /* INFO */
  --sb-sem-color-text-info: var(--sb-sem-color-role-info);
  --sb-sem-color-text-info-on-fill: var(--sb-sem-color-role-on-info);

  --sb-sem-color-text-info-secondary: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-text-secondary);
}

/*
 * --------------------------------------------------
 *  BORDER
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-border: var(--sb-ref-color-base-200);
  --sb-sem-color-border-focus: var(--sb-sem-color-role-focus);
  --sb-sem-color-border-invalid: var(--sb-sem-color-role-destructive);
  --sb-sem-color-border-invalid-secondary: var(--sb-sem-color-role-destructive);

  --sb-sem-color-border-secondary: var(--sb-ref-color-base-200);

  --sb-sem-color-border-tertiary: var(--sb-ref-color-transparent);

  --sb-sem-color-border-transparent: var(--sb-ref-color-transparent);

  --sb-sem-color-border-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-border-brand-secondary: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-border-secondary);
  --sb-sem-color-border-brand-tertiary: var(--sb-sem-color-role-brand) /
    var(--sb-ref-opacity-30);

  --sb-sem-color-border-destructive: var(--sb-sem-color-role-destructive);
  --sb-sem-color-border-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-sem-opacity-border-secondary);
  --sb-sem-color-border-destructive-focus: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-40);

  --sb-sem-color-border-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-border-warning-secondary: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-border-secondary);

  --sb-sem-color-border-success: var(--sb-sem-color-role-success);
  --sb-sem-color-border-success-secondary: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-border-secondary);

  --sb-sem-color-border-info: var(--sb-sem-color-role-info);
  --sb-sem-color-border-info-secondary: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-border-secondary);
}

/*
 * --------------------------------------------------
 *  RING
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-ring-focus: var(--sb-sem-color-role-focus) /
    var(--sb-sem-opacity-ring);

  --sb-sem-color-ring-destructive: var(--sb-sem-color-role-destructive) /
    var(--sb-sem-opacity-ring-secondary);

  /* Ring color used on elements which use a box shadow to create whitespace
  (e.g. avatar) */
  --sb-sem-color-ring-whitespace: var(--sb-sem-color-role-bg);

  /* Weak ring color used for decorative box shadows (e.g. card) */
  --sb-sem-color-ring-secondary: var(--sb-sem-color-role-text) /
    var(--sb-ref-opacity-10);

  /* * RING OFFSET * */
  /* Used for dialog close */
  --sb-sem-color-ring-offset: var(--sb-sem-color-role-bg);
}

/*
 * ---------------------------------------------------------------------------
 *  DARK THEME
 * ---------------------------------------------------------------------------
 */

/*
 * --------------------------------------------------
 *  ROLE
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-role-bg: var(--sb-ref-color-base-950);
  --sb-sem-color-role-text: var(--sb-ref-color-base-50);
  --sb-sem-color-role-focus: var(--sb-ref-color-brand-500);

  --sb-sem-color-role-brand: var(--sb-ref-color-brand-200);
  --sb-sem-color-role-on-brand: var(--sb-ref-color-brand-900);

  --sb-sem-color-role-destructive: var(--sb-ref-color-destructive-400);
  --sb-sem-color-role-on-destructive: var(--sb-ref-color-white);

  --sb-sem-color-role-warning: var(--sb-ref-color-warning-400);
  --sb-sem-color-role-on-warning: var(--sb-ref-color-white);

  --sb-sem-color-role-success: var(--sb-ref-color-success-400);
  --sb-sem-color-role-on-success: var(--sb-ref-color-white);

  --sb-sem-color-role-info: var(--sb-ref-color-info-400);
  --sb-sem-color-role-on-info: var(--sb-ref-color-white);
}

/*
 * --------------------------------------------------
 *  BACKGROUND (bg)
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-bg: var(--sb-sem-color-role-bg);
}

/*
 * --------------------------------------------------
 *  BACKGROUND SCRIM (bg-scrim)
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-bg-scrim: var(--sb-ref-color-black) /
    var(--sb-sem-opacity-scrim);
}

/*
 * --------------------------------------------------
 *  BACKGROUND SURFACE (bg-surface)
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-bg-surface: var(--sb-sem-color-role-bg);
  --sb-sem-color-bg-surface-secondary: var(--sb-ref-color-base-900);
  --sb-sem-color-bg-surface-tertiary: var(--sb-ref-color-base-800);
  --sb-sem-color-bg-surface-quaternary: var(--sb-ref-color-base-800) /
    var(--sb-ref-opacity-50);

  --sb-sem-color-bg-surface-brand: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-destructive: var(--sb-sem-color-role-destructive) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-warning: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-success: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-info: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-surface);
}

/*
 * --------------------------------------------------
 *  BACKGROUND FILL (bg-fill)
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-bg-fill-disabled: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-12);

  --sb-sem-color-bg-fill-unchecked: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-12);
  --sb-sem-color-bg-fill-on-fill-unchecked: var(--sb-ref-color-base-50);

  --sb-sem-color-bg-fill-secondary: var(--sb-ref-color-base-800);
  --sb-sem-color-bg-fill-secondary-hover: var(--sb-ref-color-base-800) /
    var(--sb-sem-opacity-secondary-hover);
  /* Secondary badge hover bg */
  --sb-sem-color-bg-fill-secondary-alt-hover: var(--sb-ref-color-base-800) /
    var(--sb-sem-opacity-hover);

  --sb-sem-color-bg-fill-tertiary: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-4-5);
  --sb-sem-color-bg-fill-tertiary-hover: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-7-5);

  /* Used for select */
  --sb-sem-color-bg-fill-quaternary: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-4-5);
  --sb-sem-color-bg-fill-quaternary-hover: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-7-5);

  --sb-sem-color-bg-fill-inverse: var(--sb-sem-color-role-text);

  /* BRAND */
  --sb-sem-color-bg-fill-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-bg-fill-brand-hover: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-hover);

  --sb-sem-color-bg-fill-brand-on-fill: var(--sb-sem-color-role-on-brand);

  /* DESTRUCTIVE */
  --sb-sem-color-bg-fill-destructive: var(--sb-sem-color-role-destructive) /
    var(--sb-ref-opacity-60);
  --sb-sem-color-bg-fill-destructive-hover: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-sem-opacity-hover);
  --sb-sem-color-bg-fill-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-20);
  --sb-sem-color-bg-fill-destructive-secondary-hover: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-30);

  --sb-sem-color-bg-fill-transparent: var(--sb-ref-color-transparent);

  /* WARNING */
  --sb-sem-color-bg-fill-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-bg-fill-warning-hover: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-hover);

  /* SUCCESS */
  --sb-sem-color-bg-fill-success: var(--sb-sem-color-role-success);
  --sb-sem-color-bg-fill-success-hover: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-hover);

  /* INFO */
  --sb-sem-color-bg-fill-info: var(--sb-sem-color-role-info);
  --sb-sem-color-bg-fill-info-hover: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-hover);
}

/*
 * --------------------------------------------------
 *  TEXT
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-text: var(--sb-sem-color-role-text);

  --sb-sem-color-text-secondary: var(--sb-ref-color-base-400);
  --sb-sem-color-text-secondary-on-fill: var(--sb-ref-color-base-50);

  --sb-sem-color-text-tertiary: var(--sb-ref-color-base-400);

  --sb-sem-color-text-inverse: var(--sb-sem-color-role-bg);

  /* BRAND */
  --sb-sem-color-text-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-text-brand-on-fill: var(--sb-sem-color-role-on-brand);

  --sb-sem-color-text-brand-secondary: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-text-secondary);

  /* DESTRUCTIVE */
  --sb-sem-color-text-destructive: var(--sb-sem-color-role-destructive);
  --sb-sem-color-text-destructive-on-fill: var(
    --sb-sem-color-role-on-destructive
  );

  --sb-sem-color-text-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-90);
  --sb-sem-color-text-destructive-secondary-on-fill: var(
    --sb-sem-color-role-destructive
  );

  /* WARNING */
  --sb-sem-color-text-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-text-warning-on-fill: var(--sb-sem-color-role-on-warning);

  --sb-sem-color-text-warning-secondary: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-text-secondary);

  /* SUCCESS */
  --sb-sem-color-text-success: var(--sb-sem-color-role-success);
  --sb-sem-color-text-success-on-fill: var(--sb-sem-color-role-on-success);

  --sb-sem-color-text-success-secondary: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-text-secondary);

  /* INFO */
  --sb-sem-color-text-info: var(--sb-sem-color-role-info);
  --sb-sem-color-text-info-on-fill: var(--sb-sem-color-role-on-info);

  --sb-sem-color-text-info-secondary: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-text-secondary);
}

/*
 * --------------------------------------------------
 *  BORDER
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-border: var(--sb-ref-color-white) / var(--sb-ref-opacity-10);
  --sb-sem-color-border-focus: var(--sb-sem-color-role-focus);
  --sb-sem-color-border-invalid: var(--sb-sem-color-role-destructive);
  --sb-sem-color-border-invalid-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-50);

  --sb-sem-color-border-secondary: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-15);

  --sb-sem-color-border-tertiary: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-15);

  --sb-sem-color-border-transparent: var(--sb-ref-color-transparent);

  --sb-sem-color-border-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-border-brand-secondary: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-border-secondary);
  --sb-sem-color-border-brand-tertiary: var(--sb-sem-color-role-brand) /
    var(--sb-ref-opacity-20);

  --sb-sem-color-border-destructive: var(--sb-sem-color-role-destructive);
  --sb-sem-color-border-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-sem-opacity-border-secondary);
  --sb-sem-color-border-destructive-focus: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-40);

  --sb-sem-color-border-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-border-warning-secondary: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-border-secondary);

  --sb-sem-color-border-success: var(--sb-sem-color-role-success);
  --sb-sem-color-border-success-secondary: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-border-secondary);

  --sb-sem-color-border-info: var(--sb-sem-color-role-info);
  --sb-sem-color-border-info-secondary: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-border-secondary);
}

/*
 * --------------------------------------------------
 *  RING
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-ring-focus: var(--sb-sem-color-role-focus) /
    var(--sb-sem-opacity-ring);

  --sb-sem-color-ring-destructive: var(--sb-sem-color-role-destructive) /
    var(--sb-sem-opacity-ring-secondary);

  /* Ring color used on elements which use a box shadow to create whitespace
  (e.g. avatar) */
  --sb-sem-color-ring-whitespace: var(--sb-sem-color-role-bg);

  /* Weak ring color used for decorative box shadows (e.g. card) */
  --sb-sem-color-ring-secondary: var(--sb-sem-color-role-text) /
    var(--sb-ref-opacity-10);

  /* * RING OFFSET * */
  /* Used for dialog close */
  --sb-sem-color-ring-offset: var(--sb-sem-color-role-bg);
}

/*
 * ===========================================================================
 *  FONT SEMANTIC TOKENS
 *  sb-sem-font-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  DEFAULT
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-family-default: var(--sb-ref-font-family-geist);
  --sb-sem-font-family-heading: var(--sb-ref-font-family-geist);
  --sb-sem-font-family-mono: var(--sb-ref-font-family-geist-mono);
}

/*
 * --------------------------------------------------
 *  ACTION: button, tabs trigger
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-action-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-action-size-xs: var(--sb-ref-font-size-xs);
  --sb-sem-font-action-size-sm: var(--sb-ref-font-size-xs-sm);
  --sb-sem-font-action-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-action-line-height-xs: var(--sb-ref-font-line-height-of-xs);
  --sb-sem-font-action-line-height-sm: var(--sb-ref-font-line-height-of-xs-sm);

  --sb-sem-font-action-weight: var(--sb-ref-font-weight-medium);
}

/*
 * --------------------------------------------------
 *  INDICATOR: badge
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-indicator-size: var(--sb-ref-font-size-xs);
  --sb-sem-font-indicator-line-height: var(--sb-ref-font-line-height-of-xs);
  --sb-sem-font-indicator-weight: var(--sb-ref-font-weight-medium);
}

/*
 * --------------------------------------------------
 *  IDENTITY: avatar
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-identity-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-identity-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-identity-size-sm: var(--sb-ref-font-size-xs);
  --sb-sem-font-identity-line-height-sm: var(--sb-ref-font-line-height-of-xs);
}

/*
 * --------------------------------------------------
 *  FORM: label, command input, select, input, combobox, textarea
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-form-heading-size: var(--sb-ref-font-size-base);
  --sb-sem-font-form-heading-line-height: var(--sb-ref-font-line-height-of-base);
  --sb-sem-font-form-heading-weight: var(--sb-ref-font-weight-medium);

  --sb-sem-font-form-content-line-height: var(--sb-ref-font-line-height-short);

  --sb-sem-font-form-description-line-height: var(--sb-ref-font-line-height-normal);

  --sb-sem-font-form-label-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-form-label-line-height: var(--sb-ref-font-line-height-shortest);
  --sb-sem-font-form-label-line-height-alt: var(--sb-ref-font-line-height-short);
  --sb-sem-font-form-label-weight: var(--sb-ref-font-weight-medium);

  --sb-sem-font-form-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-form-size-vw-sm: var(--sb-ref-font-size-base);
  --sb-sem-font-form-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-form-line-height-vw-sm: var(--sb-ref-font-line-height-of-base);
  --sb-sem-font-form-weight: var(--sb-ref-font-weight-normal);

  /* Used for select label */
  --sb-sem-font-form-size-sm: var(--sb-ref-font-size-xs);
  --sb-sem-font-form-line-height-sm: var(--sb-ref-font-line-height-of-xs);
}

/*
 * --------------------------------------------------
 *  NAVIGATION: breadcrumb, menubar
 *  (+ pagination, tabs, sidebar, navigation menu)
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-navigation-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-navigation-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-navigation-weight: var(--sb-ref-font-weight-normal);
  --sb-sem-font-navigation-heading-weight: var(--sb-ref-font-weight-medium);
  --sb-sem-font-navigation-label-weight: var(--sb-ref-font-weight-medium);
}

/*
 * --------------------------------------------------
 *  CONTENT: accordion, alert, dialog, drawer, dropdown menu, command, card,
 *  toast (+ popover content)
 * --------------------------------------------------
 */

:root {
  /* * HEADING * */
  --sb-sem-font-content-heading-size: var(--sb-ref-font-size-lg);
  --sb-sem-font-content-heading-line-height: var(
    --sb-ref-font-line-height-shortest
  );

  /* Used for drawer title and card title */
  --sb-sem-font-content-heading-size-sm: var(--sb-ref-font-size-base);
  --sb-sem-font-content-heading-line-height-sm: var(
    --sb-ref-font-line-height-of-base
  );
  /* Used for card title (size="sm") and toast title */
  --sb-sem-font-content-heading-size-xs: var(--sb-ref-font-size-sm);
  --sb-sem-font-content-heading-line-height-xs: var(
    --sb-ref-font-line-height-of-sm
  );
  --sb-sem-font-content-heading-line-height-short: var(--sb-ref-font-line-height-short);

  --sb-sem-font-content-heading-weight: var(--sb-ref-font-weight-semibold);
  --sb-sem-font-content-heading-weight-sm: var(--sb-ref-font-weight-medium);

  --sb-sem-font-content-heading-letter-spacing: var(--sb-ref-font-letter-spacing-tight);

  /* * LABEL * */
  /* Used for dropdown menu label */
  --sb-sem-font-content-label-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-content-label-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-content-label-weight: var(--sb-ref-font-weight-medium);

  /* * BODY * */
  --sb-sem-font-content-body-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-content-body-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-content-body-line-height-tall: var(--sb-ref-font-line-height-tall);
  --sb-sem-font-content-body-weight: var(--sb-ref-font-weight-normal);

  --sb-sem-font-content-body-size-sm: var(--sb-ref-font-size-xs);
  --sb-sem-font-content-body-line-height-sm: var(--sb-ref-font-line-height-of-xs);

  /* * SHORTCUT * */
  /* Used for dropdown menu shortcut */
  --sb-sem-font-content-shortcut-size: var(--sb-ref-font-size-xs);
  --sb-sem-font-content-shortcut-line-height: var(
    --sb-ref-font-line-height-of-xs
  );
  --sb-sem-font-content-shortcut-letter-spacing: var(
    --sb-ref-font-letter-spacing-widest
  );
}

/*
 * --------------------------------------------------
 *  TABLE
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-table-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-table-caption-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-table-weight: var(--sb-ref-font-weight-medium);
  --sb-sem-font-table-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-table-letter-spacing: var(--sb-ref-font-letter-spacing-normal);
}

/*
 * --------------------------------------------------
 *  DATE TIME: calendar, date picker
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-date-time-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-date-time-size-sm: var(--sb-ref-font-size-xs-sm);
  --sb-sem-font-date-time-size-xs: var(--sb-ref-font-size-xs);

  --sb-sem-font-date-time-line-height: var(--sb-ref-font-line-height-shortest);
  --sb-sem-font-date-time-line-height-of-xs: var(
    --sb-ref-font-line-height-of-xs
  );
  --sb-sem-font-date-time-label-line-height: var(
    --sb-ref-font-line-height-of-sm
  );

  --sb-sem-font-date-time-weight: var(--sb-ref-font-weight-normal);
  --sb-sem-font-date-time-label-weight: var(--sb-ref-font-weight-medium);
}

/*
 * --------------------------------------------------
 *
 * --------------------------------------------------
 */

:root {
  /* * HEADING * */
  --sb-sem-font-heading-family: var(--sb-ref-font-family-geist);

  --sb-sem-font-heading-size-h1: var(--sb-ref-font-size-4xl);
  --sb-sem-font-heading-size-h2: var(--sb-ref-font-size-3xl);
  --sb-sem-font-heading-size-h3: var(--sb-ref-font-size-2xl);
  --sb-sem-font-heading-size-h4: var(--sb-ref-font-size-xl);

  --sb-sem-font-heading-line-height-h1: var(--sb-ref-font-line-height-of-4xl);
  --sb-sem-font-heading-line-height-h2: var(--sb-ref-font-line-height-of-3xl);
  --sb-sem-font-heading-line-height-h3: var(--sb-ref-font-line-height-of-2xl);
  --sb-sem-font-heading-line-height-h4: var(--sb-ref-font-line-height-of-xl);

  --sb-sem-font-heading-weight: var(--sb-ref-font-weight-semibold);
  --sb-sem-font-heading-weight-h1: var(--sb-ref-font-weight-extrabold);

  --sb-sem-font-heading-letter-spacing: var(--sb-ref-font-letter-spacing-tight);

  /* * DEFAULT * */
  --sb-sem-font-family: var(--sb-ref-font-family-geist);

  --sb-sem-font-size: var(--sb-ref-font-size-sm-base);
  --sb-sem-font-size-vw-sm: var(--sb-ref-font-size-base-lg);

  --sb-sem-font-line-height: var(--sb-ref-font-line-height-normal);
  --sb-sem-font-weight: var(--sb-ref-font-weight-normal);
  --sb-sem-font-letter-spacing: var(--sb-ref-font-letter-spacing-normal);

  /* SIZES */
  --sb-sem-font-size-sm: var(--sb-ref-font-size-sm);
  --sb-sem-font-line-height-sm: var(--sb-ref-font-line-height-shortest);
  --sb-sem-font-weight-sm: var(--sb-ref-font-weight-medium);

  --sb-sem-font-size-lg: var(--sb-ref-font-size-lg);
  --sb-sem-font-line-height-lg: var(--sb-ref-font-line-height-of-lg);
  --sb-sem-font-weight-lg: var(--sb-ref-font-weight-semibold);

  --sb-sem-font-size-xl: var(--sb-ref-font-size-xl);
  --sb-sem-font-line-height-xl: var(--sb-ref-font-line-height-of-xl);

  /* * PARAGRAPH * */
  --sb-sem-font-paragraph-line-height: var(--sb-ref-space-7);

  /* * LINK * */
  --sb-sem-font-link-weight: var(--sb-ref-font-weight-medium);

  /* * CODE * */
  --sb-sem-font-code-family: var(--sb-ref-font-family-geist-mono);
  --sb-sem-font-code-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-code-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-code-weight: var(--sb-ref-font-weight-semibold);
  --sb-sem-font-code-letter-spacing: var(--sb-ref-font-letter-spacing-normal);

  /* * MUTED * */
  --sb-sem-font-muted-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-muted-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-muted-weight: var(--sb-ref-font-weight-normal);
}

/*
 * ===========================================================================
 *  MOTION SEMANTIC TOKENS
 *  sb-sem-motion-*
 * ===========================================================================
 */

:root {
  --sb-sem-motion-duration-default: var(--sb-ref-motion-duration-150);
  --sb-sem-motion-fn-default: var(--sb-ref-motion-fn-ease-in-out-subtle);

  --sb-sem-motion-duration-fast: var(--sb-ref-motion-duration-100);
  --sb-sem-motion-duration-slow: var(--sb-ref-motion-duration-1000);

  --sb-sem-motion-duration-in-out: var(--sb-ref-motion-duration-200);
  --sb-sem-motion-fn-in-out: var(--sb-ref-motion-fn-ease-out-subtle);

  --sb-sem-motion-duration-pulse: var(--sb-ref-motion-duration-2000);
  --sb-sem-motion-fn-pulse: var(--sb-ref-motion-fn-ease-in-out);
}

/*
 * ===========================================================================
 *  OPACITY SEMANTIC TOKENS
 *  sb-sem-opacity-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMON TOKENS
 * --------------------------------------------------
 */

:root {
  /* * HOVER * */
  /* Applied to background colors in a hover state - e.g. default buttons. */
  --sb-sem-opacity-hover: var(--sb-ref-opacity-90);

  /* Applied to background colors in a hover state - e.g. secondary buttons. */
  --sb-sem-opacity-secondary-hover: var(--sb-ref-opacity-80);

  /* * DISABLED * */
  /* Applied to elements/components in a disabled state - e.g. buttons. */
  --sb-sem-opacity-disabled: var(--sb-ref-opacity-50);

  /* * SCRIM * */
  /* Applied to scrim background colors (semi-transparent) - e.g. popover. */
  --sb-sem-opacity-scrim: var(--sb-ref-opacity-50);

  /* * TEXT * */
  --sb-sem-opacity-text-secondary: var(--sb-ref-opacity-80);

  /* * BORDER * */
  --sb-sem-opacity-border-secondary: var(--sb-ref-opacity-50);

  /* * RING * */
  /* Applied to ring colors - e.g. button rings in a focus(-visible) state. */
  --sb-sem-opacity-ring: var(--sb-ref-opacity-50);

  /* * FORM ICON * */
  /* Used for the command input's search icon */
  --sb-sem-opacity-icon-form: var(--sb-ref-opacity-50);
}

/*
 * --------------------------------------------------
 *  LIGHT THEME TOKENS
 * --------------------------------------------------
 */

[data-theme='light'] {
  /* * SURFACE * */
  /* For brand, destructive, warning, success, and info surfaces */
  --sb-sem-opacity-surface: var(--sb-ref-opacity-5);

  /* * RING * */
  /* Applied to ring colors - e.g. button rings in an (aria-)invalid state. */
  --sb-sem-opacity-ring-secondary: var(--sb-ref-opacity-20);
}

/*
 * --------------------------------------------------
 *  DARK THEME TOKENS
 * --------------------------------------------------
 */

[data-theme='dark'] {
  /* * SURFACE * */
  /* For brand, destructive, warning, success, and info surfaces */
  --sb-sem-opacity-surface: var(--sb-ref-opacity-10);

  /* * RING * */
  /* Applied to ring colors - e.g. button rings in an (aria-)invalid state. */
  --sb-sem-opacity-ring-secondary: var(--sb-ref-opacity-40);
}

/*
 * ===========================================================================
 *  RADIUS SEMANTIC TOKENS
 *  sb-sem-radius-*
 * ===========================================================================
 */

:root {
  /* * ACTION * */
  /* button, toggle, toggle group */
  /* accordion trigger, dialog close, tabs trigger, toast action */
  --sb-sem-radius-action: var(--sb-ref-radius-lg);
  --sb-sem-radius-action-2xs: var(--sb-ref-radius-xs);
  --sb-sem-radius-action-xs: var(--sb-ref-radius-md);
  --sb-sem-radius-action-xs-as-px: var(--sb-ref-radius-lg-as-px);
  --sb-sem-radius-action-sm: var(--sb-ref-radius-md);
  --sb-sem-radius-action-sm-as-px: var(--sb-ref-radius-lg-xl-as-px);
  --sb-sem-radius-action-lg: var(--sb-ref-radius-lg);

  /* * INDICATOR * */
  /* badge, checkbox, progress, switch */
  /* avatar badge, drawer thumb, radio group item, scroll area scroll bar */
  --sb-sem-radius-indicator: var(--sb-ref-radius-full);
  --sb-sem-radius-indicator-sm-as-px: var(--sb-ref-radius-xs-as-px);

  /* * FEEDBACK * */
  /* alert, empty, skeleton */
  --sb-sem-radius-feedback: var(--sb-ref-radius-lg);
  --sb-sem-radius-feedback-sm: var(--sb-ref-radius-md);
  --sb-sem-radius-feedback-lg: var(--sb-ref-radius-xl);

  /* * IDENTITY * */
  /* avatar */
  --sb-sem-radius-identity: var(--sb-ref-radius-full);

  /* * LAYOUT * */
  /* card, item */
  --sb-sem-radius-layout: var(--sb-ref-radius-xl);
  --sb-sem-radius-layout-xs: var(--sb-ref-radius-sm);
  --sb-sem-radius-layout-sm: var(--sb-ref-radius-lg);

  /* * FORM * */
  /* combobox, field, input group, input otp, input, select, textarea */
  --sb-sem-radius-form: var(--sb-ref-radius-lg);
  --sb-sem-radius-form-sm: var(--sb-ref-radius-md);

  /* * OVERLAY * */
  /* command, context menu, dialog, drawer, dropdown menu, hover card, popover, toast */
  --sb-sem-radius-overlay: var(--sb-ref-radius-lg);
  --sb-sem-radius-overlay-xs: var(--sb-ref-radius-sm);
  --sb-sem-radius-overlay-sm: var(--sb-ref-radius-md);
  --sb-sem-radius-overlay-lg: var(--sb-ref-radius-xl);

  /* * NAVIGATION * */
  /* menubar, navigation menu, tabs */
  --sb-sem-radius-navigation: var(--sb-ref-radius-md);
  --sb-sem-radius-navigation-sm: var(--sb-ref-radius-sm);
  --sb-sem-radius-navigation-lg: var(--sb-ref-radius-lg);

  /* * DATE TIME * */
  /* calendar */
  --sb-sem-radius-date-time: var(--sb-ref-radius-md);
}

/*
 * ===========================================================================
 *  SHADOW SEMANTIC TOKENS
 *  sb-sem-shadow-*
 * ===========================================================================
 */

:root {
  /* * ACTION * */
  --sb-sem-shadow-action-active: var(--sb-ref-shadow-sm);

  /* * FORM * */
  --sb-sem-shadow-form: var(--sb-ref-shadow-md);

  /* * OVERLAY * */
  --sb-sem-shadow-overlay: var(--sb-ref-shadow-md);
  --sb-sem-shadow-overlay-lg: var(--sb-ref-shadow-lg);

  /* * NAVIGATION * */
  --sb-sem-shadow-navigation: var(--sb-ref-shadow-md);
  --sb-sem-shadow-navigation-lg: var(--sb-ref-shadow-lg);
}

/*
 * ===========================================================================
 *  SPACE SEMANTIC TOKENS
 *  sb-sem-space-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ACTION: button, accordion trigger, dropdown menu item, switch,
 *  calendar day button, toggle group, tabs trigger
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-action-gap: var(--sb-ref-space-1-5);
  --sb-sem-space-action-gap-xs: var(--sb-ref-space-1);
  --sb-sem-space-action-gap-sm: var(--sb-ref-space-1);
  --sb-sem-space-action-gap-lg: var(--sb-ref-space-1-5);
  --sb-sem-space-action-gap-xl: var(--sb-ref-space-2);
  --sb-sem-space-action-gap-2xl: var(--sb-ref-space-4);

  --sb-sem-space-action-px: var(--sb-ref-space-2-5);
  --sb-sem-space-action-px-2xs: var(--sb-ref-space-1-5);
  --sb-sem-space-action-px-xs: var(--sb-ref-space-2);
  --sb-sem-space-action-px-sm: var(--sb-ref-space-3);
  --sb-sem-space-action-px-md: var(--sb-ref-space-4-5);
  --sb-sem-space-action-px-lg: var(--sb-ref-space-6);
  --sb-sem-space-action-px-xl: var(--sb-ref-space-8);

  --sb-sem-space-action-px-has-icon: var(--sb-ref-space-2);
  --sb-sem-space-action-px-sm-has-icon: var(--sb-ref-space-1-5);
  --sb-sem-space-action-px-lg-has-icon: var(--sb-ref-space-3);

  --sb-sem-space-action-py: var(--sb-ref-space-2);
  --sb-sem-space-action-py-xs: var(--sb-ref-space-0-5);
  --sb-sem-space-action-py-sm: var(--sb-ref-space-1-5);
  --sb-sem-space-action-py-xl: var(--sb-ref-space-4);

  --sb-sem-space-action-size: var(--sb-ref-space-8);
  --sb-sem-space-action-size-xs: var(--sb-ref-space-6);
  --sb-sem-space-action-size-sm: var(--sb-ref-space-7);
  --sb-sem-space-action-size-lg: var(--sb-ref-space-9);
  --sb-sem-space-action-size-xl: var(--sb-ref-space-10);

  --sb-sem-space-action-w-xl: var(--sb-ref-space-full);
  --sb-sem-space-action-h-sm: var(--sb-ref-space-4-6);
}

/*
 * --------------------------------------------------
 *  ICON: button, badge, alert, dropdown menu items
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-icon-size: var(--sb-ref-space-4);
  --sb-sem-space-icon-size-3xs: var(--sb-ref-space-2);
  --sb-sem-space-icon-size-2xs: var(--sb-ref-space-2-5);
  --sb-sem-space-icon-size-xs: var(--sb-ref-space-3);
  --sb-sem-space-icon-size-sm: var(--sb-ref-space-3-5);
  --sb-sem-space-icon-size-lg: var(--sb-ref-space-5);

  --sb-sem-space-icon-size-parent: var(--sb-ref-space-8);
  --sb-sem-space-icon-size-parent-sm: var(--sb-ref-space-6);
  --sb-sem-space-icon-size-parent-lg: var(--sb-ref-space-10);
  --sb-sem-space-icon-mb-parent: var(--sb-ref-space-2);

  --sb-sem-space-icon-translate-y: var(--sb-ref-space-0-5);
}

/*
 * --------------------------------------------------
 *  INDICATOR: badge, drawer thumb, switch, radio group, select, menubar,
 *  checkbox
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-indicator-gap: var(--sb-ref-space-1);

  /* Used for drawer thumb */
  --sb-sem-space-indicator-m: var(--sb-ref-space-4);

  --sb-sem-space-indicator-px: var(--sb-ref-space-2);
  --sb-sem-space-indicator-px-has-icon: var(--sb-ref-space-1-5);
  --sb-sem-space-indicator-px-sm: var(--sb-ref-space-1);
  --sb-sem-space-indicator-py: var(--sb-ref-space-0-5);

  --sb-sem-space-indicator-w: var(--sb-ref-space-fit);
  /* TODO: 'alt' isn't a great modifier for this token */
  /* Used for drawer thumb */
  --sb-sem-space-indicator-w-alt: var(--sb-ref-space-25);

  /* Used for drawer thumb */
  --sb-sem-space-indicator-h: var(--sb-ref-space-2);

  /* Used for switch thumb & checkbox */
  --sb-sem-space-indicator-size-lg: var(--sb-ref-space-4);
  --sb-sem-space-indicator-size-xl: var(--sb-ref-space-5);
  /* Used for select item indicator */
  --sb-sem-space-indicator-size: var(--sb-ref-space-3-5);
  --sb-sem-space-indicator-size-sm: var(--sb-ref-space-3);
  --sb-sem-space-indicator-size-xs: var(--sb-ref-space-2-5);
  /* Used for radio group item indicator (icon) */
  --sb-sem-space-indicator-size-2xs: var(--sb-ref-space-2);
}

/*
 * --------------------------------------------------
 *  FEEDBACK: alert, toast, empty
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-feedback-gap: var(--sb-ref-space-0-5);
  --sb-sem-space-feedback-gap-lg: var(--sb-ref-space-2);
  --sb-sem-space-feedback-gap-xl: var(--sb-ref-space-2-5);
  --sb-sem-space-feedback-gap-2xl: var(--sb-ref-space-4);

  --sb-sem-space-feedback-px: var(--sb-ref-space-2-5);
  --sb-sem-space-feedback-py: var(--sb-ref-space-2);
  --sb-sem-space-feedback-pr-has-action: var(--sb-ref-space-18);
  --sb-sem-space-feedback-p-lg: var(--sb-ref-space-6);

  --sb-sem-space-feedback-w: var(--sb-ref-space-full);
  --sb-sem-space-feedback-w-child: var(--sb-ref-space-full);
  --sb-sem-space-feedback-h: var(--sb-ref-space-2);
  --sb-sem-space-feedback-h-child: var(--sb-ref-space-full);

  --sb-sem-space-feedback-max-w: var(--sb-ref-space-container-sm);
}

/*
 * --------------------------------------------------
 *  IDENTITY: avatar
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-identity-size: var(--sb-ref-space-8);
  --sb-sem-space-identity-size-sm: var(--sb-ref-space-6);
  --sb-sem-space-identity-size-lg: var(--sb-ref-space-10);
}

/*
 * --------------------------------------------------
 *  DIVIDER: dropdown menu separator, select
 * --------------------------------------------------
 */

:root {
  /* Used for dropdown menu separator and select separator */
  --sb-sem-space-divider-mx: var(--sb-ref-space-neg-1);
  --sb-sem-space-divider-my: var(--sb-ref-space-1);
  --sb-sem-space-divider-h: var(--sb-ref-space-5);
  --sb-sem-space-divider-my: var(--sb-ref-space-2);
}

/*
 * --------------------------------------------------
 *  LAYOUT: card, accordion, item
 *  (+ separator, carousel, resizable, scroll area)
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-layout-gap: var(--sb-ref-space-4);
  --sb-sem-space-layout-gap-sm: var(--sb-ref-space-3);
  --sb-sem-space-layout-gap-xs: var(--sb-ref-space-2-5);
  --sb-sem-space-layout-gap-2xs: var(--sb-ref-space-2);
  /* Used for layout element children (e.g. card header) */
  --sb-sem-space-layout-gap-child: var(--sb-ref-space-1);

  --sb-sem-space-layout-p: var(--sb-ref-space-4);
  --sb-sem-space-layout-p-sm: var(--sb-ref-space-3);
  --sb-sem-space-layout-p-xs: var(--sb-ref-space-2-5);
  --sb-sem-space-layout-p-2xs: var(--sb-ref-space-2);

  --sb-sem-space-layout-h-closed: var(--sb-ref-space-0);
  --sb-sem-space-layout-h-open: var(--sb-ref-space-8-25);

  --sb-sem-space-layout-pt-child: var(--sb-ref-space-0);
  --sb-sem-space-layout-pb-child: var(--sb-ref-space-4);
}

/*
 * --------------------------------------------------
 *  FORM: label, input otp, command, radio group, select, input, textarea, field
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-form-gap: var(--sb-ref-space-3);
  --sb-sem-space-form-gap-sm: var(--sb-ref-space-2);
  --sb-sem-space-form-gap-lg: var(--sb-ref-space-4);
  --sb-sem-space-form-gap-xl: var(--sb-ref-space-5);

  --sb-sem-space-form-p: var(--sb-ref-space-3);
  --sb-sem-space-form-p-sm: var(--sb-ref-space-2);
  --sb-sem-space-form-p-xs: var(--sb-ref-space-1-5);
  --sb-sem-space-form-p-2xs: var(--sb-ref-space-1);

  --sb-sem-space-form-py: var(--sb-ref-space-1);
  --sb-sem-space-form-py-lg: var(--sb-ref-space-2);
  --sb-sem-space-form-px: var(--sb-ref-space-2-5);

  --sb-sem-space-form-pr: var(--sb-ref-space-8);

  --sb-sem-space-form-size: var(--sb-ref-space-9);
  --sb-sem-space-form-size-sm: var(--sb-ref-space-8);
  --sb-sem-space-form-size-lg: var(--sb-ref-space-10);
  /* Used for switch thumb and radio group item */
  --sb-sem-space-form-size-xs: var(--sb-ref-space-4);

  /* Used for textarea */
  --sb-sem-space-form-min-h: var(--sb-ref-space-16);

  --sb-sem-space-form-w: var(--sb-ref-space-full);
}

/*
 * --------------------------------------------------
 *  NAVIGATION: breadcrumb, pagination, menubar, tabs
 *  (+ sidebar, navigation menu)
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-navigation-gap-lg: var(--sb-ref-space-2-5);
  --sb-sem-space-navigation-gap: var(--sb-ref-space-2);
  --sb-sem-space-navigation-gap-sm: var(--sb-ref-space-1-5);
  --sb-sem-space-navigation-gap-xs: var(--sb-ref-space-1);

  --sb-sem-space-navigation-p-xs: var(--sb-ref-space-1);
  --sb-sem-space-navigation-p-sm: var(--sb-ref-space-1-5);
  --sb-sem-space-navigation-p: var(--sb-ref-space-2);

  --sb-sem-space-navigation-pl: var(--sb-ref-space-8);

  --sb-sem-space-navigation-px: var(--sb-ref-space-2-5);

  --sb-sem-space-navigation-size: var(--sb-ref-space-9);
  --sb-sem-space-navigation-size-sm: var(--sb-ref-space-8);

  /* Used for menubar content */
  --sb-sem-space-navigation-min-w: var(--sb-ref-space-48);
}

/*
 * --------------------------------------------------
 *  OVERLAY: dialog, hover card, drawer, dropdown menu, command, popover
 *  (+ tooltip, context menu, sheet)
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-overlay-gap: var(--sb-ref-space-4);
  /* Used for dialog header, dialog footer, and drawer footer */
  --sb-sem-space-overlay-gap-sm: var(--sb-ref-space-2);
  /* Used for drawer header */
  --sb-sem-space-overlay-gap-xs: var(--sb-ref-space-1-5);
  --sb-sem-space-overlay-gap-2xs: var(--sb-ref-space-0-5);

  /* Used for drawer content */
  --sb-sem-space-overlay-m: var(--sb-ref-space-24);

  --sb-sem-space-overlay-p: var(--sb-ref-space-6);
  /* Used for hover card, drawer header, popover content */
  --sb-sem-space-overlay-p-sm: var(--sb-ref-space-4);
  /* Used for dropdown menu content and command group */
  --sb-sem-space-overlay-p-xs: var(--sb-ref-space-1);

  /* Used for dropdown menu label */
  --sb-sem-space-overlay-px: var(--sb-ref-space-2);
  --sb-sem-space-overlay-py: var(--sb-ref-space-1-5);

  /* Used for command empty */
  --sb-sem-space-overlay-py-lg: var(--sb-ref-space-6);

  --sb-sem-space-overlay-w: var(--sb-ref-space-full);
  /* Used for popover content */
  --sb-sem-space-overlay-w-sm: var(--sb-ref-space-container-2xs);
  /* Used for hover card */
  --sb-sem-space-overlay-w-xs: var(--sb-ref-space-64);

  /* Used for command */
  --sb-sem-space-overlay-h: var(--sb-ref-space-full);

  --sb-sem-space-overlay-max-w: var(--sb-ref-space-container-lg);
  --sb-sem-space-overlay-max-w-sm: calc(
    var(--sb-ref-space-full) - var(--sb-ref-space-8)
  );

  /* Used for dropdown menu content */
  --sb-sem-space-overlay-min-w: var(--sb-ref-space-55);

  /* Used for command list */
  --sb-sem-space-overlay-max-h: var(--sb-ref-space-75);
}

/*
 * --------------------------------------------------
 *  DATE TIME: calendar, date picker
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-date-time-gap: var(--sb-ref-space-4);
  --sb-sem-space-date-time-gap-sm: var(--sb-ref-space-1);

  --sb-sem-space-date-time-p: var(--sb-ref-space-3);
  --sb-sem-space-date-time-p-sm: var(--sb-ref-space-0);
  --sb-sem-space-date-time-p-lg: var(--sb-ref-space-8);

  --sb-sem-space-date-time-mt: var(--sb-ref-space-2);

  /* Used for date picker trigger button */
  --sb-sem-space-date-time-w: var(--sb-ref-space-container-2xs);

  --sb-sem-space-date-time-h: var(--sb-ref-space-8);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-typography-2xs: var(--sb-ref-space-1);
  --sb-sem-space-typography-xs: var(--sb-ref-space-2);
  --sb-sem-space-typography-sm: var(--sb-ref-space-4);
  --sb-sem-space-typography: var(--sb-ref-space-6);
  --sb-sem-space-typography-lg: var(--sb-ref-space-8);
  --sb-sem-space-typography-xl: var(--sb-ref-space-10);

  --sb-sem-space-typography-heading-scroll-m: var(--sb-ref-space-20);
}

/*
 * ===========================================================================
 *  WIDTH SEMANTIC TOKENS
 *  sb-sem-width-*
 * ===========================================================================
 */

:root {
  /* * BORDER * */
  /* Default border width used for bordered elements/components - e.g. outline
  buttons. */
  --sb-sem-width-border: var(--sb-ref-width-1);

  --sb-sem-width-border-decorative: var(--sb-ref-width-2);

  /* * RING * */
  /* Default ring width used for the box shadow of elements/components - e.g.
  buttons in their (aria-)invalid state. */
  --sb-sem-width-ring: var(--sb-ref-width-1);

  /* Ring width used for the box shadow of elements/components in a focus state
   - e.g. buttons in their focus(-visible) state. */
  --sb-sem-width-ring-focus: var(--sb-ref-width-3);
  /* Used for dialog close */
  --sb-sem-width-ring-sm-focus: var(--sb-ref-width-2);

  --sb-sem-width-ring-invalid: var(--sb-ref-width-3);

  /* Ring width used for the box shadow of elements/components in a focus state
   - e.g. buttons in their focus(-visible) state. */
  --sb-sem-width-scrollbar-hover: calc(var(--sb-ref-width-3) * 2);

  /* Ring width used on elements which use a box shadow to create whitespace
  (e.g. avatar) */
  --sb-sem-width-ring-whitespace: var(--sb-ref-width-2);

  /* * OUTLINE * */
  --sb-sem-width-outline-focus: var(--sb-ref-width-1);
}

/*
 * ===========================================================================
 *  COMPONENT TOKENS INDEX
 * ===========================================================================
 */

/*
 * ===========================================================================
 *  ACCORDION COMPONENT TOKENS
 *  sb-accordion-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ACCORDION ITEM
 * --------------------------------------------------
 */

:root {
  --sb-accordion-item-width-border: var(--sb-sem-width-border);
  --sb-accordion-item-color-border: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  ACCORDION TRIGGER
 * --------------------------------------------------
 */

:root {
  --sb-accordion-trigger-space-gap: var(--sb-sem-space-action-gap-2xl);

  --sb-accordion-trigger-space-py: var(--sb-sem-space-action-py-xl);

  --sb-accordion-trigger-space-w: var(--sb-sem-space-action-w-xl);

  --sb-accordion-trigger-radius: var(--sb-sem-radius-action);

  --sb-accordion-trigger-font-size: var(--sb-sem-font-action-size);
  --sb-accordion-trigger-font-line-height: var(
    --sb-sem-font-action-line-height
  );
  --sb-accordion-trigger-font-weight: var(--sb-sem-font-action-weight);

  --sb-accordion-trigger-width-border-focus: var(--sb-sem-width-border);
  --sb-accordion-trigger-color-border-focus: var(--sb-sem-color-border-focus);

  --sb-accordion-trigger-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-accordion-trigger-color-ring-focus: var(--sb-sem-color-ring-focus);

  /* * ACCORDION CHEVRON * */
  --sb-accordion-trigger-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-accordion-trigger-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  ACCORDION CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-accordion-content-font-size: var(--sb-sem-font-content-body-size);
  --sb-accordion-content-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );
  --sb-accordion-content-font-weight: var(--sb-sem-font-content-body-weight);

  --sb-accordion-content-space-h-closed: var(--sb-sem-space-layout-h-closed);
  --sb-accordion-content-space-h-open: var(--sb-sem-space-layout-h-open);

  --sb-accordion-content-motion-duration-closed: var(--sb-sem-motion-duration-in-out);
  --sb-accordion-content-motion-fn-closed: var(--sb-sem-motion-fn-in-out);

  --sb-accordion-content-motion-duration-open: var(--sb-sem-motion-duration-in-out);
  --sb-accordion-content-motion-fn-open: var(--sb-sem-motion-fn-in-out);

  --sb-accordion-content-div-space-pt: var(--sb-sem-space-layout-pt-child);
  --sb-accordion-content-div-space-pb: var(--sb-sem-space-layout-pb-child);
}

/*
 * ===========================================================================
 *  ALERT COMPONENT TOKENS
 *  rtg-alert-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ALERT
 * --------------------------------------------------
 */

:root {
  --rtg-alert-space-gap: var(--sb-sem-space-feedback-gap);
  --rtg-alert-space-gap-x-has-icon: var(--sb-sem-space-feedback-gap-lg);

  --rtg-alert-space-py: var(--sb-sem-space-feedback-py);
  --rtg-alert-space-px: var(--sb-sem-space-feedback-px);
  --rtg-alert-space-pr-has-action: var(--sb-sem-space-feedback-pr-has-action);

  --rtg-alert-font-size: var(--sb-sem-font-content-body-size);
  --rtg-alert-font-line-height: var(--sb-sem-font-content-body-line-height);

  --rtg-alert-color-bg: hsl(var(--sb-sem-color-bg-surface-secondary));

  --rtg-alert-width-border: var(--sb-sem-width-border);
  --rtg-alert-color-border: hsl(var(--sb-sem-color-border));
  --rtg-alert-radius: var(--sb-sem-radius-feedback);

  /* * VARIANTS * */
  /* DEFAULT */
  --rtg-alert-default-color-text: hsl(var(--sb-sem-color-text));

  /* BRAND & BRAND TONAL */
  --rtg-alert-brand-color-text: hsl(var(--sb-sem-color-text-brand));
  --rtg-alert-brand-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-brand));
  --rtg-alert-brand-tonal-color-border: hsl(var(--sb-sem-color-border-brand-secondary));

  /* DESTRUCTIVE & DESTRUCTIVE TONAL */
  --rtg-alert-destructive-color-text: hsl(var(--sb-sem-color-text-destructive));
  --rtg-alert-destructive-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-destructive));
  --rtg-alert-destructive-tonal-color-border: hsl(var(--sb-sem-color-border-destructive-secondary));

  /* WARNING & WARNING TONAL */
  --rtg-alert-warning-color-text: hsl(var(--sb-sem-color-text-warning));
  --rtg-alert-warning-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-warning));
  --rtg-alert-warning-tonal-color-border: hsl(var(--sb-sem-color-border-warning-secondary));

  /* SUCCESS & SUCCESS TONAL */
  --rtg-alert-success-color-text: hsl(var(--sb-sem-color-text-success));
  --rtg-alert-success-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-success));
  --rtg-alert-success-tonal-color-border: hsl(var(--sb-sem-color-border-success-secondary));

  /* INFO & INFO TONAL */
  --rtg-alert-info-color-text: hsl(var(--sb-sem-color-text-info));
  --rtg-alert-info-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-info));
  --rtg-alert-info-tonal-color-border: hsl(var(--sb-sem-color-border-info-secondary));

  /* * ICON CHILD * */
  --rtg-alert-icon-space-size: var(--sb-sem-space-icon-size);
  --rtg-alert-icon-space-translate-y: var(--sb-sem-space-icon-translate-y);
}

/*
 * --------------------------------------------------
 *  ALERT TITLE
 * --------------------------------------------------
 */

:root {
  --rtg-alert-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);

  /* * LINK CHILD * */
  --rtg-alert-title-color-link-hover: hsl(var(--sb-sem-color-text));
}

/*
 * --------------------------------------------------
 *  ALERT DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --rtg-alert-description-font-size: var(--sb-sem-font-content-body-size);
  --rtg-alert-description-font-line-height: var(--sb-sem-font-content-body-line-height);

  /* * VARIANTS * */
  --rtg-alert-description-default-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-alert-description-brand-color-text: hsl(var(--sb-sem-color-text-brand-secondary));
  --rtg-alert-description-destructive-color-text: hsl(var(--sb-sem-color-text-destructive-secondary));
  --rtg-alert-description-warning-color-text: hsl(var(--sb-sem-color-text-warning-secondary));
  --rtg-alert-description-success-color-text: hsl(var(--sb-sem-color-text-success-secondary));
  --rtg-alert-description-info-color-text: hsl(var(--sb-sem-color-text-info-secondary));

  /* * LINK CHILD * */
  --rtg-alert-description-color-link-hover: hsl(var(--sb-sem-color-text));

  /* * PARAGRAPH CHILD * */
  --rtg-alert-description-p-space-mb: var(--sb-ref-space-4);
}

/*
 * --------------------------------------------------
 *  ALERT ACTION
 * --------------------------------------------------
 */

:root {
  --rtg-alert-action-space-top: var(--sb-ref-space-2);
  --rtg-alert-action-space-right: var(--sb-ref-space-2);
}

/*
 * ===========================================================================
 *  AVATAR COMPONENT TOKENS
 *  rtg-avatar-*
 * ===========================================================================
 */

:root {
  /* Used for avatar group avatar children */
  --rtg-avatar-space-me-in-group: var(--sb-ref-space-neg-2);

  /* Used for avatar and avatar group count */
  --rtg-avatar-space-size: var(--sb-sem-space-identity-size);
  --rtg-avatar-space-size-sm: var(--sb-sem-space-identity-size-sm);
  --rtg-avatar-space-size-lg: var(--sb-sem-space-identity-size-lg);

  /* Used for avatar fallback and avatar group count */
  --rtg-avatar-font-size: var(--sb-sem-font-identity-size);
  --rtg-avatar-font-size-sm: var(--sb-sem-font-identity-size-sm);
  --rtg-avatar-font-line-height: var(--sb-sem-font-identity-line-height);
  --rtg-avatar-font-line-height-sm: var(--sb-sem-font-identity-line-height-sm);
  --rtg-avatar-color-text: hsl(var(--sb-sem-color-text-secondary));

  /* Used for avatar fallback and avatar group count */
  --rtg-avatar-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* Used for avatar, avatar image, avatar image, and avatar group count */
  --rtg-avatar-radius: var(--sb-sem-radius-identity);

  /* Used for avatar, avatar badge, and avatar group count */
  --rtg-avatar-width-ring: var(--sb-sem-width-ring-whitespace);
  --rtg-avatar-color-ring: hsl(var(--sb-sem-color-ring-whitespace));

  /* Used for icons inside avatar group count */
  --rtg-avatar-icon-space-size: var(--sb-sem-space-icon-size);
  --rtg-avatar-icon-space-size-sm: var(--sb-sem-space-icon-size-xs);
  --rtg-avatar-icon-space-size-lg: var(--sb-sem-space-icon-size-lg);
}

/*
 * --------------------------------------------------
 *  AVATAR BADGE
 * --------------------------------------------------
 */

:root {
  --rtg-avatar-badge-space-size: var(--sb-sem-space-indicator-size-xs);
  --rtg-avatar-badge-space-size-sm: var(--sb-sem-space-indicator-size-2xs);
  --rtg-avatar-badge-space-size-lg: var(--sb-sem-space-indicator-size-sm);

  --rtg-avatar-badge-color-text: hsl(var(--sb-sem-color-text-brand-on-fill));

  --rtg-avatar-badge-color-bg: hsl(var(--sb-sem-color-bg-fill-brand));

  --rtg-avatar-badge-radius: var(--sb-sem-radius-indicator);

  --rtg-avatar-badge-icon-space-size: var(--sb-sem-space-icon-size-3xs);
  --rtg-avatar-badge-icon-space-size-lg: var(--sb-sem-space-icon-size-2xs);
}

/*
 * ===========================================================================
 *  BADGE COMPONENT TOKENS
 *  rtg-badge-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMON TOKENS
 * --------------------------------------------------
 */

:root {
  --rtg-badge-space-gap: var(--sb-sem-space-indicator-gap);
  --rtg-badge-space-px: var(--sb-sem-space-indicator-px);
  --rtg-badge-space-px-has-icon: var(--sb-sem-space-indicator-px-has-icon);
  --rtg-badge-space-py: var(--sb-sem-space-indicator-py);

  --rtg-badge-radius: var(--sb-sem-radius-indicator);
  --rtg-badge-width-border: var(--sb-sem-width-border);
  --rtg-badge-color-border: hsl(var(--sb-sem-color-border-transparent));

  --rtg-badge-font-size: var(--sb-sem-font-indicator-size);
  --rtg-badge-font-line-height: var(--sb-sem-font-indicator-line-height);
  --rtg-badge-font-weight: var(--sb-sem-font-indicator-weight);

  --rtg-badge-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-badge-motion-duration: var(--sb-sem-motion-duration-default);

  --rtg-badge-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-badge-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));
  --rtg-badge-width-ring-focus: var(--sb-sem-width-ring-focus);

  --rtg-badge-color-border-invalid: hsl(var(--sb-sem-color-border-invalid));
  --rtg-badge-width-ring-invalid: var(--sb-sem-width-ring);
  --rtg-badge-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));

  --rtg-badge-icon-space-size: var(--sb-sem-space-icon-size-xs);
}

/*
 * --------------------------------------------------
 *  VARIANT TOKENS
 * --------------------------------------------------
 */

:root {
  /* * DEFAULT * */
  --rtg-badge-default-color-text: hsl(var(--sb-sem-color-text-brand-on-fill));
  --rtg-badge-default-color-bg: hsl(var(--sb-sem-color-bg-fill-brand));

  --rtg-badge-default-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-brand-hover));

  /* * SECONDARY * */
  --rtg-badge-secondary-color-text: hsl(var(--sb-sem-color-text-secondary-on-fill));
  --rtg-badge-secondary-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));

  --rtg-badge-secondary-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-secondary-hover));

  /* * OUTLINE * */
  --rtg-badge-outline-color-text: hsl(var(--sb-sem-color-text));
  --rtg-badge-outline-color-border: hsl(var(--sb-sem-color-border));

  --rtg-badge-outline-color-text-hover: hsl(var(--sb-sem-color-text-secondary-on-fill));
  --rtg-badge-outline-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* * GHOST * */
  --rtg-badge-ghost-color-text-hover: hsl(var(--sb-sem-color-text-secondary-on-fill));
  --rtg-badge-ghost-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* * DESTRUCTIVE * */
  --rtg-badge-destructive-color-text: hsl(var(--sb-sem-color-text-destructive-secondary-on-fill));
  --rtg-badge-destructive-color-bg: hsl(var(--sb-sem-color-bg-fill-destructive-secondary));

  --rtg-badge-destructive-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-destructive-secondary-hover));

  --rtg-badge-destructive-color-ring-focus: hsl(var(--sb-sem-color-ring-destructive));

  /* * LINK * */
  --rtg-badge-link-color-text: hsl(var(--sb-sem-color-text-brand));
}

/*
 * ===========================================================================
 *  BREADCRUMB COMPONENT TOKENS
 *  sb-breadcrumb-*
 * ===========================================================================
 */

:root {
  /* * BREADCRUMB LIST * */
  --sb-breadcrumb-list-space-gap-sm: var(--sb-sem-space-navigation-gap-sm);
  --sb-breadcrumb-list-space-gap: var(--sb-sem-space-navigation-gap-lg);

  --sb-breadcrumb-list-font-size: var(--sb-sem-font-navigation-size);
  --sb-breadcrumb-list-font-line-height: var(
    --sb-sem-font-navigation-line-height
  );
  --sb-breadcrumb-list-font-weight: var(--sb-sem-font-navigation-weight);
  --sb-breadcrumb-list-color-text: var(--sb-sem-color-text-secondary);

  /* * BREADCRUMB ITEM * */
  --sb-breadcrumb-item-space-gap: var(--sb-sem-space-navigation-gap-sm);

  /* * BREADCRUMB LINK * */
  --sb-breadcrumb-link-color-text-hover: var(--sb-sem-color-text);

  /* * BREADCRUMB PAGE * */
  --sb-breadcrumb-page-font-weight: var(--sb-sem-font-navigation-weight);
  --sb-breadcrumb-page-color-text: var(--sb-sem-color-text);

  /* * BREADCRUMB SEPARATOR * */
  --sb-breadcrumb-separator-icon-space-size: var(--sb-sem-space-icon-size-sm);

  /* * BREADCRUMB ELLIPSIS * */
  --sb-breadcrumb-ellipsis-space-size: var(--sb-sem-space-navigation-size);
  --sb-breadcrumb-ellipsis-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * ===========================================================================
 *  BUTTON COMPONENT TOKENS
 *  rtg-button-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMON
 * --------------------------------------------------
 */

:root {
  --rtg-button-font-weight: var(--sb-sem-font-action-weight);

  --rtg-button-width-border: var(--sb-sem-width-border);
  --rtg-button-color-border: hsl(var(--sb-sem-color-border-transparent));
  --rtg-button-radius-in-group: var(--sb-sem-radius-action);

  --rtg-button-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-button-motion-duration: var(--sb-sem-motion-duration-default);

  --rtg-button-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-button-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-button-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  --rtg-button-opacity-disabled: var(--sb-sem-opacity-disabled);

  --rtg-button-color-border-invalid: hsl(var(--sb-sem-color-border-invalid-secondary));
  --rtg-button-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-button-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));
}

/*
 * --------------------------------------------------
 *  VARIANTS
 * --------------------------------------------------
 */

:root {
  /* * DEFAULT * */
  --rtg-button-default-color-text: hsl(var(--sb-sem-color-text-brand-on-fill));
  --rtg-button-default-color-bg: hsl(var(--sb-sem-color-bg-fill-brand));

  --rtg-button-default-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-brand-hover));

  /* * SECONDARY * */
  --rtg-button-secondary-color-text: hsl(var(--sb-sem-color-text-secondary-on-fill));
  --rtg-button-secondary-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));

  --rtg-button-secondary-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-secondary-hover));

  --rtg-button-secondary-color-text-expanded: hsl(var(--sb-sem-color-text-secondary-on-fill));
  --rtg-button-secondary-color-bg-expanded: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* * OUTLINE * */
  --rtg-button-outline-color-bg: hsl(var(--sb-sem-color-bg-fill-tertiary));
  --rtg-button-outline-color-border: hsl(var(--sb-sem-color-border-secondary));

  --rtg-button-outline-color-text-hover: hsl(var(--sb-sem-color-text));
  --rtg-button-outline-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-tertiary-hover));

  --rtg-button-outline-color-text-expanded: hsl(var(--sb-sem-color-text));
  --rtg-button-outline-color-bg-expanded: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* * GHOST * */
  --rtg-button-ghost-color-text-hover: hsl(var(--sb-sem-color-text));
  --rtg-button-ghost-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-tertiary-hover));

  --rtg-button-ghost-color-text-expanded: hsl(var(--sb-sem-color-text));
  --rtg-button-ghost-color-bg-expanded: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* * DESTRUCTIVE * */
  --rtg-button-destructive-color-text: hsl(var(--sb-sem-color-text-destructive-secondary-on-fill));
  --rtg-button-destructive-color-bg: hsl(var(--sb-sem-color-bg-fill-destructive-secondary));

  --rtg-button-destructive-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-destructive-secondary-hover));

  --rtg-button-destructive-color-border-focus: hsl(var(--sb-sem-color-border-destructive-focus));
  --rtg-button-destructive-color-ring-focus: hsl(var(--sb-sem-color-ring-destructive));

  /* * LINK * */
  --rtg-button-link-color-text: hsl(var(--sb-sem-color-text-brand));
}

/*
 * --------------------------------------------------
 *  SIZES
 * --------------------------------------------------
 */

:root {
  --rtg-button-space-gap-default: var(--sb-sem-space-action-gap);
  --rtg-button-space-gap-xs: var(--sb-sem-space-action-gap-xs);
  --rtg-button-space-gap-sm: var(--sb-sem-space-action-gap-sm);
  --rtg-button-space-gap-lg: var(--sb-sem-space-action-gap-lg);

  --rtg-button-space-px-default: var(--sb-sem-space-action-px);
  --rtg-button-space-px-xs: var(--sb-sem-space-action-px-xs);
  --rtg-button-space-px-sm: var(--sb-sem-space-action-px);
  --rtg-button-space-px-lg: var(--sb-sem-space-action-px);

  --rtg-button-space-px-default-has-icon: var(--sb-sem-space-action-px-has-icon);
  --rtg-button-space-px-xs-has-icon: var(--sb-sem-space-action-px-sm-has-icon);
  --rtg-button-space-px-sm-has-icon: var(--sb-sem-space-action-px-sm-has-icon);
  --rtg-button-space-px-lg-has-icon: var(--sb-sem-space-action-px-lg-has-icon);

  --rtg-button-space-size-default: var(--sb-sem-space-action-size);
  --rtg-button-space-size-xs: var(--sb-sem-space-action-size-xs);
  --rtg-button-space-size-sm: var(--sb-sem-space-action-size-sm);
  --rtg-button-space-size-lg: var(--sb-sem-space-action-size-lg);

  --rtg-button-font-size-default: var(--sb-sem-font-action-size);
  --rtg-button-font-size-xs: var(--sb-sem-font-action-size-xs);
  --rtg-button-font-size-sm: var(--sb-sem-font-action-size-sm);
  --rtg-button-font-size-lg: var(--sb-sem-font-action-size);

  --rtg-button-font-line-height-default: var(--sb-sem-font-action-line-height);
  --rtg-button-font-line-height-xs: var(--sb-sem-font-action-line-height-xs);
  --rtg-button-font-line-height-sm: var(--sb-sem-font-action-line-height-sm);
  --rtg-button-font-line-height-lg: var(--sb-sem-font-action-line-height);

  --rtg-button-radius-default: var(--sb-sem-radius-action);
  --rtg-button-radius-xs: min(var(--sb-sem-radius-action-xs), var(--sb-sem-radius-action-xs-as-px));
  --rtg-button-radius-sm: min(var(--sb-sem-radius-action-sm), var(--sb-sem-radius-action-sm-as-px));
  --rtg-button-radius-lg: var(--sb-sem-radius-action-lg);

  --rtg-button-icon-space-size-default: var(--sb-sem-space-icon-size);
  --rtg-button-icon-space-size-xs: var(--sb-sem-space-icon-size-xs);
  --rtg-button-icon-space-size-sm: var(--sb-sem-space-icon-size-sm);
  --rtg-button-icon-space-size-lg: var(--sb-sem-space-icon-size);
}

/*
 * ===========================================================================
 *  CALENDAR COMPONENT TOKENS
 *  sb-calendar-*
 * ===========================================================================
 */

:root {
  --sb-calendar-space-p: var(--sb-sem-space-date-time-p);
  --sb-calendar-color-bg: var(--sb-sem-color-bg-surface);

  /* * MONTHS * */
  --sb-calendar-months-space-gap: var(--sb-sem-space-date-time-gap);

  /* * NAV * */
  --sb-calendar-nav-space-gap: var(--sb-sem-space-date-time-gap-sm);

  /* * MONTH * */
  --sb-calendar-month-space-gap: var(--sb-sem-space-date-time-gap);

  /* * BUTTON PREVIOUS * */
  --sb-calendar-button-previous-opacity-disabled: var(
    --sb-sem-opacity-disabled
  );

  /* * BUTTON NEXT * */
  --sb-calendar-button-next-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* * CHEVRON * */
  --sb-calendar-chevron-space-size: var(--sb-sem-space-icon-size);

  /* * MONTH CAPTION * */
  --sb-calendar-month-caption-space-px: var(--sb-sem-space-date-time-p-lg);
  --sb-calendar-month-caption-space-h: var(--sb-sem-space-date-time-h);

  /* * CAPTION LABEL * */
  --sb-calendar-caption-label-font-size: var(--sb-sem-font-date-time-size);
  --sb-calendar-caption-label-font-line-height: var(
    --sb-sem-font-date-time-label-line-height
  );
  --sb-calendar-caption-label-font-weight: var(
    --sb-sem-font-date-time-label-weight
  );

  /* * WEEKDAY * */
  --sb-calendar-weekday-font-size: var(--sb-sem-font-date-time-size-sm);
  --sb-calendar-weekday-font-line-height: var(
    --sb-sem-font-date-time-line-height
  );
  --sb-calendar-weekday-font-weight: var(--sb-sem-font-date-time-weight);
  --sb-calendar-weekday-color-text: var(--sb-sem-color-text-secondary);
  --sb-calendar-weekday-radius: var(--sb-sem-radius-date-time);

  /* * WEEK * */
  --sb-calendar-week-space-mt: var(--sb-sem-space-date-time-mt);

  /* * DAY * */
  --sb-calendar-day-space-p: var(--sb-sem-space-date-time-p-sm);

  --sb-calendar-day-radius: var(--sb-sem-radius-date-time);

  --sb-calendar-day-today-color-bg: var(--sb-sem-color-bg-fill-secondary);

  --sb-calendar-day-color-bg-selected: var(--sb-sem-color-bg-fill-secondary);

  --sb-calendar-day-width-border-focus: var(--sb-sem-width-border);
  --sb-calendar-day-color-border-focus: var(--sb-sem-color-border-focus);
  --sb-calendar-day-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-calendar-day-color-ring-focus: var(--sb-sem-color-ring-focus);

  /* * DAY BUTTON * */
  --sb-calendar-day-button-space-gap: var(--sb-sem-space-action-gap-sm);

  --sb-calendar-day-button-space-min-w: var(--sb-sem-space-action-size);

  --sb-calendar-day-button-font-size: var(--sb-sem-font-date-time-size);
  --sb-calendar-day-button-font-line-height: var(
    --sb-sem-font-date-time-line-height
  );
  --sb-calendar-day-button-font-weight: var(--sb-sem-font-date-time-weight);

  /* DISABLED */
  --sb-calendar-day-button-color-text-disabled: var(
    --sb-sem-color-text-secondary
  );
  --sb-calendar-day-button-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* OUTSIDE */
  --sb-calendar-day-button-outside-color-text: var(
    --sb-sem-color-text-secondary
  );

  /* TODAY */
  --sb-calendar-day-button-today-color-text: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-calendar-day-button-today-color-bg: var(
    --sb-sem-color-bg-fill-secondary
  );

  /* SINGLE SELECTED */
  --sb-calendar-day-button-color-bg-single-selected: var(
    --sb-sem-color-bg-fill-brand
  );
  --sb-calendar-day-button-color-text-single-selected: var(
    --sb-sem-color-text-brand-on-fill
  );

  /* RANGE START */
  --sb-calendar-day-button-color-bg-range-start: var(
    --sb-sem-color-bg-fill-brand
  );
  --sb-calendar-day-button-color-text-range-start: var(
    --sb-sem-color-text-brand-on-fill
  );

  /* RANGE MIDDLE */
  --sb-calendar-day-button-color-bg-range-middle: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-calendar-day-button-color-text-range-middle: var(
    --sb-sem-color-text-secondary-on-fill
  );

  /* RANGE END */
  --sb-calendar-day-button-color-bg-range-end: var(
    --sb-sem-color-bg-fill-brand
  );
  --sb-calendar-day-button-color-text-range-end: var(
    --sb-sem-color-text-brand-on-fill
  );

  /* SPAN */
  --sb-calendar-day-button-span-font-size: var(--sb-sem-font-date-time-size-xs);
  --sb-calendar-day-button-span-font-line-height: var(
    --sb-sem-font-date-time-line-height-of-xs
  );
  --sb-calendar-day-button-span-opacity: var(--sb-ref-opacity-70); /* TODO: sem token */
}

/*
 * ===========================================================================
 *  CARD COMPONENT TOKENS
 *  rtg-card-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  CARD
 * --------------------------------------------------
 */

:root {
  --rtg-card-space-width: var(--sb-ref-space-width-auto);
  --rtg-card-space-gap: var(--sb-sem-space-layout-gap);
  --rtg-card-space-gap-sm: var(--sb-sem-space-layout-gap-sm);

  /* Used for card, card header, and card footer */
  --rtg-card-space-py: var(--sb-sem-space-layout-p);
  --rtg-card-space-py-sm: var(--sb-sem-space-layout-p-sm);
  /* Used for card header, card content, and card footer */
  --rtg-card-space-px: var(--sb-sem-space-layout-p);
  --rtg-card-space-px-sm: var(--sb-sem-space-layout-p-sm);

  --rtg-card-font-size: var(--sb-sem-font-content-body-size);
  --rtg-card-font-line-height: var(--sb-sem-font-content-body-line-height);
  --rtg-card-color-text: hsl(var(--sb-sem-color-text));

  --rtg-card-color-bg: hsl(var(--sb-sem-color-bg-surface-secondary));

  --rtg-card-radius: var(--sb-sem-radius-layout);

  --rtg-card-width-ring: var(--sb-sem-width-ring);
  --rtg-card-color-ring: hsl(var(--sb-sem-color-ring-secondary));
}

/*
 * --------------------------------------------------
 *  CARD HEADER
 * --------------------------------------------------
 */

:root {
  --rtg-card-header-space-gap: var(--sb-sem-space-layout-gap-child);

  --rtg-card-header-width-border: var(--sb-sem-width-border);
  --rtg-card-header-color-border: hsl(var(--sb-sem-color-border));
}

/*
 * --------------------------------------------------
 *  CARD TITLE
 * --------------------------------------------------
 */

:root {
  --rtg-card-title-font-size: var(--sb-sem-font-content-heading-size-sm);
  --rtg-card-title-font-size-sm: var(--sb-sem-font-content-heading-size-xs);
  --rtg-card-title-font-line-height: var(
    --sb-sem-font-content-heading-line-height-sm
  );
  --rtg-card-title-font-line-height-sm: var(
    --sb-sem-font-content-heading-line-height-xs
  );
  --rtg-card-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);
}

/*
 * --------------------------------------------------
 *  CARD DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --rtg-card-description-font-size: var(--sb-sem-font-content-body-size);
  --rtg-card-description-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );
  --rtg-card-description-color-text: hsl(var(--sb-sem-color-text-secondary));
}

/*
 * --------------------------------------------------
 *  CARD FOOTER
 * --------------------------------------------------
 */

:root {
  --rtg-card-footer-width-border: var(--sb-sem-width-border);
  --rtg-card-footer-color-border: hsl(var(--sb-sem-color-border));
  --sb-carousel-space-w: var(--sb-ref-space-full);
  --sb-carousel-space-h: var(--sb-ref-space-full);
  --sb-carousel-space-mx: var(--sb-ref-space-auto);
  --sb-carousel-motion-duration: var(--sb-ref-motion-duration-500);
  --sb-carousel-motion-fn: var(--sb-ref-motion-fn-ease-in-out);

  /* viewport */
  --sb-carousel-viewport-space-w: var(--sb-ref-space-full);
  --sb-carousel-viewport-space-h: var(--sb-ref-space-full);

  /* slide */
  --sb-carousel-slide-space-px: var(--sb-ref-space-1);
  --sb-carousel-slide-space-py: var(--sb-ref-space-1);
  --sb-carousel-slide-space-h: var(--sb-ref-space-full);

  /* controls */
  --sb-carousel-control-horizontal-space-left: calc(
    var(--sb-ref-space-1) * 15 * -1
  );
  --sb-carousel-control-horizontal-space-right: calc(
    var(--sb-ref-space-1) * 15 * -1
  );
  --sb-carousel-control-vertical-space-h: var(--sb-ref-space-full);
  --sb-carousel-control-vertical-space-w: var(--sb-ref-space-full);

  /* button */
  --sb-carousel-button-color-bg: var(--sb-sem-color-bg-fill-brand);
  --sb-carousel-button-color-text: var(--sb-sem-color-text-brand-on-fill);
  --sb-carousel-button-space-px: var(--sb-ref-space-1);
  --sb-carousel-button-space-py: var(--sb-ref-space-1);
  --sb-carousel-button-radius: calc(var(--sb-ref-space-1) * 250);
  --sb-carousel-button-space-w: var(--sb-ref-space-10);
  --sb-carousel-button-space-h: var(--sb-ref-space-10);
  --sb-carousel-button-color-bg-hover: var(--sb-sem-color-bg-fill-brand-hover);
  --sb-carousel-button-opacity-disabled: var(--sb-sem-opacity-disabled);
  --sb-carousel-button-vertical-prev-space-top: calc(
    var(--sb-ref-space-1) * 12.5 * -1
  );
  --sb-carousel-button-vertical-next-space-top: calc(
    var(--sb-ref-space-1) * 12.5
  );
}

/*
 * ===========================================================================
 *  CHECKBOX COMPONENT TOKENS
 *  rtg-checkbox-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  CHECKBOX
 * --------------------------------------------------
 */

:root {
  --rtg-checkbox-space-size: var(--sb-sem-space-indicator-size-lg);

  --rtg-checkbox-color-bg: hsl(var(--sb-sem-color-bg-fill-quaternary));

  --rtg-checkbox-width-border: var(--sb-sem-width-border);
  --rtg-checkbox-color-border: hsl(var(--sb-sem-color-border-secondary));
  --rtg-checkbox-radius: var(--sb-sem-radius-indicator-sm-as-px);

  --rtg-checkbox-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-checkbox-motion-duration: var(--sb-sem-motion-duration-default);

  /* CHECKED */
  --rtg-checkbox-color-text-checked: hsl(var(--sb-sem-color-text-brand-on-fill));
  --rtg-checkbox-color-bg-checked: hsl(var(--sb-sem-color-bg-fill-brand));
  --rtg-checkbox-color-border-checked: hsl(var(--sb-sem-color-border-brand));

  /* INVALID */
  --rtg-checkbox-color-border-invalid: hsl(var(--sb-sem-color-border-invalid-secondary));
  --rtg-checkbox-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-checkbox-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));

  /* FOCUS VISIBLE */
  --rtg-checkbox-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-checkbox-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-checkbox-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  /* DISABLED */
  --rtg-checkbox-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* * AFTER (::after) * */
  --rtg-checkbox-after-space-inset-x: var(--sb-ref-space-neg-3);
  --rtg-checkbox-after-space-inset-y: var(--sb-ref-space-neg-2);
}

/*
 * --------------------------------------------------
 *  CHECKBOX INDICATOR
 * --------------------------------------------------
 */

:root {
  /* * CHECKBOX INDICATOR ICON * */
  --rtg-checkbox-indicator-icon-space-size: var(--sb-sem-space-icon-size-sm);
  /* empty */
  --sb-combo-box-empty-font-size: var(--sb-sem-font-form-size);
  --sb-combo-box-empty-space-py: var(--sb-ref-space-6);

  /* group */
  --sb-combo-box-group-space-mt: var(--sb-ref-space-1);
  --sb-combo-box-group-space-max-h: calc(var(--sb-ref-space-1) * 80);
  --sb-combo-box-group-space-w: var(--sb-ref-space-full);
  --sb-combo-box-group-radius: var(--sb-sem-radius-form);
  --sb-combo-box-group-color-border: var(--sb-sem-color-border);
  --sb-combo-box-group-width-border: var(--sb-sem-width-border);
  --sb-combo-box-group-color-bg: var(--sb-sem-color-bg-surface);
  --sb-combo-box-group-space-px: var(--sb-ref-space-1);
  --sb-combo-box-group-space-py: var(--sb-ref-space-1);
  --sb-combo-box-group-shadow: var(--sb-sem-shadow-form);
  --sb-combo-box-group-motion-duration: var(--sb-ref-motion-duration-500);
  --sb-combo-box-group-motion-fn: var(--sb-ref-motion-fn-ease-out);

  /* input */
  --sb-combo-box-input-space-w: var(--sb-ref-space-full);
  --sb-combo-box-input-space-h: var(--sb-ref-space-8);
  --sb-combo-box-input-radius: var(--sb-sem-radius-form);
  --sb-combo-box-input-space-px: var(--sb-ref-space-2);
  --sb-combo-box-input-space-py: var(--sb-ref-space-2);
  --sb-combo-box-input-font-size: var(--sb-sem-font-form-size);
  --sb-combo-box-input-color-text: var(--sb-sem-color-text);
  --sb-combo-box-input-color-bg: var(--sb-sem-color-bg-surface);
  --sb-combo-box-input-color-text-placeholder: var(
    --sb-sem-color-text-secondary
  );

  /* trigger */
  --sb-combo-box-trigger-space-h: var(--sb-ref-space-10);
  --sb-combo-box-trigger-radius: var(--sb-sem-radius-form);
  --sb-combo-box-trigger-color-border: var(--sb-sem-color-border);
  --sb-combo-box-trigger-width-border: var(--sb-sem-width-border);
  --sb-combo-box-trigger-color-bg: var(--sb-sem-color-bg-surface);
  --sb-combo-box-trigger-space-px: var(--sb-ref-space-3);
  --sb-combo-box-trigger-space-py: var(--sb-ref-space-2);
  --sb-combo-box-trigger-font-size: var(--sb-sem-font-action-size);
  --sb-combo-box-trigger-color-ring-focus: var(--sb-sem-color-ring-focus);
  --sb-combo-box-trigger-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-combo-box-trigger-width-ring-offset-focus: var(
    --sb-sem-width-ring-sm-focus
  );
  --sb-combo-box-trigger-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* value */
  --sb-combo-box-value-space-w: calc(var(--sb-ref-space-1) * 45);

  /* item */
  --sb-combo-box-item-space-w: var(--sb-ref-space-full);
  --sb-combo-box-item-radius: var(--sb-sem-radius-form-sm);
  --sb-combo-box-item-space-px: var(--sb-ref-space-4);
  --sb-combo-box-item-space-py: var(--sb-ref-space-2);
  --sb-combo-box-item-color-bg-hover: var(--sem-color-bg-surface-selected);
}

/*
 * ===========================================================================
 *  COMMAND COMPONENT TOKENS
 *  sb-command-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMAND
 * --------------------------------------------------
 */

:root {
  --sb-command-space-w: var(--sb-sem-space-overlay-w);
  --sb-command-space-h: var(--sb-sem-space-overlay-h);

  --sb-command-color-text: var(--sb-sem-color-text);

  --sb-command-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-command-radius: var(--sb-sem-radius-overlay-lg);
}

/*
 * --------------------------------------------------
 *  COMMAND INPUT
 * --------------------------------------------------
 */

:root {
  --sb-command-input-space-py: var(--sb-sem-space-form-p);

  --sb-command-input-space-w: var(--sb-sem-space-form-w);
  --sb-command-input-space-h: var(--sb-sem-space-form-size-lg);

  --sb-command-input-font-size: var(--sb-sem-font-form-size);
  --sb-command-input-font-line-height: var(--sb-sem-font-form-line-height);

  --sb-command-input-color-bg: var(--sb-sem-color-bg-fill-transparent);

  --sb-command-input-radius: var(--sb-sem-radius-overlay);

  --sb-command-input-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-command-input-placeholder-color-text: var(--sb-sem-color-text-secondary);

  /* * WRAPPER * */
  --sb-command-input-wrapper-space-gap: var(--sb-sem-space-form-gap-sm);

  --sb-command-input-wrapper-space-px: var(--sb-sem-space-form-p);

  --sb-command-input-wrapper-space-h: var(--sb-sem-space-form-size);

  --sb-command-input-wrapper-width-border: var(--sb-sem-width-border);
  --sb-command-input-wrapper-color-border: var(--sb-sem-color-border);

  /* * ICON * */
  --sb-command-input-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-command-input-icon-opacity: var(--sb-sem-opacity-icon-form);
}

/*
 * --------------------------------------------------
 *  COMMAND LIST
 * --------------------------------------------------
 */

:root {
  --sb-command-list-space-max-h: var(--sb-sem-space-overlay-max-h);
}

/*
 * --------------------------------------------------
 *  COMMAND EMPTY
 * --------------------------------------------------
 */

:root {
  --sb-command-empty-space-py: var(--sb-sem-space-overlay-py-lg);

  --sb-command-empty-font-size: var(--sb-sem-font-content-body-size);
  --sb-command-empty-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );
}

/*
 * --------------------------------------------------
 *  COMMAND GROUP
 * --------------------------------------------------
 */

:root {
  --sb-command-group-space-p: var(--sb-sem-space-overlay-p-xs);

  --sb-command-group-color-text: var(--sb-sem-color-text);
}

/*
 * --------------------------------------------------
 *  COMMAND HEADING
 * --------------------------------------------------
 */

:root {
  --sb-command-heading-space-px: var(--sb-sem-space-overlay-px);
  --sb-command-heading-space-py: var(--sb-sem-space-overlay-py);

  --sb-command-heading-font-size: var(--sb-sem-font-content-label-size);
  --sb-command-heading-font-line-height: var(
    --sb-sem-font-content-label-line-height
  );
  --sb-command-heading-font-weight: var(--sb-sem-font-content-label-weight);
  --sb-command-heading-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  COMMAND SEPARATOR
 * --------------------------------------------------
 */

:root {
  --sb-command-separator-space-mx: var(--sb-sem-space-divider-mx);

  --sb-command-separator-space-h: var(--sb-sem-width-border);

  --sb-command-separator-color-bg: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  COMMAND ITEM
 * --------------------------------------------------
 */

:root {
  --sb-command-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-command-item-space-px: var(--sb-sem-space-action-px-xs);
  --sb-command-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-command-item-font-size: var(--sb-sem-font-content-body-size);
  --sb-command-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-command-item-radius: var(--sb-sem-radius-overlay-xs);

  --sb-command-item-color-bg-hover: var(--sb-sem-color-bg-fill-secondary);
  --sb-command-item-color-text-hover: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-command-item-color-bg-selected: var(--sb-sem-color-bg-fill-secondary);
  --sb-command-item-color-text-selected: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-command-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-command-item-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-command-item-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  COMMAND SHORTCUT
 * --------------------------------------------------
 */

:root {
  --sb-command-shortcut-font-size: var(--sb-sem-font-content-shortcut-size);
  --sb-command-shortcut-font-line-height: var(
    --sb-sem-font-content-shortcut-line-height
  );
  --sb-command-shortcut-font-letter-spacing: var(
    --sb-sem-font-content-shortcut-letter-spacing
  );
  --sb-command-shortcut-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * ===========================================================================
 *  CONTEXT MENU COMPONENT TOKENS
 *  sb-context-menu-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  CONTEXT MENU CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-content-space-p: var(--sb-sem-space-overlay-p-xs);

  --sb-context-menu-content-space-min-w: var(--sb-sem-space-overlay-min-w);

  --sb-context-menu-content-color-text: var(--sb-sem-color-text);

  --sb-context-menu-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-context-menu-content-radius: var(--sb-sem-radius-overlay);
  --sb-context-menu-content-width-border: var(--sb-sem-width-border);
  --sb-context-menu-content-color-border: var(--sb-sem-color-border);

  --sb-context-menu-content-shadow: var(--sb-sem-shadow-overlay);
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU ITEM
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-context-menu-item-space-px: var(--sb-sem-space-action-px-xs);
  --sb-context-menu-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-context-menu-item-font-size: var(--sb-sem-font-content-body-size);
  --sb-context-menu-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-context-menu-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-context-menu-item-color-bg-hover: var(--sb-sem-color-bg-fill-secondary);
  --sb-context-menu-item-color-text-hover: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-context-menu-item-color-bg-focus: var(--sb-sem-color-bg-fill-secondary);
  --sb-context-menu-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-context-menu-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-context-menu-item-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-context-menu-item-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU CHECKBOX ITEM
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-checkbox-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-context-menu-checkbox-item-space-pl: var(--sb-sem-space-action-px-xl);
  --sb-context-menu-checkbox-item-space-pr: var(--sb-sem-space-action-px-xs);
  --sb-context-menu-checkbox-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-context-menu-checkbox-item-font-size: var(
    --sb-sem-font-content-body-size
  );
  --sb-context-menu-checkbox-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-context-menu-checkbox-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-context-menu-checkbox-item-color-bg-focus: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-context-menu-checkbox-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-context-menu-checkbox-item-opacity-disabled: var(
    --sb-sem-opacity-disabled
  );

  --sb-context-menu-checkbox-item-icon-container-space-size: var(
    --sb-sem-space-icon-size-sm
  );

  --sb-context-menu-checkbox-item-icon-space-size: var(
    --sb-sem-space-icon-size
  );
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU RADIO ITEM
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-radio-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-context-menu-radio-item-space-pl: var(--sb-sem-space-action-px-xl);
  --sb-context-menu-radio-item-space-pr: var(--sb-sem-space-action-px-xs);
  --sb-context-menu-radio-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-context-menu-radio-item-font-size: var(--sb-sem-font-content-body-size);
  --sb-context-menu-radio-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-context-menu-radio-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-context-menu-radio-item-color-bg-focus: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-context-menu-radio-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-context-menu-radio-item-opacity-disabled: var(
    --sb-sem-opacity-disabled
  );

  --sb-context-menu-radio-item-icon-container-space-size: var(
    --sb-sem-space-icon-size-sm
  );

  --sb-context-menu-radio-item-icon-space-size: var(
    --sb-sem-space-icon-size-3xs
  );
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU LABEL
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-label-space-px: var(--sb-sem-space-overlay-px);
  --sb-context-menu-label-space-py: var(--sb-sem-space-overlay-py);

  --sb-context-menu-label-font-size: var(--sb-sem-font-content-label-size);
  --sb-context-menu-label-font-line-height: var(
    --sb-sem-font-content-label-line-height
  );
  --sb-context-menu-label-font-weight: var(--sb-sem-font-content-label-weight);
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU SEPARATOR
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-separator-space-mx: var(--sb-sem-space-divider-mx);
  --sb-context-menu-separator-space-my: var(--sb-sem-space-divider-my);

  --sb-context-menu-separator-space-h: var(--sb-sem-width-border);

  --sb-context-menu-separator-color-bg: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU SHORTCUT
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-shortcut-font-size: var(
    --sb-sem-font-content-shortcut-size
  );
  --sb-context-menu-shortcut-font-line-height: var(
    --sb-sem-font-content-shortcut-line-height
  );
  --sb-context-menu-shortcut-font-letter-spacing: var(
    --sb-sem-font-content-shortcut-letter-spacing
  );
  --sb-context-menu-shortcut-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * ===========================================================================
 *  DATE PICKER COMPONENT TOKENS
 *  sb-date-picker-*
 * ===========================================================================
 */

:root {
  --sb-date-picker-trigger-button-space-w: var(--sb-sem-space-date-time-w);
  --sb-date-picker-trigger-button-font-weight: var(--sb-sem-font-date-time-weight);
  --sb-date-picker-trigger-button-color-text-empty: var(
    --sb-sem-color-text-secondary
  );

  --sb-date-picker-content-space-p: var(--sb-sem-space-date-time-p-sm);
}

/*
 * ===========================================================================
 *  DIALOG COMPONENT TOKENS
 *  sb-dialog-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  DIALOG CLOSE
 * --------------------------------------------------
 */

:root {
  --sb-dialog-close-radius: min(var(--sb-sem-radius-action-sm), var(--sb-sem-radius-action-sm-as-px));

  --sb-dialog-close-color-ring-offset: var(--sb-sem-color-ring-offset);

  --sb-dialog-close-width-ring-focus: var(--sb-sem-width-ring-sm-focus);
  --sb-dialog-close-color-ring-focus: var(--sb-sem-color-ring-focus);
  --sb-dialog-close-width-ring-offset: var(--sb-sem-width-ring-sm-focus);

  --sb-dialog-close-color-bg: var(--sb-sem-color-bg-fill-secondary);
  --sb-dialog-close-color-text: var(--sb-sem-color-text-secondary);

  --sb-dialog-close-color-text-hover: hsl(var(--sb-sem-color-text));
  --sb-dialog-close-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-tertiary-hover));

  --sb-dialog-close-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * --------------------------------------------------
 *  DIALOG OVERLAY
 * --------------------------------------------------
 */

:root {
  --sb-dialog-overlay-color-bg: var(--sb-sem-color-bg-scrim);
}

/*
 * --------------------------------------------------
 *  DIALOG CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-dialog-content-space-gap: var(--sb-sem-space-overlay-gap);

  --sb-dialog-content-space-p: var(--sb-sem-space-overlay-p);

  --sb-dialog-content-space-w: var(--sb-sem-space-overlay-w);
  --sb-dialog-content-space-max-w-sm: var(--sb-sem-space-overlay-max-w-sm);
  --sb-dialog-content-space-max-w: var(--sb-sem-space-overlay-max-w);

  --sb-dialog-content-color-bg: var(--sb-sem-color-bg-surface);

  --sb-dialog-content-radius: var(--sb-sem-radius-overlay);
  --sb-dialog-content-width-border: var(--sb-sem-width-border);
  --sb-dialog-content-color-border: var(--sb-sem-color-border);

  --sb-dialog-content-shadow: var(--sb-sem-shadow-overlay-lg);
}

/*
 * --------------------------------------------------
 *  DIALOG HEADER
 * --------------------------------------------------
 */

:root {
  --sb-dialog-header-space-gap: var(--sb-sem-space-overlay-gap-sm);
}

/*
 * --------------------------------------------------
 *  DIALOG FOOTER
 * --------------------------------------------------
 */

:root {
  --sb-dialog-footer-space-gap: var(--sb-sem-space-overlay-gap-sm);
}

/*
 * --------------------------------------------------
 *  DIALOG TITLE
 * --------------------------------------------------
 */

:root {
  --sb-dialog-title-font-size: var(--sb-sem-font-content-heading-size);
  --sb-dialog-title-font-line-height: var(
    --sb-sem-font-content-heading-line-height
  );
  --sb-dialog-title-font-weight: var(--sb-sem-font-content-heading-weight);
}

/*
 * --------------------------------------------------
 *  DIALOG DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --sb-dialog-description-font-size: var(--sb-sem-font-content-body-size);
  --sb-dialog-description-font-line-height: var(
    var(--sb-sem-font-content-body-line-height)
  );
  --sb-dialog-description-font-weight: var(--sb-sem-font-content-body-weight);
  --sb-dialog-description-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * ===========================================================================
 *  DRAWER COMPONENT TOKENS
 *  sb-drawer-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  DRAWER OVERLAY
 * --------------------------------------------------
 */

:root {
  --sb-drawer-overlay-color-bg: var(--sb-sem-color-bg-scrim);
}

/*
 * --------------------------------------------------
 *  DRAWER CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-drawer-content-space-mt: var(--sb-sem-space-overlay-m);
  --sb-drawer-content-color-bg: var(--sb-sem-color-bg-surface);
  --sb-drawer-content-radius: var(--sb-sem-radius-overlay);
  --sb-drawer-content-width-border: var(--sb-sem-width-border);
  --sb-drawer-content-color-border: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  DRAWER THUMB
 * --------------------------------------------------
 */

:root {
  --sb-drawer-thumb-space-mt: var(--sb-sem-space-indicator-m);
  --sb-drawer-thumb-space-w: var(--sb-sem-space-indicator-w-alt);
  --sb-drawer-thumb-space-h: var(--sb-sem-space-indicator-h);
  --sb-drawer-thumb-color-bg: var(--sb-sem-color-bg-fill-secondary);
  --sb-drawer-thumb-radius: var(--sb-sem-radius-indicator);
}

/*
 * --------------------------------------------------
 *  DRAWER HEADER
 * --------------------------------------------------
 */

:root {
  --sb-drawer-header-space-gap: var(--sb-sem-space-overlay-gap-xs);
  --sb-drawer-header-space-gap-sm: var(--sb-sem-space-overlay-gap-2xs);
  --sb-drawer-header-space-p: var(--sb-sem-space-overlay-p-sm);
}

/*
 * --------------------------------------------------
 *  DRAWER FOOTER
 * --------------------------------------------------
 */

:root {
  --sb-drawer-footer-space-gap: var(--sb-sem-space-overlay-gap-sm);
  --sb-drawer-footer-space-p: var(--sb-sem-space-overlay-p-sm);
}

/*
 * --------------------------------------------------
 *  DRAWER TITLE
 * --------------------------------------------------
 */

:root {
  --sb-drawer-title-font-size: var(--sb-sem-font-content-heading-size-sm);
  --sb-drawer-title-font-line-height: var(
    --sb-sem-font-content-heading-line-height-sm
  );
  --sb-drawer-title-font-weight: var(--sb-sem-font-content-heading-weight);
  --sb-drawer-title-color-text: var(--sb-sem-color-text);
}

/*
 * --------------------------------------------------
 *  DRAWER DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --sb-drawer-description-font-size: var(--sb-sem-font-content-body-size);
  --sb-drawer-description-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );
  --sb-drawer-description-font-weight: var(--sb-sem-font-content-body-weight);
  --sb-drawer-description-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * ===========================================================================
 *  DROPDOWN MENU COMPONENT TOKENS
 *  sb-dropdown-menu-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  DROPDOWN MENU CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-content-space-p: var(--sb-sem-space-overlay-p-xs);

  --sb-dropdown-menu-content-space-min-w: var(--sb-sem-space-overlay-min-w);

  --sb-dropdown-menu-content-color-text: var(--sb-sem-color-text);

  --sb-dropdown-menu-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-dropdown-menu-content-radius: var(--sb-sem-radius-overlay);
  --sb-dropdown-menu-content-width-border: var(--sb-sem-width-border);
  --sb-dropdown-menu-content-color-border: var(--sb-sem-color-border);

  --sb-dropdown-menu-content-shadow: var(--sb-sem-shadow-overlay);
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU ITEM
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-dropdown-menu-item-space-px: var(--sb-sem-space-action-px-xs);
  --sb-dropdown-menu-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-dropdown-menu-item-font-size: var(--sb-sem-font-content-body-size);
  --sb-dropdown-menu-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-dropdown-menu-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-dropdown-menu-item-color-bg-hover: var(--sb-sem-color-bg-fill-secondary);
  --sb-dropdown-menu-item-color-text-hover: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-dropdown-menu-item-color-bg-focus: var(--sb-sem-color-bg-fill-secondary);
  --sb-dropdown-menu-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-dropdown-menu-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-dropdown-menu-item-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-dropdown-menu-item-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU CHECKBOX ITEM
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-checkbox-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-dropdown-menu-checkbox-item-space-pl: var(--sb-sem-space-action-px-xl);
  --sb-dropdown-menu-checkbox-item-space-pr: var(--sb-sem-space-action-px-xs);
  --sb-dropdown-menu-checkbox-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-dropdown-menu-checkbox-item-font-size: var(
    --sb-sem-font-content-body-size
  );
  --sb-dropdown-menu-checkbox-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-dropdown-menu-checkbox-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-dropdown-menu-checkbox-item-color-bg-focus: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-dropdown-menu-checkbox-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-dropdown-menu-checkbox-item-opacity-disabled: var(
    --sb-sem-opacity-disabled
  );

  --sb-dropdown-menu-checkbox-item-icon-container-space-size: var(
    --sb-sem-space-icon-size-sm
  );

  --sb-dropdown-menu-checkbox-item-icon-space-size: var(
    --sb-sem-space-icon-size
  );
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU RADIO ITEM
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-radio-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-dropdown-menu-radio-item-space-pl: var(--sb-sem-space-action-px-xl);
  --sb-dropdown-menu-radio-item-space-pr: var(--sb-sem-space-action-px-xs);
  --sb-dropdown-menu-radio-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-dropdown-menu-radio-item-font-size: var(--sb-sem-font-content-body-size);
  --sb-dropdown-menu-radio-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-dropdown-menu-radio-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-dropdown-menu-radio-item-color-bg-focus: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-dropdown-menu-radio-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-dropdown-menu-radio-item-opacity-disabled: var(
    --sb-sem-opacity-disabled
  );

  --sb-dropdown-menu-radio-item-icon-container-space-size: var(
    --sb-sem-space-icon-size-sm
  );

  --sb-dropdown-menu-radio-item-icon-space-size: var(
    --sb-sem-space-icon-size-3xs
  );
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU LABEL
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-label-space-px: var(--sb-sem-space-overlay-px);
  --sb-dropdown-menu-label-space-py: var(--sb-sem-space-overlay-py);

  --sb-dropdown-menu-label-font-size: var(--sb-sem-font-content-label-size);
  --sb-dropdown-menu-label-font-line-height: var(
    --sb-sem-font-content-label-line-height
  );
  --sb-dropdown-menu-label-font-weight: var(--sb-sem-font-content-label-weight);
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU SEPARATOR
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-separator-space-mx: var(--sb-sem-space-divider-mx);
  --sb-dropdown-menu-separator-space-my: var(--sb-sem-space-divider-my);

  --sb-dropdown-menu-separator-space-h: var(--sb-sem-width-border);

  --sb-dropdown-menu-separator-color-bg: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU SHORTCUT
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-shortcut-font-size: var(
    --sb-sem-font-content-shortcut-size
  );
  --sb-dropdown-menu-shortcut-font-line-height: var(
    --sb-sem-font-content-shortcut-line-height
  );
  --sb-dropdown-menu-shortcut-font-letter-spacing: var(
    --sb-sem-font-content-shortcut-letter-spacing
  );
  --sb-dropdown-menu-shortcut-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * ===========================================================================
 *  EMPTY COMPONENT TOKENS
 *  rtg-empty-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  EMPTY
 * --------------------------------------------------
 */

:root {
  --rtg-empty-space-gap: var(--sb-sem-space-feedback-gap-2xl);
  --rtg-empty-space-p: var(--sb-sem-space-feedback-p-lg);
  --rtg-empty-width-border: var(--sb-sem-width-border);
  --rtg-empty-color-border: hsl(var(--sb-sem-color-border));
  --rtg-empty-radius: var(--sb-sem-radius-feedback-lg);
}

/*
 * --------------------------------------------------
 *  EMPTY HEADER
 * --------------------------------------------------
 */

:root {
  --rtg-empty-header-space-gap: var(--sb-sem-space-feedback-gap-lg);
  --rtg-empty-header-space-max-w: var(--sb-sem-space-feedback-max-w);
}

/*
 * --------------------------------------------------
 *  EMPTY MEDIA
 * --------------------------------------------------
 */

:root {
  --rtg-empty-media-space-mb: var(--sb-sem-space-icon-mb-parent);

  --rtg-empty-media-default-color-bg: hsl(var(--sb-sem-color-bg-fill-transparent));

  --rtg-empty-media-icon-space-size: var(--sb-sem-space-icon-size-parent);
  --rtg-empty-media-icon-color-text: hsl(var(--sb-sem-color-text));
  --rtg-empty-media-icon-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));
  --rtg-empty-media-icon-radius: var(--sb-sem-radius-feedback);
  --rtg-empty-media-icon-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * --------------------------------------------------
 *  EMPTY TITLE
 * --------------------------------------------------
 */

:root {
  --rtg-empty-title-font-family: var(--sb-sem-font-family-heading);
  --rtg-empty-title-font-size: var(--sb-sem-font-content-heading-size-xs);
  --rtg-empty-title-font-line-height: var(--sb-sem-font-content-heading-line-height-xs);
  --rtg-empty-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);
  --rtg-empty-title-font-letter-spacing: var(--sb-sem-font-content-heading-letter-spacing);
}

/*
 * --------------------------------------------------
 *  EMPTY DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --rtg-empty-description-font-size: var(--sb-sem-font-content-body-size);
  --rtg-empty-description-font-line-height: var(--sb-sem-font-content-body-line-height-tall);
  --rtg-empty-description-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-empty-description-color-link-hover: hsl(var(--sb-sem-color-text-brand));
}

/*
 * --------------------------------------------------
 *  EMPTY CONTENT
 * --------------------------------------------------
 */

:root {
  --rtg-empty-content-space-gap: var(--sb-sem-space-feedback-gap-xl);
  --rtg-empty-content-space-max-w: var(--sb-sem-space-feedback-max-w);
  --rtg-empty-content-font-size: var(--sb-sem-font-content-body-size);
  --rtg-empty-content-font-line-height: var(--sb-sem-font-content-body-line-height);
}

/*
 * ===========================================================================
 *  FIELD COMPONENT TOKENS
 *  rtg-field-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  FIELD SET
 * --------------------------------------------------
 */

:root {
  --rtg-field-set-space-gap: var(--sb-sem-space-form-gap-lg);
  --rtg-field-set-space-gap-has-checkbox-group: var(--sb-sem-space-form-gap);
  --rtg-field-set-space-gap-has-radio-group: var(--sb-sem-space-form-gap);
}

/*
 * --------------------------------------------------
 *  FIELD LEGEND
 * --------------------------------------------------
 */

:root {
  --rtg-field-legend-space-mb: var(--sb-ref-space-1-5);
  --rtg-field-legend-font-weight: var(--sb-sem-font-form-heading-weight);

  /* * VARIANTS * */
  /* LABEL */
  --rtg-field-legend-label-font-size: var(--sb-sem-font-form-label-size);
  --rtg-field-legend-label-font-line-height: var(--sb-sem-font-form-label-line-height);

  /* LEGEND */
  --rtg-field-legend-legend-font-size: var(--sb-sem-font-form-heading-size);
  --rtg-field-legend-legend-font-line-height: var(--sb-sem-font-form-heading-line-height);
}

/*
 * --------------------------------------------------
 *  FIELD GROUP
 * --------------------------------------------------
 */

:root {
  --rtg-field-group-space-gap: var(--sb-sem-space-form-gap-xl);

  --rtg-field-group-space-gap-is-checkbox-group: var(--sb-sem-space-form-gap);
  --rtg-field-group-space-gap-is-nested: var(--sb-sem-space-form-gap-lg);
}

/*
 * --------------------------------------------------
 *  FIELD
 * --------------------------------------------------
 */

:root {
  --rtg-field-space-gap: var(--sb-sem-space-form-gap-sm);

  --rtg-field-color-text-invalid: hsl(var(--sb-sem-color-text-destructive));

  --rtg-field-space-p-in-label: var(--sb-ref-space-2-5);

  /* * CHECKBOX CHILD * */
  --rtg-field-checkbox-space-mt: 1px;

  /* * RADIO CHILD * */
  --rtg-field-radio-space-mt: 1px;
}

/*
 * --------------------------------------------------
 *  FIELD CONTENT
 * --------------------------------------------------
 */

:root {
  --rtg-field-content-space-gap: var(--sb-ref-space-0-5);
  --rtg-field-content-font-line-height: var(--sb-sem-font-form-content-line-height);
}

/*
 * --------------------------------------------------
 *  FIELD LABEL
 * --------------------------------------------------
 */

:root {
  --rtg-field-label-space-gap: var(--sb-sem-space-form-gap-sm);
  --rtg-field-label-font-line-height: var(--sb-sem-font-form-label-line-height-alt);

  --rtg-field-label-width-border-has-field: var(--sb-sem-width-border);
  --rtg-field-label-color-border-has-field: hsl(var(--sb-sem-color-border));
  --rtg-field-label-radius-has-field: var(--sb-sem-radius-form);

  --rtg-field-label-color-bg-has-checked: hsl(var(--sb-sem-color-bg-surface-brand));
  --rtg-field-label-color-border-has-checked: hsl(var(--sb-sem-color-border-brand-tertiary));

  --rtg-field-label-opacity-disabled: var(--sb-sem-opacity-disabled);
}

/*
 * --------------------------------------------------
 *  FIELD TITLE
 * --------------------------------------------------
 */

:root {
  --rtg-field-title-space-gap: var(--sb-sem-space-form-gap-sm);

  --rtg-field-title-font-size: var(--sb-sem-font-form-label-size);
  --rtg-field-title-font-line-height: var(--sb-sem-font-form-label-line-height-alt);
  --rtg-field-title-font-weight: var(--sb-sem-font-form-label-weight);

  --rtg-field-title-opacity-disabled: var(--sb-sem-opacity-disabled);
}

/*
 * --------------------------------------------------
 *  FIELD DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --rtg-field-description-font-size: var(--sb-sem-font-form-size);
  --rtg-field-description-font-line-height: var(--sb-sem-font-form-description-line-height);
  --rtg-field-description-font-weight: var(--sb-sem-font-form-weight);
  --rtg-field-description-color-text: hsl(var(--sb-sem-color-text-secondary));

  --rtg-field-description-space-mt-after-legend: var(--sb-ref-space-neg-1-5);
  --rtg-field-description-space-mt-is-last: var(--sb-ref-space-0);
  --rtg-field-description-space-mt-is-2-last: var(--sb-ref-space-neg-1);

  --rtg-field-description-link-color-text-hover: hsl(var(--sb-sem-color-text-brand));
}

/*
 * --------------------------------------------------
 *  FIELD SEPARATOR
 * --------------------------------------------------
 */

:root {
  --rtg-field-separator-space-my: var(--sb-ref-space-neg-2);
  --rtg-field-separator-space-h: var(--sb-sem-space-divider-h);
  --rtg-field-separator-font-size: var(--sb-sem-font-form-size);
  --rtg-field-separator-font-line-height: var(--sb-sem-font-form-line-height);

  /* * CONTENT * */
  --rtg-field-separator-content-space-px: var(--sb-sem-space-form-gap-sm);
  --rtg-field-separator-content-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-field-separator-content-color-bg: hsl(var(--sb-sem-color-bg));
}

/*
 * --------------------------------------------------
 *  FIELD ERROR
 * --------------------------------------------------
 */

:root {
  --rtg-field-error-font-size: var(--sb-sem-font-form-size);
  --rtg-field-error-font-line-height: var(--sb-sem-font-form-line-height);
  --rtg-field-error-font-weight: var(--sb-sem-font-form-weight);
  --rtg-field-error-color-text: hsl(var(--sb-sem-color-text-destructive));

  --rtg-field-error-content-space-gap: var(--sb-ref-space-1);
  --rtg-field-error-content-space-ml: var(--sb-ref-space-4);
  --sb-form-space-y: var(--sb-ref-space-4);

  /* description */
  --sb-form-description-font-size: var(--sb-sem-font-form-size);
  --sb-form-description-color-text: var(--sb-sem-color-text-secondary);
  --sb-form-description-space-mt: var(--sb-ref-space-1);

  /* field */
  --sb-form-field-space-y: var(--sb-ref-space-2);

  /* item */
  --sb-form-item-space-y: var(--sb-ref-space-1);

  /* label */
  --sb-form-label-font-size: var(--sb-sem-font-form-label-size);
  --sb-form-label-font-weight: var(--sb-sem-font-form-label-weight);
  --sb-form-label-space-mb: var(--sb-ref-space-1);
  --sb-form-label-opacity-peer-disabled: var(--sb-sem-opacity-disabled);
  --sb-form-label-color-text-error: var(--sb-sem-color-text-destructive);

  /* message */
  --sb-form-message-font-size: var(--sb-sem-font-form-label-size);
  --sb-form-message-color-text: var(--sb-sem-color-text-destructive);
}

/*
 * ===========================================================================
 *  HOVER CARD COMPONENT TOKENS
 *  sb-hover-card-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  HOVER CARD CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-hover-card-content-space-p: var(--sb-sem-space-overlay-p-sm);

  --sb-hover-card-content-space-w: var(--sb-sem-space-overlay-w-xs);

  --sb-hover-card-content-color-text: var(--sb-sem-color-text);

  --sb-hover-card-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-hover-card-content-radius: var(--sb-sem-radius-overlay);
  --sb-hover-card-content-width-border: var(--sb-sem-width-border);
  --sb-hover-card-content-color-border: var(--sb-sem-color-border);

  --sb-hover-card-content-shadow: var(--sb-sem-shadow-overlay);
}

/*
 * ===========================================================================
 *  INPUT GROUP COMPONENT TOKENS
 *  rtg-input-group-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  INPUT GROUP
 * --------------------------------------------------
 */

:root {
  --rtg-input-group-space-h: var(--sb-sem-space-form-size-sm);
  --rtg-input-group-color-bg: hsl(var(--sb-sem-color-bg-fill-quaternary));
  --rtg-input-group-width-border: var(--sb-sem-width-border);
  --rtg-input-group-color-border: hsl(var(--sb-sem-color-border-secondary));
  --rtg-input-group-radius: var(--sb-sem-radius-form);
  --rtg-input-group-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-input-group-motion-duration: var(--sb-sem-motion-duration-default);

  --rtg-input-group-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-input-group-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-input-group-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  --rtg-input-group-color-border-invalid: hsl(var(--sb-sem-color-border-invalid-secondary));
  --rtg-input-group-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-input-group-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));

  --rtg-input-group-color-bg-disabled: hsl(var(--sb-sem-color-bg-fill-disabled));
  --rtg-input-group-opacity-disabled: var(--sb-sem-opacity-disabled);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP ADDON
 * --------------------------------------------------
 */

:root {
  --rtg-input-group-addon-space-gap: var(--sb-sem-space-form-gap-sm);
  --rtg-input-group-addon-space-py: var(--sb-sem-space-form-p-xs);
  --rtg-input-group-addon-font-size: var(--sb-sem-font-form-size);
  --rtg-input-group-addon-font-line-height: var(--sb-sem-font-form-line-height);
  --rtg-input-group-addon-font-weight: var(--sb-sem-font-form-heading-weight);
  --rtg-input-group-addon-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-input-group-addon-opacity-disabled: var(--sb-sem-opacity-disabled);

  --rtg-input-group-addon-width-border: var(--sb-sem-width-border);
  --rtg-input-group-addon-color-border: hsl(var(--sb-sem-color-border));

  --rtg-input-group-addon-icon-space-size: var(--sb-sem-space-icon-size);
  --rtg-input-group-addon-kbd-radius: var(--sb-ref-radius-xs-sm);

  --rtg-input-group-addon-inline-space-px: var(--sb-sem-space-form-p-sm);
  --rtg-input-group-addon-inline-space-mx-has-button: -0.3rem;
  --rtg-input-group-addon-inline-space-mx-has-kbd: -0.15rem;

  --rtg-input-group-addon-block-space-px: var(--sb-sem-space-form-px);
  --rtg-input-group-addon-block-space-py: var(--sb-sem-space-form-p-sm);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP BUTTON
 * --------------------------------------------------
 */

:root {
  --rtg-input-group-button-space-gap-sm: var(--sb-sem-space-action-gap-xl);
  --rtg-input-group-button-space-px-xs: var(--sb-sem-space-action-gap-lg);
  --rtg-input-group-button-space-size-sm: var(--sb-sem-space-action-size);
  --rtg-input-group-button-font-size: var(--sb-sem-font-action-size);
  --rtg-input-group-button-font-line-height: var(--sb-sem-font-action-line-height);
  --rtg-input-group-button-radius-xs: var(--sb-ref-radius-sm-md);
  --rtg-input-group-button-icon-space-size-xs: var(--sb-sem-space-icon-size-sm);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP TEXT
 * --------------------------------------------------
 */

:root {
  --rtg-input-group-text-space-gap: var(--sb-sem-space-form-gap-sm);
  --rtg-input-group-text-font-size: var(--sb-sem-font-form-size);
  --rtg-input-group-text-font-line-height: var(--sb-sem-font-form-line-height);
  --rtg-input-group-text-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-input-group-text-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP INPUT
 * --------------------------------------------------
 */

:root {
  --rtg-input-group-input-space-px: var(--sb-sem-space-form-p-xs);
  --rtg-input-group-input-space-py: var(--sb-sem-space-form-p);
}

/*
 * ===========================================================================
 *  INPUT OTP COMPONENT TOKENS
 *  rtg-input-otp-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  INPUT OTP
 * --------------------------------------------------
 */

:root {
  --rtg-input-otp-space-gap: var(--sb-sem-space-form-gap-sm);

  /* Used by group and slot */
  --rtg-input-otp-radius: var(--sb-sem-radius-form);

  /* DISABLED */
  --rtg-input-otp-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* INVALID */
  /* Used by group and slot */
  --rtg-input-otp-color-border-invalid: hsl(var(--sb-sem-color-border-invalid));
  --rtg-input-otp-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-input-otp-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));
}

/*
 * --------------------------------------------------
 *  INPUT OTP SLOT
 * --------------------------------------------------
 */

:root {
  --rtg-input-otp-slot-space-w: var(--sb-sem-space-form-size-sm);
  --rtg-input-otp-slot-space-h: var(--sb-sem-space-form-size-sm);

  --rtg-input-otp-slot-font-size: var(--sb-sem-font-form-size);
  --rtg-input-otp-slot-font-line-height: var(--sb-sem-font-form-line-height);

  --rtg-input-otp-slot-color-bg: hsl(var(--sb-sem-color-bg-fill-quaternary));

  --rtg-input-otp-slot-width-border: var(--sb-sem-width-border);
  --rtg-input-otp-slot-color-border: hsl(var(--sb-sem-color-border-secondary));

  --rtg-input-otp-slot-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-input-otp-slot-motion-duration: var(--sb-sem-motion-duration-default);

  /* ACTIVE */
  --rtg-input-otp-slot-color-border-active: hsl(var(--sb-sem-color-border-focus));
  --rtg-input-otp-slot-width-ring-active: var(--sb-sem-width-ring-focus);
  --rtg-input-otp-slot-color-ring-active: hsl(var(--sb-sem-color-ring-focus));
}

/*
 * --------------------------------------------------
 *  INPUT OTP SEPARATOR
 * --------------------------------------------------
 */

:root {
  --rtg-input-otp-separator-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * ===========================================================================
 *  INPUT COMPONENT TOKENS
 *  rtg-input-*
 * ===========================================================================
 */

:root {
  --rtg-input-space-py: var(--sb-sem-space-form-py);
  --rtg-input-space-px: var(--sb-sem-space-form-px);

  --rtg-input-space-h: var(--sb-sem-space-form-size-sm);

  --rtg-input-font-size: var(--sb-sem-font-form-size);
  --rtg-input-font-size-vw-sm: var(--sb-sem-font-form-size-vw-sm);
  --rtg-input-font-line-height: var(--sb-sem-font-form-line-height);
  --rtg-input-font-line-height-vw-sm: var(--sb-sem-font-form-line-height-vw-sm);

  --rtg-input-color-bg: hsl(var(--sb-sem-color-bg-fill-quaternary));

  --rtg-input-width-border: var(--sb-sem-width-border);
  --rtg-input-color-border: hsl(var(--sb-sem-color-border-secondary));
  --rtg-input-radius: var(--sb-sem-radius-form);

  --rtg-input-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-input-motion-duration: var(--sb-sem-motion-duration-default);

  /* FOCUS VISIBLE */
  --rtg-input-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-input-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-input-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  /* INVALID */
  --rtg-input-color-border-invalid: hsl(var(--sb-sem-color-border-invalid-secondary));
  --rtg-input-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-input-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));

  /* DISABLED */
  --rtg-input-color-bg-disabled: hsl(var(--sb-sem-color-bg-fill-disabled));
  --rtg-input-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* * PLACEHOLDER * */
  --rtg-input-placeholder-color-text: hsl(var(--sb-sem-color-text-secondary));

  /* * FILE SELECTOR BUTTON * */
  --rtg-input-file-button-space-h: var(--sb-sem-space-action-size-xs);

  --rtg-input-file-button-font-size: var(--sb-sem-font-action-size);
  --rtg-input-file-button-font-line-height: var(--sb-sem-font-action-line-height);
  --rtg-input-file-button-font-weight: var(--sb-sem-font-action-weight);
  --rtg-input-file-button-color-text: hsl(var(--sb-sem-color-text));

  --rtg-input-file-button-color-bg: hsl(var(--sb-sem-color-bg-fill-transparent));

  --rtg-input-file-button-width-border: 0px;
}

/*
 * ===========================================================================
 *  ITEM COMPONENT TOKENS
 *  rtg-item-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ITEM GROUP
 * --------------------------------------------------
 */

:root {
  --rtg-item-group-space-gap-default: var(--sb-sem-space-layout-gap);
  --rtg-item-group-space-gap-sm: var(--sb-sem-space-layout-gap-xs);
  --rtg-item-group-space-gap-xs: var(--sb-sem-space-layout-gap-2xs);
}

/*
 * --------------------------------------------------
 *  ITEM SEPARATOR
 * --------------------------------------------------
 */

:root {
  --rtg-item-separator-space-my: var(--sb-sem-space-divider-my);
}

/*
 * --------------------------------------------------
 *  ITEM
 * --------------------------------------------------
 */

:root {
  --rtg-item-font-size: var(--sb-sem-font-content-body-size);
  --rtg-item-font-line-height: var(--sb-sem-font-content-body-line-height);
  --rtg-item-width-border: var(--sb-sem-width-border);
  --rtg-item-radius: var(--sb-sem-radius-layout-sm);
  --rtg-item-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-item-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-item-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));
  --rtg-item-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-item-motion-duration: var(--sb-sem-motion-duration-fast);

  /* * LINK * */
  --rtg-item-color-bg-hover: hsl(var(--sb-sem-color-bg-surface-tertiary));

  /* * VARIANTS * */
  --rtg-item-muted-color-bg: hsl(var(--sb-sem-color-bg-surface-quaternary));

  --rtg-item-default-color-border: hsl(var(--sb-sem-color-border-transparent));
  --rtg-item-outline-color-border: hsl(var(--sb-sem-color-border));
  --rtg-item-muted-color-border: hsl(var(--sb-sem-color-border-transparent));

  /* * SIZES * */
  --rtg-item-space-gap-default: var(--sb-sem-space-layout-gap-xs);
  --rtg-item-space-gap-sm: var(--sb-sem-space-layout-gap-xs);
  --rtg-item-space-gap-xs: var(--sb-sem-space-layout-gap-2xs);

  --rtg-item-space-px-default: var(--sb-sem-space-layout-p-sm);
  --rtg-item-space-px-sm: var(--sb-sem-space-layout-p-sm);
  --rtg-item-space-px-xs: var(--sb-sem-space-layout-p-xs);

  --rtg-item-space-py-default: var(--sb-sem-space-layout-p-xs);
  --rtg-item-space-py-sm: var(--sb-sem-space-layout-p-xs);
  --rtg-item-space-py-xs: var(--sb-sem-space-layout-p-2xs);

  --rtg-item-space-p-xs-in-dropdown-menu: var(--sb-ref-space-0);
}

/*
 * --------------------------------------------------
 *  ITEM MEDIA
 * --------------------------------------------------
 */

:root {
  --rtg-item-media-space-gap: var(--sb-sem-space-layout-gap-2xs);
  --rtg-item-media-space-translate-y-with-description: var(--sb-sem-space-icon-translate-y);

  --rtg-item-media-default-color-bg: hsl(var(--sb-sem-color-bg-fill-transparent));
  --rtg-item-media-icon-icon-space-size: var(--sb-sem-space-icon-size);
  --rtg-item-media-image-space-size-default: var(--sb-sem-space-icon-size-parent-lg);
  --rtg-item-media-image-space-size-sm: var(--sb-sem-space-icon-size-parent);
  --rtg-item-media-image-space-size-xs: var(--sb-sem-space-icon-size-parent-sm);
  --rtg-item-media-image-radius: var(--sb-sem-radius-layout-xs);
}

/*
 * --------------------------------------------------
 *  ITEM CONTENT
 * --------------------------------------------------
 */

:root {
  --rtg-item-content-space-gap: var(--sb-sem-space-layout-gap-child);
  --rtg-item-content-space-gap-xs: var(--sb-ref-space-0);
}

/*
 * --------------------------------------------------
 *  ITEM TITLE
 * --------------------------------------------------
 */

:root {
  --rtg-item-title-space-gap: var(--sb-sem-space-layout-gap-2xs);
  --rtg-item-title-font-family: var(--sb-sem-font-family-heading);
  --rtg-item-title-font-size: var(--sb-sem-font-content-heading-size-xs);
  --rtg-item-title-font-line-height: var(--sb-sem-font-content-heading-line-height-short);
  --rtg-item-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);
}

/*
 * --------------------------------------------------
 *  ITEM DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --rtg-item-description-font-size: var(--sb-sem-font-content-body-size);
  --rtg-item-description-font-line-height: var(--sb-ref-font-line-height-normal);
  --rtg-item-description-font-weight: var(--sb-sem-font-content-body-weight);
  --rtg-item-description-color-text: hsl(var(--sb-sem-color-text-secondary));

  --rtg-item-description-font-size-xs: var(--sb-sem-font-content-body-size-sm);
  --rtg-item-description-font-line-height-xs: var(--sb-sem-font-content-body-line-height-sm);

  --rtg-item-description-link-color-text-hover: hsl(var(--sb-sem-color-text-brand));
}

/*
 * --------------------------------------------------
 *  ITEM ACTIONS
 * --------------------------------------------------
 */

:root {
  --rtg-item-actions-space-gap: var(--sb-sem-space-layout-gap-2xs);
}

/*
 * --------------------------------------------------
 *  ITEM HEADER
 * --------------------------------------------------
 */

:root {
  --rtg-item-header-space-gap: var(--sb-sem-space-layout-gap-2xs);
}

/*
 * --------------------------------------------------
 *  ITEM FOOTER
 * --------------------------------------------------
 */

:root {
  --rtg-item-footer-space-gap: var(--sb-sem-space-layout-gap-2xs);
}

/*
 * ===========================================================================
 *  KBD COMPONENT TOKENS
 *  rtg-kbd-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  KBD
 * --------------------------------------------------
 */

:root {
  --rtg-kbd-space-gap: var(--sb-sem-space-indicator-gap);
  --rtg-kbd-space-px: var(--sb-sem-space-indicator-px-sm);
  --rtg-kbd-space-size: var(--sb-sem-space-indicator-size-xl);
  --rtg-kbd-font-family: var(--sb-sem-font-family-default);
  --rtg-kbd-font-size: var(--sb-sem-font-indicator-size);
  --rtg-kbd-font-line-height: var(--sb-sem-font-indicator-line-height);
  --rtg-kbd-font-weight: var(--sb-sem-font-indicator-weight);
  --rtg-kbd-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-kbd-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));
  --rtg-kbd-radius: var(--sb-ref-radius-sm);

  --rtg-kbd-icon-space-size: var(--sb-sem-space-icon-size-xs);
}

/*
 * --------------------------------------------------
 *  KBD GROUP
 * --------------------------------------------------
 */

:root {
  --rtg-kbd-group-space-gap: var(--sb-sem-space-indicator-gap);
}

/*
 * ===========================================================================
 *  LABEL COMPONENT TOKENS
 *  rtg-label-*
 * ===========================================================================
 */

:root {
  --rtg-label-space-gap: var(--sb-sem-space-form-gap-sm);

  --rtg-label-font-size: var(--sb-sem-font-form-label-size);
  --rtg-label-font-line-height: var(--sb-sem-font-form-label-line-height);
  --rtg-label-font-weight: var(--sb-sem-font-form-label-weight);

  --rtg-label-opacity-disabled: var(--sb-sem-opacity-disabled);
}

/*
 * ===========================================================================
 *  MENUBAR COMPONENT TOKENS
 *  sb-menubar-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  MENUBAR
 * --------------------------------------------------
 */

:root {
  --sb-menubar-space-gap: var(--sb-sem-space-navigation-gap-xs);

  --sb-menubar-space-p: var(--sb-sem-space-navigation-p-xs);

  --sb-menubar-space-h: var(--sb-sem-space-navigation-size);

  --sb-menubar-color-bg: var(--sb-sem-color-bg-surface);

  --sb-menubar-radius: var(--sb-sem-radius-navigation-lg);
  --sb-menubar-width-border: var(--sb-sem-width-border);
  --sb-menubar-color-border: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  MENUBAR TRIGGER
 * --------------------------------------------------
 */

:root {
  --sb-menubar-trigger-space-px: var(--sb-sem-space-navigation-p);
  --sb-menubar-trigger-space-py: var(--sb-sem-space-navigation-p-xs);

  --sb-menubar-trigger-font-size: var(--sb-sem-font-navigation-size);
  --sb-menubar-trigger-font-line-height: var(
    --sb-sem-font-navigation-line-height
  );
  --sb-menubar-trigger-font-weight: var(
    --sb-sem-font-navigation-heading-weight
  );

  --sb-menubar-trigger-radius: var(--sb-sem-radius-navigation-sm);

  --sb-menubar-trigger-color-text-active: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-menubar-trigger-color-bg-active: var(--sb-sem-color-bg-fill-secondary);

  --sb-menubar-trigger-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-menubar-trigger-color-bg-focus: var(--sb-sem-color-bg-fill-secondary);
}

/*
 * --------------------------------------------------
 *  MENUBAR CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-menubar-content-space-p: var(--sb-sem-space-navigation-p-xs);

  --sb-menubar-content-space-min-w: var(--sb-sem-space-navigation-min-w);

  --sb-menubar-content-color-text: var(--sb-sem-color-text);

  --sb-menubar-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-menubar-content-radius: var(--sb-sem-radius-navigation-lg);
  --sb-menubar-content-width-border: var(--sb-sem-width-border);
  --sb-menubar-content-color-border: var(--sb-sem-color-border);

  --sb-menubar-content-shadow: var(--sb-sem-shadow-navigation);
}

/*
 * --------------------------------------------------
 *  MENUBAR ITEM
 * --------------------------------------------------
 */

:root {
  --sb-menubar-item-space-gap: var(--sb-sem-space-navigation-gap);

  --sb-menubar-item-space-px: var(--sb-sem-space-navigation-p);
  --sb-menubar-item-space-py: var(--sb-sem-space-navigation-p-sm);

  --sb-menubar-item-font-size: var(--sb-sem-font-navigation-size);
  --sb-menubar-item-font-line-height: var(--sb-sem-font-navigation-line-height);

  --sb-menubar-item-radius: var(--sb-sem-radius-navigation);

  --sb-menubar-item-color-text-active: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-menubar-item-color-bg-active: var(--sb-sem-color-bg-fill-secondary);

  --sb-menubar-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-menubar-item-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-menubar-item-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  MENUBAR CHECKBOX ITEM
 * --------------------------------------------------
 */

:root {
  --sb-menubar-checkbox-item-space-gap: var(--sb-sem-space-navigation-gap);

  --sb-menubar-checkbox-item-space-pl: var(--sb-sem-space-navigation-pl);
  --sb-menubar-checkbox-item-space-pr: var(--sb-sem-space-navigation-p);
  --sb-menubar-checkbox-item-space-py: var(--sb-sem-space-navigation-p-sm);

  --sb-menubar-checkbox-item-font-size: var(--sb-sem-font-navigation-size);
  --sb-menubar-checkbox-item-font-line-height: var(
    --sb-sem-font-navigation-line-height
  );

  --sb-menubar-checkbox-item-radius: var(--sb-sem-radius-navigation);

  --sb-menubar-checkbox-item-color-text-active: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-menubar-checkbox-item-color-bg-active: var(
    --sb-sem-color-bg-fill-secondary
  );

  --sb-menubar-checkbox-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-menubar-checkbox-item-indicator-space-size: var(
    --sb-sem-space-indicator-size
  );

  --sb-menubar-checkbox-item-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * --------------------------------------------------
 *  MENUBAR RADIO ITEM
 * --------------------------------------------------
 */

:root {
  --sb-menubar-radio-item-space-gap: var(--sb-sem-space-navigation-gap);

  --sb-menubar-radio-item-space-pl: var(--sb-sem-space-navigation-pl);
  --sb-menubar-radio-item-space-pr: var(--sb-sem-space-navigation-p);
  --sb-menubar-radio-item-space-py: var(--sb-sem-space-navigation-p-sm);

  --sb-menubar-radio-item-font-size: var(--sb-sem-font-navigation-size);
  --sb-menubar-radio-item-font-line-height: var(
    --sb-sem-font-navigation-line-height
  );

  --sb-menubar-radio-item-radius: var(--sb-sem-radius-navigation);

  --sb-menubar-radio-item-color-text-active: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-menubar-radio-item-color-bg-active: var(
    --sb-sem-color-bg-fill-secondary
  );

  --sb-menubar-radio-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-menubar-radio-item-indicator-space-size: var(
    --sb-sem-space-indicator-size
  );

  --sb-menubar-radio-item-icon-space-size: var(--sb-sem-space-icon-size-3xs);
}

/*
 * --------------------------------------------------
 *  MENUBAR LABEL
 * --------------------------------------------------
 */

:root {
  --sb-menubar-label-space-px: var(--sb-sem-space-navigation-p);
  --sb-menubar-label-space-py: var(--sb-sem-space-navigation-p-sm);

  --sb-menubar-label-font-size: var(--sb-sem-font-navigation-size);
  --sb-menubar-label-font-line-height: var(
    --sb-sem-font-navigation-line-height
  );
  --sb-menubar-label-font-weight: var(--sb-sem-font-navigation-label-weight);
}

/*
 * --------------------------------------------------
 *  MENUBAR SEPARATOR
 * --------------------------------------------------
 */

:root {
  --sb-menubar-separator-space-mx: var(--sb-sem-space-divider-mx);
  --sb-menubar-separator-space-my: var(--sb-sem-space-divider-my);

  --sb-menubar-separator-space-h: var(--sb-sem-width-border);

  --sb-menubar-separator-color-bg: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  MENUBAR SHORTCUT
 * --------------------------------------------------
 */

:root {
  --sb-menubar-shortcut-font-size: var(--sb-sem-font-content-shortcut-size);
  --sb-menubar-shortcut-font-line-height: var(
    --sb-sem-font-content-shortcut-line-height
  );
  --sb-menubar-shortcut-font-letter-spacing: var(
    --sb-sem-font-content-shortcut-letter-spacing
  );
  --sb-menubar-shortcut-color-text: var(--sb-sem-color-text-secondary);
  /* content */
  --sb-navigation-menu-content-space-top: var(--sb-ref-space-full);

  /* menu */
  --sb-navigation-menu-space-max-w: var(--sb-ref-space-max);

  /* menu list */
  --sb-navigation-menu-list-space-x: var(--sb-ref-space-1);

  /* menu item */
  --sb-navigation-menu-item-radius: var(--sb-sem-radius-navigation);
  --sb-navigation-menu-item-color-bg: var(--sb-sem-color-bg-surface);
  --sb-navigation-menu-list-space-px: var(--sb-ref-space-6);
  --sb-navigation-menu-list-space-py: var(--sb-ref-space-2);
  --sb-navigation-menu-item-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );

  /* menu item icon */
  --sb-navigation-menu-item-icon-space-ml: var(--sb-ref-space-1);
  --sb-navigation-menu-item-icon-space-w: var(--sb-ref-space-3);
  --sb-navigation-menu-item-icon-space-h: var(--sb-ref-space-3);
  --sb-navigation-menu-item-icon-motion-duration: var(--sb-ref-motion-duration-300);

  /* link */
  --sb-navigation-menu-link-space-h: var(--sb-ref-space-full);
  --sb-navigation-menu-link-space-w: var(--sb-ref-space-full);
  --sb-navigation-menu-link-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-navigation-menu-link-color-bg: var(--sb-sem-color-bg-surface);
  --sb-navigation-menu-link-radius: var(--sb-sem-radius-navigation-sm);
  --sb-navigation-menu-link-space-py: var(--sb-ref-space-2);
  --sb-navigation-menu-link-space-px: var(--sb-ref-space-6);

  /* content container */
  --sb-navigation-menu-content-container-space-w: var(--sb-ref-space-full);
  --sb-navigation-menu-content-container-space-mt: var(--sb-ref-space-1-5);
  --sb-navigation-menu-content-container-radius: var(--sb-sem-radius-navigation);
  --sb-navigation-menu-content-container-shadow: var(--sb-sem-shadow-navigation-lg);

  --sb-navigation-menu-content-container-color-bg: var(
    --sb-sem-color-bg-surface
  );

  --sb-navigation-menu-content-container-color-border: var(
    --sb-sem-color-border
  );

  --sb-navigation-menu-content-container-width-border: var(
    --sb-sem-width-border
  );
}

/*
 * ===========================================================================
 *  PAGINATION COMPONENT TOKENS
 *  sb-pagination-*
 * ===========================================================================
 */

:root {
  --sb-pagination-content-space-gap: var(--sb-sem-space-navigation-gap-xs);

  --sb-pagination-previous-space-gap: var(--sb-sem-space-navigation-gap-xs);
  --sb-pagination-previous-space-px: var(--sb-sem-space-navigation-px);

  --sb-pagination-next-space-gap: var(--sb-sem-space-navigation-gap-xs);
  --sb-pagination-next-space-px: var(--sb-sem-space-navigation-px);

  --sb-pagination-ellipsis-space-size: var(--sb-sem-space-navigation-size);
  --sb-pagination-ellipsis-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * ===========================================================================
 *  POPOVER COMPONENT TOKENS
 *  sb-popover-*
 * ===========================================================================
 */

:root {
  --sb-popover-content-space-p: var(--sb-sem-space-overlay-p-sm);

  --sb-popover-content-space-w: var(--sb-sem-space-overlay-w-sm);

  --sb-popover-content-color-text: var(--sb-sem-color-text);

  --sb-popover-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-popover-content-radius: var(--sb-sem-radius-overlay);
  --sb-popover-content-width-border: var(--sb-sem-width-border);
  --sb-popover-content-color-border: var(--sb-sem-color-border);

  --sb-popover-content-shadow: var(--sb-sem-shadow-overlay);
}

/*
 * ===========================================================================
 *  PROGRESS COMPONENT TOKENS
 *  sb-progress-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ROOT
 * --------------------------------------------------
 */

:root {
  --sb-progress-space-w: var(--sb-sem-space-feedback-w);
  --sb-progress-space-h: var(--sb-sem-space-feedback-h);

  --sb-progress-color-bg: var(--sb-sem-color-bg-fill-secondary);

  --sb-progress-radius: var(--sb-sem-radius-indicator);
}

/*
 * --------------------------------------------------
 *  INDICATOR
 * --------------------------------------------------
 */

:root {
  --sb-progress-indicator-space-w: var(--sb-sem-space-feedback-w-child);
  --sb-progress-indicator-space-h: var(--sb-sem-space-feedback-h-child);

  --sb-progress-indicator-color-bg: var(--sb-sem-color-bg-fill-brand);
}

/*
 * ===========================================================================
 *  RADIO GROUP COMPONENT TOKENS
 *  sb-radio-group-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  RADIO GROUP
 * --------------------------------------------------
 */

:root {
  --sb-radio-group-space-gap: var(--sb-sem-space-form-gap);
}

/*
 * --------------------------------------------------
 *  RADIO GROUP ITEM
 * --------------------------------------------------
 */

:root {
  --sb-radio-group-item-space-size: var(--sb-sem-space-form-size-xs);

  --sb-radio-group-item-color-bg: var(--sb-sem-color-bg-fill-tertiary);

  --sb-radio-group-item-radius: var(--sb-sem-radius-indicator);
  --sb-radio-group-item-width-border: var(--sb-sem-width-border);
  --sb-radio-group-item-color-border: var(--sb-sem-color-border-secondary);

  --sb-radio-group-item-color-border-focus: var(--sb-sem-color-border-focus);
  --sb-radio-group-item-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-radio-group-item-color-ring-focus: var(--sb-sem-color-ring-focus);

  --sb-radio-group-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-radio-group-item-color-border-invalid: var(
    --sb-sem-color-border-invalid
  );
  --sb-radio-group-item-width-ring-invalid: var(--sb-sem-width-ring);
  --sb-radio-group-item-color-ring-invalid: var(--sb-sem-color-ring-destructive);
}

/*
 * --------------------------------------------------
 *  RADIO GROUP INDICATOR
 * --------------------------------------------------
 */

:root {
  --sb-radio-group-indicator-space-size: var(--sb-sem-space-indicator-size-2xs);
  --sb-radio-group-indicator-color-fill: var(--sb-sem-color-bg-fill-brand);
}

/*
 * ===========================================================================
 *  SCROLL AREA COMPONENT TOKENS
 *  sb-scrollarea-*
 * ===========================================================================
 */

:root {
  --sb-scrollarea-color-bg: var(--sb-sem-color-bg-surface-secondary);
  --sb-scrollarea-color-border: var(--sb-sem-color-border);
}

/*
 * ===========================================================================
 *  SELECT COMPONENT TOKENS
 *  sb-select-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  SELECT VALUE
 * --------------------------------------------------
 */

:root {
  --sb-select-value-space-gap: var(--sb-sem-space-form-gap-sm);
}

/*
 * --------------------------------------------------
 *  SELECT TRIGGER
 * --------------------------------------------------
 */

:root {
  --sb-select-trigger-space-gap: var(--sb-sem-space-form-gap-sm);

  --sb-select-trigger-space-px: var(--sb-sem-space-form-p);
  --sb-select-trigger-space-py: var(--sb-sem-space-form-p-sm);

  --sb-select-trigger-space-h: var(--sb-sem-space-form-size-sm);

  --sb-select-trigger-font-size: var(--sb-sem-font-form-size);
  --sb-select-trigger-font-line-height: var(--sb-sem-font-form-line-height);

  --sb-select-trigger-color-bg: var(--sb-sem-color-bg-fill-quaternary);

  --sb-select-trigger-radius: var(--sb-sem-radius-form);
  --sb-select-trigger-width-border: var(--sb-sem-width-border);
  --sb-select-trigger-color-border: var(--sb-sem-color-border-secondary);

  --sb-select-trigger-color-bg-hover: var(--sb-sem-color-bg-fill-quaternary-hover);

  --sb-select-trigger-color-border-focus: var(--sb-sem-color-border-focus);
  --sb-select-trigger-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-select-trigger-color-ring-focus: var(--sb-sem-color-ring-focus);

  --sb-select-trigger-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-select-trigger-color-border-invalid: var(--sb-sem-color-border-invalid);
  --sb-select-trigger-width-ring-invalid: var(--sb-sem-width-ring);
  --sb-select-trigger-color-ring-invalid: var(--sb-sem-color-ring-destructive);

  --sb-select-trigger-placeholder-color-text: var(
    --sb-sem-color-text-secondary
  );

  /* * ICON * */
  --sb-select-trigger-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-select-trigger-icon-color-text: var(--sb-sem-color-text-secondary);
  --sb-select-trigger-icon-opacity: var(--sb-sem-opacity-icon-form);
}

/*
 * --------------------------------------------------
 *  SELECT CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-select-content-color-text: var(--sb-sem-color-text);

  --sb-select-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-select-content-radius: var(--sb-sem-radius-form);
  --sb-select-content-width-border: var(--sb-sem-width-border);
  --sb-select-content-color-border: var(--sb-sem-color-border);

  --sb-select-content-shadow: var(--sb-sem-shadow-form);

  /* * VIEWPORT * */
  --sb-select-content-viewport-space-p: var(--sb-sem-space-form-p-2xs);
}

/*
 * --------------------------------------------------
 *  SELECT LABEL
 * --------------------------------------------------
 */

:root {
  --sb-select-label-space-px: var(--sb-sem-space-form-p-sm);
  --sb-select-label-space-py: var(--sb-sem-space-form-p-xs);

  --sb-select-label-font-size: var(--sb-sem-font-form-size-sm);
  --sb-select-label-font-line-height: var(--sb-sem-font-form-line-height-sm);
  --sb-select-label-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  SELECT ITEM
 * --------------------------------------------------
 */

:root {
  --sb-select-item-space-gap: var(--sb-sem-space-form-gap-sm);

  --sb-select-item-space-pl: var(--sb-sem-space-form-p-sm);
  --sb-select-item-space-pr: var(--sb-sem-space-form-pr);
  --sb-select-item-space-py: var(--sb-sem-space-form-p-xs);

  --sb-select-item-font-size: var(--sb-sem-font-form-size);
  --sb-select-item-font-line-height: var(--sb-sem-font-form-line-height);

  --sb-select-item-radius: var(--sb-sem-radius-form-sm);

  --sb-select-item-color-text-hover: var(--sb-sem-color-text-secondary-on-fill);
  --sb-select-item-color-bg-hover: var(--sb-sem-color-bg-fill-secondary);

  --sb-select-item-color-text-focus: var(--sb-sem-color-text-secondary-on-fill);
  --sb-select-item-color-bg-focus: var(--sb-sem-color-bg-fill-secondary);

  --sb-select-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* * INDICATOR * */
  --sb-select-item-indicator-space-size: var(--sb-sem-space-indicator-size);

  /* * ICON * */
  --sb-select-item-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-select-item-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  SELECT SEPARATOR
 * --------------------------------------------------
 */

:root {
  --sb-select-separator-space-mx: var(--sb-sem-space-divider-mx);
  --sb-select-separator-space-my: var(--sb-sem-space-divider-my);

  --sb-select-separator-space-h: var(--sb-sem-width-border);

  --sb-select-separator-color-bg: var(--sb-sem-color-border);
}

/*
 * ===========================================================================
 *  SEPARATOR COMPONENT TOKENS
 *  rtg-separator-*
 * ===========================================================================
 */

:root {
  --rtg-separator-color-bg: hsl(var(--sb-sem-color-border));
  --rtg-separator-horizontal-space-h: var(--sb-sem-width-border);
  --rtg-separator-vertical-space-w: var(--sb-sem-width-border);
}

/*
 * ===========================================================================
 *  SKELETON COMPONENT TOKENS
 *  sb-skeleton-*
 * ===========================================================================
 */

:root {
  --sb-skeleton-color-bg: var(--sb-sem-color-bg-fill-secondary);
  --sb-skeleton-radius: var(--sb-sem-radius-feedback-sm);
  --sb-skeleton-motion-duration: var(--sb-sem-motion-duration-pulse);
  --sb-skeleton-motion-fn: var(--sb-sem-motion-fn-pulse);
  --sb-skeleton-opacity-at-50: var(--sb-ref-opacity-50);
}

/*
 * ===========================================================================
 *  SPINNER COMPONENT TOKENS
 *  rtg-spinner-*
 * ===========================================================================
 */

:root {
  --rtg-spinner-space-size: var(--sb-sem-space-icon-size);

  --rtg-spinner-motion-duration: var(--sb-sem-motion-duration-slow);
  --rtg-spinner-motion-fn: var(--sb-ref-motion-fn-linear);
}

/*
 * ===========================================================================
 *  SWITCH COMPONENT TOKENS
 *  sb-switch-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  SWITCH
 * --------------------------------------------------
 */

:root {
  --sb-switch-space-w: var(--sb-sem-space-action-size);
  --sb-switch-space-h: var(--sb-sem-space-action-h-sm);

  --sb-switch-radius: var(--sb-sem-radius-indicator);
  --sb-switch-width-border: var(--sb-sem-width-border);
  --sb-switch-color-border: var(--sb-sem-color-border-transparent);

  --sb-switch-color-bg-checked: var(--sb-sem-color-bg-fill-brand);
  --sb-switch-color-bg-unchecked: var(--sb-sem-color-bg-fill-unchecked);

  --sb-switch-color-border-focus: var(--sb-sem-color-border-focus);
  --sb-switch-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-switch-color-ring-focus: var(--sb-sem-color-ring-focus);

  --sb-switch-opacity-disabled: var(--sb-sem-opacity-disabled);
}

/*
 * --------------------------------------------------
 *  SWITCH THUMB
 * --------------------------------------------------
 */

:root {
  --sb-switch-thumb-space-size: var(--sb-sem-space-indicator-size-lg);

  --sb-switch-thumb-color-bg-checked: var(--sb-sem-color-bg-fill-brand-on-fill);
  --sb-switch-thumb-color-bg-unchecked: var(
    --sb-sem-color-bg-fill-on-fill-unchecked
  );

  --sb-switch-thumb-radius: var(--sb-sem-radius-indicator);
  /* table preview */
  --sb-table-preview-color-bg: var(--sb-sem-color-bg-surface-secondary);
  --sb-table-preview-space-w: var(--sb-ref-space-full);
  --sb-table-preview-space-px: var(--sb-ref-space-10);
  --sb-table-preview-space-py: var(--sb-ref-space-10);

  /* table container */
  --sb-table-container-space-w: var(--sb-ref-space-full);

  /* table */
  --sb-table-space-w: var(--sb-ref-space-full);
  --sb-table-font-size: var(--sb-sem-font-table-size);

  /* table caption */
  --sb-table-caption-space-mt: var(--sb-ref-space-4);
  --sb-table-caption-font-size: var(--sb-sem-font-table-caption-size);
  --sb-table-caption-color-text: var(--sb-sem-color-text-secondary);

  /* table head */
  --sb-table-head-color-border: var(--sb-sem-color-border);
  --sb-table-head-width-border: calc(var(--sb-ref-space-0-5) - 1px);

  --sb-table-head-row-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-table-head-cell-space-h: var(--sb-ref-space-10);
  --sb-table-head-cell-space-px: var(--sb-ref-space-2);
  --sb-table-head-cell-font-weight: var(--sb-sem-font-table-weight);
  --sb-table-head-cell-color-text: var(--sb-sem-color-text-secondary);

  /* table body */
  --sb-table-body-color-border: var(--sb-sem-color-border);
  --sb-table-body-width-border: calc(var(--sb-ref-space-0-5) - 1px);

  --sb-table-body-row-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-table-body-cell-space-py: var(--sb-ref-space-2);
  --sb-table-body-cell-space-px: var(--sb-ref-space-2);

  /* table footer */
  --sb-table-footer-color-border: var(--sb-sem-color-border);
  --sb-table-footer-width-border: calc(var(--sb-ref-space-0-5) - 1px);

  --sb-table-footer-font-weight: var(--sb-sem-font-table-weight);
  --sb-table-footer-color-bg: var(--sb-sem-color-bg-fill-tertiary-hover);
  --sb-table-footer-row-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-table-footer-cell-space-py: var(--sb-ref-space-2);
  --sb-table-footer-cell-space-px: var(--sb-ref-space-2);
}

/*
 * ===========================================================================
 *  TABS COMPONENT TOKENS
 *  rtg-tabs-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  TABS
 * --------------------------------------------------
 */

:root {
  --rtg-tabs-space-gap: var(--sb-sem-space-navigation-gap);
}

/*
 * --------------------------------------------------
 *  TABS LIST
 * --------------------------------------------------
 */

:root {
  --rtg-tabs-list-space-p: 3px;
  --rtg-tabs-list-color-text: hsl(var(--sb-sem-color-text-secondary));

  /* * VARIANTS * */
  --rtg-tabs-list-default-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));
  --rtg-tabs-list-default-radius: var(--sb-sem-radius-navigation-lg);

  --rtg-tabs-list-line-space-gap: var(--sb-sem-space-navigation-gap-xs);
  --rtg-tabs-list-line-color-bg: hsl(var(--sb-sem-color-bg-fill-transparent));

  /* * ORIENTATIONS * */
  --rtg-tabs-list-horizontal-space-h: var(--sb-sem-space-navigation-size-sm);
}

/*
 * --------------------------------------------------
 *  TABS TRIGGER
 * --------------------------------------------------
 */

:root {
  --rtg-tabs-trigger-space-gap: var(--sb-sem-space-action-gap);

  --rtg-tabs-trigger-space-py: var(--sb-sem-space-action-py-xs);
  --rtg-tabs-trigger-space-px: var(--sb-sem-space-action-px-2xs);

  --rtg-tabs-trigger-font-size: var(--sb-sem-font-action-size);
  --rtg-tabs-trigger-font-line-height: var(--sb-sem-font-action-line-height);
  --rtg-tabs-trigger-font-weight: var(--sb-sem-font-action-weight);
  --rtg-tabs-trigger-color-text: hsl(var(--sb-sem-color-text-tertiary));

  --rtg-tabs-trigger-width-border: var(--sb-sem-width-border);
  --rtg-tabs-trigger-color-border: hsl(var(--sb-sem-color-border-transparent));
  --rtg-tabs-trigger-radius: var(--sb-sem-radius-action-xs);

  --rtg-tabs-trigger-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-tabs-trigger-motion-duration: var(--sb-sem-motion-duration-default);

  /* HOVER */
  --rtg-tabs-trigger-color-text-hover: hsl(var(--sb-sem-color-text));

  /* FOCUS VISIBLE */
  --rtg-tabs-trigger-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-tabs-trigger-width-outline-focus: var(--sb-sem-width-outline-focus);
  --rtg-tabs-trigger-color-outline-focus: hsl(var(--sb-sem-color-border-focus));

  --rtg-tabs-trigger-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-tabs-trigger-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  /* DISABLED */
  --rtg-tabs-trigger-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* ACTIVE */
  --rtg-tabs-trigger-color-text-active: hsl(var(--sb-sem-color-text));

  /* * VARIANTS * */
  --rtg-tabs-trigger-default-color-bg-active: hsl(var(--sb-sem-color-bg-fill-tertiary));
  --rtg-tabs-trigger-default-color-border-active: hsl(var(--sb-sem-color-border-tertiary));
  --rtg-tabs-trigger-default-shadow-active: var(--sb-sem-shadow-action-active);

  /* * ICON CHILD * */
  --rtg-tabs-trigger-icon-space-size: var(--sb-sem-space-icon-size);

  /* * AFTER (::after) (underline of line variant) * */
  --rtg-tabs-trigger-after-color-bg: hsl(var(--sb-sem-color-bg-fill-inverse));
  --rtg-tabs-trigger-after-opacity: var(--sb-ref-opacity-0);

  --rtg-tabs-trigger-horizontal-after-space-bottom: -5px;
  --rtg-tabs-trigger-horizontal-after-space-h: var(--sb-ref-space-0-5);

  --rtg-tabs-trigger-vertical-after-space-right: var(--sb-ref-space-neg-1);
  --rtg-tabs-trigger-vertical-after-space-w: var(--sb-ref-space-0-5);

  --rtg-tabs-trigger-line-after-opacity-active: var(--sb-ref-opacity-100);
}

/*
 * --------------------------------------------------
 *  TABS CONTENT
 * --------------------------------------------------
 */

:root {
  --rtg-tabs-content-font-size: var(--sb-sem-font-content-body-size);
  --rtg-tabs-content-font-line-height: var(--sb-sem-font-content-body-line-height);
}

/*
 * ===========================================================================
 *  TEXTAREA COMPONENT TOKENS
 *  rtg-textarea-*
 * ===========================================================================
 */

:root {
  --rtg-textarea-space-px: var(--sb-sem-space-form-px);
  --rtg-textarea-space-py: var(--sb-sem-space-form-py-lg);

  --rtg-textarea-space-min-h: var(--sb-sem-space-form-min-h);

  --rtg-textarea-font-size: var(--sb-sem-font-form-size);
  --rtg-textarea-font-size-vw-sm: var(--sb-sem-font-form-size-vw-sm);
  --rtg-textarea-font-line-height: var(--sb-sem-font-form-line-height);
  --rtg-textarea-font-line-height-vw-sm: var(--sb-sem-font-form-line-height-vw-sm);

  --rtg-textarea-color-bg: hsl(var(--sb-sem-color-bg-fill-quaternary));

  --rtg-textarea-width-border: var(--sb-sem-width-border);
  --rtg-textarea-color-border: hsl(var(--sb-sem-color-border-secondary));
  --rtg-textarea-radius: var(--sb-sem-radius-form);

  --rtg-textarea-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-textarea-motion-duration: var(--sb-sem-motion-duration-default);

  /* FOCUS VISIBLE */
  --rtg-textarea-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-textarea-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-textarea-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  /* INVALID */
  --rtg-textarea-color-border-invalid: hsl(var(--sb-sem-color-border-invalid-secondary));
  --rtg-textarea-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-textarea-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));

  /* DISABLED */
  --rtg-textarea-color-bg-disabled: hsl(var(--sb-sem-color-bg-fill-disabled));
  --rtg-textarea-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* * PLACEHOLDER * */
  --rtg-textarea-placeholder-color-text: hsl(var(--sb-sem-color-text-secondary));
  /* toast title */
  --sb-toast-title-font-size: var(--sb-sem-font-content-heading-size-xs);
  --sb-toast-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);

  /* toast description  */
  --sb-toast-description-font-size: var(--sb-sem-font-content-body-size);
  --sb-toast-description-opacity: var(--sb-ref-opacity-90);

  /* toast action */
  --sb-toast-action-font-size: var(--sb-sem-font-action-size);
  --sb-toast-action-color-ring-focus: var(--sb-sem-color-ring-focus);
  --sb-toast-action-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-toast-action-font-weight: var(--sb-sem-font-action-weight);
  --sb-toast-action-space-h: var(--sb-ref-space-8);
  --sb-toast-action-radius: var(--sb-sem-radius-action-2xs);
  --sb-toast-action-space-px: var(--sb-ref-space-1-5);
  --sb-toast-action-space-py: var(--sb-ref-space-0-5);
  --sb-toast-action-color-text: var(--sb-sem-color-text);
  --sb-toast-action-opacity-disabled: var(--sb-sem-opacity-disabled);
  --sb-toast-action-default-color-bg: var(--sb-sem-color-bg-fill-tertiary);
  --sb-toast-action-default-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toast-action-color-border: var(--sb-sem-color-border-secondary);

  --sb-toast-action-destructive-color-bg: var(
    --sb-sem-color-bg-fill-destructive
  );
  --sb-toast-action-destructive-color-bg-hover: var(
    --sb-ref-color-destructive-400
  );
  --sb-toast-action-destructive-color-ring-focus: var(
    --sb-sem-color-ring-destructive
  );
  --sb-toast-action-destructive-color-text: var(
    --sb-sem-color-text-destructive-on-fill
  );

  /* toast viewport root */
  --sb-toast-viewport-root-space-px: var(--sb-ref-space-4);
  --sb-toast-viewport-root-space-py: var(--sb-ref-space-4);
  --sb-toast-viewport-root-space-w-md: calc(var(--sb-ref-space-5) * 21);
  --sb-toast-viewport-root-space-w: var(--sb-ref-space-full);

  /* toast viewport item */
  --sb-toast-viewport-item-space-w: var(--sb-ref-space-full);
  --sb-toast-viewport-item-space-gap: var(--sb-sem-space-feedback-gap-lg);
  --sb-toast-viewport-item-radius: var(--sb-sem-radius-overlay);
  --sb-toast-viewport-item-space-px: var(--sb-ref-space-4);
  --sb-toast-viewport-item-space-py: var(--sb-ref-space-4);
  --sb-toast-viewport-item-shadow: var(--sb-sem-shadow-overlay);
  --sb-toast-viewport-default-color-bg: var(
    --sb-sem-color-bg-surface-secondary
  );
  --sb-toast-viewport-default-color-border: var(
    --sb-sem-color-border-secondary
  );
  --sb-toast-viewport-default-color-text: var(--sb-sem-color-text);
  --sb-toast-viewport-destructive-color-bg: var(
    --sb-sem-color-bg-fill-destructive
  );
  --sb-toast-viewport-destructive-color-text: var(
    --sb-sem-color-role-on-destructive
  );
}

/*
 * ======================================================
 * Toast viewport item animations
 * ======================================================
 */

:root {
  /* base animation */
  --sb-toast-viewport-item-motion-duration-in: var(--sb-sem-motion-duration-in-out);
  --sb-toast-viewport-item-motion-fn-in: var(--sb-sem-motion-fn-in-out);

  --sb-toast-viewport-item-motion-duration-out: var(--sb-sem-motion-duration-in-out);
  --sb-toast-viewport-item-motion-fn-out: var(--sb-sem-motion-fn-in-out);

  /* opacity */
  --sb-toast-viewport-item-opacity-exit: var(--sb-ref-opacity-40);

  /* motion distance */
  --sb-toast-viewport-item-translate-x-exit: 200%;
  --sb-toast-viewport-item-translate-y-enter-mobile: 0%;
  --sb-toast-viewport-item-translate-y-enter-desktop: 0%;
}

/*
 * ===========================================================================
 *  TOGGLE GROUP COMPONENT TOKENS
 *  sb-toggle-group-item-*
 * ===========================================================================
 */

:root {
  --sb-toggle-group-item-color-bg-on: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toggle-group-item-color-text-on: var(--sb-sem-color-text);
  --sb-toggle-group-item-color-ring-focus: var(--sb-sem-color-ring-focus);

  --sb-toggle-group-item-default-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toggle-group-item-default-color-text-hover: var(--sb-sem-color-text);

  --sb-toggle-group-item-outline-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toggle-group-item-outline-color-text-hover: var(--sb-sem-color-text);
  --sb-toggle-group-item-outline-color-border: var(
    --sb-sem-color-border-secondary
  );

  --sb-toggle-group-item-radius: var(--sb-sem-radius-action);
  --sb-toggle-group-item-font-size: var(--sb-sem-font-action-size);
  --sb-toggle-group-item-font-weight: var(--sb-sem-font-action-weight);

  --sb-toggle-group-item-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-toggle-group-item-width-ring-offset-focus: var(
    --sb-sem-width-ring-sm-focus
  );
  --sb-toggle-group-item-opacity-disabled: var(--sb-sem-opacity-disabled);
  --sb-toggle-group-item-space-h-sm: var(--sb-sem-space-action-size);
  --sb-toggle-group-item-space-h-md: var(--sb-sem-space-action-size-lg);
  --sb-toggle-group-item-space-h-lg: var(--sb-sem-space-action-size-xl);
  --sb-toggle-group-item-space-px-sm: var(--sb-sem-space-action-px-sm);
  --sb-toggle-group-item-space-px-md: var(--sb-sem-space-action-px-md);
  --sb-toggle-group-item-space-px-lg: var(--sb-sem-space-action-px-lg);
  --sb-toggle-group-space-gap: var(--sb-sem-space-action-gap-sm);
}

/*
 * ===========================================================================
 *  TOGGLE COMPONENT TOKENS
 *  sb-toggle-*
 * ===========================================================================
 */

:root {
  --sb-toggle-color-bg-on: var(--sb-sem-color-bg-fill-tertiary-hover);
  --sb-toggle-color-text-on: var(--sb-sem-color-text);
  --sb-toggle-color-ring-focus: var(--sb-sem-color-ring-focus);

  --sb-toggle-default-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toggle-default-color-text-hover: var(--sb-sem-color-text);

  --sb-toggle-outline-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toggle-outline-color-text-hover: var(--sb-sem-color-text);
  --sb-toggle-outline-color-border: var(--sb-sem-color-border-secondary);

  --sb-toggle-radius: var(--sb-sem-radius-action);
  --sb-toggle-font-size: var(--sb-sem-font-action-size);
  --sb-toggle-font-weight: var(--sb-sem-font-action-weight);

  --sb-toggle-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-toggle-width-ring-offset-focus: var(--sb-sem-width-ring-sm-focus);
  --sb-toggle-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-toggle-space-h-sm: var(--sb-sem-space-action-size);
  --sb-toggle-space-h-md: var(--sb-sem-space-action-size-lg);
  --sb-toggle-space-h-lg: var(--sb-sem-space-action-size-xl);
  --sb-toggle-space-px-sm: var(--sb-sem-space-action-px-sm);
  --sb-toggle-space-px-md: var(--sb-sem-space-action-px-md);
  --sb-toggle-space-px-lg: var(--sb-sem-space-action-px-lg);
}

/*
 * ===========================================================================
 *  TYPOGRAPHY COMPONENT TOKENS
 *  rtg-typography-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  TYPOGRAPHY H
 * --------------------------------------------------
 */

:root {
  --rtg-typography-h-color-text: inherit;

  --rtg-typography-h-space-scroll-m: var(
    --sb-sem-space-typography-heading-scroll-m
  );
  --rtg-typography-h-font-family: var(--sb-sem-font-heading-family);
  --rtg-typography-h-font-weight: var(--sb-sem-font-heading-weight);
  --rtg-typography-h-font-letter-spacing: var(
    --sb-sem-font-heading-letter-spacing
  );

  /* * LEVELS * */

  /* LEVEL 1 */
  --rtg-typography-h-h1-font-size: var(--sb-sem-font-heading-size-h1);
  --rtg-typography-h-h1-font-line-height: var(
    --sb-sem-font-heading-line-height-h1
  );
  --rtg-typography-h-h1-font-weight: var(--sb-sem-font-heading-weight-h1);

  /* LEVEL 2 */
  --rtg-typography-h-h2-space-pb: var(--sb-sem-space-typography-xs);
  --rtg-typography-h-h2-space-mt: var(--sb-sem-space-typography-xl);

  --rtg-typography-h-h2-font-size: var(--sb-sem-font-heading-size-h2);
  --rtg-typography-h-h2-font-line-height: var(
    --sb-sem-font-heading-line-height-h2
  );
  --rtg-typography-h-h2-font-weight: var(--sb-sem-font-heading-weight);

  --rtg-typography-h-h2-width-border: var(--sb-sem-width-border);
  --rtg-typography-h-h2-color-border: hsl(var(--sb-sem-color-border));

  /* LEVEL 3 */
  --rtg-typography-h-h3-space-mt: var(--sb-sem-space-typography-lg);

  --rtg-typography-h-h3-font-size: var(--sb-sem-font-heading-size-h3);
  --rtg-typography-h-h3-font-line-height: var(
    --sb-sem-font-heading-line-height-h3
  );

  /* LEVEL 4 */
  --rtg-typography-h-h4-space-mt: var(--sb-sem-space-typography);

  --rtg-typography-h-h4-font-size: var(--sb-sem-font-heading-size-h4);
  --rtg-typography-h-h4-font-line-height: var(
    --sb-sem-font-heading-line-height-h4
  );
  --rtg-typography-h-h4-font-weight: var(--sb-sem-font-heading-weight);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY P
 * --------------------------------------------------
 */

:root {
  --rtg-typography-p-space-mt: var(--sb-sem-space-typography);

  --rtg-typography-p-font-family: var(--sb-sem-font-family);
  --rtg-typography-p-font-size: var(--sb-sem-font-size);
  --rtg-typography-p-font-size-vw-sm: var(--sb-sem-font-size-vw-sm);
  --rtg-typography-p-font-line-height: var(--sb-sem-font-paragraph-line-height);
  --rtg-typography-p-font-weight: var(--sb-sem-font-weight);
  --rtg-typography-p-font-letter-spacing: var(--sb-sem-font-letter-spacing);
  --rtg-typography-p-color-text: inherit;

  --rtg-typography-p-link-color-text: hsl(var(--sb-sem-color-text-brand));
  --rtg-typography-p-link-font-weight: var(--sb-sem-font-link-weight);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY BLOCKQUOTE
 * --------------------------------------------------
 */

:root {
  --rtg-typography-blockquote-space-pl: var(--sb-sem-space-typography);
  --rtg-typography-blockquote-space-mt: var(--sb-sem-space-typography);

  --rtg-typography-blockquote-font-family: var(--sb-sem-font-family);
  --rtg-typography-blockquote-font-size: var(--sb-sem-font-size);
  --rtg-typography-blockquote-font-size-vw-sm: var(--sb-sem-font-size-vw-sm);
  --rtg-typography-blockquote-font-line-height: var(--sb-sem-font-line-height);
  --rtg-typography-blockquote-font-weight: var(--sb-sem-font-weight);
  --rtg-typography-blockquote-font-letter-spacing: var(
    --sb-sem-font-letter-spacing
  );

  --rtg-typography-blockquote-width-border: var(
    --sb-sem-width-border-decorative
  );
  --rtg-typography-blockquote-color-border: hsl(var(--sb-sem-color-border));
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY TABLE
 * --------------------------------------------------
 */

:root {
  --rtg-typography-table-space-my: var(--sb-sem-space-typography);

  --rtg-typography-table-font-family: var(--sb-sem-font-family);
  --rtg-typography-table-font-size: var(--sb-sem-font-size);
  --rtg-typography-table-font-size-vw-sm: var(--sb-sem-font-size-vw-sm);
  --rtg-typography-table-font-line-height: var(--sb-sem-font-line-height);
  --rtg-typography-table-font-weight: var(--sb-sem-font-weight);
  --rtg-typography-table-font-letter-spacing: var(--sb-sem-font-letter-spacing);

  /* * TABLE ROW * */
  --rtg-typography-table-row-space-p: var(--sb-ref-space-0);
  --rtg-typography-table-row-space-m: var(--sb-ref-space-0);

  --rtg-typography-table-row-width-border: var(--sb-sem-width-border);
  --rtg-typography-table-row-color-border: hsl(var(--sb-sem-color-border));

  --rtg-typography-table-row-color-text-even: hsl(
    var(--sb-sem-color-text-secondary-on-fill)
  );
  --rtg-typography-table-row-color-bg-even: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );

  /* * TABLE CELL * */
  --rtg-typography-table-cell-space-px: var(--sb-sem-space-typography-sm);
  --rtg-typography-table-cell-space-py: var(--sb-sem-space-typography-xs);

  --rtg-typography-table-cell-width-border: var(--sb-sem-width-border);
  --rtg-typography-table-cell-color-border: hsl(var(--sb-sem-color-border));

  --rtg-typography-table-cell-header-font-weight: var(
    --sb-ref-font-weight-bold
  );
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LIST
 * --------------------------------------------------
 */

:root {
  --rtg-typography-list-space-ml: var(--sb-sem-space-typography);
  --rtg-typography-list-space-my: var(--sb-sem-space-typography);

  --rtg-typography-list-font-family: var(--sb-sem-font-family);
  --rtg-typography-list-font-size: var(--sb-sem-font-size);
  --rtg-typography-list-font-size-vw-sm: var(--sb-sem-font-size-vw-sm);
  --rtg-typography-list-font-line-height: var(--sb-sem-font-line-height);
  --rtg-typography-list-font-weight: var(--sb-sem-font-weight);
  --rtg-typography-list-font-letter-spacing: var(--sb-sem-font-letter-spacing);

  --rtg-typography-list-item-space-mt: var(--sb-sem-space-typography-xs);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY CODE
 * --------------------------------------------------
 */

:root {
  --rtg-typography-code-space-px: var(--sb-sem-space-typography-xs);
  --rtg-typography-code-space-py: var(--sb-sem-space-typography-2xs);

  --rtg-typography-code-color-text: hsl(
    var(--sb-sem-color-text-secondary-on-fill)
  );
  --rtg-typography-code-font-family: var(--sb-sem-font-code-family);
  --rtg-typography-code-font-size: var(--sb-sem-font-code-size);
  --rtg-typography-code-font-line-height: var(--sb-sem-font-code-line-height);
  --rtg-typography-code-font-weight: var(--sb-sem-font-code-weight);
  --rtg-typography-code-font-letter-spacing: var(
    --sb-sem-font-code-letter-spacing
  );

  --rtg-typography-code-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));

  --rtg-typography-code-radius: var(--sb-ref-radius-lg);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LEAD
 * --------------------------------------------------
 */

:root {
  --rtg-typography-lead-space-mt: var(--sb-sem-space-typography);

  --rtg-typography-lead-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-typography-lead-font-family: var(--sb-sem-font-family);
  --rtg-typography-lead-font-size: var(--sb-sem-font-size-xl);
  --rtg-typography-lead-font-line-height: var(--sb-sem-font-line-height-xl);
  --rtg-typography-lead-font-weight: var(--sb-sem-font-weight);
  --rtg-typography-lead-font-letter-spacing: var(--sb-sem-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LARGE
 * --------------------------------------------------
 */

:root {
  --rtg-typography-large-font-family: var(--sb-sem-font-family);
  --rtg-typography-large-font-size: var(--sb-sem-font-size-lg);
  --rtg-typography-large-font-line-height: var(--sb-sem-font-line-height-lg);
  --rtg-typography-large-font-weight: var(--sb-sem-font-weight-lg);
  --rtg-typography-large-font-letter-spacing: var(--sb-sem-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY SMALL
 * --------------------------------------------------
 */

:root {
  --rtg-typography-small-font-family: var(--sb-sem-font-family);
  --rtg-typography-small-font-size: var(--sb-sem-font-size-sm);
  --rtg-typography-small-font-line-height: var(--sb-sem-font-line-height-sm);
  --rtg-typography-small-font-weight: var(--sb-sem-font-weight-sm);
  --rtg-typography-small-font-letter-spacing: var(--sb-sem-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY MUTED
 * --------------------------------------------------
 */

:root {
  --rtg-typography-muted-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-typography-muted-font-family: var(--sb-sem-font-family);
  --rtg-typography-muted-font-size: var(--sb-sem-font-muted-size);
  --rtg-typography-muted-font-line-height: var(--sb-sem-font-muted-line-height);
  --rtg-typography-muted-font-weight: var(--sb-sem-font-muted-weight);
  --rtg-typography-muted-font-letter-spacing: var(--sb-sem-font-letter-spacing);
}

/* * COMPONENT STYLE IMPORTS * */

/*
 * ===========================================================================
 *  ALERT COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ALERT
 * --------------------------------------------------
 */

rtg-alert {
  width: 100%;
}

rtg-alert > [data-slot="alert"] {
  display: grid;

  gap: var(--rtg-alert-space-gap);
  padding: var(--rtg-alert-space-py) var(--rtg-alert-space-px);

  width: 100%;

  font-size: var(--rtg-alert-font-size);
  line-height: var(--rtg-alert-font-line-height);
  text-align: left;

  background-color: var(--rtg-alert-color-bg);

  border: var(--rtg-alert-width-border) solid var(--rtg-alert-color-border);
  border-radius: var(--rtg-alert-radius);
}

rtg-alert > [data-slot="alert"]:has(> svg) {
  grid-template-columns: auto 1fr;
  -moz-column-gap: var(--rtg-alert-space-gap-x-has-icon);
       column-gap: var(--rtg-alert-space-gap-x-has-icon);
}

rtg-alert > [data-slot="alert"]:has(> rtg-alert-action) {
  position: relative;
  padding-right: var(--rtg-alert-space-pr-has-action);
}

/* * VARIANTS * */

rtg-alert > [data-slot="alert"][data-variant="default"] {
  color: var(--rtg-alert-default-color-text);
}

/* BRAND & BRAND TONAL */

rtg-alert > [data-slot="alert"][data-variant^="brand"] {
  color: var(--rtg-alert-brand-color-text);
}

rtg-alert > [data-slot="alert"][data-variant="brand-tonal"] {
  background-color: var(--rtg-alert-brand-tonal-color-bg);
  border-color: var(--rtg-alert-brand-tonal-color-border);
}

/* DESTRUCTIVE & DESTRUCTIVE TONAL */

rtg-alert > [data-slot="alert"][data-variant^="destructive"] {
  color: var(--rtg-alert-destructive-color-text);
}

rtg-alert > [data-slot="alert"][data-variant="destructive-tonal"] {
  background-color: var(--rtg-alert-destructive-tonal-color-bg);
  border-color: var(--rtg-alert-destructive-tonal-color-border);
}

/* WARNING & WARNING TONAL */

rtg-alert > [data-slot="alert"][data-variant^="warning"] {
  color: var(--rtg-alert-warning-color-text);
}

rtg-alert > [data-slot="alert"][data-variant="warning-tonal"] {
  background-color: var(--rtg-alert-warning-tonal-color-bg);
  border-color: var(--rtg-alert-warning-tonal-color-border);
}

/* SUCCESS & SUCCESS TONAL */

rtg-alert > [data-slot="alert"][data-variant^="success"] {
  color: var(--rtg-alert-success-color-text);
}

rtg-alert > [data-slot="alert"][data-variant="success-tonal"] {
  background-color: var(--rtg-alert-success-tonal-color-bg);
  border-color: var(--rtg-alert-success-tonal-color-border);
}

/* INFO & INFO TONAL */

rtg-alert > [data-slot="alert"][data-variant^="info"] {
  color: var(--rtg-alert-info-color-text);
}

rtg-alert > [data-slot="alert"][data-variant="info-tonal"] {
  background-color: var(--rtg-alert-info-tonal-color-bg);
  border-color: var(--rtg-alert-info-tonal-color-border);
}

/* * ICON CHILD * */

rtg-alert > [data-slot="alert"] svg {
  grid-row: span 2 / span 2;

  width: var(--rtg-alert-icon-space-size);
  height: var(--rtg-alert-icon-space-size);

  color: currentColor;

  translate: 0 var(--rtg-alert-icon-space-translate-y);
}

/*
 * --------------------------------------------------
 *  ALERT TITLE
 * --------------------------------------------------
 */

rtg-alert-title > [data-slot="alert-title"] {
  font-weight: var(--rtg-alert-title-font-weight);
}

rtg-alert > [data-slot="alert"]:has(> svg) > rtg-alert-title > [data-slot="alert-title"] {
  grid-column-start: 2;
}

/* * LINK CHILD * */

rtg-alert-title > [data-slot="alert-title"] a {
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

rtg-alert-title > [data-slot="alert-title"] a:hover {
  color: var(--rtg-alert-title-color-link-hover);
}

/*
 * --------------------------------------------------
 *  ALERT DESCRIPTION
 * --------------------------------------------------
 */

rtg-alert-description > [data-slot="alert-description"] {
  font-size: var(--rtg-alert-description-font-size);
  line-height: var(--rtg-alert-description-font-line-height);
  text-wrap: balance;
}

@media (width >= 48rem) {
  rtg-alert-description > [data-slot="alert-description"] {
    text-wrap: pretty;
  }
}

/* * VARIANTS * */

rtg-alert > [data-slot="alert"][data-variant="default"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-description-default-color-text);
}

rtg-alert > [data-slot="alert"][data-variant^="brand"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-brand-default-color-text);
}

rtg-alert > [data-slot="alert"][data-variant^="destructive"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-destructive-default-color-text);
}

rtg-alert > [data-slot="alert"][data-variant^="warning"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-warning-default-color-text);
}

rtg-alert > [data-slot="alert"][data-variant^="success"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-success-default-color-text);
}

rtg-alert > [data-slot="alert"][data-variant^="info"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-info-default-color-text);
}

/* * LINK CHILD * */

rtg-alert-description > [data-slot="alert-description"] a {
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

rtg-alert-description > [data-slot="alert-description"] a:hover {
  color: var(--rtg-alert-description-color-link-hover);
}

/* * PARAGRAPH CHILD * */

rtg-alert-description > [data-slot="alert-description"] p:not(:last-child) {
  margin-bottom: var(--rtg-alert-description-p-space-mb);
}

/*
 * --------------------------------------------------
 *  ALERT ACTION
 * --------------------------------------------------
 */

rtg-alert-action {
  position: absolute;
  top: var(--rtg-alert-action-space-top);
  right: var(--rtg-alert-action-space-right);
}

/*
 * ===========================================================================
 *  AVATAR COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  AVATAR
 * --------------------------------------------------
 */

rtg-avatar {
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

rtg-avatar > [data-slot="avatar"] {
  display: flex;
  position: relative;

  width: var(--rtg-avatar-space-size);
  height: var(--rtg-avatar-space-size);

  border-radius: var(--rtg-avatar-radius);
}

rtg-avatar > [data-slot="avatar"][data-size="sm"] {
  width: var(--rtg-avatar-space-size-sm);
  height: var(--rtg-avatar-space-size-sm);
}

rtg-avatar > [data-slot="avatar"][data-size="lg"] {
  width: var(--rtg-avatar-space-size-lg);
  height: var(--rtg-avatar-space-size-lg);
}

/*
 * --------------------------------------------------
 *  AVATAR IMAGE
 * --------------------------------------------------
 */

rtg-avatar-image {
  width: 100%;
  height: 100%;
}

rtg-avatar-image > [data-slot="avatar-image"] {
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
     object-fit: cover;

  border-radius: var(--rtg-avatar-radius);
}

/*
 * --------------------------------------------------
 *  AVATAR FALLBACK
 * --------------------------------------------------
 */

rtg-avatar-fallback {
  width: 100%;
  height: 100%;
}

rtg-avatar-fallback > [data-slot="avatar-fallback"] {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  font-size: var(--rtg-avatar-font-size);
  line-height: var(--rtg-avatar-font-line-height);
  color: var(--rtg-avatar-color-text);

  background-color: var(--rtg-avatar-color-bg);

  border-radius: var(--rtg-avatar-radius);
}

rtg-avatar > [data-slot="avatar"][data-size="sm"] > rtg-avatar-fallback > [data-slot="avatar-fallback"] {
  font-size: var(--rtg-avatar-font-size-sm);
  line-height: var(--rtg-avatar-font-line-height-sm);
}

/*
 * --------------------------------------------------
 *  AVATAR BADGE
 * --------------------------------------------------
 */

rtg-avatar-badge {
  display: inline-flex;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;

  width: var(--rtg-avatar-badge-space-size);
  height: var(--rtg-avatar-badge-space-size);

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;
}

rtg-avatar > [data-slot="avatar"][data-size="sm"] > rtg-avatar-badge {
  width: var(--rtg-avatar-badge-space-size-sm);
  height: var(--rtg-avatar-badge-space-size-sm);
}

rtg-avatar > [data-slot="avatar"][data-size="lg"] > rtg-avatar-badge {
  width: var(--rtg-avatar-badge-space-size-lg);
  height: var(--rtg-avatar-badge-space-size-lg);
}

rtg-avatar-badge > [data-slot="avatar-badge"] {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  color: var(--rtg-avatar-badge-color-text);

  background-color: var(--rtg-avatar-badge-color-bg);

  border-radius: var(--rtg-avatar-badge-radius);

  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-avatar-width-ring) var(--rtg-avatar-color-ring),
    0 0 rgb(0 0 0);
}

/* * AVATAR BADGE ICON CHILD * */

rtg-avatar > [data-slot="avatar"][data-size="default"] > rtg-avatar-badge > [data-slot="avatar-badge"] > svg {
  width: var(--rtg-avatar-badge-icon-space-size);
  height: var(--rtg-avatar-badge-icon-space-size);
}

rtg-avatar > [data-slot="avatar"][data-size="sm"] > rtg-avatar-badge > [data-slot="avatar-badge"] > svg {
  display: none;
}

rtg-avatar > [data-slot="avatar"][data-size="lg"] > rtg-avatar-badge > [data-slot="avatar-badge"] > svg {
  width: var(--rtg-avatar-badge-icon-space-size-lg);
  height: var(--rtg-avatar-badge-icon-space-size-lg);
}

/*
 * --------------------------------------------------
 *  AVATAR GROUP
 * --------------------------------------------------
 */

rtg-avatar-group > [data-slot="avatar-group"] {
  display: flex;
}

rtg-avatar-group > [data-slot="avatar-group"] > :not(:last-child) {
  margin-inline-start: 0;
  margin-inline-end: var(--rtg-avatar-space-me-in-group);
}

rtg-avatar-group > [data-slot="avatar-group"] > rtg-avatar > [data-slot="avatar"] {
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-avatar-width-ring) var(--rtg-avatar-color-ring),
    0 0 rgb(0 0 0);
}

/*
 * --------------------------------------------------
 *  AVATAR GROUP COUNT
 * --------------------------------------------------
 */

rtg-avatar-group-count {
  flex-shrink: 0;
}

rtg-avatar-group-count > [data-slot="avatar-group-count"] {
  display: flex;
  position: relative;

  align-items: center;
  justify-content: center;

  width: var(--rtg-avatar-space-size);
  height: var(--rtg-avatar-space-size);

  font-size: var(--rtg-avatar-font-size);
  line-height: var(--rtg-avatar-font-line-height);
  color: var(--rtg-avatar-color-text);

  background-color: var(--rtg-avatar-color-bg);

  border-radius: var(--rtg-avatar-radius);

  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-avatar-width-ring) var(--rtg-avatar-color-ring),
    0 0 rgb(0 0 0);
}

rtg-avatar-group > [data-slot="avatar-group"]:has(> rtg-avatar > [data-slot="avatar"][data-size="sm"]) > rtg-avatar-group-count > [data-slot="avatar-group-count"] {
  width: var(--rtg-avatar-space-size-sm);
  height: var(--rtg-avatar-space-size-sm);

  font-size: var(--rtg-avatar-font-size-sm);
  line-height: var(--rtg-avatar-font-line-height-sm);
}

rtg-avatar-group > [data-slot="avatar-group"]:has(> rtg-avatar > [data-slot="avatar"][data-size="lg"]) > rtg-avatar-group-count > [data-slot="avatar-group-count"] {
  width: var(--rtg-avatar-space-size-lg);
  height: var(--rtg-avatar-space-size-lg);
}

/* * AVATAR GROUP COUNT ICON CHILD * */

rtg-avatar-group-count > [data-slot="avatar-group-count"] > svg {
  width: var(--rtg-avatar-icon-space-size);
  height: var(--rtg-avatar-icon-space-size);
}

rtg-avatar-group > [data-slot="avatar-group"]:has(> rtg-avatar > [data-slot="avatar"][data-size="sm"]) > rtg-avatar-group-count > [data-slot="avatar-group-count"] > svg {
  width: var(--rtg-avatar-icon-space-size-sm);
  height: var(--rtg-avatar-icon-space-size-sm);
}

rtg-avatar-group > [data-slot="avatar-group"]:has(> rtg-avatar > [data-slot="avatar"][data-size="lg"]) > rtg-avatar-group-count > [data-slot="avatar-group-count"] > svg {
  width: var(--rtg-avatar-icon-space-size-lg);
  height: var(--rtg-avatar-icon-space-size-lg);
}

/*
 * ===========================================================================
 *  BADGE COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMON
 * --------------------------------------------------
 */

rtg-badge {
  display: inline-flex;
  flex-shrink: 0;
}

rtg-badge > [data-slot=badge] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rtg-badge-space-gap);
  flex-shrink: 0;
  padding-inline: var(--rtg-badge-space-px);
  padding-block: var(--rtg-badge-space-py);
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--rtg-badge-font-size);
  line-height: var(--rtg-badge-font-line-height);
  font-weight: var(--rtg-badge-font-weight);
  white-space: nowrap;
  border: var(--rtg-badge-width-border) solid var(--rtg-badge-color-border);
  border-radius: var(--rtg-badge-radius);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, box-shadow;
  transition-timing-function: var(--rtg-badge-motion-fn);
  transition-duration: var(--rtg-badge-motion-duration);
  overflow: hidden;
}

rtg-badge > [data-slot=badge]:has(.rtg-icon-inline-start) {
  padding-left: var(--rtg-badge-space-px-has-icon);
}

rtg-badge > [data-slot=badge]:has(.rtg-icon-inline-end) {
  padding-right: var(--rtg-badge-space-px-has-icon);
}

rtg-badge > [data-slot=badge]:focus-visible {
  border-color: var(--rtg-badge-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-badge-width-ring-focus) var(--rtg-badge-color-ring-focus),
    0 0 rgb(0 0 0);
}

rtg-badge > [data-slot=badge][aria-invalid] {
  border-color: var(--rtg-badge-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-badge-width-ring-invalid) var(--rtg-badge-color-ring-invalid),
    0 0 rgb(0 0 0);
}

rtg-badge > [data-slot=badge] svg {
  width: var(--rtg-badge-icon-space-size);
  height: var(--rtg-badge-icon-space-size);
  pointer-events: none;
}

/*
 * --------------------------------------------------
 *  VARIANTS
 * --------------------------------------------------
 */

/* * DEFAULT * */

rtg-badge > [data-slot=badge][data-variant=default] {
  color: var(--rtg-badge-default-color-text);
  background-color: var(--rtg-badge-default-color-bg);
}

rtg-badge > a[data-slot=badge][data-variant=default]:hover {
  background-color: var(--rtg-badge-default-color-bg-hover);
}

/* * SECONDARY * */

rtg-badge > [data-slot=badge][data-variant=secondary] {
  color: var(--rtg-badge-secondary-color-text);
  background-color: var(--rtg-badge-secondary-color-bg);
}

rtg-badge > a[data-slot=badge][data-variant=secondary]:hover {
  background-color: var(--rtg-badge-secondary-color-bg-hover);
}

/* * OUTLINE * */

rtg-badge > [data-slot=badge][data-variant=outline] {
  color: var(--rtg-badge-outline-color-text);
  border-color: var(--rtg-badge-outline-color-border);
}

rtg-badge > a[data-slot=badge][data-variant=outline]:hover {
  color: var(--rtg-badge-outline-color-text-hover);
  background-color: var(--rtg-badge-outline-color-bg-hover);
}

/* * GHOST * */

rtg-badge > a[data-slot=badge][data-variant=ghost]:hover {
  color: var(--rtg-badge-ghost-color-text-hover);
  background-color: var(--rtg-badge-ghost-color-bg-hover);
}

/* * DESTRUCTIVE * */

rtg-badge > [data-slot=badge][data-variant=destructive] {
  color: var(--rtg-badge-destructive-color-text);
  background-color: var(--rtg-badge-destructive-color-bg);
}

rtg-badge > a[data-slot=badge][data-variant=destructive]:hover {
  background-color: var(--rtg-badge-destructive-color-bg-hover);
}

rtg-badge > [data-slot=badge][data-variant=destructive]:focus-visible {
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-badge-width-ring-focus) var(--rtg-badge-destructive-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* * LINK * */

rtg-badge > [data-slot=badge][data-variant=link] {
  color: var(--rtg-badge-link-color-text);
  text-underline-offset: 4px;
}

rtg-badge > [data-slot=badge][data-variant=link]:hover {
  text-decoration-line: underline;
}

/*
 * ===========================================================================
 *  BUTTON COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMON
 * --------------------------------------------------
 */

rtg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

rtg-button > [data-slot="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  font-weight: var(--rtg-button-font-weight);
  white-space: nowrap;

  background-clip: padding-box;

  border: var(--rtg-button-width-border) solid var(--rtg-button-color-border);
  outline: none;

  transition-property: all;
  transition-timing-function: var(--rtg-button-motion-fn);
  transition-duration: var(--rtg-button-motion-duration);
}

rtg-button > [data-slot="button"]:focus-visible {
  border-color: var(--rtg-button-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-button-width-ring-focus) var(--rtg-button-color-ring-focus),
    0 0 rgb(0 0 0);
}

rtg-button > [data-slot="button"]:disabled {
  opacity: var(--rtg-button-opacity-disabled);
  pointer-events: none;
}

rtg-button > [data-slot="button"][aria-invalid] {
  border-color: var(--rtg-button-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-button-width-ring-invalid) var(--rtg-button-color-ring-invalid),
    0 0 rgb(0 0 0);
}

rtg-button > [data-slot="button"] > :is(svg, rtg-spinner, rtg-kbd) {
  flex-shrink: 0;
  pointer-events: none;
}

/*
 * --------------------------------------------------
 *  VARIANTS
 * --------------------------------------------------
 */

/* * DEFAULT * */

rtg-button > [data-slot="button"][data-variant="default"] {
  color: var(--rtg-button-default-color-text);
  background-color: var(--rtg-button-default-color-bg);
}

rtg-button > [data-slot="button"][data-variant="default"]:hover {
  background-color: var(--rtg-button-default-color-bg-hover);
}

/* * SECONDARY * */

rtg-button > [data-slot="button"][data-variant="secondary"] {
  color: var(--rtg-button-secondary-color-text);
  background-color: var(--rtg-button-secondary-color-bg);
}

rtg-button > [data-slot="button"][data-variant="secondary"]:hover {
  background-color: var(--rtg-button-secondary-color-bg-hover);
}

rtg-button > [data-slot="button"][data-variant="secondary"][aria-expanded] {
  color: var(--rtg-button-secondary-color-text-expanded);
  background-color: var(--rtg-button-secondary-color-bg-expanded);
}

/* * OUTLINE * */

rtg-button > [data-slot="button"][data-variant="outline"] {
  background-color: var(--rtg-button-outline-color-bg);
  border-color: var(--rtg-button-outline-color-border);
}

rtg-button > [data-slot="button"][data-variant="outline"]:hover {
  color: var(--rtg-button-outline-color-text-hover);
  background-color: var(--rtg-button-outline-color-bg-hover);
}

rtg-button > [data-slot="button"][data-variant="outline"][aria-expanded] {
  color: var(--rtg-button-outline-color-text-expanded);
  background-color: var(--rtg-button-outline-color-bg-expanded);
}

/* * GHOST * */

rtg-button > [data-slot="button"][data-variant="ghost"]:hover {
  color: var(--rtg-button-ghost-color-text-hover);
  background-color: var(--rtg-button-ghost-color-bg-hover);
}

rtg-button > [data-slot="button"][data-variant="ghost"][aria-expanded] {
  color: var(--rtg-button-ghost-color-text-expanded);
  background-color: var(--rtg-button-ghost-color-bg-expanded);
}

/* * DESTRUCTIVE * */

rtg-button > [data-slot="button"][data-variant="destructive"] {
  color: var(--rtg-button-destructive-color-text);
  background-color: var(--rtg-button-destructive-color-bg);
}

rtg-button > [data-slot="button"][data-variant="destructive"]:hover {
  background-color: var(--rtg-button-destructive-color-bg-hover);
}

rtg-button > [data-slot="button"][data-variant="destructive"]:focus-visible {
  border-color: var(--rtg-button-destructive-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-button-width-ring-focus) var(--rtg-button-destructive-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* * LINK * */

rtg-button > [data-slot="button"][data-variant="link"] {
  color: var(--rtg-button-link-color-text);
  text-underline-offset: 4px;
}

rtg-button > [data-slot="button"][data-variant="link"]:hover {
  text-decoration-line: underline;
}

/*
 * --------------------------------------------------
 *  SIZES
 * --------------------------------------------------
 */

/* * DEFAULT * */

rtg-button:has(> [data-slot="button"][data-size="default"]) {
  height: var(--rtg-button-space-size-default);
}

rtg-button > [data-slot="button"][data-size="default"] {
  gap: var(--rtg-button-space-gap-default);

  padding-left: var(--rtg-button-space-px-default);
  padding-right: var(--rtg-button-space-px-default);

  font-size: var(--rtg-button-font-size-default);
  line-height: var(--rtg-button-font-line-height-default);

  border-radius: var(--rtg-button-radius-default);
}

rtg-button > [data-slot="button"][data-size="default"]:has(.rtg-icon-inline-start) {
  padding-left: var(--rtg-button-space-px-default-has-icon);
}

rtg-button > [data-slot="button"][data-size="default"]:has(.rtg-icon-inline-end) {
  padding-right: var(--rtg-button-space-px-default-has-icon);
}

rtg-button > [data-slot="button"][data-size="default"] svg {
  width: var(--rtg-button-icon-space-size-default);
  height: var(--rtg-button-icon-space-size-default);
}

/* * EXTRA SMALL & ICON EXTRA SMALL * */

/* xs & icon-xs */

rtg-button:has(> [data-slot="button"][data-size$="xs"]) {
  height: var(--rtg-button-space-size-xs);
}

rtg-button > [data-slot="button"][data-size$="xs"] {
  font-size: var(--rtg-button-font-size-xs);
  line-height: var(--rtg-button-font-line-height-xs);

  border-radius: var(--rtg-button-radius-xs);
}

/* xs */

rtg-button > [data-slot="button"][data-size="xs"] {
  gap: var(--rtg-button-space-gap-xs);

  padding-left: var(--rtg-button-space-px-xs);
  padding-right: var(--rtg-button-space-px-xs);
}

rtg-button > [data-slot="button"][data-size="xs"]:has(.rtg-icon-inline-start) {
  padding-left: var(--rtg-button-space-px-xs-has-icon);
}

rtg-button > [data-slot="button"][data-size="xs"]:has(.rtg-icon-inline-end) {
  padding-right: var(--rtg-button-space-px-xs-has-icon);
}

/* icon-xs */

rtg-button:has(> [data-slot="button"][data-size="icon-xs"]) {
  width: var(--rtg-button-space-size-xs);
}

/* xs & icon-xs: in button-group */

[data-slot="button-group"] > rtg-button > [data-slot="button"][data-size$="xs"] {
  border-radius: var(--rtg-button-radius-in-group);
}

/* xs & icon-xs: icon/svg child */

rtg-button > [data-slot="button"][data-size$="xs"] svg {
  width: var(--rtg-button-icon-space-size-xs);
  height: var(--rtg-button-icon-space-size-xs);
}

/* * SMALL & ICON SMALL * */

/* sm & icon-sm */

rtg-button:has(> [data-slot="button"][data-size$="sm"]) {
  height: var(--rtg-button-space-size-sm);
}

rtg-button > [data-slot="button"][data-size$="sm"] {
  font-size: var(--rtg-button-font-size-sm);
  line-height: var(--rtg-button-font-line-height-sm);

  border-radius: var(--rtg-button-radius-sm);
}

/* sm */

rtg-button > [data-slot="button"][data-size="sm"] {
  gap: var(--rtg-button-space-gap-sm);

  padding-left: var(--rtg-button-space-px-sm);
  padding-right: var(--rtg-button-space-px-sm);
}

rtg-button > [data-slot="button"][data-size="sm"]:has(.rtg-icon-inline-start) {
  padding-left: var(--rtg-button-space-px-sm-has-icon);
}

rtg-button > [data-slot="button"][data-size="sm"]:has(.rtg-icon-inline-end) {
  padding-right: var(--rtg-button-space-px-sm-has-icon);
}

/* icon-sm */

rtg-button:has(> [data-slot="button"][data-size="icon-sm"]) {
  width: var(--rtg-button-space-size-sm);
}

/* sm & icon-sm: in button-group */

[data-slot="button-group"] > rtg-button > [data-slot="button"][data-size$="sm"] {
  border-radius: var(--rtg-button-radius-in-group);
}

/* sm & icon-sm: icon/svg child */

rtg-button > [data-slot="button"][data-size$="sm"] svg {
  width: var(--rtg-button-icon-space-size-sm);
  height: var(--rtg-button-icon-space-size-sm);
}

/* * LARGE & ICON LARGE * */

/* lg & icon-lg */

rtg-button:has(> [data-slot="button"][data-size$="lg"]) {
  height: var(--rtg-button-space-size-lg);
}

rtg-button > [data-slot="button"][data-size$="lg"] {
  font-size: var(--rtg-button-font-size-lg);
  line-height: var(--rtg-button-font-line-height-lg);

  border-radius: var(--rtg-button-radius-lg);
}

/* lg */

rtg-button > [data-slot="button"][data-size="lg"] {
  gap: var(--rtg-button-space-gap-lg);

  padding-left: var(--rtg-button-space-px-lg);
  padding-right: var(--rtg-button-space-px-lg);
}

rtg-button > [data-slot="button"][data-size="lg"]:has(.rtg-icon-inline-start) {
  padding-left: var(--rtg-button-space-px-lg-has-icon);
}

rtg-button > [data-slot="button"][data-size="lg"]:has(.rtg-icon-inline-end) {
  padding-right: var(--rtg-button-space-px-lg-has-icon);
}

/* icon-lg */

rtg-button:has(> [data-slot="button"][data-size="icon-lg"]) {
  width: var(--rtg-button-space-size-lg);
}

/* lg & icon-lg: icon/svg child */

rtg-button > [data-slot="button"][data-size$="lg"] svg {
  width: var(--rtg-button-icon-space-size-lg);
  height: var(--rtg-button-icon-space-size-lg);
}

/* * ICON * */

rtg-button:has(> [data-slot="button"][data-size="icon"]) {
  width: var(--rtg-button-space-size-default);
  height: var(--rtg-button-space-size-default);
}

rtg-button > [data-slot="button"][data-size="icon"] {
  font-size: var(--rtg-button-font-size-default);
  line-height: var(--rtg-button-font-line-height-default);

  border-radius: var(--rtg-button-radius-default);
}

rtg-button > [data-slot="button"][data-size="icon"] svg {
  width: var(--rtg-button-icon-space-size-default);
  height: var(--rtg-button-icon-space-size-default);
}

/*
 * ===========================================================================
 *  CARD COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  CARD
 * --------------------------------------------------
 */

rtg-card {
  width: var(--rtg-card-space-width);
}

rtg-card > [data-slot='card'] {
  width: 100%;
  display: flex;
  overflow: hidden;

  flex-direction: column;
  gap: var(--rtg-card-space-gap);

  padding-top: var(--rtg-card-space-py);
  padding-bottom: var(--rtg-card-space-py);

  font-size: var(--rtg-card-font-size);
  line-height: var(--rtg-card-font-line-height);
  color: var(--rtg-card-color-text);

  background-color: var(--rtg-card-color-bg);

  border-radius: var(--rtg-card-radius);

  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-card-width-ring) var(--rtg-card-color-ring),
    0 0 rgb(0 0 0);
}

rtg-card > [data-slot='card'][data-size='sm'] {
  gap: var(--rtg-card-space-gap-sm);

  padding-top: var(--rtg-card-space-py-sm);
  padding-bottom: var(--rtg-card-space-py-sm);
}

rtg-card > [data-slot='card']:has([data-slot='card-footer'][data-border]) {
  padding-bottom: 0;
}

rtg-card > [data-slot='card']:has(> img:first-child) {
  padding-top: 0;
}

rtg-card [data-slot='card'] > img:first-child {
  border-top-left-radius: var(--rtg-card-radius);
  border-top-right-radius: var(--rtg-card-radius);
}

rtg-card [data-slot='card'] > img:last-child {
  border-bottom-left-radius: var(--rtg-card-radius);
  border-bottom-right-radius: var(--rtg-card-radius);
}

/*
 * --------------------------------------------------
 *  CARD HEADER
 * --------------------------------------------------
 */

rtg-card-header > [data-slot='card-header'] {
  display: grid;
  grid-auto-rows: min-content;
  align-items: start;
  gap: var(--rtg-card-header-space-gap);

  padding-left: var(--rtg-card-space-px);
  padding-right: var(--rtg-card-space-px);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  > rtg-card-header
  > [data-slot='card-header'] {
  padding-left: var(--rtg-card-space-px-sm);
  padding-right: var(--rtg-card-space-px-sm);
}

rtg-card-header > [data-slot='card-header'][data-border] {
  padding-bottom: var(--rtg-card-space-py);
  border-bottom: var(--rtg-card-header-width-border) solid
    var(--rtg-card-header-color-border);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  > rtg-card-header
  > [data-slot='card-header'][data-border] {
  padding-bottom: var(--rtg-card-space-py-sm);
}

rtg-card-header > [data-slot='card-header']:has(> rtg-card-description) {
  grid-template-rows: auto auto;
}

rtg-card-header > [data-slot='card-header']:has(> rtg-card-action) {
  grid-template-columns: 1fr auto;
}

/*
 * --------------------------------------------------
 *  CARD TITLE
 * --------------------------------------------------
 */

rtg-card-title > [data-slot='card-title'] {
  font-size: var(--rtg-card-title-font-size);
  line-height: var(--rtg-card-title-font-line-height);
  font-weight: var(--rtg-card-title-font-weight);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  rtg-card-title
  > [data-slot='card-title'] {
  font-size: var(--rtg-card-title-font-size-sm);
  line-height: var(--rtg-card-title-font-line-height-sm);
}

/*
 * --------------------------------------------------
 *  CARD DESCRIPTION
 * --------------------------------------------------
 */

rtg-card-description > [data-slot='card-description'] {
  font-size: var(--rtg-card-description-font-size);
  line-height: var(--rtg-card-description-font-line-height);
  color: var(--rtg-card-description-color-text);
}

/*
 * --------------------------------------------------
 *  CARD ACTION
 * --------------------------------------------------
 */

rtg-card-action {
  grid-column-start: 2;
  grid-row: span 2 / span 2;
  grid-row-start: 1;
  align-self: flex-start;
  justify-self: end;
}

/*
 * --------------------------------------------------
 *  CARD CONTENT
 * --------------------------------------------------
 */

rtg-card-content > [data-slot='card-content'] {
  padding-left: var(--rtg-card-space-px);
  padding-right: var(--rtg-card-space-px);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  > rtg-card-content
  > [data-slot='card-content'] {
  padding-left: var(--rtg-card-space-px-sm);
  padding-right: var(--rtg-card-space-px-sm);
}

/*
 * --------------------------------------------------
 *  CARD FOOTER
 * --------------------------------------------------
 */

rtg-card-footer > [data-slot='card-footer'] {
  display: flex;
  align-items: center;

  padding-left: var(--rtg-card-space-px);
  padding-right: var(--rtg-card-space-px);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  > rtg-card-footer
  > [data-slot='card-footer'] {
  padding-left: var(--rtg-card-space-px-sm);
  padding-right: var(--rtg-card-space-px-sm);
}

rtg-card-footer > [data-slot='card-footer'][data-border] {
  padding-block: var(--rtg-card-space-py);
  background-color: hsl(var(--sb-sem-color-bg-surface-quaternary));
  border-top: var(--rtg-card-footer-width-border) solid
    var(--rtg-card-footer-color-border);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  > rtg-card-footer
  > [data-slot='card-footer'][data-border] {
  padding-block: var(--rtg-card-space-py-sm);
}

/*
 * ===========================================================================
 *  CHECKBOX COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  CHECKBOX
 * --------------------------------------------------
 */

rtg-checkbox {
  display: flex;
  position: relative;

  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

rtg-checkbox > [data-slot="checkbox"] {
  display: flex;
  position: relative;

  align-items: center;
  justify-content: center;

  width: var(--rtg-checkbox-space-size);
  height: var(--rtg-checkbox-space-size);

  background-color: var(--rtg-checkbox-color-bg);

  border: var(--rtg-checkbox-width-border) solid var(--rtg-checkbox-color-border);
  border-radius: var(--rtg-checkbox-radius);
  outline: none;

  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--rtg-checkbox-motion-fn);
  transition-duration: var(--rtg-checkbox-motion-duration);
}

/* CHECKED */

rtg-checkbox > [data-slot="checkbox"][data-state="checked"] {
  color: var(--rtg-checkbox-color-text-checked);
  background-color: var(--rtg-checkbox-color-bg-checked);
  border-color: var(--rtg-checkbox-color-border-checked);
}

/* INVALID */

rtg-checkbox > [data-slot="checkbox"][aria-invalid] {
  border-color: var(--rtg-checkbox-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-checkbox-width-ring-invalid) var(--rtg-checkbox-color-ring-invalid),
    0 0 rgb(0 0 0);
}

/* CHECKED & INVAlID */

rtg-checkbox > [data-slot="checkbox"][data-state="checked"][aria-invalid] {
  border-color: var(--rtg-checkbox-color-border-checked);
}

/* FOCUS VISIBLE */

rtg-checkbox > [data-slot="checkbox"]:focus-visible {
  border-color: var(--rtg-checkbox-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-checkbox-width-ring-focus) var(--rtg-checkbox-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* DISABLED */

rtg-checkbox > [data-slot="checkbox"]:disabled {
  opacity: var(--rtg-checkbox-opacity-disabled);
  cursor: not-allowed;
}

rtg-field > [data-slot="field"][data-disabled] rtg-checkbox > [data-slot="checkbox"] {
  opacity: var(--rtg-checkbox-opacity-disabled);
}

/* * AFTER (::after) * */

rtg-checkbox > [data-slot="checkbox"]::after {
  position: absolute;
  inset-inline: var(--rtg-checkbox-after-space-inset-x);
  inset-block: var(--rtg-checkbox-after-space-inset-y);
}

/*
 * --------------------------------------------------
 *  CHECKBOX INDICATOR
 * --------------------------------------------------
 */

rtg-checkbox > [data-slot="checkbox"] > [data-slot="checkbox-indicator"] {
  display: grid;
  place-content: center;
  color: currentColor;
  transition-property: none;
  pointer-events: none;
}

/* * CHECKBOX INDICATOR ICON * */

rtg-checkbox > [data-slot="checkbox"] > [data-slot="checkbox-indicator"] > svg {
  width: var(--rtg-checkbox-indicator-icon-space-size);
  height: var(--rtg-checkbox-indicator-icon-space-size);
}

/*
 * --------------------------------------------------
 *  CHECKBOX INPUT
 * --------------------------------------------------
 */

rtg-checkbox > [data-slot="checkbox-input"] {
  position: absolute;
  margin: 0px;
  width: var(--rtg-checkbox-space-size);
  height: var(--rtg-checkbox-space-size);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

/*
 * ===========================================================================
 *  EMPTY COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  EMPTY
 * --------------------------------------------------
 */

rtg-empty {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

rtg-empty > [data-slot=empty] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rtg-empty-space-gap);
  padding: var(--rtg-empty-space-p);
  width: 100%;
  text-align: center;
  text-wrap: balance;
  border-radius: var(--rtg-empty-radius);
}

rtg-empty > [data-slot=empty][data-border] {
  border: var(--rtg-empty-width-border) dashed var(--rtg-empty-color-border);
}

/*
 * --------------------------------------------------
 *  EMPTY HEADER
 * --------------------------------------------------
 */

rtg-empty-header {
  max-width: var(--rtg-empty-header-space-max-w);
}

rtg-empty-header > [data-slot=empty-header] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rtg-empty-header-space-gap);
}

/*
 * --------------------------------------------------
 *  EMPTY MEDIA
 * --------------------------------------------------
 */

rtg-empty-media {
  flex-shrink: 0;
}

rtg-empty-media > [data-slot=empty-media] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--rtg-empty-media-space-mb);
}

rtg-empty-media > [data-slot=empty-media] svg {
  flex-shrink: 0;
  pointer-events: none;
}

rtg-empty-media > [data-slot=empty-media][data-variant=default] {
  background-color: var(--rtg-empty-media-default-color-bg);
}

rtg-empty-media > [data-slot=empty-media][data-variant=icon] {
  width: var(--rtg-empty-media-icon-space-size);
  height: var(--rtg-empty-media-icon-space-size);
  color: var(--rtg-empty-media-icon-color-text);
  background-color: var(--rtg-empty-media-icon-color-bg);
  border-radius: var(--rtg-empty-media-icon-radius);
}

rtg-empty-media > [data-slot=empty-media][data-variant=icon] svg {
  width: var(--rtg-empty-media-icon-icon-space-size);
  height: var(--rtg-empty-media-icon-icon-space-size);
}

/*
 * --------------------------------------------------
 *  EMPTY TITLE
 * --------------------------------------------------
 */

rtg-empty-title > [data-slot=empty-title] {
  font-family: var(--rtg-empty-title-font-family);
  font-size: var(--rtg-empty-title-font-size);
  line-height: var(--rtg-empty-title-font-line-height);
  font-weight: var(--rtg-empty-title-font-weight);
  letter-spacing: var(--rtg-empty-title-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  EMPTY DESCRIPTION
 * --------------------------------------------------
 */

rtg-empty-description > [data-slot=empty-description] {
  font-size: var(--rtg-empty-description-font-size);
  line-height: var(--rtg-empty-description-font-line-height);
  color: var(--rtg-empty-description-color-text);
}

rtg-empty-description > [data-slot=empty-description] > a {
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

rtg-empty-description > [data-slot=empty-description] > a:hover {
  color: var(--rtg-empty-description-color-link-hover);
}

/*
 * --------------------------------------------------
 *  EMPTY CONTENT
 * --------------------------------------------------
 */

rtg-empty-content {
  width: 100%;
  max-width: var(--rtg-empty-content-space-max-w);
  min-width: 0;
}

rtg-empty-content > [data-slot=empty-content] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rtg-empty-content-space-gap);
  width: 100%;
  font-size: var(--rtg-empty-content-font-size);
  line-height: var(--rtg-empty-content-font-line-height);
  text-wrap: balance;
}

/*
 * ===========================================================================
 *  FIELD COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  FIELD SET
 * --------------------------------------------------
 */

rtg-field-set > [data-slot="field-set"] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-field-set-space-gap);
}

rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="checkbox"]) {
  gap: var(--rtg-field-set-space-gap-has-checkbox-group);
}

rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="radio"]) {
  gap: var(--rtg-field-set-space-gap-has-radio-group);
}

/*
 * --------------------------------------------------
 *  FIELD LEGEND
 * --------------------------------------------------
 */

rtg-field-legend {
  margin-bottom: calc(var(--rtg-field-legend-space-mb) - var(--rtg-field-set-space-gap));
}

rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="checkbox"]) rtg-field-legend {
  margin-bottom: calc(var(--rtg-field-legend-space-mb) - var(--rtg-field-set-space-gap-has-checkbox-group));
}

rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="radio"]) rtg-field-legend {
  margin-bottom: calc(var(--rtg-field-legend-space-mb) - var(--rtg-field-set-space-gap-has-radio-group));
}

rtg-field-legend > [data-slot="field-legend"] {
  font-weight: var(--rtg-field-legend-font-weight);
}

/* * VARIANTS * */

rtg-field-legend > [data-slot="field-legend"][data-variant="label"] {
  font-size: var(--rtg-field-legend-label-font-size);
  line-height: var(--rtg-field-legend-label-font-line-height);
}

rtg-field-legend > [data-slot="field-legend"][data-variant="legend"] {
  font-size: var(--rtg-field-legend-legend-font-size);
  line-height: var(--rtg-field-legend-legend-font-line-height);
}

/*
 * --------------------------------------------------
 *  FIELD GROUP
 * --------------------------------------------------
 */

rtg-field-group {
  width: 100%;

  container-name: field-group;
  container-type: inline-size;
}

rtg-field-group > [data-slot="field-group"] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-field-group-space-gap);
  width: 100%;
}

rtg-field-group > [data-slot="field-group"][data-type="checkbox"] {
  gap: var(--rtg-field-group-space-gap-is-checkbox-group);
}

rtg-field-group > [data-slot="field-group"] > rtg-field-group > [data-slot="field-group"] {
  gap: var(--rtg-field-group-space-gap-is-nested);
}

/*
 * --------------------------------------------------
 *  FIELD
 * --------------------------------------------------
 */

rtg-field {
  width: 100%;
}

rtg-field > [data-slot="field"] {
  display: flex;
  gap: var(--rtg-field-space-gap);
  width: 100%;
}

/* INVALID */

rtg-field > [data-slot="field"][data-invalid="true"] {
  color: var(--rtg-field-color-text-invalid);
}

/* * ORIENTATIONS * */

/* VERTICAL */

rtg-field > [data-slot="field"][data-orientation="vertical"] {
  flex-direction: column;
}

rtg-field > [data-slot="field"][data-orientation="vertical"] > * {
  width: 100%;
}

rtg-field > [data-slot="field"][data-orientation="vertical"] > .rtg-sr-only {
  width: auto;
}

/* HORIZONTAL */

rtg-field > [data-slot="field"][data-orientation="horizontal"] {
  flex-direction: row;
  align-items: center;
}

rtg-field > [data-slot="field"][data-orientation="horizontal"] > *:has(> [data-slot="field-label"]) {
  flex: auto;
}

rtg-field > [data-slot="field"][data-orientation="horizontal"]:has(> rtg-field-content) {
  align-items: start;
}

/* Checkbox Child */

rtg-field > [data-slot="field"][data-orientation="horizontal"]:has(> rtg-field-content) > *:has(> [role="checkbox"]) {
  margin-top: var(--rtg-field-checkbox-space-mt);
}

/* Radio Child */

rtg-field > [data-slot="field"][data-orientation="horizontal"]:has(> rtg-field-content) > *:has(> [role="radio"]) {
  margin-top: var(--rtg-field-radio-space-mt);
}

/* RESPONSIVE */

rtg-field > [data-slot="field"][data-orientation="responsive"] {
  flex-direction: column;
}

rtg-field > [data-slot="field"][data-orientation="responsive"] > * {
  width: 100%;
}

rtg-field > [data-slot="field"][data-orientation="responsive"] > .rtg-sr-only {
  width: auto;
}

@container field-group (width >= 28rem) {
  rtg-field > [data-slot="field"][data-orientation="responsive"] {
    flex-direction: row;
    align-items: center;
  }

  rtg-field > [data-slot="field"][data-orientation="responsive"] > * {
    width: auto;
  }

  rtg-field > [data-slot="field"][data-orientation="responsive"] > *:has(> [data-slot="field-label"]) {
    flex: auto;
  }

  rtg-field > [data-slot="field"][data-orientation="responsive"]:has(> rtg-field-content) {
    align-items: start;
  }

  /* Checkbox Child */
  rtg-field > [data-slot="field"][data-orientation="responsive"]:has(> rtg-field-content) > *:has(> [role="checkbox"]) {
    margin-top: var(--rtg-field-checkbox-space-mt);
  }

  /* Radio Child */
  rtg-field > [data-slot="field"][data-orientation="responsive"]:has(> rtg-field-content) > *:has(> [role="radio"]) {
    margin-top: var(--rtg-field-radio-space-mt);
  }
}

/*
 * --------------------------------------------------
 *  FIELD CONTENT
 * --------------------------------------------------
 */

rtg-field-content {
  flex: 1;
}

rtg-field-content > [data-slot="field-content"] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-field-content-space-gap);

  line-height: var(--rtg-field-content-font-line-height);
}

/*
 * --------------------------------------------------
 *  FIELD LABEL
 * --------------------------------------------------
 */

rtg-field-label > [data-slot="field-label"] > [data-slot="label"] {
  display: flex;
  gap: var(--rtg-field-label-space-gap);
  width: -moz-fit-content;
  width: fit-content;
  line-height: var(--rtg-field-label-font-line-height);
}

rtg-field-label > [data-slot="field-label"] > [data-slot="label"]:has(> rtg-field) {
  flex-direction: column;
  width: 100%;
  border: var(--rtg-field-label-width-border-has-field) solid var(--rtg-field-label-color-border-has-field);
  border-radius: var(--rtg-field-label-radius-has-field);
}

rtg-field-label > [data-slot="field-label"] > [data-slot="label"]:has([data-state="checked"]) {
  background-color: var(--rtg-field-label-color-bg-has-checked);
  border-color: var(--rtg-field-label-color-border-has-checked);
}

rtg-field > [data-slot="field"][data-disabled="true"] rtg-field-label > [data-slot="field-label"] > [data-slot="label"] {
  opacity: var(--rtg-field-label-opacity-disabled);
}

/* * FIELD CHILD * */

rtg-field-label > [data-slot="field-label"] > [data-slot="label"] > rtg-field > [data-slot="field"] {
  padding: var(--rtg-field-space-p-in-label);
}

/*
 * --------------------------------------------------
 *  FIELD TITLE
 * --------------------------------------------------
 */

rtg-field-title > [data-slot="field-label"] {
  display: flex;
  align-items: center;
  gap: var(--rtg-field-title-space-gap);

  width: -moz-fit-content;

  width: fit-content;

  font-size: var(--rtg-field-title-font-size);
  line-height: var(--rtg-field-title-font-line-height);
  font-weight: var(--rtg-field-title-font-weight);
}

rtg-field > [data-slot="field"][data-disabled="true"] rtg-field-title > [data-slot="field-label"] {
  opacity: var(--rtg-field-title-opacity-disabled);
}

/*
 * --------------------------------------------------
 *  FIELD DESCRIPTION
 * --------------------------------------------------
 */

rtg-field-description > [data-slot="field-description"] {
  font-size: var(--rtg-field-description-font-size);
  line-height: var(--rtg-field-description-font-line-height);
  font-weight: var(--rtg-field-description-font-weight);
  color: var(--rtg-field-description-color-text);
  text-align: left;
}

rtg-field-legend:has(> [data-slot="field-legend"][data-variant="legend"]) + rtg-field-description {
  margin-top: var(--rtg-field-description-space-mt-after-legend);
  margin-top: calc(var(--rtg-field-description-space-mt-after-legend));
}

rtg-field-description:nth-last-child(2) {
  margin-top: var(--rtg-field-description-space-mt-is-2-last);
}

rtg-field-description > [data-slot="field-description"] > a {
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

rtg-field-description > [data-slot="field-description"] > a:hover {
  color: var(--rtg-field-description-link-color-text-hover);
}

rtg-field > [data-slot="field"][data-orientation="horizontal"] > rtg-field-description > [data-slot="field-description"] {
  text-wrap: balance;
}

/*
 * --------------------------------------------------
 *  FIELD SEPARATOR
 * --------------------------------------------------
 */

rtg-field-separator > [data-slot="field-separator"] {
  position: relative;

  margin-top: var(--rtg-field-separator-space-my);
  margin-bottom: var(--rtg-field-separator-space-my);

  height: var(--rtg-field-separator-space-h);

  font-size: var(--rtg-field-separator-font-size);
  line-height: var(--rtg-field-separator-font-line-height);
}

/* * SEPARATOR * */

rtg-field-separator > [data-slot="field-separator"] > rtg-separator {
  position: absolute;
  inset: 0;
  top: calc(0.5 * 100%);
}

/* * CONTENT * */

rtg-field-separator > [data-slot="field-separator"] > [data-slot="field-separator-content"] {
  display: block;
  position: relative;

  padding-left: var(--rtg-field-separator-content-space-px);
  padding-right: var(--rtg-field-separator-content-space-px);
  margin-left: auto;
  margin-right: auto;

  width: -moz-fit-content;

  width: fit-content;

  color: var(--rtg-field-separator-content-color-text);

  background-color: var(--rtg-field-separator-content-color-bg);
}

/*
 * --------------------------------------------------
 *  FIELD ERROR
 * --------------------------------------------------
 */

rtg-field-error > [data-slot="field-error"] {
  font-size: var(--rtg-field-error-font-size);
  line-height: var(--rtg-field-error-font-line-height);
  font-weight: var(--rtg-field-error-font-weight);
  color: var(--rtg-field-error-color-text);
}

rtg-field-error > [data-slot="field-error"] > [data-slot="field-error-content"] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-field-error-content-space-gap);

  margin-left: var(--rtg-field-error-content-space-ml);

  list-style-type: disc;
}

/*
 * ===========================================================================
 *  INPUT COMPONENT STYLES
 * ===========================================================================
 */

rtg-input {
  width: 100%;
  min-width: 0;
}

rtg-input > [data-slot="input"] {
  width: 100%;
  height: var(--rtg-input-space-h);

  padding: var(--rtg-input-space-py) var(--rtg-input-space-px);

  font-size: var(--rtg-input-font-size-vw-sm);
  line-height: var(--rtg-input-font-line-height-vw-sm);

  background-color: var(--rtg-input-color-bg);

  border: var(--rtg-input-width-border) solid var(--rtg-input-color-border);
  border-radius: var(--rtg-input-radius);
  outline: none;

  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--rtg-input-motion-fn);
  transition-duration: var(--rtg-input-motion-duration);
}

@media (width >= 48rem) {
  rtg-input > [data-slot="input"] {
    font-size: var(--rtg-input-font-size);
    line-height: var(--rtg-input-font-line-height);
  }
}

/* FOCUS VISIBLE */

rtg-input > [data-slot="input"]:focus-visible {
  border-color: var(--rtg-input-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-width-ring-focus) var(--rtg-input-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* INVALID */

rtg-input > [data-slot="input"][aria-invalid] {
  border-color: var(--rtg-input-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-width-ring-invalid) var(--rtg-input-color-ring-invalid),
    0 0 rgb(0 0 0);
}

/* DISABLED */

rtg-input > [data-slot="input"]:disabled {
  background-color: var(--rtg-input-color-bg-disabled);
  opacity: var(--rtg-input-opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

/* * PLACEHOLDER * */

rtg-input > [data-slot="input"]::-moz-placeholder {
  color: var(--rtg-input-placeholder-color-text);
}

rtg-input > [data-slot="input"]::placeholder {
  color: var(--rtg-input-placeholder-color-text);
}

/* * FILE SELECTOR BUTTON * */

rtg-input > [data-slot="input"]::file-selector-button {
  display: inline-flex;

  height: var(--rtg-input-file-button-space-h);

  font-size: var(--rtg-input-file-button-font-size);
  line-height: var(--rtg-input-file-button-font-line-height);
  font-weight: var(--rtg-input-file-button-font-weight);
  color: var(--rtg-input-file-button-color-text);

  background-color: var(--rtg-input-file-button-color-bg);

  border-width: var(--rtg-input-file-button-width-border);
}

/*
 * ===========================================================================
 *  INPUT GROUP COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  INPUT GROUP
 * --------------------------------------------------
 */

rtg-input-group {
  display: flex;
  width: 100%;
  min-width: 0;
}

rtg-input-group > [data-slot=input-group] {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--rtg-input-group-space-h);
  background-color: var(--rtg-input-group-color-bg);
  border: var(--rtg-input-group-width-border) solid var(--rtg-input-group-color-border);
  border-radius: var(--rtg-input-group-radius);
  outline: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--rtg-input-group-motion-fn);
  transition-duration: var(--rtg-input-group-motion-duration);
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-start]) {
  flex-direction: column;
  height: auto;
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-end]) {
  flex-direction: column;
  height: auto;
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-textarea) {
  height: auto;
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-start]) > rtg-input-group-input > [data-slot=input-group-input] > [data-slot=input] {
  padding-left: var(--rtg-input-group-input-space-px);
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-end]) > rtg-input-group-input > [data-slot=input-group-input] > [data-slot=input] {
  padding-right: var(--rtg-input-group-input-space-px);
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-start]) > rtg-input-group-input > [data-slot=input-group-input] > [data-slot=input] {
  padding-bottom: var(--rtg-input-group-input-space-py);
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-end]) > rtg-input-group-input > [data-slot=input-group-input] > [data-slot=input] {
  padding-top: var(--rtg-input-group-input-space-py);
}

/* TODO: When combobox is refactored */

/*
in-data-[slot=combobox-content]:focus-within:border-inherit
in-data-[slot=combobox-content]:focus-within:ring-0
*/

rtg-input-group > [data-slot=input-group]:has([disabled]) {
  background-color: var(--rtg-input-group-color-bg-disabled);
  opacity: var(--rtg-input-group-opacity-disabled);
}

rtg-input-group > [data-slot=input-group]:has([data-slot=input]:focus-visible, [data-slot=textarea]:focus-visible) {
  border-color: var(--rtg-input-group-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-group-width-ring-focus) var(--rtg-input-group-color-ring-focus),
    0 0 rgb(0 0 0);
}

rtg-input-group > [data-slot=input-group]:has([data-slot][aria-invalid=true]) {
  border-color: var(--rtg-input-group-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-group-width-ring-invalid) var(--rtg-input-group-color-ring-invalid),
    0 0 rgb(0 0 0);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP ADDON
 * --------------------------------------------------
 */

rtg-input-group-addon {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: text;
}

rtg-input-group-addon > [data-slot=input-group-addon] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rtg-input-group-addon-space-gap);
  padding-block: var(--rtg-input-group-addon-space-py);
  height: auto;
  font-size: var(--rtg-input-group-addon-font-size);
  line-height: var(--rtg-input-group-addon-font-line-height);
  font-weight: var(--rtg-input-group-addon-font-weight);
  color: var(--rtg-input-group-addon-color-text);
}

rtg-input-group > [data-slot=input-group][data-disabled=true] rtg-input-group-addon > [data-slot=input-group-addon] {
  opacity: var(--rtg-input-group-addon-opacity-disabled);
}

rtg-input-group-addon > [data-slot=input-group-addon] > svg {
  width: var(--rtg-input-group-addon-icon-space-size);
  height: var(--rtg-input-group-addon-icon-space-size);
  pointer-events: none;
}

rtg-input-group-addon > [data-slot=input-group-addon] > rtg-kbd {
  --rtg-kbd-radius: var(--rtg-input-group-addon-kbd-radius);
}

/* * ALIGN * */

/* INLINE START */

rtg-input-group-addon:has(> [data-slot=input-group-addon][data-align=inline-start]) {
  order: -9999;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-start] {
  padding-left: var(--rtg-input-group-addon-inline-space-px);
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-start]:has(> rtg-input-group-button) {
  margin-left: var(--rtg-input-group-addon-inline-space-mx-has-button);
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-start]:has(> rtg-kbd) {
  margin-left: var(--rtg-input-group-addon-inline-space-mx-has-kbd);
}

/* INLINE END */

rtg-input-group-addon:has(> [data-slot=input-group-addon][data-align=inline-end]) {
  order: 9999;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-end] {
  padding-right: var(--rtg-input-group-addon-inline-space-px);
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-end]:has(> rtg-input-group-button) {
  margin-right: var(--rtg-input-group-addon-inline-space-mx-has-button);
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-end]:has(> rtg-kbd) {
  margin-right: var(--rtg-input-group-addon-inline-space-mx-has-kbd);
}

/* BLOCK START */

rtg-input-group-addon:has(> [data-slot=input-group-addon][data-align=block-start]) {
  order: -9999;
  width: 100%;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-start] {
  justify-content: start;
  padding-inline: var(--rtg-input-group-addon-block-space-px);
  padding-top: var(--rtg-input-group-addon-block-space-py);
  width: 100%;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-start][data-border] {
  padding-bottom: var(--rtg-input-group-addon-block-space-py);
  border-bottom: var(--rtg-input-group-addon-width-border) solid var(--rtg-input-group-addon-color-border);
}

/* BLOCK END */

rtg-input-group-addon:has(> [data-slot=input-group-addon][data-align=block-end]) {
  order: 9999;
  width: 100%;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-end] {
  justify-content: start;
  padding-inline: var(--rtg-input-group-addon-block-space-px);
  padding-bottom: var(--rtg-input-group-addon-block-space-py);
  width: 100%;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-end][data-border] {
  padding-top: var(--rtg-input-group-addon-block-space-py);
  border-top: var(--rtg-input-group-addon-width-border) solid var(--rtg-input-group-addon-color-border);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP BUTTON
 * --------------------------------------------------
 */

rtg-input-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

rtg-input-group-button > rtg-button[data-slot=input-group-button] {
  display: flex;

  --rtg-button-space-gap-sm: var(--rtg-input-group-button-space-gap-sm);
  --rtg-button-space-px-xs: var(--rtg-input-group-button-space-px-xs);
  --rtg-button-font-size-xs: var(--rtg-input-group-button-font-size);
  --rtg-button-font-size-sm: var(--rtg-input-group-button-font-size);
  --rtg-button-font-line-height-xs: var(--rtg-input-group-button-font-line-height);
  --rtg-button-font-line-height-sm: var(--rtg-input-group-button-font-line-height);
  --rtg-button-radius-xs: var(--rtg-input-group-button-radius-xs);
  --rtg-button-icon-space-size-xs: var(--rtg-input-group-button-icon-space-size-xs);
}

rtg-input-group-button > rtg-button[data-slot=input-group-button]:has(> [data-slot=button][data-size=icon-sm]) {
  --rtg-button-space-size-sm: var(--rtg-input-group-button-space-size-sm);
}

rtg-input-group-button > rtg-button[data-slot=input-group-button] > [data-slot=button] {
  display: flex;
}

/*
 * --------------------------------------------------
 *  INPUT GROUP TEXT
 * --------------------------------------------------
 */

rtg-input-group-text > [data-slot=input-group-text] {
  display: flex;
  align-items: center;
  gap: var(--rtg-input-group-text-space-gap);
  font-size: var(--rtg-input-group-text-font-size);
  line-height: var(--rtg-input-group-text-font-line-height);
  color: var(--rtg-input-group-text-color-text);
}

rtg-input-group-text > [data-slot=input-group-text] svg {
  width: var(--rtg-input-group-text-icon-space-size);
  height: var(--rtg-input-group-text-icon-space-size);
  pointer-events: none;
}

/*
 * --------------------------------------------------
 *  INPUT GROUP INPUT
 * --------------------------------------------------
 */

rtg-input-group-input {
  flex: 1;
  width: 100%;

  --rtg-input-color-bg: transparent;
  --rtg-input-width-border: 0;
  --rtg-input-radius: 0;
  --rtg-input-width-ring-focus: 0;
  --rtg-input-width-ring-invalid: 0;
  --rtg-input-color-bg-disabled: transparent;
}

/*
 * --------------------------------------------------
 *  INPUT GROUP TEXTAREA
 * --------------------------------------------------
 */

rtg-input-group-textarea {
  flex: 1;
  width: 100%;

  --rtg-textarea-color-bg: transparent;
  --rtg-textarea-width-border: 0;
  --rtg-textarea-radius: 0;
  --rtg-textarea-width-ring-focus: 0;
  --rtg-textarea-width-ring-invalid: 0;
  --rtg-textarea-color-bg-disabled: transparent;
}

rtg-input-group-textarea > rtg-textarea[data-slot=input-group-textarea] > [data-slot=textarea] {
  resize: none;
}

/*
 * ===========================================================================
 *  INPUT OTP COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  INPUT OTP
 * --------------------------------------------------
 */

/* * CONTAINER SLOT * */

rtg-input-otp > [data-slot="input-otp-container"] {
  display: flex;
  position: relative;

  align-items: center;
  gap: var(--rtg-input-otp-space-gap);

  cursor: text;
  pointer-events: none;

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;
}

/* DISABLED */

rtg-input-otp > [data-slot="input-otp-container"]:has([disabled]) {
  opacity: var(--rtg-input-otp-opacity-disabled);
  cursor: default;
}

/* * WRAPPER SLOT * */

rtg-input-otp > [data-slot="input-otp-container"] > [data-slot="input-otp-wrapper"] {
  position: absolute;
  inset: 0px;
  pointer-events: none;
}

/* * INPUT SLOT * */

rtg-input-otp > [data-slot="input-otp-container"] > [data-slot="input-otp-wrapper"] > [data-slot="input-otp"] {
  position: absolute;
  inset: 0px;
  width: calc(100% + 40px);
  height: 100%;
  display: flex;
  text-align: left;
  opacity: 1;
  color: transparent;
  pointer-events: all;
  background: transparent;
  caret-color: transparent;
  border: 0px solid transparent;
  outline: transparent solid 0px;
  box-shadow: none;
  line-height: 1;
  letter-spacing: -0.5em;
  font-size: var(--rtg-input-otp-slot-space-h);
  font-family: monospace;
  font-variant-numeric: tabular-nums;
  clip-path: inset(0px 40px 0px 0px);
}

rtg-input-otp > [data-slot="input-otp-container"] > [data-slot="input-otp-wrapper"] > [data-slot="input-otp"]:disabled {
  cursor: not-allowed;
}

/*
 * --------------------------------------------------
 *  INPUT OTP GROUP
 * --------------------------------------------------
 */

rtg-input-otp-group > [data-slot="input-otp-group"] {
  display: flex;
  align-items: center;
  border-radius: var(--rtg-input-otp-radius);
}

/* INVALID */

rtg-input-otp-group > [data-slot="input-otp-group"]:has([aria-invalid]) {
  border-style: solid;
  border-color: var(--rtg-input-otp-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-otp-width-ring-invalid) var(--rtg-input-otp-color-ring-invalid),
    0 0 rgb(0 0 0);
}

/*
 * --------------------------------------------------
 *  INPUT OTP SLOT
 * --------------------------------------------------
 */

rtg-input-otp-slot > [data-slot="input-otp-slot"] {
  display: flex;
  position: relative;

  align-items: center;
  justify-content: center;

  width: var(--rtg-input-otp-slot-space-w);
  height: var(--rtg-input-otp-slot-space-h);

  font-size: var(--rtg-input-otp-slot-font-size);
  line-height: var(--rtg-input-otp-slot-font-line-height);

  background-color: var(--rtg-input-otp-slot-color-bg);

  border-top-width: var(--rtg-input-otp-slot-width-border);
  border-right-width: var(--rtg-input-otp-slot-width-border);
  border-bottom-width: var(--rtg-input-otp-slot-width-border);
  border-style: solid;
  border-color: var(--rtg-input-otp-slot-color-border);
  outline: none;

  transition-property: all;
  transition-timing-function: var(--rtg-input-otp-slot-motion-fn);
  transition-duration: var(--rtg-input-otp-slot-motion-duration);
}

/* ACTIVE */

rtg-input-otp-slot > [data-slot="input-otp-slot"][data-state="active"] {
  z-index: 10;
  border-color: var(--rtg-input-otp-slot-color-border-active);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-otp-slot-width-ring-active) var(--rtg-input-otp-slot-color-ring-active),
    0 0 rgb(0 0 0);
}

/* INVALID */

rtg-input-otp-slot > [data-slot="input-otp-slot"][aria-invalid] {
  border-color: var(--rtg-input-otp-color-border-invalid);
}

rtg-input-otp-slot > [data-slot="input-otp-slot"][data-state="active"][aria-invalid] {
  border-color: var(--rtg-input-otp-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-otp-width-ring-invalid) var(--rtg-input-otp-color-ring-invalid),
    0 0 rgb(0 0 0);
}

/* * FIRST SLOT CHILD * */

rtg-input-otp-slot:first-child > [data-slot="input-otp-slot"] {
  border-left-width: var(--rtg-input-otp-slot-width-border);
  border-top-left-radius: var(--rtg-input-otp-radius);
  border-bottom-left-radius: var(--rtg-input-otp-radius);
}

/* * LAST SLOT CHILD * */

rtg-input-otp-slot:last-child > [data-slot="input-otp-slot"] {
  border-top-right-radius: var(--rtg-input-otp-radius);
  border-bottom-right-radius: var(--rtg-input-otp-radius);
}

/* * CARET WRAPPER * */

rtg-input-otp-slot > [data-slot="input-otp-slot"] > [data-slot="input-otp-caret-wrapper"] {
  display: flex;
  position: absolute;
  inset: 0px;

  align-items: center;
  justify-content: center;

  pointer-events: none;
}

/* * CARET * */

@keyframes rtg-input-otp-slot-caret-blink {
  0%, 70%, 100% { opacity: 1; }
  20%, 50% { opacity: 0; }
}

rtg-input-otp-slot > [data-slot="input-otp-slot"] > [data-slot="input-otp-slot-caret-wrapper"] > [data-slot="input-otp-slot-caret"] {
  width: var(--sb-sem-width-border);
  height: var(--sb-ref-space-4);
  background-color: hsl(var(--sb-sem-color-text));
  animation: rtg-input-otp-slot-caret-blink 1.25s ease-out infinite;
}

/*
 * --------------------------------------------------
 *  INPUT OTP SEPARATOR
 * --------------------------------------------------
 */

rtg-input-otp-separator > [data-slot="input-otp-separator"] {
  display: flex;
  align-items: center;
}

rtg-input-otp-separator > [data-slot="input-otp-separator"] svg {
  width: var(--rtg-input-otp-separator-icon-space-size);
  height: var(--rtg-input-otp-separator-icon-space-size);
}

/*
 * ===========================================================================
 *  ITEM COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ITEM GROUP
 * --------------------------------------------------
 */

rtg-item-group {
  width: 100%;
}

rtg-item-group > [data-slot=item-group] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-item-group-space-gap-default);
  width: 100%;
}

rtg-item-group > [data-slot=item-group]:has(> rtg-item > [data-slot=item][data-size=sm]) {
  gap: var(--rtg-item-group-space-gap-sm);
}

rtg-item-group > [data-slot=item-group]:has(> rtg-item > [data-slot=item][data-size=xs]) {
  gap: var(--rtg-item-group-space-gap-xs);
}

/*
 * --------------------------------------------------
 *  ITEM SEPARATOR
 * --------------------------------------------------
 */

rtg-item-separator {
  display: contents;
}

rtg-item-separator > [data-slot=item-separator] {
  margin-top: var(--rtg-item-separator-space-my);
  margin-bottom: var(--rtg-item-separator-space-my);
}

/*
 * --------------------------------------------------
 *  ITEM
 * --------------------------------------------------
 */

rtg-item > [data-slot=item] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  font-size: var(--rtg-item-font-size);
  line-height: var(--rtg-item-font-line-height);
  border-width: var(--rtg-item-width-border);
  border-style: solid;
  border-radius: var(--rtg-item-radius);
  outline: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--rtg-item-motion-fn);
  transition-duration: var(--rtg-item-motion-duration);
}

rtg-item > [data-slot=item]:focus-visible {
  border-color: var(--rtg-item-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-item-width-ring-focus) var(--rtg-item-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* * LINK * */

rtg-item > a[data-slot=item]:hover {
  background-color: var(--rtg-item-color-bg-hover);
}

/* * VARIANTS * */

rtg-item > [data-slot=item][data-variant=default] {
  border-color: var(--rtg-item-default-color-border);
}

rtg-item > [data-slot=item][data-variant=outline] {
  border-color: var(--rtg-item-outline-color-border);
}

rtg-item > [data-slot=item][data-variant=muted] {
  background-color: var(--rtg-item-muted-color-bg);
  border-color: var(--rtg-item-muted-color-border);
}

/* * SIZES * */

rtg-item > [data-slot=item][data-size=default] {
  gap: var(--rtg-item-space-gap-default);
  padding-inline: var(--rtg-item-space-px-default);
  padding-block: var(--rtg-item-space-py-default);
}

rtg-item > [data-slot=item][data-size=sm] {
  gap: var(--rtg-item-space-gap-sm);
  padding-inline: var(--rtg-item-space-px-sm);
  padding-block: var(--rtg-item-space-py-sm);
}

rtg-item > [data-slot=item][data-size=xs] {
  gap: var(--rtg-item-space-gap-xs);
  padding-inline: var(--rtg-item-space-px-xs);
  padding-block: var(--rtg-item-space-py-xs);
}

rtg-dropdown-menu-content > [data-slot=dropdown-menu-content] rtg-item > [data-slot=item][data-size=xs] {
  padding: var(--rtg-item-space-p-xs-in-dropdown-menu);
}

/*
 * --------------------------------------------------
 *  ITEM MEDIA
 * --------------------------------------------------
 */

rtg-item-media {
  flex-shrink: 0;
}

rtg-item-media > [data-slot=item-media] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rtg-item-media-space-gap);
  flex-shrink: 0;
}

rtg-item > [data-slot=item]:has(rtg-item-description) rtg-item-media {
  align-self: flex-start;
}

rtg-item > [data-slot=item]:has(rtg-item-description) rtg-item-media > [data-slot=item-media] {
  transform: translateY(var(--rtg-item-media-space-translate-y-with-description));
}

rtg-item-media > [data-slot=item-media] svg {
  pointer-events: none;
}

rtg-item-media > [data-slot=item-media][data-variant=default] {
  background-color: var(--rtg-item-media-default-color-bg);
}

rtg-item-media > [data-slot=item-media][data-variant=icon] svg {
  width: var(--rtg-item-media-icon-icon-space-size);
  height: var(--rtg-item-media-icon-icon-space-size);
}

rtg-item-media > [data-slot=item-media][data-variant=image] {
  overflow: hidden;
  width: var(--rtg-item-media-image-space-size-default);
  height: var(--rtg-item-media-image-space-size-default);
  border-radius: var(--rtg-item-media-image-radius);
}

rtg-item > [data-slot=item][data-size=sm] rtg-item-media > [data-slot=item-media][data-variant=image] {
  width: var(--rtg-item-media-image-space-size-sm);
  height: var(--rtg-item-media-image-space-size-sm);
}

rtg-item > [data-slot=item][data-size=xs] rtg-item-media > [data-slot=item-media][data-variant=image] {
  width: var(--rtg-item-media-image-space-size-xs);
  height: var(--rtg-item-media-image-space-size-xs);
}

rtg-item-media > [data-slot=item-media][data-variant=image] img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*
 * --------------------------------------------------
 *  ITEM CONTENT
 * --------------------------------------------------
 */

rtg-item-content {
  flex: 1;
}

rtg-item-content:has(+ rtg-item-content) {
  flex: none;
}

rtg-item-content > [data-slot=item-content] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-item-content-space-gap);
}

rtg-item > [data-slot=item][data-size=xs] rtg-item-content > [data-slot=item-content] {
  gap: var(--rtg-item-content-space-gap-xs);
}

/*
 * --------------------------------------------------
 *  ITEM TITLE
 * --------------------------------------------------
 */

rtg-item-title > [data-slot=item-title] {
  display: flex;
  align-items: center;
  gap: var(--rtg-item-title-space-gap);
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--rtg-item-title-font-family);
  font-size: var(--rtg-item-title-font-size);
  line-height: var(--rtg-item-title-font-line-height);
  font-weight: var(--rtg-item-title-font-weight);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  overflow: hidden;
}

/*
 * --------------------------------------------------
 *  ITEM DESCRIPTION
 * --------------------------------------------------
 */

rtg-item-description > [data-slot=item-description] {
  text-align: left;
  font-size: var(--rtg-item-description-font-size);
  line-height: var(--rtg-item-description-font-line-height);
  font-weight: var(--rtg-item-description-font-weight);
  color: var(--rtg-item-description-color-text);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;

}

rtg-item > [data-slot=item][data-size=xs] rtg-item-description > [data-slot=item-description] {
  font-size: var(--rtg-item-description-font-size-xs);
  line-height: var(--rtg-item-description-font-line-height-xs);
}

rtg-item-description > [data-slot=item-description] > a {
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

rtg-item-description > [data-slot=item-description] > a:hover {
  color: var(--rtg-item-description-link-color-text-hover);
}

/*
 * --------------------------------------------------
 *  ITEM ACTIONS
 * --------------------------------------------------
 */

rtg-item-actions > [data-slot=item-actions] {
  display: flex;
  align-items: center;
  gap: var(--rtg-item-actions-space-gap);
}

/*
 * --------------------------------------------------
 *  ITEM HEADER
 * --------------------------------------------------
 */

rtg-item-header {
  flex-basis: 100%;
}

rtg-item-header > [data-slot=item-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rtg-item-header-space-gap);
  width: 100%;
}

/*
 * --------------------------------------------------
 *  ITEM FOOTER
 * --------------------------------------------------
 */

rtg-item-footer {
  flex-basis: 100%;
}

rtg-item-footer > [data-slot=item-footer] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rtg-item-footer-space-gap);
  width: 100%;
}

/*
 * ===========================================================================
 *  KBD COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  KBD
 * --------------------------------------------------
 */

rtg-kbd {
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

rtg-kbd > [data-slot=kbd] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rtg-kbd-space-gap);
  padding-inline: var(--rtg-kbd-space-px);
  width: -moz-fit-content;
  width: fit-content;
  height: var(--rtg-kbd-space-size);
  min-width: var(--rtg-kbd-space-size);
  font-family: var(--rtg-kbd-font-family);
  font-size: var(--rtg-kbd-font-size);
  line-height: var(--rtg-kbd-font-line-height);
  font-weight: var(--rtg-kbd-font-weight);
  color: var(--rtg-kbd-color-text);
  background-color: var(--rtg-kbd-color-bg);
  border-radius: var(--rtg-kbd-radius);
  pointer-events: none;
}

/* TODO: When tooltip is refactored */

/*
in-data-[slot=tooltip-content]:bg-background/20
dark:in-data-[slot=tooltip-content]:bg-background/10
in-data-[slot=tooltip-content]:text-background
*/

rtg-kbd > [data-slot=kbd] svg {
  width: var(--rtg-kbd-icon-space-size);
  height: var(--rtg-kbd-icon-space-size);
}

/*
 * --------------------------------------------------
 *  KBD GROUP
 * --------------------------------------------------
 */

rtg-kbd-group {
  display: inline-flex;
}

rtg-kbd-group > [data-slot=kbd-group] {
  display: inline-flex;
  align-items: center;
  gap: var(--rtg-kbd-group-space-gap);
}

/*
 * ===========================================================================
 *  LABEL COMPONENT STYLES
 * ===========================================================================
 */

rtg-label > [data-slot="label"] {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  gap: var(--rtg-label-space-gap);

  font-size: var(--rtg-label-font-size);
  line-height: var(--rtg-label-font-line-height);
  font-weight: var(--rtg-label-font-weight);
}

/* DISABLED */

*:has([disabled]) > rtg-label > [data-slot="label"] {
  opacity: var(--rtg-label-opacity-disabled);
  pointer-events: none;
}

*:has(> [disabled]) + rtg-label > [data-slot="label"] {
  opacity: var(--rtg-label-opacity-disabled);
  cursor: not-allowed;
}

/*
 * ===========================================================================
 *  PASSWORD INPUT COMPONENT STYLES
 * ===========================================================================
 */

rtg-password-input {
  display: flex;
  width: 100%;
  min-width: 0;
}

/*
 * ===========================================================================
 *  SEPARATOR COMPONENT STYLES
 * ===========================================================================
 */

rtg-separator {
  flex-shrink: 0;
}

rtg-separator:has(> [data-slot="separator"][data-orientation="horizontal"]) {
  width: 100%;
  height: var(--rtg-separator-horizontal-space-h);
}

rtg-separator:has(> [data-slot="separator"][data-orientation="vertical"]) {
  align-self: stretch;
  width: var(--rtg-separator-vertical-space-w);
}

rtg-separator > [data-slot="separator"] {
  width: 100%;
  height: 100%;
  background-color: var(--rtg-separator-color-bg);
}

/*
 * ===========================================================================
 *  SPINNER COMPONENT STYLES
 * ===========================================================================
 */

rtg-spinner {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

rtg-spinner > [data-slot=spinner] {
  width: var(--rtg-spinner-space-size);
  height: var(--rtg-spinner-space-size);
  animation: rtg-spinner-motion-spin var(--rtg-spinner-motion-duration) var(--rtg-spinner-motion-fn) infinite;
}

@keyframes rtg-spinner-motion-spin {
  100% {
    transform: rotate(360deg);
  }
}

/*
 * ===========================================================================
 *  TABS COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  TABS
 * --------------------------------------------------
 */

rtg-tabs {
  display: flex;
}

rtg-tabs > [data-slot="tabs"] {
  display: flex;
  gap: var(--rtg-tabs-space-gap);
}

rtg-tabs > [data-slot="tabs"][data-orientation="horizontal"] {
  flex-direction: column;
}

/*
 * --------------------------------------------------
 *  TABS LIST
 * --------------------------------------------------
 */

rtg-tabs-list {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: -moz-fit-content;

  width: fit-content;
}

rtg-tabs-list > [data-slot="tabs-list"] {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: var(--rtg-tabs-list-space-p);

  color: var(--rtg-tabs-list-color-text);

  outline: none;
}

/* * VARIANTS * */

rtg-tabs-list > [data-slot="tabs-list"][data-variant="default"] {
  background-color: var(--rtg-tabs-list-default-color-bg);
  border-radius: var(--rtg-tabs-list-default-radius);
}

rtg-tabs-list > [data-slot="tabs-list"][data-variant="line"] {
  gap: var(--rtg-tabs-list-line-space-gap);
  background-color: var(--rtg-tabs-list-line-color-bg);
}

/* * ORIENTATIONS * */

rtg-tabs-list > [data-slot="tabs-list"][data-orientation="horizontal"] {
  height: var(--rtg-tabs-list-horizontal-space-h);
}

rtg-tabs-list > [data-slot="tabs-list"][data-orientation="vertical"] {
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
}

/*
 * --------------------------------------------------
 *  TABS TRIGGER
 * --------------------------------------------------
 */

rtg-tabs-trigger {
  display: inline-flex;

  flex: 1;
  align-items: center;
  justify-content: center;
}

rtg-tabs-trigger > [data-slot="tabs-trigger"] {
  display: inline-flex;
  position: relative;

  align-items: center;
  justify-content: center;
  gap: var(--rtg-tabs-trigger-space-gap);

  padding: var(--rtg-tabs-trigger-space-py) var(--rtg-tabs-trigger-space-px);

  width: 100%;
  height: calc(100% - 1px);

  font-size: var(--rtg-tabs-trigger-font-size);
  line-height: var(--rtg-tabs-trigger-font-line-height);
  font-weight: var(--rtg-tabs-trigger-font-weight);
  color: var(--rtg-tabs-trigger-color-text);
  white-space: nowrap;

  border: var(--rtg-tabs-trigger-width-border) solid var(--rtg-tabs-trigger-color-border);
  border-radius: var(--rtg-tabs-trigger-radius);

  transition-property: all;
  transition-timing-function: var(--rtg-tabs-trigger-motion-fn);
  transition-duration: var(--rtg-tabs-trigger-motion-duration);
}

/* HOVER */

rtg-tabs-trigger > [data-slot="tabs-trigger"]:hover {
  color: var(--rtg-tabs-trigger-color-text-hover);
}

/* FOCUS VISIBLE */

rtg-tabs-trigger > [data-slot="tabs-trigger"]:focus-visible {
  border-color: var(--rtg-tabs-trigger-color-border-focus);
  outline: var(--rtg-tabs-trigger-width-outline-focus) solid var(--rtg-tabs-trigger-color-outline-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-tabs-trigger-width-ring-focus) var(--rtg-tabs-trigger-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* ACTIVE */

rtg-tabs-trigger > [data-slot="tabs-trigger"][data-state="active"] {
  color: var(--rtg-tabs-trigger-color-text-active);
}

/* DISABLED */

rtg-tabs-trigger > [data-slot="tabs-trigger"]:disabled {
  opacity: var(--rtg-tabs-trigger-opacity-disabled);
  pointer-events: none;
}

/* * VARIANTS * */

rtg-tabs-list > [data-slot="tabs-list"][data-variant="default"] > rtg-tabs-trigger > [data-slot="tabs-trigger"][data-state="active"] {
  background-color: var(--rtg-tabs-trigger-default-color-bg-active);
  border-color: var(--rtg-tabs-trigger-default-color-border-active);
  box-shadow: var(--rtg-tabs-trigger-default-shadow-active);
}

/* * ORIENTATIONS * */

rtg-tabs-trigger:has(> [data-slot="tabs-trigger"][data-orientation="vertical"]) {
  width: 100%;
}

rtg-tabs-trigger > [data-slot="tabs-trigger"][data-orientation="vertical"] {
  justify-content: start;
}

/* * ICON CHILD * */

rtg-tabs-trigger > [data-slot="tabs-trigger"] svg {
  flex-shrink: 0;

  width: var(--rtg-tabs-trigger-icon-space-size);
  height: var(--rtg-tabs-trigger-icon-space-size);

  pointer-events: none;
}

/* * AFTER (::after) (underline of line variant) * */

rtg-tabs-trigger > [data-slot="tabs-trigger"]::after {
  position: absolute;

  background-color: var(--rtg-tabs-trigger-after-color-bg);

  opacity: var(--rtg-tabs-trigger-after-opacity);

  transition-property: opacity;
  transition-timing-function: var(--rtg-tabs-trigger-motion-fn);
  transition-duration: var(--rtg-tabs-trigger-motion-duration);
}

rtg-tabs-trigger > [data-slot="tabs-trigger"][data-orientation="horizontal"]::after {
  inset-inline: 0;
  bottom: var(--rtg-tabs-trigger-horizontal-after-space-bottom);
  height: var(--rtg-tabs-trigger-horizontal-after-space-h);
}

rtg-tabs-trigger > [data-slot="tabs-trigger"][data-orientation="vertical"]::after {
  inset-block: 0;
  right: var(--rtg-tabs-trigger-vertical-after-space-right);
  width: var(--rtg-tabs-trigger-vertical-after-space-w);
}

rtg-tabs-list > [data-slot="tabs-list"][data-variant="line"] > rtg-tabs-trigger > [data-slot="tabs-trigger"][data-state="active"]::after {
  content: "";
  opacity: var(--rtg-tabs-trigger-line-after-opacity-active);
}

/*
 * --------------------------------------------------
 *  TABS CONTENT
 * --------------------------------------------------
 */

rtg-tabs-content {
  flex: 1;
}

rtg-tabs-content:has(> [data-slot="tabs-content"][data-state="inactive"]) {
  display: none;
}

rtg-tabs-content > [data-slot="tabs-content"] {
  font-size: var(--rtg-tabs-content-font-size);
  line-height: var(--rtg-tabs-content-font-line-height);

  outline: none;
}

rtg-tabs-content > [data-slot="tabs-content"][data-state="active"] {
  animation-duration: 0s;
}

/*
 * ===========================================================================
 *  TEXTAREA COMPONENT STYLES
 * ===========================================================================
 */

rtg-textarea {
  width: 100%;
}

rtg-textarea > [data-slot=textarea] {
  field-sizing: content;
  display: flex;
  padding-inline: var(--rtg-textarea-space-px);
  padding-block: var(--rtg-textarea-space-py);
  width: 100%;
  min-height: var(--rtg-textarea-space-min-h);
  font-size: var(--rtg-textarea-font-size-vw-sm);
  line-height: var(--rtg-textarea-font-line-height-vw-sm);
  background-color: var(--rtg-textarea-color-bg);
  border: var(--rtg-textarea-width-border) solid var(--rtg-textarea-color-border);
  border-radius: var(--rtg-textarea-radius);
  outline: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--rtg-textarea-motion-fn);
  transition-duration: var(--rtg-textarea-motion-duration);
}

@media (width >= 48rem) {
  rtg-textarea > [data-slot=textarea] {
    font-size: var(--rtg-textarea-font-size);
    line-height: var(--rtg-textarea-font-line-height);
  }
}

rtg-textarea > [data-slot=textarea]:focus-visible {
  border-color: var(--rtg-textarea-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-textarea-width-ring-focus) var(--rtg-textarea-color-ring-focus),
    0 0 rgb(0 0 0);
}

rtg-textarea > [data-slot=textarea][aria-invalid] {
  border-color: var(--rtg-textarea-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-textarea-width-ring-invalid) var(--rtg-textarea-color-ring-invalid),
    0 0 rgb(0 0 0);
}

rtg-textarea > [data-slot=textarea]:disabled {
  background-color: var(--rtg-textarea-color-bg-disabled);
  opacity: var(--rtg-textarea-opacity-disabled);
  cursor: not-allowed;
}

rtg-textarea > [data-slot=textarea]::-moz-placeholder {
  color: var(--rtg-textarea-placeholder-color-text);
}

rtg-textarea > [data-slot=textarea]::placeholder {
  color: var(--rtg-textarea-placeholder-color-text);
}

/*
 * ===========================================================================
 *  TYPOGRAPHY COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  TYPOGRAPHY H
 * --------------------------------------------------
 */

rtg-typography-h > [data-slot='typography-h'] {
  scroll-margin: var(--rtg-typography-h-space-scroll-m);
  color: var(--rtg-typography-h-color-text);

  font-family: var(--rtg-typography-h-font-family);
  font-weight: var(--rtg-typography-h-font-weight);
  letter-spacing: var(--rtg-typography-h-font-letter-spacing);
}

/* * LEVELS * */

/* LEVEL 1 */

rtg-typography-h > [data-slot='typography-h'][data-level='h1'] {
  font-size: var(--rtg-typography-h-h1-font-size);
  line-height: var(--rtg-typography-h-h1-font-line-height);
  font-weight: var(--rtg-typography-h-h1-font-weight);
  text-wrap: balance;
}

/* LEVEL 2 */

rtg-typography-h > [data-slot='typography-h'][data-level='h2'] {
  padding-bottom: var(--rtg-typography-h-h2-space-pb);

  font-size: var(--rtg-typography-h-h2-font-size);
  line-height: var(--rtg-typography-h-h2-font-line-height);

  border-bottom: var(--rtg-typography-h-h2-width-border) solid
    var(--rtg-typography-h-h2-color-border);
}

rtg-typography-h:not(:first-child)
  > [data-slot='typography-h'][data-level='h2'] {
  margin-top: var(--rtg-typography-h-h2-space-mt);
}

/* LEVEL 3 */

rtg-typography-h > [data-slot='typography-h'][data-level='h3'] {
  font-size: var(--rtg-typography-h-h3-font-size);
  line-height: var(--rtg-typography-h-h3-font-line-height);
}

rtg-typography-h:not(:first-child)
  > [data-slot='typography-h'][data-level='h3'] {
  margin-top: var(--rtg-typography-h-h3-space-mt);
}

/* LEVEL 4 */

rtg-typography-h > [data-slot='typography-h'][data-level='h4'] {
  font-size: var(--rtg-typography-h-h4-font-size);
  line-height: var(--rtg-typography-h-h4-font-line-height);
}

rtg-typography-h:not(:first-child)
  > [data-slot='typography-h'][data-level='h4'] {
  margin-top: var(--rtg-typography-h-h4-space-mt);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY P
 * --------------------------------------------------
 */

rtg-typography-p > [data-slot='typography-p'] {
  font-family: var(--rtg-typography-p-font-family);
  font-size: var(--rtg-typography-p-font-size-vw-sm);
  line-height: var(--rtg-typography-p-font-line-height);
  font-weight: var(--rtg-typography-p-font-weight);
  letter-spacing: var(--rtg-typography-p-font-letter-spacing);
  color: var(--rtg-typography-p-color-text);
}

rtg-typography-p:not(:first-child) > [data-slot='typography-p'] {
  margin-top: var(--rtg-typography-p-space-mt);
}

@media (width >= 48rem) {
  rtg-typography-p > [data-slot='typography-p'] {
    font-size: var(--rtg-typography-p-font-size);
  }
}

rtg-typography-p > [data-slot='typography-p'] > a {
  color: var(--rtg-typography-p-link-color-text);
  font-weight: var(--rtg-typography-p-link-font-weight);
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY BLOCKQUOTE
 * --------------------------------------------------
 */

rtg-typography-blockquote > [data-slot='typography-blockquote'] {
  padding-left: var(--rtg-typography-blockquote-space-pl);

  font-family: var(--rtg-typography-blockquote-font-family);
  font-size: var(--rtg-typography-blockquote-font-size-vw-sm);
  line-height: var(--rtg-typography-blockquote-font-line-height);
  font-weight: var(--rtg-typography-blockquote-font-weight);
  letter-spacing: var(--rtg-typography-blockquote-font-letter-spacing);
  font-style: italic;

  border-left: var(--rtg-typography-blockquote-width-border) solid
    var(--rtg-typography-blockquote-color-border);
}

rtg-typography-blockquote:not(:first-child)
  > [data-slot='typography-blockquote'] {
  margin-top: var(--rtg-typography-blockquote-space-mt);
}

@media (width >= 48rem) {
  rtg-typography-blockquote > [data-slot='typography-blockquote'] {
    font-size: var(--rtg-typography-blockquote-font-size);
  }
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY TABLE
 * --------------------------------------------------
 */

rtg-typography-table {
  width: 100%;
  overflow-y: auto;
}

rtg-typography-table > table {
  margin-bottom: var(--rtg-typography-table-space-my);
  width: 100%;
}

rtg-typography-table:not(:first-child) > table {
  margin-top: var(--rtg-typography-table-space-my);
}

/* * TABLE ROW * */

rtg-typography-table tr {
  padding: var(--rtg-typography-table-row-space-p);
  margin: var(--rtg-typography-table-row-space-m);

  border-top: var(--rtg-typography-table-row-width-border) solid
    var(--rtg-typography-table-row-color-border);
}

rtg-typography-table tr:nth-child(2n) {
  color: var(--rtg-typography-table-row-color-text-even);
  background-color: var(--rtg-typography-table-row-color-bg-even);
}

/* * TABLE CELL * */

rtg-typography-table :is(th, td) {
  padding-inline: var(--rtg-typography-table-cell-space-px);
  padding-block: var(--rtg-typography-table-cell-space-py);

  font-family: var(--rtg-typography-table-font-family);
  font-size: var(--rtg-typography-table-font-size-vw-sm);
  line-height: var(--rtg-typography-table-font-line-height);
  font-weight: var(--rtg-typography-table-font-weight);
  letter-spacing: var(--rtg-typography-table-font-letter-spacing);
  text-align: left;

  border: var(--rtg-typography-table-cell-width-border) solid
    var(--rtg-typography-table-cell-color-border);
}

@media (width >= 48rem) {
  rtg-typography-table :is(th, td) {
    font-size: var(--rtg-typography-table-font-size);
  }
}

/* HEADER CELL */

rtg-typography-table th {
  font-weight: var(--rtg-typography-table-cell-header-font-weight);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LIST
 * --------------------------------------------------
 */

rtg-typography-list > [data-slot='typography-list'] {
  margin-left: var(--rtg-typography-list-space-ml);
  margin-bottom: var(--rtg-typography-list-space-my);

  list-style-type: disc;
}

rtg-typography-list:not(:first-child) > [data-slot='typography-list'] {
  margin-top: var(--rtg-typography-list-space-my);
}

/* * LIST ITEM * */

rtg-typography-list > [data-slot='typography-list'] > li {
  font-family: var(--rtg-typography-list-font-family);
  font-size: var(--rtg-typography-list-font-size-vw-sm);
  line-height: var(--rtg-typography-list-font-line-height);
  font-weight: var(--rtg-typography-list-font-weight);
  letter-spacing: var(--rtg-typography-list-font-letter-spacing);
}

rtg-typography-list > [data-slot='typography-list'] > li:not(:first-child) {
  margin-top: var(--rtg-typography-list-item-space-mt);
}

@media (width >= 48rem) {
  rtg-typography-list > [data-slot='typography-list'] > li {
    font-size: var(--rtg-typography-list-font-size);
  }
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY CODE
 * --------------------------------------------------
 */

rtg-typography-code > [data-slot='typography-code'] {
  position: relative;

  padding-inline: var(--rtg-typography-code-space-px);
  padding-block: var(--rtg-typography-code-space-py);

  color: var(--rtg-typography-code-color-text);
  font-family: var(--rtg-typography-code-font-family);
  font-size: var(--rtg-typography-code-font-size);
  line-height: var(--rtg-typography-code-font-line-height);
  font-weight: var(--rtg-typography-code-font-weight);
  letter-spacing: var(--rtg-typography-code-font-letter-spacing);

  background-color: var(--rtg-typography-code-color-bg);
  border-radius: var(--rtg-typography-code-radius);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LEAD
 * --------------------------------------------------
 */

rtg-typography-lead > [data-slot='typography-lead'] {
  color: var(--rtg-typography-lead-color-text);
  font-family: var(--rtg-typography-lead-font-family);
  font-size: var(--rtg-typography-lead-font-size);
  line-height: var(--rtg-typography-lead-font-line-height);
  font-weight: var(--rtg-typography-lead-font-weight);
  letter-spacing: var(--rtg-typography-lead-font-letter-spacing);
}

rtg-typography-lead:not(:first-child) > [data-slot='typography-lead'] {
  margin-top: var(--rtg-typography-lead-space-mt);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LARGE
 * --------------------------------------------------
 */

rtg-typography-large > [data-slot='typography-large'] {
  font-family: var(--rtg-typography-large-font-family);
  font-size: var(--rtg-typography-large-font-size);
  line-height: var(--rtg-typography-large-font-line-height);
  font-weight: var(--rtg-typography-large-font-weight);
  letter-spacing: var(--rtg-typography-large-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY SMALL
 * --------------------------------------------------
 */

rtg-typography-small > [data-slot='typography-small'] {
  font-family: var(--rtg-typography-small-font-family);
  font-size: var(--rtg-typography-small-font-size);
  line-height: var(--rtg-typography-small-font-line-height);
  font-weight: var(--rtg-typography-small-font-weight);
  letter-spacing: var(--rtg-typography-small-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY MUTED
 * --------------------------------------------------
 */

rtg-typography-muted > [data-slot='typography-muted'] {
  color: var(--rtg-typography-muted-color-text);
  font-family: var(--rtg-typography-muted-font-family);
  font-size: var(--rtg-typography-muted-font-size);
  line-height: var(--rtg-typography-muted-font-line-height);
  font-weight: var(--rtg-typography-muted-font-weight);
  letter-spacing: var(--rtg-typography-muted-font-letter-spacing);
}

/*
 * ===========================================================================
 *  Temporary component styles for components which have not been refactored
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  DIALOG
 * --------------------------------------------------
 */

/* * DIALOG CONTENT: CLOSE * */

rtg-dialog-content [data-slot=dialog-content-close]:hover {
  color: var(--sb-dialog-close-color-text-hover);
  background-color: var(--sb-dialog-close-color-bg-hover);
}

/*
 * --------------------------------------------------
 *  SCROLL AREA
 * --------------------------------------------------
 */

rtg-scroll-area > [data-slot=scroll-area] {
  border-radius: inherit;
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

*{
  border-color: hsl(var(--border));
}

body{
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
}

/* p {
    margin-top: 6px;
    margin-block-start: 6px;
  } */

.rtg-sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.rtg-pointer-events-none{
  pointer-events: none;
}

.rtg-pointer-events-auto{
  pointer-events: auto;
}

.rtg-visible{
  visibility: visible;
}

.rtg-invisible{
  visibility: hidden;
}

.rtg-fixed{
  position: fixed;
}

.rtg-absolute{
  position: absolute;
}

.rtg-relative{
  position: relative;
}

.rtg-inset-0{
  inset: 0px;
}

.rtg-inset-x-0{
  left: 0px;
  right: 0px;
}

.rtg-bottom-0{
  bottom: 0px;
}

.rtg-left-1\/2{
  left: 50%;
}

.rtg-left-2{
  left: 0.5rem;
}

.rtg-left-\[50\%\]{
  left: 50%;
}

.rtg-left-carousel-control-horizontal-space-left{
  left: var(--sb-carousel-control-horizontal-space-left);
}

.rtg-right-2{
  right: 0.5rem;
}

.rtg-right-4{
  right: 1rem;
}

.rtg-right-carousel-control-horizontal-space-right{
  right: var(--sb-carousel-control-horizontal-space-right);
}

.rtg-top-0{
  top: 0px;
}

.rtg-top-1\/2{
  top: 50%;
}

.rtg-top-4{
  top: 1rem;
}

.rtg-top-\[50\%\]{
  top: 50%;
}

.rtg-top-carousel-button-vertical-next-space-top{
  top: var(--sb-carousel-button-vertical-next-space-top);
}

.rtg-top-carousel-button-vertical-prev-space-top{
  top: var(--sb-carousel-button-vertical-prev-space-top);
}

.rtg-top-navigation-menu-content-space-top{
  top: var(--sb-navigation-menu-content-space-top);
}

.rtg-z-10{
  z-index: 10;
}

.rtg-z-20{
  z-index: 20;
}

.rtg-z-50{
  z-index: 50;
}

.rtg-z-\[100\]{
  z-index: 100;
}

.rtg-col-span-2{
  grid-column: span 2 / span 2;
}

.rtg-row-span-3{
  grid-row: span 3 / span 3;
}

.rtg-m-auto{
  margin: auto;
}

.rtg-mx-3{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.rtg-mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.rtg-mx-carousel-space-mx{
  margin-left: var(--sb-carousel-space-mx);
  margin-right: var(--sb-carousel-space-mx);
}

.rtg-mx-context-menu-separator-space-mx{
  margin-left: var(--sb-context-menu-separator-space-mx);
  margin-right: var(--sb-context-menu-separator-space-mx);
}

.rtg-mx-dropdown-menu-separator-space-mx{
  margin-left: var(--sb-dropdown-menu-separator-space-mx);
  margin-right: var(--sb-dropdown-menu-separator-space-mx);
}

.rtg-mx-menubar-separator-space-mx{
  margin-left: var(--sb-menubar-separator-space-mx);
  margin-right: var(--sb-menubar-separator-space-mx);
}

.rtg-mx-select-separator-space-mx{
  margin-left: var(--sb-select-separator-space-mx);
  margin-right: var(--sb-select-separator-space-mx);
}

.rtg-my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.rtg-my-context-menu-separator-space-my{
  margin-top: var(--sb-context-menu-separator-space-my);
  margin-bottom: var(--sb-context-menu-separator-space-my);
}

.rtg-my-dropdown-menu-separator-space-my{
  margin-top: var(--sb-dropdown-menu-separator-space-my);
  margin-bottom: var(--sb-dropdown-menu-separator-space-my);
}

.rtg-my-menubar-separator-space-my{
  margin-top: var(--sb-menubar-separator-space-my);
  margin-bottom: var(--sb-menubar-separator-space-my);
}

.rtg-my-select-separator-space-my{
  margin-top: var(--sb-select-separator-space-my);
  margin-bottom: var(--sb-select-separator-space-my);
}

.rtg-mb-2{
  margin-bottom: 0.5rem;
}

.rtg-mb-4{
  margin-bottom: 1rem;
}

.rtg-mb-form-label-space-mb{
  margin-bottom: var(--sb-form-label-space-mb);
}

.rtg-ml-auto{
  margin-left: auto;
}

.rtg-ml-navigation-menu-item-icon-space-ml{
  margin-left: var(--sb-navigation-menu-item-icon-space-ml);
}

.rtg-mr-2{
  margin-right: 0.5rem;
}

.rtg-mt-10{
  margin-top: 2.5rem;
}

.rtg-mt-2{
  margin-top: 0.5rem;
}

.rtg-mt-3{
  margin-top: 0.75rem;
}

.rtg-mt-4{
  margin-top: 1rem;
}

.rtg-mt-8{
  margin-top: 2rem;
}

.rtg-mt-auto{
  margin-top: auto;
}

.rtg-mt-calendar-week-space-mt{
  margin-top: var(--sb-calendar-week-space-mt);
}

.rtg-mt-combo-box-group-space-mt{
  margin-top: var(--sb-combo-box-group-space-mt);
}

.rtg-mt-drawer-content-space-mt{
  margin-top: var(--sb-drawer-content-space-mt);
}

.rtg-mt-drawer-thumb-space-mt{
  margin-top: var(--sb-drawer-thumb-space-mt);
}

.rtg-mt-form-description-space-mt{
  margin-top: var(--sb-form-description-space-mt);
}

.rtg-mt-navigation-menu-content-container-space-mt{
  margin-top: var(--sb-navigation-menu-content-container-space-mt);
}

.rtg-mt-table-caption-space-mt{
  margin-top: var(--sb-table-caption-space-mt);
}

.rtg-line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.rtg-line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rtg-block{
  display: block;
}

.rtg-inline-block{
  display: inline-block;
}

.rtg-flex{
  display: flex;
}

.rtg-inline-flex{
  display: inline-flex;
}

.rtg-table{
  display: table;
}

.rtg-grid{
  display: grid;
}

.rtg-contents{
  display: contents;
}

.rtg-hidden{
  display: none;
}

.rtg-aspect-square{
  aspect-ratio: 1 / 1;
}

.rtg-size-3\.5{
  width: 0.875rem;
  height: 0.875rem;
}

.rtg-size-4{
  width: 1rem;
  height: 1rem;
}

.rtg-size-5{
  width: 1.25rem;
  height: 1.25rem;
}

.rtg-size-accordion-trigger-icon-space-size{
  width: var(--sb-accordion-trigger-icon-space-size);
  height: var(--sb-accordion-trigger-icon-space-size);
}

.rtg-size-auto{
  width: auto;
  height: auto;
}

.rtg-size-breadcrumb-ellipsis-space-size{
  width: var(--sb-breadcrumb-ellipsis-space-size);
  height: var(--sb-breadcrumb-ellipsis-space-size);
}

.rtg-size-button-icon-space-size{
  width: var(--rtg-button-icon-space-size-default);
  height: var(--rtg-button-icon-space-size-default);
}

.rtg-size-button-space-size-icon{
  width: var(--rtg-button-space-size-default);
  height: var(--rtg-button-space-size-default);
}

.rtg-size-button-space-size-icon-lg{
  width: var(--rtg-button-space-size-lg);
  height: var(--rtg-button-space-size-lg);
}

.rtg-size-button-space-size-icon-sm{
  width: var(--rtg-button-space-size-sm);
  height: var(--rtg-button-space-size-sm);
}

.rtg-size-calendar-chevron-space-size{
  width: var(--sb-calendar-chevron-space-size);
  height: var(--sb-calendar-chevron-space-size);
}

.rtg-size-command-input-icon-space-size{
  width: var(--sb-command-input-icon-space-size);
  height: var(--sb-command-input-icon-space-size);
}

.rtg-size-command-item-icon-space-size{
  width: var(--sb-command-item-icon-space-size);
  height: var(--sb-command-item-icon-space-size);
}

.rtg-size-context-menu-checkbox-item-icon-container-space-size{
  width: var(--sb-context-menu-checkbox-item-icon-container-space-size);
  height: var(--sb-context-menu-checkbox-item-icon-container-space-size);
}

.rtg-size-context-menu-checkbox-item-icon-space-size{
  width: var(--sb-context-menu-checkbox-item-icon-space-size);
  height: var(--sb-context-menu-checkbox-item-icon-space-size);
}

.rtg-size-context-menu-item-icon-space-size{
  width: var(--sb-context-menu-item-icon-space-size);
  height: var(--sb-context-menu-item-icon-space-size);
}

.rtg-size-context-menu-radio-item-icon-container-space-size{
  width: var(--sb-context-menu-radio-item-icon-container-space-size);
  height: var(--sb-context-menu-radio-item-icon-container-space-size);
}

.rtg-size-context-menu-radio-item-icon-space-size{
  width: var(--sb-context-menu-radio-item-icon-space-size);
  height: var(--sb-context-menu-radio-item-icon-space-size);
}

.rtg-size-dialog-close-icon-space-size{
  width: var(--sb-dialog-close-icon-space-size);
  height: var(--sb-dialog-close-icon-space-size);
}

.rtg-size-dropdown-menu-checkbox-item-icon-container-space-size{
  width: var(--sb-dropdown-menu-checkbox-item-icon-container-space-size);
  height: var(--sb-dropdown-menu-checkbox-item-icon-container-space-size);
}

.rtg-size-dropdown-menu-checkbox-item-icon-space-size{
  width: var(--sb-dropdown-menu-checkbox-item-icon-space-size);
  height: var(--sb-dropdown-menu-checkbox-item-icon-space-size);
}

.rtg-size-dropdown-menu-item-icon-space-size{
  width: var(--sb-dropdown-menu-item-icon-space-size);
  height: var(--sb-dropdown-menu-item-icon-space-size);
}

.rtg-size-dropdown-menu-radio-item-icon-container-space-size{
  width: var(--sb-dropdown-menu-radio-item-icon-container-space-size);
  height: var(--sb-dropdown-menu-radio-item-icon-container-space-size);
}

.rtg-size-dropdown-menu-radio-item-icon-space-size{
  width: var(--sb-dropdown-menu-radio-item-icon-space-size);
  height: var(--sb-dropdown-menu-radio-item-icon-space-size);
}

.rtg-size-full{
  width: 100%;
  height: 100%;
}

.rtg-size-menubar-checkbox-item-icon-space-size{
  width: var(--sb-menubar-checkbox-item-icon-space-size);
  height: var(--sb-menubar-checkbox-item-icon-space-size);
}

.rtg-size-menubar-checkbox-item-indicator-space-size{
  width: var(--sb-menubar-checkbox-item-indicator-space-size);
  height: var(--sb-menubar-checkbox-item-indicator-space-size);
}

.rtg-size-menubar-item-icon-space-size{
  width: var(--sb-menubar-item-icon-space-size);
  height: var(--sb-menubar-item-icon-space-size);
}

.rtg-size-menubar-radio-item-icon-space-size{
  width: var(--sb-menubar-radio-item-icon-space-size);
  height: var(--sb-menubar-radio-item-icon-space-size);
}

.rtg-size-menubar-radio-item-indicator-space-size{
  width: var(--sb-menubar-radio-item-indicator-space-size);
  height: var(--sb-menubar-radio-item-indicator-space-size);
}

.rtg-size-pagination-ellipsis-icon-space-size{
  width: var(--sb-pagination-ellipsis-icon-space-size);
  height: var(--sb-pagination-ellipsis-icon-space-size);
}

.rtg-size-pagination-ellipsis-space-size{
  width: var(--sb-pagination-ellipsis-space-size);
  height: var(--sb-pagination-ellipsis-space-size);
}

.rtg-size-radio-group-indicator-space-size{
  width: var(--sb-radio-group-indicator-space-size);
  height: var(--sb-radio-group-indicator-space-size);
}

.rtg-size-radio-group-item-space-size{
  width: var(--sb-radio-group-item-space-size);
  height: var(--sb-radio-group-item-space-size);
}

.rtg-size-select-item-icon-space-size{
  width: var(--sb-select-item-icon-space-size);
  height: var(--sb-select-item-icon-space-size);
}

.rtg-size-select-item-indicator-space-size{
  width: var(--sb-select-item-indicator-space-size);
  height: var(--sb-select-item-indicator-space-size);
}

.rtg-size-select-trigger-icon-space-size{
  width: var(--sb-select-trigger-icon-space-size);
  height: var(--sb-select-trigger-icon-space-size);
}

.rtg-size-switch-thumb-space-size{
  width: var(--sb-switch-thumb-space-size);
  height: var(--sb-switch-thumb-space-size);
}

.\!rtg-h-\[360px\]{
  height: 360px !important;
}

.rtg-h-10{
  height: 2.5rem;
}

.rtg-h-2{
  height: 0.5rem;
}

.rtg-h-20{
  height: 5rem;
}

.rtg-h-24{
  height: 6rem;
}

.rtg-h-3\.5{
  height: 0.875rem;
}

.rtg-h-4{
  height: 1rem;
}

.rtg-h-5{
  height: 1.25rem;
}

.rtg-h-6{
  height: 1.5rem;
}

.rtg-h-72{
  height: 18rem;
}

.rtg-h-8{
  height: 2rem;
}

.rtg-h-9{
  height: 2.25rem;
}

.rtg-h-\[120px\]{
  height: 120px;
}

.rtg-h-\[150px\]{
  height: 150px;
}

.rtg-h-\[300px\]{
  height: 300px;
}

.rtg-h-\[400px\]{
  height: 400px;
}

.rtg-h-\[450px\]{
  height: 450px;
}

.rtg-h-auto{
  height: auto;
}

.rtg-h-button-space-h-default{
  height: var(--rtg-button-space-size-default);
}

.rtg-h-button-space-h-lg{
  height: var(--rtg-button-space-size-lg);
}

.rtg-h-button-space-h-sm{
  height: var(--rtg-button-space-size-sm);
}

.rtg-h-calendar-month-caption-space-h{
  height: var(--sb-calendar-month-caption-space-h);
}

.rtg-h-carousel-button-space-h{
  height: var(--sb-carousel-button-space-h);
}

.rtg-h-carousel-control-vertical-space-h{
  height: var(--sb-carousel-control-vertical-space-h);
}

.rtg-h-carousel-slide-space-h{
  height: var(--sb-carousel-slide-space-h);
}

.rtg-h-carousel-space-h{
  height: var(--sb-carousel-space-h);
}

.rtg-h-carousel-viewport-space-h{
  height: var(--sb-carousel-viewport-space-h);
}

.rtg-h-combo-box-input-space-h{
  height: var(--sb-combo-box-input-space-h);
}

.rtg-h-combo-box-trigger-space-h{
  height: var(--sb-combo-box-trigger-space-h);
}

.rtg-h-command-input-space-h{
  height: var(--sb-command-input-space-h);
}

.rtg-h-command-input-wrapper-space-h{
  height: var(--sb-command-input-wrapper-space-h);
}

.rtg-h-command-separator-space-h{
  height: var(--sb-command-separator-space-h);
}

.rtg-h-command-space-h{
  height: var(--sb-command-space-h);
}

.rtg-h-context-menu-separator-space-h{
  height: var(--sb-context-menu-separator-space-h);
}

.rtg-h-drawer-thumb-space-h{
  height: var(--sb-drawer-thumb-space-h);
}

.rtg-h-dropdown-menu-separator-space-h{
  height: var(--sb-dropdown-menu-separator-space-h);
}

.rtg-h-full{
  height: 100%;
}

.rtg-h-menubar-separator-space-h{
  height: var(--sb-menubar-separator-space-h);
}

.rtg-h-menubar-space-h{
  height: var(--sb-menubar-space-h);
}

.rtg-h-navigation-menu-item-icon-space-h{
  height: var(--sb-navigation-menu-item-icon-space-h);
}

.rtg-h-navigation-menu-link-space-h{
  height: var(--sb-navigation-menu-link-space-h);
}

.rtg-h-progress-indicator-space-h{
  height: var(--sb-progress-indicator-space-h);
}

.rtg-h-progress-space-h{
  height: var(--sb-progress-space-h);
}

.rtg-h-select-separator-space-h{
  height: var(--sb-select-separator-space-h);
}

.rtg-h-select-trigger-space-h{
  height: var(--sb-select-trigger-space-h);
}

.rtg-h-switch-space-h{
  height: var(--sb-switch-space-h);
}

.rtg-h-table-head-cell-space-h{
  height: var(--sb-table-head-cell-space-h);
}

.rtg-h-toast-action-space-h{
  height: var(--sb-toast-action-space-h);
}

.rtg-h-toggle-group-item-space-h-lg{
  height: var(--sb-toggle-group-item-space-h-lg);
}

.rtg-h-toggle-group-item-space-h-md{
  height: var(--sb-toggle-group-item-space-h-md);
}

.rtg-h-toggle-group-item-space-h-sm{
  height: var(--sb-toggle-group-item-space-h-sm);
}

.rtg-h-toggle-space-h-lg{
  height: var(--sb-toggle-space-h-lg);
}

.rtg-h-toggle-space-h-md{
  height: var(--sb-toggle-space-h-md);
}

.rtg-h-toggle-space-h-sm{
  height: var(--sb-toggle-space-h-sm);
}

.rtg-max-h-72{
  max-height: 18rem;
}

.rtg-max-h-\[360px\]{
  max-height: 360px;
}

.rtg-max-h-\[80vh\]{
  max-height: 80vh;
}

.rtg-max-h-combo-box-group-space-max-h{
  max-height: var(--sb-combo-box-group-space-max-h);
}

.rtg-max-h-command-list-space-max-h{
  max-height: var(--sb-command-list-space-max-h);
}

.rtg-max-h-screen{
  max-height: 100vh;
}

.rtg-min-h-\[350px\]{
  min-height: 350px;
}

.\!rtg-w-\[310px\]{
  width: 310px !important;
}

.rtg-w-2{
  width: 0.5rem;
}

.rtg-w-20{
  width: 5rem;
}

.rtg-w-3\.5{
  width: 0.875rem;
}

.rtg-w-4{
  width: 1rem;
}

.rtg-w-48{
  width: 12rem;
}

.rtg-w-52{
  width: 13rem;
}

.rtg-w-56{
  width: 14rem;
}

.rtg-w-64{
  width: 16rem;
}

.rtg-w-72{
  width: 18rem;
}

.rtg-w-8{
  width: 2rem;
}

.rtg-w-80{
  width: 20rem;
}

.rtg-w-\[180px\]{
  width: 180px;
}

.rtg-w-\[300px\]{
  width: 300px;
}

.rtg-w-\[350px\]{
  width: 350px;
}

.rtg-w-\[400px\]{
  width: 400px;
}

.rtg-w-\[40px\]{
  width: 40px;
}

.rtg-w-\[60\%\]{
  width: 60%;
}

.rtg-w-\[80\%\]{
  width: 80%;
}

.rtg-w-\[800px\]{
  width: 800px;
}

.rtg-w-accordion-trigger-space-w{
  width: var(--sb-accordion-trigger-space-w);
}

.rtg-w-auto{
  width: auto;
}

.rtg-w-carousel-button-space-w{
  width: var(--sb-carousel-button-space-w);
}

.rtg-w-carousel-control-vertical-space-w{
  width: var(--sb-carousel-control-vertical-space-w);
}

.rtg-w-carousel-space-w{
  width: var(--sb-carousel-space-w);
}

.rtg-w-carousel-viewport-space-w{
  width: var(--sb-carousel-viewport-space-w);
}

.rtg-w-combo-box-group-space-w{
  width: var(--sb-combo-box-group-space-w);
}

.rtg-w-combo-box-input-space-w{
  width: var(--sb-combo-box-input-space-w);
}

.rtg-w-combo-box-item-space-w{
  width: var(--sb-combo-box-item-space-w);
}

.rtg-w-combo-box-value-space-w{
  width: var(--sb-combo-box-value-space-w);
}

.rtg-w-command-input-space-w{
  width: var(--sb-command-input-space-w);
}

.rtg-w-command-space-w{
  width: var(--sb-command-space-w);
}

.rtg-w-date-picker-trigger-button-space-w{
  width: var(--sb-date-picker-trigger-button-space-w);
}

.rtg-w-dialog-content-space-w{
  width: var(--sb-dialog-content-space-w);
}

.rtg-w-drawer-thumb-space-w{
  width: var(--sb-drawer-thumb-space-w);
}

.rtg-w-fit{
  width: -moz-fit-content;
  width: fit-content;
}

.rtg-w-full{
  width: 100%;
}

.rtg-w-hover-card-content-space-w{
  width: var(--sb-hover-card-content-space-w);
}

.rtg-w-max{
  width: -moz-max-content;
  width: max-content;
}

.rtg-w-navigation-menu-content-container-space-w{
  width: var(--sb-navigation-menu-content-container-space-w);
}

.rtg-w-navigation-menu-item-icon-space-w{
  width: var(--sb-navigation-menu-item-icon-space-w);
}

.rtg-w-navigation-menu-link-space-w{
  width: var(--sb-navigation-menu-link-space-w);
}

.rtg-w-popover-content-space-w{
  width: var(--sb-popover-content-space-w);
}

.rtg-w-progress-indicator-space-w{
  width: var(--sb-progress-indicator-space-w);
}

.rtg-w-progress-space-w{
  width: var(--sb-progress-space-w);
}

.rtg-w-switch-space-w{
  width: var(--sb-switch-space-w);
}

.rtg-w-table-container-space-w{
  width: var(--sb-table-container-space-w);
}

.rtg-w-table-preview-space-w{
  width: var(--sb-table-preview-space-w);
}

.rtg-w-table-space-w{
  width: var(--sb-table-space-w);
}

.rtg-w-toast-viewport-item-space-w{
  width: var(--sb-toast-viewport-item-space-w);
}

.rtg-w-toast-viewport-root-space-w{
  width: var(--sb-toast-viewport-root-space-w);
}

.rtg-min-w-0{
  min-width: 0px;
}

.rtg-min-w-calendar-day-button-space-min-w{
  min-width: var(--sb-calendar-day-button-space-min-w);
}

.rtg-min-w-context-menu-content-space-min-w{
  min-width: var(--sb-context-menu-content-space-min-w);
}

.rtg-min-w-dropdown-menu-content-space-min-w{
  min-width: var(--sb-dropdown-menu-content-space-min-w);
}

.rtg-min-w-menubar-content-space-min-w{
  min-width: var(--sb-menubar-content-space-min-w);
}

.rtg-max-w-\[260px\]{
  max-width: 260px;
}

.rtg-max-w-\[310px\]{
  max-width: 310px;
}

.rtg-max-w-\[450px\]{
  max-width: 450px;
}

.rtg-max-w-dialog-content-space-max-w-sm{
  max-width: var(--sb-dialog-content-space-max-w-sm);
}

.rtg-max-w-lg{
  max-width: 32rem;
}

.rtg-max-w-md{
  max-width: 28rem;
}

.rtg-max-w-navigation-menu-space-max-w{
  max-width: var(--sb-navigation-menu-space-max-w);
}

.rtg-max-w-sm{
  max-width: 24rem;
}

.rtg-max-w-xl{
  max-width: 36rem;
}

.rtg-max-w-xs{
  max-width: 20rem;
}

.rtg-flex-1{
  flex: 1 1 0%;
}

.rtg-flex-shrink-0{
  flex-shrink: 0;
}

.rtg-shrink-0{
  flex-shrink: 0;
}

.rtg-flex-grow{
  flex-grow: 1;
}

.rtg-flex-grow-0{
  flex-grow: 0;
}

.rtg-basis-full{
  flex-basis: 100%;
}

.rtg-caption-bottom{
  caption-side: bottom;
}

.rtg-border-collapse{
  border-collapse: collapse;
}

.rtg-origin-top{
  transform-origin: top;
}

.rtg--translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg--translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-x-0\.5{
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-x-\[-50\%\]{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-x-\[calc\(100\%-2px\)\]{
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-y-0\.5{
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-y-1{
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-y-2{
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-y-\[-50\%\]{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-scale-y-0{
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-scale-y-100{
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes rtg-skeleton-animate{
  50%{
    opacity: var(--sb-skeleton-opacity-at-50);
  }
}

.rtg-animate-skeleton-animate{
  animation: rtg-skeleton-animate var(--sb-skeleton-motion-duration) var(--sb-skeleton-motion-fn) infinite;
}

.rtg-cursor-default{
  cursor: default;
}

.rtg-cursor-not-allowed{
  cursor: not-allowed;
}

.rtg-cursor-pointer{
  cursor: pointer;
}

.rtg-select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rtg-resize-none{
  resize: none;
}

.rtg-scroll-my-1{
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}

.rtg-scroll-py-1{
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}

.rtg-list-inside{
  list-style-position: inside;
}

.rtg-list-decimal{
  list-style-type: decimal;
}

.rtg-list-disc{
  list-style-type: disc;
}

.rtg-list-none{
  list-style-type: none;
}

.rtg-grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rtg-grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rtg-grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rtg-flex-row{
  flex-direction: row;
}

.rtg-flex-row-reverse{
  flex-direction: row-reverse;
}

.rtg-flex-col{
  flex-direction: column;
}

.rtg-flex-col-reverse{
  flex-direction: column-reverse;
}

.rtg-flex-wrap{
  flex-wrap: wrap;
}

.rtg-flex-nowrap{
  flex-wrap: nowrap;
}

.rtg-items-start{
  align-items: flex-start;
}

.rtg-items-center{
  align-items: center;
}

.rtg-justify-start{
  justify-content: flex-start;
}

.rtg-justify-end{
  justify-content: flex-end;
}

.rtg-justify-center{
  justify-content: center;
}

.rtg-justify-between{
  justify-content: space-between;
}

.rtg-gap-1{
  gap: 0.25rem;
}

.rtg-gap-1\.5{
  gap: 0.375rem;
}

.rtg-gap-2{
  gap: 0.5rem;
}

.rtg-gap-3{
  gap: 0.75rem;
}

.rtg-gap-4{
  gap: 1rem;
}

.rtg-gap-5{
  gap: 1.25rem;
}

.rtg-gap-6{
  gap: 1.5rem;
}

.rtg-gap-8{
  gap: 2rem;
}

.rtg-gap-accordion-trigger-space-gap{
  gap: var(--sb-accordion-trigger-space-gap);
}

.rtg-gap-breadcrumb-item-space-gap{
  gap: var(--sb-breadcrumb-item-space-gap);
}

.rtg-gap-breadcrumb-list-space-gap-sm{
  gap: var(--sb-breadcrumb-list-space-gap-sm);
}

.rtg-gap-button-space-gap-default{
  gap: var(--rtg-button-space-gap-default);
}

.rtg-gap-button-space-gap-lg{
  gap: var(--rtg-button-space-gap-lg);
}

.rtg-gap-button-space-gap-sm{
  gap: var(--rtg-button-space-gap-sm);
}

.rtg-gap-calendar-day-button-space-gap{
  gap: var(--sb-calendar-day-button-space-gap);
}

.rtg-gap-calendar-month-space-gap{
  gap: var(--sb-calendar-month-space-gap);
}

.rtg-gap-calendar-months-space-gap{
  gap: var(--sb-calendar-months-space-gap);
}

.rtg-gap-calendar-nav-space-gap{
  gap: var(--sb-calendar-nav-space-gap);
}

.rtg-gap-command-input-wrapper-space-gap{
  gap: var(--sb-command-input-wrapper-space-gap);
}

.rtg-gap-command-item-space-gap{
  gap: var(--sb-command-item-space-gap);
}

.rtg-gap-context-menu-checkbox-item-space-gap{
  gap: var(--sb-context-menu-checkbox-item-space-gap);
}

.rtg-gap-context-menu-item-space-gap{
  gap: var(--sb-context-menu-item-space-gap);
}

.rtg-gap-context-menu-radio-item-space-gap{
  gap: var(--sb-context-menu-radio-item-space-gap);
}

.rtg-gap-dialog-content-space-gap{
  gap: var(--sb-dialog-content-space-gap);
}

.rtg-gap-dialog-footer-space-gap{
  gap: var(--sb-dialog-footer-space-gap);
}

.rtg-gap-dialog-header-space-gap{
  gap: var(--sb-dialog-header-space-gap);
}

.rtg-gap-drawer-footer-space-gap{
  gap: var(--sb-drawer-footer-space-gap);
}

.rtg-gap-drawer-header-space-gap-sm{
  gap: var(--sb-drawer-header-space-gap-sm);
}

.rtg-gap-dropdown-menu-checkbox-item-space-gap{
  gap: var(--sb-dropdown-menu-checkbox-item-space-gap);
}

.rtg-gap-dropdown-menu-item-space-gap{
  gap: var(--sb-dropdown-menu-item-space-gap);
}

.rtg-gap-dropdown-menu-radio-item-space-gap{
  gap: var(--sb-dropdown-menu-radio-item-space-gap);
}

.rtg-gap-menubar-checkbox-item-space-gap{
  gap: var(--sb-menubar-checkbox-item-space-gap);
}

.rtg-gap-menubar-item-space-gap{
  gap: var(--sb-menubar-item-space-gap);
}

.rtg-gap-menubar-radio-item-space-gap{
  gap: var(--sb-menubar-radio-item-space-gap);
}

.rtg-gap-menubar-space-gap{
  gap: var(--sb-menubar-space-gap);
}

.rtg-gap-pagination-content-space-gap{
  gap: var(--sb-pagination-content-space-gap);
}

.rtg-gap-pagination-next-space-gap{
  gap: var(--sb-pagination-next-space-gap);
}

.rtg-gap-pagination-previous-space-gap{
  gap: var(--sb-pagination-previous-space-gap);
}

.rtg-gap-radio-group-space-gap{
  gap: var(--sb-radio-group-space-gap);
}

.rtg-gap-select-item-space-gap{
  gap: var(--sb-select-item-space-gap);
}

.rtg-gap-select-trigger-space-gap{
  gap: var(--sb-select-trigger-space-gap);
}

.rtg-gap-select-value-space-gap{
  gap: var(--sb-select-value-space-gap);
}

.rtg-gap-toast-viewport-item-space-gap{
  gap: var(--sb-toast-viewport-item-space-gap);
}

.rtg-gap-toggle-group-space-gap{
  gap: var(--sb-toggle-group-space-gap);
}

.rtg-space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.rtg-space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.rtg-space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.rtg-space-x-navigation-menu-list-space-x > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(var(--sb-navigation-menu-list-space-x) * var(--tw-space-x-reverse));
  margin-left: calc(var(--sb-navigation-menu-list-space-x) * calc(1 - var(--tw-space-x-reverse)));
}

.rtg-space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.rtg-space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.rtg-space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.rtg-space-y-form-field-space-y > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--sb-form-field-space-y) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--sb-form-field-space-y) * var(--tw-space-y-reverse));
}

.rtg-space-y-form-item-space-y > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--sb-form-item-space-y) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--sb-form-item-space-y) * var(--tw-space-y-reverse));
}

.rtg-place-self-center{
  place-self: center;
}

.rtg-overflow-auto{
  overflow: auto;
}

.rtg-overflow-hidden{
  overflow: hidden;
}

.rtg-overflow-y-auto{
  overflow-y: auto;
}

.rtg-overflow-x-hidden{
  overflow-x: hidden;
}

.rtg-whitespace-nowrap{
  white-space: nowrap;
}

.rtg-text-balance{
  text-wrap: balance;
}

.rtg-break-words{
  overflow-wrap: break-word;
}

.\!rtg-rounded-2xl{
  border-radius: calc(var(--radius) + 8px) !important;
}

.rtg-rounded-2xl{
  border-radius: calc(var(--radius) + 8px);
}

.rtg-rounded-accordion-trigger-radius{
  border-radius: var(--sb-accordion-trigger-radius);
}

.rtg-rounded-button-radius{
  border-radius: var(--rtg-button-radius-default);
}

.rtg-rounded-calendar-day-radius{
  border-radius: var(--sb-calendar-day-radius);
}

.rtg-rounded-calendar-weekday-radius{
  border-radius: var(--sb-calendar-weekday-radius);
}

.rtg-rounded-carousel-button-radius{
  border-radius: var(--sb-carousel-button-radius);
}

.rtg-rounded-combo-box-group-radius{
  border-radius: var(--sb-combo-box-group-radius);
}

.rtg-rounded-combo-box-input-radius{
  border-radius: var(--sb-combo-box-input-radius);
}

.rtg-rounded-combo-box-item-radius{
  border-radius: var(--sb-combo-box-item-radius);
}

.rtg-rounded-combo-box-trigger-radius{
  border-radius: var(--sb-combo-box-trigger-radius);
}

.rtg-rounded-command-input-radius{
  border-radius: var(--sb-command-input-radius);
}

.rtg-rounded-command-item-radius{
  border-radius: var(--sb-command-item-radius);
}

.rtg-rounded-command-radius{
  border-radius: var(--sb-command-radius);
}

.rtg-rounded-context-menu-checkbox-item-radius{
  border-radius: var(--sb-context-menu-checkbox-item-radius);
}

.rtg-rounded-context-menu-content-radius{
  border-radius: var(--sb-context-menu-content-radius);
}

.rtg-rounded-context-menu-item-radius{
  border-radius: var(--sb-context-menu-item-radius);
}

.rtg-rounded-context-menu-radio-item-radius{
  border-radius: var(--sb-context-menu-radio-item-radius);
}

.rtg-rounded-dialog-close-radius{
  border-radius: var(--sb-dialog-close-radius);
}

.rtg-rounded-dialog-content-radius{
  border-radius: var(--sb-dialog-content-radius);
}

.rtg-rounded-drawer-thumb-radius{
  border-radius: var(--sb-drawer-thumb-radius);
}

.rtg-rounded-dropdown-menu-checkbox-item-radius{
  border-radius: var(--sb-dropdown-menu-checkbox-item-radius);
}

.rtg-rounded-dropdown-menu-content-radius{
  border-radius: var(--sb-dropdown-menu-content-radius);
}

.rtg-rounded-dropdown-menu-item-radius{
  border-radius: var(--sb-dropdown-menu-item-radius);
}

.rtg-rounded-dropdown-menu-radio-item-radius{
  border-radius: var(--sb-dropdown-menu-radio-item-radius);
}

.rtg-rounded-full{
  border-radius: 9999px;
}

.rtg-rounded-hover-card-content-radius{
  border-radius: var(--sb-hover-card-content-radius);
}

.rtg-rounded-lg{
  border-radius: var(--radius);
}

.rtg-rounded-md{
  border-radius: calc(var(--radius) - 2px);
}

.rtg-rounded-menubar-checkbox-item-radius{
  border-radius: var(--sb-menubar-checkbox-item-radius);
}

.rtg-rounded-menubar-content-radius{
  border-radius: var(--sb-menubar-content-radius);
}

.rtg-rounded-menubar-item-radius{
  border-radius: var(--sb-menubar-item-radius);
}

.rtg-rounded-menubar-radio-item-radius{
  border-radius: var(--sb-menubar-radio-item-radius);
}

.rtg-rounded-menubar-radius{
  border-radius: var(--sb-menubar-radius);
}

.rtg-rounded-menubar-trigger-radius{
  border-radius: var(--sb-menubar-trigger-radius);
}

.rtg-rounded-navigation-menu-content-container-radius{
  border-radius: var(--sb-navigation-menu-content-container-radius);
}

.rtg-rounded-navigation-menu-item-radius{
  border-radius: var(--sb-navigation-menu-item-radius);
}

.rtg-rounded-navigation-menu-link-radius{
  border-radius: var(--sb-navigation-menu-link-radius);
}

.rtg-rounded-none{
  border-radius: 0px;
}

.rtg-rounded-popover-content-radius{
  border-radius: var(--sb-popover-content-radius);
}

.rtg-rounded-progress-radius{
  border-radius: var(--sb-progress-radius);
}

.rtg-rounded-radio-group-item-radius{
  border-radius: var(--sb-radio-group-item-radius);
}

.rtg-rounded-select-content-radius{
  border-radius: var(--sb-select-content-radius);
}

.rtg-rounded-select-item-radius{
  border-radius: var(--sb-select-item-radius);
}

.rtg-rounded-select-trigger-radius{
  border-radius: var(--sb-select-trigger-radius);
}

.rtg-rounded-skeleton-radius{
  border-radius: var(--sb-skeleton-radius);
}

.rtg-rounded-switch-radius{
  border-radius: var(--sb-switch-radius);
}

.rtg-rounded-switch-thumb-radius{
  border-radius: var(--sb-switch-thumb-radius);
}

.rtg-rounded-toast-action-radius{
  border-radius: var(--sb-toast-action-radius);
}

.rtg-rounded-toast-viewport-item-radius{
  border-radius: var(--sb-toast-viewport-item-radius);
}

.rtg-rounded-toggle-group-item-radius{
  border-radius: var(--sb-toggle-group-item-radius);
}

.rtg-rounded-toggle-radius{
  border-radius: var(--sb-toggle-radius);
}

.rtg-rounded-l-calendar-day-radius{
  border-top-left-radius: var(--sb-calendar-day-radius);
  border-bottom-left-radius: var(--sb-calendar-day-radius);
}

.rtg-rounded-r-calendar-day-radius{
  border-top-right-radius: var(--sb-calendar-day-radius);
  border-bottom-right-radius: var(--sb-calendar-day-radius);
}

.rtg-rounded-t-drawer-content-radius{
  border-top-left-radius: var(--sb-drawer-content-radius);
  border-top-right-radius: var(--sb-drawer-content-radius);
}

.rtg-border{
  border-width: 1px;
}

.rtg-border-0{
  border-width: 0px;
}

.rtg-border-button-outline-width-border{
  border-width: var(--rtg-button-width-border);
}

.rtg-border-combo-box-group-width-border{
  border-width: var(--sb-combo-box-group-width-border);
}

.rtg-border-combo-box-trigger-width-border{
  border-width: var(--sb-combo-box-trigger-width-border);
}

.rtg-border-context-menu-content-width-border{
  border-width: var(--sb-context-menu-content-width-border);
}

.rtg-border-dialog-content-width-border{
  border-width: var(--sb-dialog-content-width-border);
}

.rtg-border-dropdown-menu-content-width-border{
  border-width: var(--sb-dropdown-menu-content-width-border);
}

.rtg-border-hover-card-content-width-border{
  border-width: var(--sb-hover-card-content-width-border);
}

.rtg-border-menubar-content-width-border{
  border-width: var(--sb-menubar-content-width-border);
}

.rtg-border-menubar-width-border{
  border-width: var(--sb-menubar-width-border);
}

.rtg-border-navigation-menu-content-container-width-border{
  border-width: var(--sb-navigation-menu-content-container-width-border);
}

.rtg-border-popover-content-width-border{
  border-width: var(--sb-popover-content-width-border);
}

.rtg-border-radio-group-item-width-border{
  border-width: var(--sb-radio-group-item-width-border);
}

.rtg-border-select-content-width-border{
  border-width: var(--sb-select-content-width-border);
}

.rtg-border-select-trigger-width-border{
  border-width: var(--sb-select-trigger-width-border);
}

.rtg-border-switch-width-border{
  border-width: var(--sb-switch-width-border);
}

.rtg-border-b{
  border-bottom-width: 1px;
}

.rtg-border-b-accordion-item-width-border{
  border-bottom-width: var(--sb-accordion-item-width-border);
}

.rtg-border-b-command-input-wrapper-width-border{
  border-bottom-width: var(--sb-command-input-wrapper-width-border);
}

.rtg-border-b-table-body-width-border{
  border-bottom-width: var(--sb-table-body-width-border);
}

.rtg-border-b-table-footer-width-border{
  border-bottom-width: var(--sb-table-footer-width-border);
}

.rtg-border-b-table-head-width-border{
  border-bottom-width: var(--sb-table-head-width-border);
}

.rtg-border-t-drawer-content-width-border{
  border-top-width: var(--sb-drawer-content-width-border);
}

.rtg-border-t-table-footer-width-border{
  border-top-width: var(--sb-table-footer-width-border);
}

.rtg-border-dashed{
  border-style: dashed;
}

.rtg-border-none{
  border-style: none;
}

.rtg-border-button-outline-color-border{
  border-color: var(--rtg-button-outline-color-border);
}

.rtg-border-combo-box-group-color-border{
  border-color: hsl(var(--sb-combo-box-group-color-border));
}

.rtg-border-combo-box-trigger-color-border{
  border-color: hsl(var(--sb-combo-box-trigger-color-border));
}

.rtg-border-context-menu-content-color-border{
  border-color: hsl(var(--sb-context-menu-content-color-border));
}

.rtg-border-dialog-content-color-border{
  border-color: hsl(var(--sb-dialog-content-color-border));
}

.rtg-border-dropdown-menu-content-color-border{
  border-color: hsl(var(--sb-dropdown-menu-content-color-border));
}

.rtg-border-hover-card-content-color-border{
  border-color: hsl(var(--sb-hover-card-content-color-border));
}

.rtg-border-input{
  border-color: hsl(var(--input));
}

.rtg-border-menubar-color-border{
  border-color: hsl(var(--sb-menubar-color-border));
}

.rtg-border-menubar-content-color-border{
  border-color: hsl(var(--sb-menubar-content-color-border));
}

.rtg-border-navigation-menu-content-container-color-border{
  border-color: hsl(var(--sb-navigation-menu-content-container-color-border));
}

.rtg-border-popover-content-color-border{
  border-color: hsl(var(--sb-popover-content-color-border));
}

.rtg-border-radio-group-item-color-border{
  border-color: hsl(var(--sb-radio-group-item-color-border));
}

.rtg-border-scrollarea-color-border{
  border-color: hsl(var(--sb-scrollarea-color-border));
}

.rtg-border-select-content-color-border{
  border-color: hsl(var(--sb-select-content-color-border));
}

.rtg-border-select-trigger-color-border{
  border-color: hsl(var(--sb-select-trigger-color-border));
}

.rtg-border-switch-color-border{
  border-color: hsl(var(--sb-switch-color-border));
}

.rtg-border-table-body-color-border{
  border-color: hsl(var(--sb-table-body-color-border));
}

.rtg-border-table-footer-color-border{
  border-color: hsl(var(--sb-table-footer-color-border));
}

.rtg-border-table-head-color-border{
  border-color: hsl(var(--sb-table-head-color-border));
}

.rtg-border-toast-action-color-border{
  border-color: hsl(var(--sb-toast-action-color-border));
}

.rtg-border-toast-viewport-default-color-border{
  border-color: hsl(var(--sb-toast-viewport-default-color-border));
}

.rtg-border-toggle-group-item-outline-color-border{
  border-color: hsl(var(--sb-toggle-group-item-outline-color-border));
}

.rtg-border-toggle-outline-color-border{
  border-color: hsl(var(--sb-toggle-outline-color-border));
}

.rtg-border-b-accordion-item-color-border{
  border-bottom-color: hsl(var(--sb-accordion-item-color-border));
}

.rtg-border-b-command-input-wrapper-color-border{
  border-bottom-color: hsl(var(--sb-command-input-wrapper-color-border));
}

.rtg-border-t-drawer-content-color-border{
  border-top-color: hsl(var(--sb-drawer-content-color-border));
}

.rtg-bg-background{
  background-color: hsl(var(--background));
}

.rtg-bg-button-default-color-bg{
  background-color: var(--rtg-button-default-color-bg);
}

.rtg-bg-button-destructive-color-bg{
  background-color: var(--rtg-button-destructive-color-bg);
}

.rtg-bg-button-outline-color-bg{
  background-color: var(--rtg-button-outline-color-bg);
}

.rtg-bg-button-secondary-color-bg{
  background-color: var(--rtg-button-secondary-color-bg);
}

.rtg-bg-calendar-color-bg{
  background-color: hsl(var(--sb-calendar-color-bg));
}

.rtg-bg-calendar-day-button-today-color-bg{
  background-color: hsl(var(--sb-calendar-day-button-today-color-bg));
}

.rtg-bg-calendar-day-color-bg-selected{
  background-color: hsl(var(--sb-calendar-day-color-bg-selected));
}

.rtg-bg-calendar-day-today-color-bg{
  background-color: hsl(var(--sb-calendar-day-today-color-bg));
}

.rtg-bg-carousel-button-color-bg{
  background-color: hsl(var(--sb-carousel-button-color-bg));
}

.rtg-bg-combo-box-group-color-bg{
  background-color: hsl(var(--sb-combo-box-group-color-bg));
}

.rtg-bg-combo-box-input-color-bg{
  background-color: hsl(var(--sb-combo-box-input-color-bg));
}

.rtg-bg-combo-box-trigger-color-bg{
  background-color: hsl(var(--sb-combo-box-trigger-color-bg));
}

.rtg-bg-command-color-bg{
  background-color: hsl(var(--sb-command-color-bg));
}

.rtg-bg-command-input-color-bg{
  background-color: hsl(var(--sb-command-input-color-bg));
}

.rtg-bg-command-separator-color-bg{
  background-color: hsl(var(--sb-command-separator-color-bg));
}

.rtg-bg-context-menu-content-color-bg{
  background-color: hsl(var(--sb-context-menu-content-color-bg));
}

.rtg-bg-context-menu-separator-color-bg{
  background-color: hsl(var(--sb-context-menu-separator-color-bg));
}

.rtg-bg-dialog-content-color-bg{
  background-color: hsl(var(--sb-dialog-content-color-bg));
}

.rtg-bg-dialog-overlay-color-bg{
  background-color: hsl(var(--sb-dialog-overlay-color-bg));
}

.rtg-bg-drawer-content-color-bg{
  background-color: hsl(var(--sb-drawer-content-color-bg));
}

.rtg-bg-drawer-overlay-color-bg{
  background-color: hsl(var(--sb-drawer-overlay-color-bg));
}

.rtg-bg-drawer-thumb-color-bg{
  background-color: hsl(var(--sb-drawer-thumb-color-bg));
}

.rtg-bg-dropdown-menu-content-color-bg{
  background-color: hsl(var(--sb-dropdown-menu-content-color-bg));
}

.rtg-bg-dropdown-menu-separator-color-bg{
  background-color: hsl(var(--sb-dropdown-menu-separator-color-bg));
}

.rtg-bg-hover-card-content-color-bg{
  background-color: hsl(var(--sb-hover-card-content-color-bg));
}

.rtg-bg-menubar-color-bg{
  background-color: hsl(var(--sb-menubar-color-bg));
}

.rtg-bg-menubar-content-color-bg{
  background-color: hsl(var(--sb-menubar-content-color-bg));
}

.rtg-bg-menubar-separator-color-bg{
  background-color: hsl(var(--sb-menubar-separator-color-bg));
}

.rtg-bg-muted{
  background-color: hsl(var(--muted));
}

.rtg-bg-navigation-menu-content-container-color-bg{
  background-color: hsl(var(--sb-navigation-menu-content-container-color-bg));
}

.rtg-bg-navigation-menu-item-color-bg{
  background-color: hsl(var(--sb-navigation-menu-item-color-bg));
}

.rtg-bg-navigation-menu-link-color-bg{
  background-color: hsl(var(--sb-navigation-menu-link-color-bg));
}

.rtg-bg-popover-content-color-bg{
  background-color: hsl(var(--sb-popover-content-color-bg));
}

.rtg-bg-primary{
  background-color: hsl(var(--primary));
}

.rtg-bg-progress-color-bg{
  background-color: hsl(var(--sb-progress-color-bg));
}

.rtg-bg-progress-indicator-color-bg{
  background-color: hsl(var(--sb-progress-indicator-color-bg));
}

.rtg-bg-radio-group-item-color-bg{
  background-color: hsl(var(--sb-radio-group-item-color-bg));
}

.rtg-bg-scrollarea-color-bg{
  background-color: hsl(var(--sb-scrollarea-color-bg));
}

.rtg-bg-select-content-color-bg{
  background-color: hsl(var(--sb-select-content-color-bg));
}

.rtg-bg-select-separator-color-bg{
  background-color: hsl(var(--sb-select-separator-color-bg));
}

.rtg-bg-select-trigger-color-bg{
  background-color: hsl(var(--sb-select-trigger-color-bg));
}

.rtg-bg-skeleton-color-bg{
  background-color: hsl(var(--sb-skeleton-color-bg));
}

.rtg-bg-switch-color-bg-checked{
  background-color: hsl(var(--sb-switch-color-bg-checked));
}

.rtg-bg-switch-color-bg-unchecked{
  background-color: hsl(var(--sb-switch-color-bg-unchecked));
}

.rtg-bg-switch-thumb-color-bg-checked{
  background-color: hsl(var(--sb-switch-thumb-color-bg-checked));
}

.rtg-bg-switch-thumb-color-bg-unchecked{
  background-color: hsl(var(--sb-switch-thumb-color-bg-unchecked));
}

.rtg-bg-table-footer-color-bg{
  background-color: hsl(var(--sb-table-footer-color-bg));
}

.rtg-bg-table-preview-color-bg{
  background-color: hsl(var(--sb-table-preview-color-bg));
}

.rtg-bg-toast-action-default-color-bg{
  background-color: hsl(var(--sb-toast-action-default-color-bg));
}

.rtg-bg-toast-action-destructive-color-bg{
  background-color: hsl(var(--sb-toast-action-destructive-color-bg));
}

.rtg-bg-toast-viewport-default-color-bg{
  background-color: hsl(var(--sb-toast-viewport-default-color-bg));
}

.rtg-bg-toast-viewport-destructive-color-bg{
  background-color: hsl(var(--sb-toast-viewport-destructive-color-bg));
}

.rtg-bg-transparent{
  background-color: transparent;
}

.rtg-fill-current{
  fill: currentColor;
}

.rtg-fill-primary{
  fill: hsl(var(--primary));
}

.rtg-fill-radio-group-indicator-color-fill{
  fill: hsl(var(--sb-radio-group-indicator-color-fill));
}

.rtg-object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.rtg-p-0{
  padding: 0;
}

.rtg-p-1{
  padding: 0.25rem;
}

.rtg-p-10{
  padding: 2.5rem;
}

.rtg-p-2{
  padding: 0.5rem;
}

.rtg-p-4{
  padding: 1rem;
}

.rtg-p-6{
  padding: 1.5rem;
}

.rtg-p-calendar-day-space-p{
  padding: var(--sb-calendar-day-space-p);
}

.rtg-p-calendar-space-p{
  padding: var(--sb-calendar-space-p);
}

.rtg-p-command-group-space-p{
  padding: var(--sb-command-group-space-p);
}

.rtg-p-context-menu-content-space-p{
  padding: var(--sb-context-menu-content-space-p);
}

.rtg-p-date-picker-content-space-p{
  padding: var(--sb-date-picker-content-space-p);
}

.rtg-p-dialog-content-space-p{
  padding: var(--sb-dialog-content-space-p);
}

.rtg-p-drawer-footer-space-p{
  padding: var(--sb-drawer-footer-space-p);
}

.rtg-p-drawer-header-space-p{
  padding: var(--sb-drawer-header-space-p);
}

.rtg-p-dropdown-menu-content-space-p{
  padding: var(--sb-dropdown-menu-content-space-p);
}

.rtg-p-hover-card-content-space-p{
  padding: var(--sb-hover-card-content-space-p);
}

.rtg-p-menubar-content-space-p{
  padding: var(--sb-menubar-content-space-p);
}

.rtg-p-menubar-space-p{
  padding: var(--sb-menubar-space-p);
}

.rtg-p-popover-content-space-p{
  padding: var(--sb-popover-content-space-p);
}

.rtg-p-select-content-viewport-space-p{
  padding: var(--sb-select-content-viewport-space-p);
}

.rtg-px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.rtg-px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.rtg-px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.rtg-px-button-space-px-default{
  padding-left: var(--rtg-button-space-px-default);
  padding-right: var(--rtg-button-space-px-default);
}

.rtg-px-button-space-px-lg{
  padding-left: var(--rtg-button-space-px-lg);
  padding-right: var(--rtg-button-space-px-lg);
}

.rtg-px-button-space-px-sm{
  padding-left: var(--rtg-button-space-px-sm);
  padding-right: var(--rtg-button-space-px-sm);
}

.rtg-px-calendar-month-caption-space-px{
  padding-left: var(--sb-calendar-month-caption-space-px);
  padding-right: var(--sb-calendar-month-caption-space-px);
}

.rtg-px-carousel-button-space-px{
  padding-left: var(--sb-carousel-button-space-px);
  padding-right: var(--sb-carousel-button-space-px);
}

.rtg-px-carousel-slide-space-px{
  padding-left: var(--sb-carousel-slide-space-px);
  padding-right: var(--sb-carousel-slide-space-px);
}

.rtg-px-combo-box-group-space-px{
  padding-left: var(--sb-combo-box-group-space-px);
  padding-right: var(--sb-combo-box-group-space-px);
}

.rtg-px-combo-box-input-space-px{
  padding-left: var(--sb-combo-box-input-space-px);
  padding-right: var(--sb-combo-box-input-space-px);
}

.rtg-px-combo-box-item-space-px{
  padding-left: var(--sb-combo-box-item-space-px);
  padding-right: var(--sb-combo-box-item-space-px);
}

.rtg-px-combo-box-trigger-space-px{
  padding-left: var(--sb-combo-box-trigger-space-px);
  padding-right: var(--sb-combo-box-trigger-space-px);
}

.rtg-px-command-heading-space-px{
  padding-left: var(--sb-command-heading-space-px);
  padding-right: var(--sb-command-heading-space-px);
}

.rtg-px-command-input-wrapper-space-px{
  padding-left: var(--sb-command-input-wrapper-space-px);
  padding-right: var(--sb-command-input-wrapper-space-px);
}

.rtg-px-command-item-space-px{
  padding-left: var(--sb-command-item-space-px);
  padding-right: var(--sb-command-item-space-px);
}

.rtg-px-context-menu-item-space-px{
  padding-left: var(--sb-context-menu-item-space-px);
  padding-right: var(--sb-context-menu-item-space-px);
}

.rtg-px-context-menu-label-space-px{
  padding-left: var(--sb-context-menu-label-space-px);
  padding-right: var(--sb-context-menu-label-space-px);
}

.rtg-px-dropdown-menu-item-space-px{
  padding-left: var(--sb-dropdown-menu-item-space-px);
  padding-right: var(--sb-dropdown-menu-item-space-px);
}

.rtg-px-dropdown-menu-label-space-px{
  padding-left: var(--sb-dropdown-menu-label-space-px);
  padding-right: var(--sb-dropdown-menu-label-space-px);
}

.rtg-px-menubar-item-space-px{
  padding-left: var(--sb-menubar-item-space-px);
  padding-right: var(--sb-menubar-item-space-px);
}

.rtg-px-menubar-label-space-px{
  padding-left: var(--sb-menubar-label-space-px);
  padding-right: var(--sb-menubar-label-space-px);
}

.rtg-px-menubar-trigger-space-px{
  padding-left: var(--sb-menubar-trigger-space-px);
  padding-right: var(--sb-menubar-trigger-space-px);
}

.rtg-px-navigation-menu-link-space-px{
  padding-left: var(--sb-navigation-menu-link-space-px);
  padding-right: var(--sb-navigation-menu-link-space-px);
}

.rtg-px-navigation-menu-list-space-px{
  padding-left: var(--sb-navigation-menu-list-space-px);
  padding-right: var(--sb-navigation-menu-list-space-px);
}

.rtg-px-pagination-next-space-px{
  padding-left: var(--sb-pagination-next-space-px);
  padding-right: var(--sb-pagination-next-space-px);
}

.rtg-px-pagination-previous-space-px{
  padding-left: var(--sb-pagination-previous-space-px);
  padding-right: var(--sb-pagination-previous-space-px);
}

.rtg-px-select-label-space-px{
  padding-left: var(--sb-select-label-space-px);
  padding-right: var(--sb-select-label-space-px);
}

.rtg-px-select-trigger-space-px{
  padding-left: var(--sb-select-trigger-space-px);
  padding-right: var(--sb-select-trigger-space-px);
}

.rtg-px-table-body-cell-space-px{
  padding-left: var(--sb-table-body-cell-space-px);
  padding-right: var(--sb-table-body-cell-space-px);
}

.rtg-px-table-footer-cell-space-px{
  padding-left: var(--sb-table-footer-cell-space-px);
  padding-right: var(--sb-table-footer-cell-space-px);
}

.rtg-px-table-head-cell-space-px{
  padding-left: var(--sb-table-head-cell-space-px);
  padding-right: var(--sb-table-head-cell-space-px);
}

.rtg-px-table-preview-space-px{
  padding-left: var(--sb-table-preview-space-px);
  padding-right: var(--sb-table-preview-space-px);
}

.rtg-px-toast-action-space-px{
  padding-left: var(--sb-toast-action-space-px);
  padding-right: var(--sb-toast-action-space-px);
}

.rtg-px-toast-viewport-item-space-px{
  padding-left: var(--sb-toast-viewport-item-space-px);
  padding-right: var(--sb-toast-viewport-item-space-px);
}

.rtg-px-toast-viewport-root-space-px{
  padding-left: var(--sb-toast-viewport-root-space-px);
  padding-right: var(--sb-toast-viewport-root-space-px);
}

.rtg-px-toggle-group-item-space-px-lg{
  padding-left: var(--sb-toggle-group-item-space-px-lg);
  padding-right: var(--sb-toggle-group-item-space-px-lg);
}

.rtg-px-toggle-group-item-space-px-md{
  padding-left: var(--sb-toggle-group-item-space-px-md);
  padding-right: var(--sb-toggle-group-item-space-px-md);
}

.rtg-px-toggle-group-item-space-px-sm{
  padding-left: var(--sb-toggle-group-item-space-px-sm);
  padding-right: var(--sb-toggle-group-item-space-px-sm);
}

.rtg-px-toggle-space-px-lg{
  padding-left: var(--sb-toggle-space-px-lg);
  padding-right: var(--sb-toggle-space-px-lg);
}

.rtg-px-toggle-space-px-md{
  padding-left: var(--sb-toggle-space-px-md);
  padding-right: var(--sb-toggle-space-px-md);
}

.rtg-px-toggle-space-px-sm{
  padding-left: var(--sb-toggle-space-px-sm);
  padding-right: var(--sb-toggle-space-px-sm);
}

.rtg-py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.rtg-py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.rtg-py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.rtg-py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.rtg-py-accordion-trigger-space-py{
  padding-top: var(--sb-accordion-trigger-space-py);
  padding-bottom: var(--sb-accordion-trigger-space-py);
}

.rtg-py-button-space-py-default{
  padding-top: var(--sb-ref-space-2);
  padding-bottom: var(--sb-ref-space-2);
}

.rtg-py-carousel-button-space-py{
  padding-top: var(--sb-carousel-button-space-py);
  padding-bottom: var(--sb-carousel-button-space-py);
}

.rtg-py-carousel-slide-space-py{
  padding-top: var(--sb-carousel-slide-space-py);
  padding-bottom: var(--sb-carousel-slide-space-py);
}

.rtg-py-combo-box-empty-space-py{
  padding-top: var(--sb-combo-box-empty-space-py);
  padding-bottom: var(--sb-combo-box-empty-space-py);
}

.rtg-py-combo-box-group-space-py{
  padding-top: var(--sb-combo-box-group-space-py);
  padding-bottom: var(--sb-combo-box-group-space-py);
}

.rtg-py-combo-box-input-space-py{
  padding-top: var(--sb-combo-box-input-space-py);
  padding-bottom: var(--sb-combo-box-input-space-py);
}

.rtg-py-combo-box-item-space-py{
  padding-top: var(--sb-combo-box-item-space-py);
  padding-bottom: var(--sb-combo-box-item-space-py);
}

.rtg-py-combo-box-trigger-space-py{
  padding-top: var(--sb-combo-box-trigger-space-py);
  padding-bottom: var(--sb-combo-box-trigger-space-py);
}

.rtg-py-command-empty-space-py{
  padding-top: var(--sb-command-empty-space-py);
  padding-bottom: var(--sb-command-empty-space-py);
}

.rtg-py-command-heading-space-py{
  padding-top: var(--sb-command-heading-space-py);
  padding-bottom: var(--sb-command-heading-space-py);
}

.rtg-py-command-input-space-py{
  padding-top: var(--sb-command-input-space-py);
  padding-bottom: var(--sb-command-input-space-py);
}

.rtg-py-command-item-space-py{
  padding-top: var(--sb-command-item-space-py);
  padding-bottom: var(--sb-command-item-space-py);
}

.rtg-py-context-menu-checkbox-item-space-py{
  padding-top: var(--sb-context-menu-checkbox-item-space-py);
  padding-bottom: var(--sb-context-menu-checkbox-item-space-py);
}

.rtg-py-context-menu-item-space-py{
  padding-top: var(--sb-context-menu-item-space-py);
  padding-bottom: var(--sb-context-menu-item-space-py);
}

.rtg-py-context-menu-label-space-py{
  padding-top: var(--sb-context-menu-label-space-py);
  padding-bottom: var(--sb-context-menu-label-space-py);
}

.rtg-py-context-menu-radio-item-space-py{
  padding-top: var(--sb-context-menu-radio-item-space-py);
  padding-bottom: var(--sb-context-menu-radio-item-space-py);
}

.rtg-py-dropdown-menu-checkbox-item-space-py{
  padding-top: var(--sb-dropdown-menu-checkbox-item-space-py);
  padding-bottom: var(--sb-dropdown-menu-checkbox-item-space-py);
}

.rtg-py-dropdown-menu-item-space-py{
  padding-top: var(--sb-dropdown-menu-item-space-py);
  padding-bottom: var(--sb-dropdown-menu-item-space-py);
}

.rtg-py-dropdown-menu-label-space-py{
  padding-top: var(--sb-dropdown-menu-label-space-py);
  padding-bottom: var(--sb-dropdown-menu-label-space-py);
}

.rtg-py-dropdown-menu-radio-item-space-py{
  padding-top: var(--sb-dropdown-menu-radio-item-space-py);
  padding-bottom: var(--sb-dropdown-menu-radio-item-space-py);
}

.rtg-py-menubar-checkbox-item-space-py{
  padding-top: var(--sb-menubar-checkbox-item-space-py);
  padding-bottom: var(--sb-menubar-checkbox-item-space-py);
}

.rtg-py-menubar-item-space-py{
  padding-top: var(--sb-menubar-item-space-py);
  padding-bottom: var(--sb-menubar-item-space-py);
}

.rtg-py-menubar-label-space-py{
  padding-top: var(--sb-menubar-label-space-py);
  padding-bottom: var(--sb-menubar-label-space-py);
}

.rtg-py-menubar-radio-item-space-py{
  padding-top: var(--sb-menubar-radio-item-space-py);
  padding-bottom: var(--sb-menubar-radio-item-space-py);
}

.rtg-py-menubar-trigger-space-py{
  padding-top: var(--sb-menubar-trigger-space-py);
  padding-bottom: var(--sb-menubar-trigger-space-py);
}

.rtg-py-navigation-menu-link-space-py{
  padding-top: var(--sb-navigation-menu-link-space-py);
  padding-bottom: var(--sb-navigation-menu-link-space-py);
}

.rtg-py-navigation-menu-list-space-py{
  padding-top: var(--sb-navigation-menu-list-space-py);
  padding-bottom: var(--sb-navigation-menu-list-space-py);
}

.rtg-py-select-item-space-py{
  padding-top: var(--sb-select-item-space-py);
  padding-bottom: var(--sb-select-item-space-py);
}

.rtg-py-select-label-space-py{
  padding-top: var(--sb-select-label-space-py);
  padding-bottom: var(--sb-select-label-space-py);
}

.rtg-py-select-trigger-space-py{
  padding-top: var(--sb-select-trigger-space-py);
  padding-bottom: var(--sb-select-trigger-space-py);
}

.rtg-py-table-body-cell-space-py{
  padding-top: var(--sb-table-body-cell-space-py);
  padding-bottom: var(--sb-table-body-cell-space-py);
}

.rtg-py-table-footer-cell-space-py{
  padding-top: var(--sb-table-footer-cell-space-py);
  padding-bottom: var(--sb-table-footer-cell-space-py);
}

.rtg-py-table-preview-space-py{
  padding-top: var(--sb-table-preview-space-py);
  padding-bottom: var(--sb-table-preview-space-py);
}

.rtg-py-toast-action-space-py{
  padding-top: var(--sb-toast-action-space-py);
  padding-bottom: var(--sb-toast-action-space-py);
}

.rtg-py-toast-viewport-item-space-py{
  padding-top: var(--sb-toast-viewport-item-space-py);
  padding-bottom: var(--sb-toast-viewport-item-space-py);
}

.rtg-py-toast-viewport-root-space-py{
  padding-top: var(--sb-toast-viewport-root-space-py);
  padding-bottom: var(--sb-toast-viewport-root-space-py);
}

.rtg-pb-0{
  padding-bottom: 0;
}

.rtg-pl-6{
  padding-left: 1.5rem;
}

.rtg-pl-8{
  padding-left: 2rem;
}

.rtg-pl-context-menu-checkbox-item-space-pl{
  padding-left: var(--sb-context-menu-checkbox-item-space-pl);
}

.rtg-pl-context-menu-radio-item-space-pl{
  padding-left: var(--sb-context-menu-radio-item-space-pl);
}

.rtg-pl-dropdown-menu-checkbox-item-space-pl{
  padding-left: var(--sb-dropdown-menu-checkbox-item-space-pl);
}

.rtg-pl-dropdown-menu-radio-item-space-pl{
  padding-left: var(--sb-dropdown-menu-radio-item-space-pl);
}

.rtg-pl-menubar-checkbox-item-space-pl{
  padding-left: var(--sb-menubar-checkbox-item-space-pl);
}

.rtg-pl-menubar-radio-item-space-pl{
  padding-left: var(--sb-menubar-radio-item-space-pl);
}

.rtg-pl-select-item-space-pl{
  padding-left: var(--sb-select-item-space-pl);
}

.rtg-pr-context-menu-checkbox-item-space-pr{
  padding-right: var(--sb-context-menu-checkbox-item-space-pr);
}

.rtg-pr-context-menu-radio-item-space-pr{
  padding-right: var(--sb-context-menu-radio-item-space-pr);
}

.rtg-pr-dropdown-menu-checkbox-item-space-pr{
  padding-right: var(--sb-dropdown-menu-checkbox-item-space-pr);
}

.rtg-pr-dropdown-menu-radio-item-space-pr{
  padding-right: var(--sb-dropdown-menu-radio-item-space-pr);
}

.rtg-pr-menubar-checkbox-item-space-pr{
  padding-right: var(--sb-menubar-checkbox-item-space-pr);
}

.rtg-pr-menubar-radio-item-space-pr{
  padding-right: var(--sb-menubar-radio-item-space-pr);
}

.rtg-pr-select-item-space-pr{
  padding-right: var(--sb-select-item-space-pr);
}

.rtg-pt-2{
  padding-top: 0.5rem;
}

.rtg-pt-4{
  padding-top: 1rem;
}

.rtg-text-left{
  text-align: left;
}

.rtg-text-center{
  text-align: center;
}

.rtg-text-right{
  text-align: right;
}

.rtg-align-middle{
  vertical-align: middle;
}

.rtg-font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.rtg-text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.rtg-text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.rtg-text-7xl{
  font-size: 4.5rem;
  line-height: 1;
}

.rtg-text-\[0\.70rem\]{
  font-size: 0.70rem;
}

.rtg-text-accordion-content-font{
  font-size: var(--sb-accordion-content-font-size);
  line-height: var(--sb-accordion-content-font-line-height);
}

.rtg-text-accordion-trigger-font{
  font-size: var(--sb-accordion-trigger-font-size);
  line-height: var(--sb-accordion-trigger-font-line-height);
}

.rtg-text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.rtg-text-breadcrumb-list-font{
  font-size: var(--sb-breadcrumb-list-font-size);
  line-height: var(--breadcrumb-list-font-line-height);
}

.rtg-text-button-font-size{
  font-size: var(--rtg-button-font-size-default);
  line-height: var(--rtg-button-font-line-height-default);
}

.rtg-text-calendar-caption-label-font{
  font-size: var(--sb-calendar-caption-label-font-size);
  line-height: var(--sb-calendar-caption-label-font-line-height);
}

.rtg-text-calendar-day-button-font{
  font-size: var(--sb-calendar-day-button-font-size);
  line-height: var(--sb-calendar-day-button-font-line-height);
}

.rtg-text-calendar-weekday-font{
  font-size: var(--sb-calendar-weekday-font-size);
  line-height: var(--sb-calendar-weekday-font-line-height);
}

.rtg-text-combo-box-empty-font{
  font-size: var(--sb-combo-box-empty-font-size);
}

.rtg-text-combo-box-input-font{
  font-size: var(--sb-combo-box-input-font-size);
}

.rtg-text-combo-box-trigger-font{
  font-size: var(--sb-combo-box-trigger-font-size);
}

.rtg-text-command-empty-font{
  font-size: var(--sb-command-empty-font-size);
  line-height: var(--sb-command-empty-font-line-height);
}

.rtg-text-command-heading-font{
  font-size: var(--sb-command-heading-font-size);
  line-height: var(--sb-command-heading-font-line-height);
}

.rtg-text-command-input-font{
  font-size: var(--sb-command-input-font-size);
  line-height: var(--sb-command-input-font-line-height);
}

.rtg-text-command-item-font{
  font-size: var(--sb-command-item-font-size);
  line-height: var(--sb-command-item-font-line-height);
}

.rtg-text-command-shortcut-font{
  font-size: var(--sb-command-shortcut-font-size);
  line-height: var(--sb-command-shortcut-font-line-height);
  letter-spacing: var(--sb-command-shortcut-font-letter-spacing);
}

.rtg-text-context-menu-checkbox-item-font{
  font-size: var(--sb-context-menu-checkbox-item-font-size);
  line-height: var(--sb-context-menu-checkbox-item-font-line-height);
}

.rtg-text-context-menu-item-font{
  font-size: var(--sb-context-menu-item-font-size);
  line-height: var(--sb-context-menu-item-font-line-height);
}

.rtg-text-context-menu-label-font{
  font-size: var(--sb-context-menu-label-font-size);
  line-height: var(--sb-context-menu-label-font-line-height);
}

.rtg-text-context-menu-radio-item-font{
  font-size: var(--sb-context-menu-radio-item-font-size);
  line-height: var(--sb-context-menu-radio-item-font-line-height);
}

.rtg-text-context-menu-shortcut-font{
  font-size: var(--sb-context-menu-shortcut-font-size);
  line-height: var(--sb-context-menu-shortcut-font-line-height);
  letter-spacing: var(--sb-context-menu-shortcut-font-letter-spacing);
}

.rtg-text-dialog-description-font{
  font-size: var(--sb-dialog-description-font-size);
  line-height: var(--sb-dialog-description-font-line-height);
}

.rtg-text-dialog-title-font{
  font-size: var(--sb-dialog-title-font-size);
  line-height: var(--sb-dialog-title-font-line-height);
}

.rtg-text-drawer-description-font{
  font-size: var(--sb-drawer-description-font-size);
  line-height: var(--sb-drawer-description-font-line-height);
}

.rtg-text-drawer-title-font{
  font-size: var(--sb-drawer-title-font-size);
  line-height: var(--sb-drawer-title-font-line-height);
}

.rtg-text-dropdown-menu-checkbox-item-font{
  font-size: var(--sb-dropdown-menu-checkbox-item-font-size);
  line-height: var(--sb-dropdown-menu-checkbox-item-font-line-height);
}

.rtg-text-dropdown-menu-item-font{
  font-size: var(--sb-dropdown-menu-item-font-size);
  line-height: var(--sb-dropdown-menu-item-font-line-height);
}

.rtg-text-dropdown-menu-label-font{
  font-size: var(--sb-dropdown-menu-label-font-size);
  line-height: var(--sb-dropdown-menu-label-font-line-height);
}

.rtg-text-dropdown-menu-radio-item-font{
  font-size: var(--sb-dropdown-menu-radio-item-font-size);
  line-height: var(--sb-dropdown-menu-radio-item-font-line-height);
}

.rtg-text-dropdown-menu-shortcut-font{
  font-size: var(--sb-dropdown-menu-shortcut-font-size);
  line-height: var(--sb-dropdown-menu-shortcut-font-line-height);
  letter-spacing: var(--sb-dropdown-menu-shortcut-font-letter-spacing);
}

.rtg-text-form-description-font{
  font-size: var(--sb-form-description-font-size);
  line-height: var(--sb-form-description-font-line-height);
  letter-spacing: var(--sb-form-description-font-letter-spacing);
}

.rtg-text-form-label-font{
  font-size: var(--sb-form-label-font-size);
  line-height: var(--sb-table-caption-font-line-height);
}

.rtg-text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.rtg-text-menubar-checkbox-item-font{
  font-size: var(--sb-menubar-checkbox-item-font-size);
  line-height: var(--sb-menubar-checkbox-item-font-line-height);
}

.rtg-text-menubar-item-font{
  font-size: var(--sb-menubar-item-font-size);
  line-height: var(--sb-menubar-item-font-line-height);
}

.rtg-text-menubar-label-font{
  font-size: var(--sb-menubar-label-font-size);
  line-height: var(--sb-menubar-label-font-line-height);
}

.rtg-text-menubar-radio-item-font{
  font-size: var(--sb-menubar-radio-item-font-size);
  line-height: var(--sb-menubar-radio-item-font-line-height);
}

.rtg-text-menubar-shortcut-font{
  font-size: var(--sb-menubar-shortcut-font-size);
  line-height: var(--sb-menubar-shortcut-font-line-height);
  letter-spacing: var(--sb-menubar-shortcut-font-letter-spacing);
}

.rtg-text-menubar-trigger-font{
  font-size: var(--sb-menubar-trigger-font-size);
  line-height: var(--sb-menubar-trigger-font-line-height);
}

.rtg-text-select-item-font{
  font-size: var(--sb-select-item-font-size);
  line-height: var(--sb-select-item-font-line-height);
}

.rtg-text-select-label-font{
  font-size: var(--sb-select-label-font-size);
  line-height: var(--sb-select-label-font-line-height);
}

.rtg-text-select-trigger-font{
  font-size: var(--sb-select-trigger-font-size);
  line-height: var(--sb-select-trigger-font-line-height);
}

.rtg-text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.rtg-text-table-caption-font{
  font-size: var(--sb-table-caption-font-size);
  line-height: var(--sb-table-caption-font-line-height);
}

.rtg-text-table-font{
  font-size: var(--sb-table-font-size);
  line-height: var(--sb-table-font-line-height);
  letter-spacing: var(--sb-table-font-letter-spacing);
}

.rtg-text-toast-action-font{
  font-size: var(--sb-toast-action-font-size);
  line-height: var(--sb-toast-action-font-line-height);
  letter-spacing: var(--sb-toast-action-font-letter-spacing);
}

.rtg-text-toast-description-font{
  font-size: var(--sb-toast-description-font-size);
  line-height: var(--sb-toast-description-font-line-height);
  letter-spacing: var(--sb-toast-description-font-letter-spacing);
}

.rtg-text-toast-title-font{
  font-size: var(--sb-toast-title-font-size);
  line-height: var(--sb-toast-title-font-line-height);
  letter-spacing: var(--sb-toast-title-font-letter-spacing);
}

.rtg-text-toggle-font{
  font-size: var(--sb-toggle-font-size);
  line-height: var(--sb-toggle-font-line-height);
  letter-spacing: var(--sb-toggle-font-letter-spacing);
}

.rtg-text-toggle-group-item-font{
  font-size: var(--sb-toggle-group-item-font-size);
  line-height: var(--sb-toggle-group-item-font-line-height);
  letter-spacing: var(--sb-toggle-group-item-font-letter-spacing);
}

.rtg-text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.rtg-font-accordion-content-font-weight{
  font-weight: var(--sb-accordion-content-font-weight);
}

.rtg-font-accordion-trigger-font-weight{
  font-weight: var(--sb-accordion-trigger-font-weight);
}

.rtg-font-bold{
  font-weight: 700;
}

.rtg-font-breadcrumb-list-font-weight{
  font-weight: var(--sb-breadcrumb-list-font-weight);
}

.rtg-font-breadcrumb-page-font-weight{
  font-weight: var(--sb-breadcrumb-page-font-weight);
}

.rtg-font-button-font-weight{
  font-weight: var(--rtg-button-font-weight);
}

.rtg-font-calendar-caption-label-font-weight{
  font-weight: var(--sb-calendar-caption-label-font-weight);
}

.rtg-font-calendar-day-button-font-weight{
  font-weight: var(--sb-calendar-day-button-font-weight);
}

.rtg-font-calendar-weekday-font-weight{
  font-weight: var(--sb-calendar-weekday-font-weight);
}

.rtg-font-command-heading-font-weight{
  font-weight: var(--sb-command-heading-font-weight);
}

.rtg-font-context-menu-label-font-weight{
  font-weight: var(--sb-context-menu-label-font-weight);
}

.rtg-font-date-picker-trigger-button-font-weight{
  font-weight: var(--sb-date-picker-trigger-button-font-weight);
}

.rtg-font-dialog-description-font-weight{
  font-weight: var(--sb-dialog-description-font-weight);
}

.rtg-font-dialog-title-font-weight{
  font-weight: var(--sb-dialog-title-font-weight);
}

.rtg-font-drawer-description-font-weight{
  font-weight: var(--sb-drawer-description-font-weight);
}

.rtg-font-drawer-title-font-weight{
  font-weight: var(--sb-drawer-title-font-weight);
}

.rtg-font-dropdown-menu-label-font-weight{
  font-weight: var(--sb-dropdown-menu-label-font-weight);
}

.rtg-font-form-label-font-weight{
  font-weight: var(--sb-form-label-font-weight);
}

.rtg-font-medium{
  font-weight: 500;
}

.rtg-font-menubar-label-font-weight{
  font-weight: var(--sb-menubar-label-font-weight);
}

.rtg-font-menubar-trigger-font-weight{
  font-weight: var(--sb-menubar-trigger-font-weight);
}

.rtg-font-normal{
  font-weight: 400;
}

.rtg-font-semibold{
  font-weight: 600;
}

.rtg-font-table-footer-font-weight{
  font-weight: var(--sb-table-footer-font-weight);
}

.rtg-font-table-head-cell-font-weight{
  font-weight: var(--sb-table-head-cell-font-weight);
}

.rtg-font-toast-action-font-weight{
  font-weight: var(--sb-toast-action-font-weight);
}

.rtg-font-toast-title-font-weight{
  font-weight: var(--sb-toast-title-font-weight);
}

.rtg-font-toggle-font-weight{
  font-weight: var(--sb-toggle-font-weight);
}

.rtg-font-toggle-group-item-font-weight{
  font-weight: var(--sb-toggle-group-item-font-weight);
}

.rtg-uppercase{
  text-transform: uppercase;
}

.rtg-leading-none{
  line-height: 1;
}

.rtg-leading-snug{
  line-height: 1.375;
}

.rtg-leading-tight{
  line-height: 1.25;
}

.rtg-tracking-tight{
  letter-spacing: -0.025em;
}

.rtg-tracking-tighter{
  letter-spacing: -0.05em;
}

.rtg-text-accordion-trigger-icon-color-text{
  color: hsl(var(--sb-accordion-trigger-icon-color-text));
}

.rtg-text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.rtg-text-breadcrumb-list-color-text{
  color: hsl(var(--sb-breadcrumb-list-color-text));
}

.rtg-text-breadcrumb-page-color-text{
  color: hsl(var(--sb-breadcrumb-page-color-text));
}

.rtg-text-button-default-color-text{
  color: var(--rtg-button-default-color-text);
}

.rtg-text-button-destructive-color-text{
  color: var(--rtg-button-destructive-color-text);
}

.rtg-text-button-link-color-text{
  color: var(--rtg-button-link-color-text);
}

.rtg-text-button-secondary-color-text{
  color: var(--rtg-button-secondary-color-text);
}

.rtg-text-calendar-day-button-outside-color-text{
  color: hsl(var(--sb-calendar-day-button-outside-color-text));
}

.rtg-text-calendar-day-button-today-color-text{
  color: hsl(var(--sb-calendar-day-button-today-color-text));
}

.rtg-text-calendar-weekday-color-text{
  color: hsl(var(--sb-calendar-weekday-color-text));
}

.rtg-text-carousel-button-color-text{
  color: hsl(var(--sb-carousel-button-color-text));
}

.rtg-text-combo-box-input-color-text{
  color: hsl(var(--sb-combo-boxinput-color-text));
}

.rtg-text-command-color-text{
  color: hsl(var(--sb-command-color-text));
}

.rtg-text-command-group-color-text{
  color: hsl(var(--sb-command-group-color-text));
}

.rtg-text-command-heading-color-text{
  color: hsl(var(--sb-command-heading-color-text));
}

.rtg-text-command-item-icon-color-text{
  color: hsl(var(--sb-command-item-icon-color-text));
}

.rtg-text-command-shortcut-color-text{
  color: hsl(var(--sb-command-shortcut-color-text));
}

.rtg-text-context-menu-content-color-text{
  color: hsl(var(--sb-context-menu-content-color-text));
}

.rtg-text-context-menu-item-icon-color-text{
  color: hsl(var(--sb-context-menu-item-icon-color-text));
}

.rtg-text-context-menu-shortcut-color-text{
  color: hsl(var(--sb-context-menu-shortcut-color-text));
}

.rtg-text-destructive{
  color: hsl(var(--destructive));
}

.rtg-text-dialog-description-color-text{
  color: hsl(var(--sb-dialog-description-color-text));
}

.rtg-text-drawer-description-color-text{
  color: hsl(var(--sb-drawer-description-color-text));
}

.rtg-text-drawer-title-color-text{
  color: hsl(var(--sb-drawer-title-color-text));
}

.rtg-text-dropdown-menu-content-color-text{
  color: hsl(var(--sb-dropdown-menu-content-color-text));
}

.rtg-text-dropdown-menu-item-icon-color-text{
  color: hsl(var(--sb-dropdown-menu-item-icon-color-text));
}

.rtg-text-dropdown-menu-shortcut-color-text{
  color: hsl(var(--sb-dropdown-menu-shortcut-color-text));
}

.rtg-text-form-description-color-text{
  color: hsl(var(--sb-form-description-color-text));
}

.rtg-text-form-label-color-text-error{
  color: hsl(var(--sb-form-label-color-text-error));
}

.rtg-text-form-message-color-text{
  color: hsl(var(--sb-form-message-color-text));
}

.rtg-text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.rtg-text-hover-card-content-color-text{
  color: hsl(var(--sb-hover-card-content-color-text));
}

.rtg-text-menubar-content-color-text{
  color: hsl(var(--sb-menubar-content-color-text));
}

.rtg-text-menubar-item-icon-color-text{
  color: hsl(var(--sb-menubar-item-icon-color-text));
}

.rtg-text-menubar-shortcut-color-text{
  color: hsl(var(--sb-menubar-shortcut-color-text));
}

.rtg-text-muted-foreground{
  color: hsl(var(--muted-foreground));
}

.rtg-text-popover-content-color-text{
  color: hsl(var(--sb-popover-content-color-text));
}

.rtg-text-primary{
  color: hsl(var(--primary));
}

.rtg-text-primary-foreground{
  color: hsl(var(--primary-foreground));
}

.rtg-text-purple-600{
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.rtg-text-select-content-color-text{
  color: hsl(var(--sb-select-content-color-text));
}

.rtg-text-select-item-icon-color-text{
  color: hsl(var(--sb-select-item-icon-color-text));
}

.rtg-text-select-label-color-text{
  color: hsl(var(--sb-select-label-color-text));
}

.rtg-text-select-trigger-icon-color-text{
  color: hsl(var(--sb-select-trigger-icon-color-text));
}

.rtg-text-table-caption-color-text{
  color: hsl(var(--sb-table-caption-color-text));
}

.rtg-text-table-head-cell-color-text{
  color: hsl(var(--sb-table-head-cell-color-text));
}

.rtg-text-toast-action-color-text{
  color: hsl(var(--sb-toast-action-color-text));
}

.rtg-text-toast-action-destructive-color-text{
  color: hsl(var(--sb-toast-action-destructive-color-text));
}

.rtg-text-toast-viewport-default-color-text{
  color: hsl(var(--sb-toast-viewport-default-color-text));
}

.rtg-text-toast-viewport-destructive-color-text{
  color: hsl(var(--sb-toast-viewport-destructive-color-text));
}

.rtg-no-underline{
  text-decoration-line: none;
}

.rtg-underline-offset-4{
  text-underline-offset: 4px;
}

.rtg-opacity-0{
  opacity: 0;
}

.rtg-opacity-100{
  opacity: 1;
}

.rtg-opacity-40{
  opacity: 0.4;
}

.rtg-opacity-70{
  opacity: 0.7;
}

.rtg-opacity-command-input-icon-opacity{
  opacity: var(--sb-command-input-icon-opacity);
}

.rtg-opacity-command-item-opacity-disabled{
  opacity: var(--sb-command-item-opacity-disabled);
}

.rtg-opacity-menubar-item-opacity-disabled{
  opacity: var(--sb-menubar-item-opacity-disabled);
}

.rtg-opacity-select-trigger-icon-opacity{
  opacity: var(--sb-select-trigger-icon-opacity);
}

.rtg-opacity-select-trigger-opacity-disabled{
  opacity: var(--sb-select-trigger-opacity-disabled);
}

.rtg-opacity-switch-opacity-disabled{
  opacity: var(--sb-switch-opacity-disabled);
}

.rtg-opacity-toast-description-opacity{
  opacity: var(--sb-toast-description-opacity);
}

.rtg-shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-combo-box-group-shadow{
  --tw-shadow: var(--sb-combo-box-group-shadow);
  --tw-shadow-colored: var(--sb-combo-box-group-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-context-menu-content-shadow{
  --tw-shadow: var(--sb-context-menu-content-shadow);
  --tw-shadow-colored: var(--sb-context-menu-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-dialog-content-shadow{
  --tw-shadow: var(--sb-dialog-content-shadow);
  --tw-shadow-colored: var(--sb-dialog-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-dropdown-menu-content-shadow{
  --tw-shadow: var(--sb-dropdown-menu-content-shadow);
  --tw-shadow-colored: var(--sb-dropdown-menu-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-hover-card-content-shadow{
  --tw-shadow: var(--sb-hover-card-content-shadow);
  --tw-shadow-colored: var(--sb-hover-card-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-menubar-content-shadow{
  --tw-shadow: var(--sb-menubar-content-shadow);
  --tw-shadow-colored: var(--sb-menubar-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-popover-content-shadow{
  --tw-shadow: var(--sb-popover-content-shadow);
  --tw-shadow-colored: var(--sb-popover-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-select-content-shadow{
  --tw-shadow: var(--sb-select-content-shadow);
  --tw-shadow-colored: var(--sb-select-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-toast-viewport-item-shadow{
  --tw-shadow: var(--sb-toast-viewport-item-shadow);
  --tw-shadow-colored: var(--sb-toast-viewport-item-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.rtg-ring-0{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.rtg-ring-offset-background{
  --tw-ring-offset-color: hsl(var(--background));
}

.rtg-ring-offset-dialog-close-color-ring-offset{
  --tw-ring-offset-color: hsl(var(--sb-dialog-close-color-ring-offset));
}

.rtg-grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.rtg-transition-\[color\,box-shadow\]{
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rtg-transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rtg-transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rtg-transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rtg-transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rtg-duration-200{
  transition-duration: 200ms;
}

.rtg-duration-carousel-motion-duration{
  transition-duration: var(--sb-carousel-motion-duration);
}

.rtg-duration-combo-box-group-motion-duration{
  transition-duration: var(--sb-combo-box-group-motion-duration);
}

.rtg-duration-navigation-menu-item-icon-motion-duration{
  transition-duration: var(--sb-navigation-menu-item-icon-motion-duration);
}

.rtg-ease-carousel-motion-fn{
  transition-timing-function: var(--sb-carousel-motion-fn);
}

.rtg-ease-combo-box-group-motion-fn{
  transition-timing-function: var(--sb-combo-box-group-motion-fn);
}

@keyframes enter{
  from{
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit{
  to{
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

.rtg-animate-in{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.rtg-animate-out{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.rtg-fade-in-0{
  --tw-enter-opacity: 0;
}

.rtg-fade-out-0{
  --tw-exit-opacity: 0;
}

.rtg-zoom-in-95{
  --tw-enter-scale: .95;
}

.rtg-zoom-out-95{
  --tw-exit-scale: .95;
}

.rtg-slide-in-from-top-2{
  --tw-enter-translate-y: -0.5rem;
}

.rtg-duration-200{
  animation-duration: 200ms;
}

.rtg-duration-carousel-motion-duration{
  animation-duration: var(--sb-carousel-motion-duration);
}

.rtg-duration-combo-box-group-motion-duration{
  animation-duration: var(--sb-combo-box-group-motion-duration);
}

.rtg-duration-navigation-menu-item-icon-motion-duration{
  animation-duration: var(--sb-navigation-menu-item-icon-motion-duration);
}

.rtg-ease-carousel-motion-fn{
  animation-timing-function: var(--sb-carousel-motion-fn);
}

.rtg-ease-combo-box-group-motion-fn{
  animation-timing-function: var(--sb-combo-box-group-motion-fn);
}

.step {
    counter-increment: step;
  }

.step:before{
  position: absolute;
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 4px;
  border-color: hsl(var(--background));
  background-color: hsl(var(--muted));
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  margin-left: -50px;
  margin-top: -4px;
    content: counter(step);
    text-indent: -1px;
}

[data-theme='light'] {
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 9%;
  --background: 0 0% 100%;
  --border: 0 0% 90%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 4%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 85% 97%;
  --foreground: 0 0% 4%;
  --input: 0 0% 90%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 4%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --ring: 0 0% 64%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;
  --chart-1: 24 91% 48%;
  --chart-2: 173 82% 31%;
  --chart-3: 192 62% 24%;
  --chart-4: 45 97% 60%;
  --chart-5: 39 94% 53%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 4%;
  --sidebar-primary: 0 0% 9%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 96%;
  --sidebar-accent-foreground: 0 0% 9%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 0 0% 64%;
  --radius: 0.5rem;
  --custom-outline: 0 0% 64% / 50%;
  --success: 137 82% 30%;
  --divider: 0 0% 85%;
  --base-background: 0 0% 98%;
}

[data-theme='dark'] {
  --accent: 0 0% 25%;
  --accent-foreground: 0 0% 98%;
  --background: 0 0% 4%;
  --border: 0 0% 100% / 10%;
  --card: 0 0% 9%;
  --card-foreground: 0 0% 98%;
  --destructive: 0 91% 71%;
  --destructive-foreground: 0 85% 97%;
  --foreground: 0 0% 98%;
  --input: 0 0% 100% / 15%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 64%;
  --popover: 0 0% 15%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 90%;
  --primary-foreground: 0 0% 9%;
  --ring: 0 0% 45%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 98%;
  --chart-1: 226 72% 47%;
  --chart-2: 160 82% 41%;
  --chart-3: 39 94% 53%;
  --chart-4: 270 91% 66%;
  --chart-5: 351 93% 64%;
  --sidebar-background: 0 0% 9%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-primary: 226 72% 47%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 15%;
  --sidebar-accent-foreground: 0 0% 98%;
  --sidebar-border: 0 0% 100% / 10%;
  --sidebar-ring: 0 0% 32%;
  --radius: 0.5rem;
  --custom-outline: 0 0% 45% / 50%;
  --success: 133 33% 57%;
  --divider: 0 0% 42%;
  --base-background: 0 0% 4%
}

[data-theme='light'] .rtg-no-autofill-bg:-webkit-autofill {
  -webkit-text-fill-color: hsl(0 0% 4%) !important; /* light foreground */
}

[data-theme='dark'] .rtg-no-autofill-bg:-webkit-autofill {
  -webkit-text-fill-color: hsl(0 0% 98%) !important; /* dark foreground */
}

.rtg-no-autofill-bg:-webkit-autofill,
.rtg-no-autofill-bg:-webkit-autofill:hover,
.rtg-no-autofill-bg:-webkit-autofill:focus,
.rtg-no-autofill-bg:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out;
  transition: background-color 5000s ease-in-out;
}

@media (max-width: 640px) {
  .container{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* @layer components {
  input:-internal-autofill-selected,
  textarea:-internal-autofill-selected,
  select:-internal-autofill-selected {
    @apply text-inherit;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
  }
} */

.file\:rtg-border-0::file-selector-button{
  border-width: 0px;
}

.file\:rtg-bg-transparent::file-selector-button{
  background-color: transparent;
}

.file\:rtg-text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:rtg-font-medium::file-selector-button{
  font-weight: 500;
}

.file\:rtg-text-foreground::file-selector-button{
  color: hsl(var(--foreground));
}

.placeholder\:rtg-text-combo-box-input-color-text-placeholder::-moz-placeholder{
  color: hsl(var(--sb-combo-box-input-color-text-placeholder));
}

.placeholder\:rtg-text-combo-box-input-color-text-placeholder::placeholder{
  color: hsl(var(--sb-combo-box-input-color-text-placeholder));
}

.placeholder\:rtg-text-command-input-placeholder-color-text::-moz-placeholder{
  color: hsl(var(--sb-command-input-placeholder-color-text));
}

.placeholder\:rtg-text-command-input-placeholder-color-text::placeholder{
  color: hsl(var(--sb-command-input-placeholder-color-text));
}

.placeholder\:rtg-text-muted-foreground::-moz-placeholder{
  color: hsl(var(--muted-foreground));
}

.placeholder\:rtg-text-muted-foreground::placeholder{
  color: hsl(var(--muted-foreground));
}

.last\:rtg-border-b-0:last-child{
  border-bottom-width: 0px;
}

.hover\:rtg-bg-accent:hover{
  background-color: hsl(var(--accent));
}

.hover\:rtg-bg-button-default-color-bg-hover:hover{
  background-color: var(--rtg-button-default-color-bg-hover);
}

.hover\:rtg-bg-button-destructive-color-bg-hover:hover{
  background-color: var(--rtg-button-destructive-color-bg-hover);
}

.hover\:rtg-bg-button-ghost-color-bg-hover:hover{
  background-color: var(--rtg-button-ghost-color-bg-hover);
}

.hover\:rtg-bg-button-outline-color-bg-hover:hover{
  background-color: var(--rtg-button-outline-color-bg-hover);
}

.hover\:rtg-bg-button-secondary-color-bg-hover:hover{
  background-color: var(--rtg-button-secondary-color-bg-hover);
}

.hover\:rtg-bg-carousel-button-color-bg-hover:hover{
  background-color: hsl(var(--sb-carousel-button-color-bg-hover));
}

.hover\:rtg-bg-command-item-color-bg-hover:hover{
  background-color: hsl(var(--sb-command-item-color-bg-hover));
}

.hover\:rtg-bg-context-menu-item-color-bg-hover:hover{
  background-color: hsl(var(--sb-context-menu-item-color-bg-hover));
}

.hover\:rtg-bg-dropdown-menu-item-color-bg-hover:hover{
  background-color: hsl(var(--sb-dropdown-menu-item-color-bg-hover));
}

.hover\:rtg-bg-menubar-trigger-color-bg-active:hover{
  background-color: hsl(var(--sb-menubar-trigger-color-bg-active));
}

.hover\:rtg-bg-muted\/50:hover{
  background-color: hsl(var(--muted) / 0.5);
}

.hover\:rtg-bg-navigation-menu-item-color-bg-hover:hover{
  background-color: hsl(var(--sb-navigation-menu-item-color-bg-hover));
}

.hover\:rtg-bg-navigation-menu-link-color-bg-hover:hover{
  background-color: hsl(var(--sb-navigation-menu-link-color-bg-hover));
}

.hover\:rtg-bg-primary\/90:hover{
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:rtg-bg-select-item-color-bg-hover:hover{
  background-color: hsl(var(--sb-select-item-color-bg-hover));
}

.hover\:rtg-bg-select-trigger-color-bg-hover:hover{
  background-color: hsl(var(--sb-select-trigger-color-bg-hover));
}

.hover\:rtg-bg-table-body-row-color-bg-hover:hover{
  background-color: hsl(var(--sb-table-body-row-color-bg-hover));
}

.hover\:rtg-bg-table-footer-row-color-bg-hover:hover{
  background-color: hsl(var(--sb-table-footer-row-color-bg-hover));
}

.hover\:rtg-bg-table-head-row-color-bg-hover:hover{
  background-color: hsl(var(--sb-table-head-row-color-bg-hover));
}

.hover\:rtg-bg-toast-action-default-color-bg-hover:hover{
  background-color: hsl(var(--sb-toast-action-default-color-bg-hover));
}

.hover\:rtg-bg-toast-action-destructive-color-bg-hover:hover{
  background-color: hsl(var(--sb-toast-action-destructive-color-bg-hover));
}

.hover\:rtg-bg-toggle-default-color-bg-hover:hover{
  background-color: hsl(var(--sb-toggle-default-color-bg-hover));
}

.hover\:rtg-bg-toggle-group-item-default-color-bg-hover:hover{
  background-color: hsl(var(--sb-toggle-group-item-default-color-bg-hover));
}

.hover\:rtg-bg-toggle-group-item-outline-color-bg-hover:hover{
  background-color: hsl(var(--sb-toggle-group-item-outline-color-bg-hover));
}

.hover\:rtg-bg-toggle-outline-color-bg-hover:hover{
  background-color: hsl(var(--sb-toggle-outline-color-bg-hover));
}

.hover\:rtg-text-accent-foreground:hover{
  color: hsl(var(--accent-foreground));
}

.hover\:rtg-text-breadcrumb-link-color-text-hover:hover{
  color: hsl(var(--sb-breadcrumb-link-color-text-hover));
}

.hover\:rtg-text-button-ghost-color-text-hover:hover{
  color: var(--rtg-button-ghost-color-text-hover);
}

.hover\:rtg-text-button-outline-color-text-hover:hover{
  color: var(--rtg-button-outline-color-text-hover);
}

.hover\:rtg-text-command-item-color-text-hover:hover{
  color: hsl(var(--sb-command-item-color-text-hover));
}

.hover\:rtg-text-context-menu-item-color-text-hover:hover{
  color: hsl(var(--sb-context-menu-item-color-text-hover));
}

.hover\:rtg-text-dropdown-menu-item-color-text-hover:hover{
  color: hsl(var(--sb-dropdown-menu-item-color-text-hover));
}

.hover\:rtg-text-menubar-trigger-color-text-active:hover{
  color: hsl(var(--sb-menubar-trigger-color-text-active));
}

.hover\:rtg-text-select-item-color-text-hover:hover{
  color: hsl(var(--sb-select-item-color-text-hover));
}

.hover\:rtg-text-toggle-default-color-text-hover:hover{
  color: hsl(var(--sb-toggle-default-color-text-hover));
}

.hover\:rtg-text-toggle-group-item-default-color-text-hover:hover{
  color: hsl(var(--sb-toggle-group-item-default-color-text-hover));
}

.hover\:rtg-text-toggle-group-item-outline-color-text-hover:hover{
  color: hsl(var(--sb-toggle-group-item-outline-color-text-hover));
}

.hover\:rtg-text-toggle-outline-color-text-hover:hover{
  color: hsl(var(--sb-toggle-outline-color-text-hover));
}

.hover\:rtg-underline:hover{
  text-decoration-line: underline;
}

.focus\:rtg-bg-combo-box-item-color-bg-hover:focus{
  background-color: hsl(var(--sb-combo-box-item-color-bg-hover));
}

.focus\:rtg-bg-context-menu-item-color-bg-focus:focus{
  background-color: hsl(var(--sb-context-menu-item-color-bg-focus));
}

.focus\:rtg-bg-dropdown-menu-item-color-bg-focus:focus{
  background-color: hsl(var(--sb-dropdown-menu-item-color-bg-focus));
}

.focus\:rtg-bg-menubar-trigger-color-bg-focus:focus{
  background-color: hsl(var(--sb-menubar-trigger-color-bg-focus));
}

.focus\:rtg-bg-select-item-color-bg-focus:focus{
  background-color: hsl(var(--sb-select-item-color-bg-focus));
}

.focus\:rtg-text-context-menu-item-color-text-focus:focus{
  color: hsl(var(--sb-context-menu-item-color-text-focus));
}

.focus\:rtg-text-dropdown-menu-item-color-text-focus:focus{
  color: hsl(var(--sb-dropdown-menu-item-color-text-focus));
}

.focus\:rtg-text-menubar-trigger-color-text-focus:focus{
  color: hsl(var(--sb-menubar-trigger-color-text-focus));
}

.focus\:rtg-text-select-item-color-text-focus:focus{
  color: hsl(var(--sb-select-item-color-text-focus));
}

.focus\:rtg-outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:rtg-ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:rtg-ring-combo-box-trigger-width-ring-focus:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-combo-box-trigger-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:rtg-ring-dialog-close-width-ring-focus:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-dialog-close-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:rtg-ring-toast-action-width-ring-focus:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-toast-action-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:rtg-ring-combo-box-trigger-color-ring-focus:focus{
  --tw-ring-color: hsl(var(--sb-combo-box-trigger-color-ring-focus));
}

.focus\:rtg-ring-dialog-close-color-ring-focus:focus{
  --tw-ring-color: hsl(var(--sb-dialog-close-color-ring-focus));
}

.focus\:rtg-ring-ring:focus{
  --tw-ring-color: hsl(var(--ring));
}

.focus\:rtg-ring-toast-action-color-ring-focus:focus{
  --tw-ring-color: hsl(var(--sb-toast-action-color-ring-focus));
}

.focus\:rtg-ring-toast-action-destructive-color-ring-focus:focus{
  --tw-ring-color: hsl(var(--sb-toast-action-destructive-color-ring-focus));
}

.focus\:rtg-ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}

.focus\:rtg-ring-offset-combo-box-trigger-width-ring-offset-focus:focus{
  --tw-ring-offset-width: var(--sb-combo-box-trigger-width-ring-offset-focus);
}

.focus\:rtg-ring-offset-dialog-close-width-ring-offset:focus{
  --tw-ring-offset-width: var(--sb-dialog-close-width-ring-offset);
}

.focus-visible\:rtg-border-accordion-trigger-width-border-focus:focus-visible{
  border-width: var(--sb-accordion-trigger-width-border-focus);
}

.focus-visible\:rtg-border-button-width-border-focus:focus-visible{
  border-width: var(--rtg-button-width-border);
}

.focus-visible\:rtg-border-accordion-trigger-color-border-focus:focus-visible{
  border-color: hsl(var(--sb-accordion-trigger-color-border-focus));
}

.focus-visible\:rtg-border-button-color-border-focus:focus-visible{
  border-color: var(--rtg-button-color-border-focus);
}

.focus-visible\:rtg-border-radio-group-item-color-border-focus:focus-visible{
  border-color: hsl(var(--sb-radio-group-item-color-border-focus));
}

.focus-visible\:rtg-border-ring:focus-visible{
  border-color: hsl(var(--ring));
}

.focus-visible\:rtg-border-select-trigger-color-border-focus:focus-visible{
  border-color: hsl(var(--sb-select-trigger-color-border-focus));
}

.focus-visible\:rtg-border-switch-color-border-focus:focus-visible{
  border-color: hsl(var(--sb-switch-color-border-focus));
}

.focus-visible\:rtg-outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:rtg-ring-0:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-1:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-2:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-\[3px\]:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-accordion-trigger-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-accordion-trigger-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-button-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--rtg-button-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-radio-group-item-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-radio-group-item-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-select-trigger-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-select-trigger-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-switch-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-switch-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-toggle-group-item-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-toggle-group-item-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-toggle-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-toggle-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-accordion-trigger-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-accordion-trigger-color-ring-focus));
}

.focus-visible\:rtg-ring-button-default-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-color-ring-focus);
}

.focus-visible\:rtg-ring-button-destructive-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-destructive-color-ring-focus);
}

.focus-visible\:rtg-ring-button-ghost-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-color-ring-focus);
}

.focus-visible\:rtg-ring-button-link-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-color-ring-focus);
}

.focus-visible\:rtg-ring-button-outline-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-color-ring-focus);
}

.focus-visible\:rtg-ring-button-secondary-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-color-ring-focus);
}

.focus-visible\:rtg-ring-radio-group-item-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-radio-group-item-color-ring-focus));
}

.focus-visible\:rtg-ring-ring:focus-visible{
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:rtg-ring-ring\/50:focus-visible{
  --tw-ring-color: hsl(var(--ring) / 0.5);
}

.focus-visible\:rtg-ring-select-trigger-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-select-trigger-color-ring-focus));
}

.focus-visible\:rtg-ring-switch-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-switch-color-ring-focus));
}

.focus-visible\:rtg-ring-toggle-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-toggle-color-ring-focus));
}

.focus-visible\:rtg-ring-toggle-group-item-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-toggle-group-item-color-ring-focus));
}

.focus-visible\:rtg-ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}

.focus-visible\:rtg-ring-offset-toggle-group-item-width-ring-offset-focus:focus-visible{
  --tw-ring-offset-width: var(--sb-toggle-group-item-width-ring-offset-focus);
}

.focus-visible\:rtg-ring-offset-toggle-width-ring-offset-focus:focus-visible{
  --tw-ring-offset-width: var(--sb-toggle-width-ring-offset-focus);
}

.disabled\:rtg-pointer-events-none:disabled{
  pointer-events: none;
}

.disabled\:rtg-cursor-not-allowed:disabled{
  cursor: not-allowed;
}

.disabled\:rtg-text-calendar-day-button-color-text-disabled:disabled{
  color: hsl(var(--sb-calendar-day-button-color-text-disabled));
}

.disabled\:rtg-opacity-50:disabled{
  opacity: 0.5;
}

.disabled\:rtg-opacity-button-opacity-disabled:disabled{
  opacity: var(--rtg-button-opacity-disabled);
}

.disabled\:rtg-opacity-calendar-day-button-opacity-disabled:disabled{
  opacity: var(--sb-calendar-day-button-opacity-disabled);
}

.disabled\:rtg-opacity-carousel-button-opacity-disabled:disabled{
  opacity: var(--sb-carousel-button-opacity-disabled);
}

.disabled\:rtg-opacity-combo-box-trigger-opacity-disabled:disabled{
  opacity: var(--sb-combo-box-trigger-opacity-disabled);
}

.disabled\:rtg-opacity-command-input-opacity-disabled:disabled{
  opacity: var(--sb-command-input-opacity-disabled);
}

.disabled\:rtg-opacity-radio-group-item-opacity-disabled:disabled{
  opacity: var(--sb-radio-group-item-opacity-disabled);
}

.disabled\:rtg-opacity-select-trigger-opacity-disabled:disabled{
  opacity: var(--sb-select-trigger-opacity-disabled);
}

.disabled\:rtg-opacity-toast-action-opacity-disabled:disabled{
  opacity: var(--sb-toast-action-opacity-disabled);
}

.disabled\:rtg-opacity-toggle-group-item-opacity-disabled:disabled{
  opacity: var(--sb-toggle-group-item-opacity-disabled);
}

.disabled\:rtg-opacity-toggle-opacity-disabled:disabled{
  opacity: var(--sb-toggle-opacity-disabled);
}

.rtg-peer:disabled ~ .peer-disabled\:rtg-cursor-not-allowed{
  cursor: not-allowed;
}

.rtg-peer:disabled ~ .peer-disabled\:rtg-opacity-70{
  opacity: 0.7;
}

.rtg-peer:disabled ~ .peer-disabled\:rtg-opacity-form-label-opacity-peer-disabled{
  opacity: var(--sb-form-label-opacity-peer-disabled);
}

.has-\[\>svg\]\:rtg-px-3:has(>svg){
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.has-\[\>svg\]\:rtg-px-button-space-px-default-has-icon:has(>svg){
  padding-left: var(--rtg-button-space-px-default-has-icon);
  padding-right: var(--rtg-button-space-px-default-has-icon);
}

.has-\[\>svg\]\:rtg-px-button-space-px-lg-has-icon:has(>svg){
  padding-left: var(--rtg-button-space-px-lg-has-icon);
  padding-right: var(--rtg-button-space-px-lg-has-icon);
}

.has-\[\>svg\]\:rtg-px-button-space-px-sm-has-icon:has(>svg){
  padding-left: var(--rtg-button-space-px-sm-has-icon);
  padding-right: var(--rtg-button-space-px-sm-has-icon);
}

.aria-disabled\:rtg-opacity-calendar-button-next-opacity-disabled[aria-disabled="true"]{
  opacity: var(--sb-calendar-button-next-opacity-disabled);
}

.aria-disabled\:rtg-opacity-calendar-button-previous-opacity-disabled[aria-disabled="true"]{
  opacity: var(--sb-calendar-button-previous-opacity-disabled);
}

.aria-selected\:rtg-bg-command-item-color-bg-selected[aria-selected="true"]{
  background-color: hsl(var(--sb-command-item-color-bg-selected));
}

.aria-selected\:rtg-bg-context-menu-checkbox-item-color-bg-focus[aria-selected="true"]{
  background-color: hsl(var(--sb-context-menu-checkbox-item-color-bg-focus));
}

.aria-selected\:rtg-bg-context-menu-radio-item-color-bg-focus[aria-selected="true"]{
  background-color: hsl(var(--sb-context-menu-radio-item-color-bg-focus));
}

.aria-selected\:rtg-bg-dropdown-menu-checkbox-item-color-bg-focus[aria-selected="true"]{
  background-color: hsl(var(--sb-dropdown-menu-checkbox-item-color-bg-focus));
}

.aria-selected\:rtg-bg-dropdown-menu-radio-item-color-bg-focus[aria-selected="true"]{
  background-color: hsl(var(--sb-dropdown-menu-radio-item-color-bg-focus));
}

.aria-selected\:rtg-bg-menubar-checkbox-item-color-bg-active[aria-selected="true"]{
  background-color: hsl(var(--sb-menubar-checkbox-item-color-bg-active));
}

.aria-selected\:rtg-bg-menubar-item-color-bg-active[aria-selected="true"]{
  background-color: hsl(var(--sb-menubar-item-color-bg-active));
}

.aria-selected\:rtg-bg-menubar-radio-item-color-bg-active[aria-selected="true"]{
  background-color: hsl(var(--sb-menubar-radio-item-color-bg-active));
}

.aria-selected\:rtg-text-command-item-color-text-selected[aria-selected="true"]{
  color: hsl(var(--sb-command-item-color-text-selected));
}

.aria-selected\:rtg-text-context-menu-checkbox-item-color-text-focus[aria-selected="true"]{
  color: hsl(var(--sb-context-menu-checkbox-item-color-text-focus));
}

.aria-selected\:rtg-text-context-menu-radio-item-color-text-focus[aria-selected="true"]{
  color: hsl(var(--sb-context-menu-radio-item-color-text-focus));
}

.aria-selected\:rtg-text-dropdown-menu-checkbox-item-color-text-focus[aria-selected="true"]{
  color: hsl(var(--sb-dropdown-menu-checkbox-item-color-text-focus));
}

.aria-selected\:rtg-text-dropdown-menu-radio-item-color-text-focus[aria-selected="true"]{
  color: hsl(var(--sb-dropdown-menu-radio-item-color-text-focus));
}

.aria-selected\:rtg-text-menubar-checkbox-item-color-text-active[aria-selected="true"]{
  color: hsl(var(--sb-menubar-checkbox-item-color-text-active));
}

.aria-selected\:rtg-text-menubar-item-color-text-active[aria-selected="true"]{
  color: hsl(var(--sb-menubar-item-color-text-active));
}

.aria-selected\:rtg-text-menubar-radio-item-color-text-active[aria-selected="true"]{
  color: hsl(var(--sb-menubar-radio-item-color-text-active));
}

.data-\[disabled\=\"true\"\]\:rtg-pointer-events-none[data-disabled="true"]{
  pointer-events: none;
}

.data-\[disabled\]\:rtg-pointer-events-none[data-disabled]{
  pointer-events: none;
}

.data-\[state\=\"open\"\]\:rtg-block[data-state="open"]{
  display: block;
}

.data-\[state\=\"closed\"\]\:rtg-hidden[data-state="closed"]{
  display: none;
}

.data-\[state\=closed\]\:rtg-h-accordion-content-space-h-closed[data-state="closed"]{
  height: var(--sb-accordion-content-space-h-closed);
}

.data-\[state\=open\]\:rtg-h-fit[data-state="open"]{
  height: -moz-fit-content;
  height: fit-content;
}

.data-\[state\=\"checked\"\]\:rtg-translate-x-\[calc\(100\%-2px\)\][data-state="checked"]{
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=\"unchecked\"\]\:rtg-translate-x-0[data-state="unchecked"]{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=closed\]\:rtg-translate-x-toast-viewport-item-translate-x-exit[data-state="closed"]{
  --tw-translate-x: var(--sb-toast-viewport-item-translate-x-exit);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=open\]\:rtg-translate-y-toast-viewport-item-translate-y-enter-desktop[data-state="open"]{
  --tw-translate-y: var(--sb-toast-viewport-item-translate-y-enter-desktop);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=cancel\]\:rtg-translate-x-0[data-swipe="cancel"]{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=end\]\:rtg-translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"]{
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=move\]\:rtg-translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"]{
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes rtg-accordion-content-animate-closed{
  from{
    height: var(--sb-accordion-content-space-h-open);
  }
  to{
    height: var(--sb-accordion-content-space-h-closed);
  }
}

.data-\[state\=closed\]\:rtg-animate-accordion-content-animate-closed[data-state="closed"]{
  animation: rtg-accordion-content-animate-closed var(--sb-accordion-content-motion-duration-closed) var(--sb-accordion-content-motion-fn-closed);
}

@keyframes rtg-accordion-content-animate-open{
  from{
    height: var(--sb-accordion-content-space-h-closed);
  }
  to{
    height: var(--sb-accordion-content-space-h-open);
  }
}

.data-\[state\=open\]\:rtg-animate-accordion-content-animate-open[data-state="open"]{
  animation: rtg-accordion-content-animate-open var(--sb-accordion-content-motion-duration-open) var(--sb-accordion-content-motion-fn-open);
}

.data-\[disabled\=\"true\"\]\:rtg-cursor-not-allowed[data-disabled="true"]{
  cursor: not-allowed;
}

.data-\[range-end\=true\]\:rtg-bg-calendar-day-button-color-bg-range-end[data-range-end="true"]{
  background-color: hsl(var(--sb-calendar-day-button-color-bg-range-end));
}

.data-\[range-middle\=true\]\:rtg-bg-calendar-day-button-color-bg-range-middle[data-range-middle="true"]{
  background-color: hsl(var(--sb-calendar-day-button-color-bg-range-middle));
}

.data-\[range-start\=true\]\:rtg-bg-calendar-day-button-color-bg-range-start[data-range-start="true"]{
  background-color: hsl(var(--sb-calendar-day-button-color-bg-range-start));
}

.data-\[selected-single\=true\]\:rtg-bg-calendar-day-button-color-bg-single-selected[data-selected-single="true"]{
  background-color: hsl(var(--sb-calendar-day-button-color-bg-single-selected));
}

.data-\[state\=\"checked\"\]\:rtg-bg-switch-color-bg-checked[data-state="checked"]{
  background-color: hsl(var(--sb-switch-color-bg-checked));
}

.data-\[state\=\"checked\"\]\:rtg-bg-switch-thumb-color-bg-checked[data-state="checked"]{
  background-color: hsl(var(--sb-switch-thumb-color-bg-checked));
}

.data-\[state\=\"unchecked\"\]\:rtg-bg-switch-color-bg-unchecked[data-state="unchecked"]{
  background-color: hsl(var(--sb-switch-color-bg-unchecked));
}

.data-\[state\=\"unchecked\"\]\:rtg-bg-switch-thumb-color-bg-unchecked[data-state="unchecked"]{
  background-color: hsl(var(--sb-switch-thumb-color-bg-unchecked));
}

.data-\[state\=on\]\:rtg-bg-toggle-color-bg-on[data-state="on"]{
  background-color: hsl(var(--sb-toggle-color-bg-on));
}

.data-\[state\=on\]\:rtg-bg-toggle-group-item-color-bg-on[data-state="on"]{
  background-color: hsl(var(--sb-toggle-group-item-color-bg-on));
}

.data-\[state\=open\]\:rtg-bg-dialog-close-color-bg[data-state="open"]{
  background-color: hsl(var(--sb-dialog-close-color-bg));
}

.data-\[state\=open\]\:rtg-bg-menubar-trigger-color-bg-active[data-state="open"]{
  background-color: hsl(var(--sb-menubar-trigger-color-bg-active));
}

.data-\[state\=selected\]\:rtg-bg-muted[data-state="selected"]{
  background-color: hsl(var(--muted));
}

.data-\[empty\=true\]\:rtg-text-date-picker-trigger-button-color-text-empty[data-empty="true"]{
  color: hsl(var(--sb-date-picker-trigger-button-color-text-empty));
}

.data-\[placeholder\]\:rtg-text-select-trigger-placeholder-color-text[data-placeholder]{
  color: hsl(var(--sb-select-trigger-placeholder-color-text));
}

.data-\[range-end\=true\]\:rtg-text-calendar-day-button-color-text-range-end[data-range-end="true"]{
  color: hsl(var(--sb-calendar-day-button-color-text-range-end));
}

.data-\[range-middle\=true\]\:rtg-text-calendar-day-button-color-text-range-middle[data-range-middle="true"]{
  color: hsl(var(--sb-calendar-day-button-color-text-range-middle));
}

.data-\[range-start\=true\]\:rtg-text-calendar-day-button-color-text-range-start[data-range-start="true"]{
  color: hsl(var(--sb-calendar-day-button-color-text-range-start));
}

.data-\[selected-single\=true\]\:rtg-text-calendar-day-button-color-text-single-selected[data-selected-single="true"]{
  color: hsl(var(--sb-calendar-day-button-color-text-single-selected));
}

.data-\[state\=on\]\:rtg-text-toggle-color-text-on[data-state="on"]{
  color: hsl(var(--sb-toggle-color-text-on));
}

.data-\[state\=on\]\:rtg-text-toggle-group-item-color-text-on[data-state="on"]{
  color: hsl(var(--sb-toggle-group-item-color-text-on));
}

.data-\[state\=open\]\:rtg-text-dialog-close-color-text[data-state="open"]{
  color: hsl(var(--sb-dialog-close-color-text));
}

.data-\[state\=open\]\:rtg-text-menubar-trigger-color-text-active[data-state="open"]{
  color: hsl(var(--sb-menubar-trigger-color-text-active));
}

.data-\[disabled\=\"true\"\]\:rtg-opacity-command-item-opacity-disabled[data-disabled="true"]{
  opacity: var(--sb-command-item-opacity-disabled);
}

.data-\[disabled\=\"true\"\]\:rtg-opacity-switch-opacity-disabled[data-disabled="true"]{
  opacity: var(--sb-switch-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-context-menu-checkbox-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-context-menu-checkbox-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-context-menu-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-context-menu-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-context-menu-radio-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-context-menu-radio-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-dropdown-menu-checkbox-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-dropdown-menu-checkbox-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-dropdown-menu-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-dropdown-menu-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-dropdown-menu-radio-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-dropdown-menu-radio-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-menubar-checkbox-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-menubar-checkbox-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-menubar-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-menubar-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-menubar-radio-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-menubar-radio-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-select-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-select-item-opacity-disabled);
}

.data-\[state\=closed\]\:rtg-opacity-80[data-state="closed"]{
  opacity: 0.8;
}

.data-\[swipe\=move\]\:rtg-transition-none[data-swipe="move"]{
  transition-property: none;
}

.data-\[state\=\"open\"\]\:rtg-animate-in[data-state="open"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:rtg-animate-in[data-state="open"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=\"closed\"\]\:rtg-animate-out[data-state="closed"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:rtg-animate-out[data-state="closed"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=\"closed\"\]\:rtg-fade-out-0[data-state="closed"]{
  --tw-exit-opacity: 0;
}

.data-\[state\=\"open\"\]\:rtg-fade-in-0[data-state="open"]{
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:rtg-fade-out-0[data-state="closed"]{
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:rtg-fade-in-0[data-state="open"]{
  --tw-enter-opacity: 0;
}

.data-\[state\=\"closed\"\]\:rtg-zoom-out-95[data-state="closed"]{
  --tw-exit-scale: .95;
}

.data-\[state\=\"open\"\]\:rtg-zoom-in-95[data-state="open"]{
  --tw-enter-scale: .95;
}

.data-\[state\=closed\]\:rtg-zoom-out-95[data-state="closed"]{
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:rtg-zoom-in-95[data-state="open"]{
  --tw-enter-scale: .95;
}

.data-\[side\=bottom\]\:rtg-slide-in-from-top-2[data-side="bottom"]{
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:rtg-slide-in-from-right-2[data-side="left"]{
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:rtg-slide-in-from-left-2[data-side="right"]{
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:rtg-slide-in-from-bottom-2[data-side="top"]{
  --tw-enter-translate-y: 0.5rem;
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-relative{
  position: relative;
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-z-10{
  z-index: 10;
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-border-calendar-day-width-border-focus{
  border-width: var(--sb-calendar-day-width-border-focus);
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-border-calendar-day-color-border-focus{
  border-color: hsl(var(--sb-calendar-day-color-border-focus));
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-ring-calendar-day-width-ring-focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-calendar-day-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-ring-calendar-day-color-ring-focus{
  --tw-ring-color: hsl(var(--sb-calendar-day-color-ring-focus));
}

.dark\:hover\:rtg-bg-accent\/50:hover:is(.rtg-dark *){
  background-color: hsl(var(--accent) / 0.5);
}

@media (min-width: 640px){
  .sm\:rtg-bottom-0{
    bottom: 0px;
  }
  .sm\:rtg-right-0{
    right: 0px;
  }
  .sm\:rtg-top-auto{
    top: auto;
  }
  .sm\:rtg-block{
    display: block;
  }
  .sm\:rtg-w-3\/4{
    width: 75%;
  }
  .sm\:rtg-max-w-\[425px\]{
    max-width: 425px;
  }
  .sm\:rtg-max-w-dialog-content-space-max-w{
    max-width: var(--sb-dialog-content-space-max-w);
  }
  .sm\:rtg-flex-row{
    flex-direction: row;
  }
  .sm\:rtg-flex-col{
    flex-direction: column;
  }
  .sm\:rtg-justify-end{
    justify-content: flex-end;
  }
  .sm\:rtg-gap-breadcrumb-list-space-gap{
    gap: var(--sb-breadcrumb-list-space-gap);
  }
  .sm\:rtg-pl-pagination-previous-space-px{
    padding-left: var(--sb-pagination-previous-space-px);
  }
  .sm\:rtg-pr-pagination-next-space-px{
    padding-right: var(--sb-pagination-next-space-px);
  }
  .sm\:rtg-text-left{
    text-align: left;
  }
  .data-\[state\=open\]\:sm\:rtg-translate-y-toast-viewport-item-translate-y-enter-mobile[data-state="open"]{
    --tw-translate-y: var(--sb-toast-viewport-item-translate-y-enter-mobile);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 768px){
  .md\:rtg-h-1\/2{
    height: 50%;
  }
  .md\:rtg-w-\[500px\]{
    width: 500px;
  }
  .md\:rtg-max-w-toast-viewport-root-space-w-md{
    max-width: var(--sb-toast-viewport-root-space-w-md);
  }
  .md\:rtg-basis-1\/2{
    flex-basis: 50%;
  }
  .md\:rtg-flex-row{
    flex-direction: row;
  }
  .md\:rtg-gap-12{
    gap: 3rem;
  }
  .md\:rtg-gap-4{
    gap: 1rem;
  }
  .md\:rtg-gap-drawer-header-space-gap{
    gap: var(--sb-drawer-header-space-gap);
  }
  .md\:rtg-text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 1024px){
  .lg\:rtg-h-1\/2{
    height: 50%;
  }
  .lg\:rtg-w-\[600px\]{
    width: 600px;
  }
  .lg\:rtg-basis-1\/3{
    flex-basis: 33.333333%;
  }
  .lg\:rtg-grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.\[\&\+div\]\:rtg-text-toast-title-font+div{
  font-size: var(--sb-toast-title-font-size);
  line-height: var(--sb-toast-title-font-line-height);
  letter-spacing: var(--sb-toast-title-font-letter-spacing);
}

.\[\&\:\:-webkit-scrollbar-thumb\]\:rtg-rounded-full::-webkit-scrollbar-thumb{
  border-radius: 9999px;
}

.\[\&\:\:-webkit-scrollbar-thumb\]\:rtg-bg-accent::-webkit-scrollbar-thumb{
  background-color: hsl(var(--accent));
}

.\[\&\:\:-webkit-scrollbar-track\]\:rtg-bg-gray-100::-webkit-scrollbar-track{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.\[\&\:\:-webkit-scrollbar\]\:rtg-w-0::-webkit-scrollbar{
  width: 0px;
}

.\[\&\:\:-webkit-scrollbar\]\:rtg-w-2::-webkit-scrollbar{
  width: 0.5rem;
}

.\[\&\>div\]\:rtg-pb-accordion-content-div-space-pb>div{
  padding-bottom: var(--sb-accordion-content-div-space-pb);
}

.\[\&\>div\]\:rtg-pt-accordion-content-div-space-pt>div{
  padding-top: var(--sb-accordion-content-div-space-pt);
}

.\[\&\>span\]\:rtg-text-calendar-day-button-span-font>span{
  font-size: var(--sb-calendar-day-button-span-font-size);
  line-height: var(--sb-calendar-day-button-span-font-line-height);
}

.\[\&\>span\]\:rtg-opacity-calendar-day-button-span-opacity>span{
  opacity: var(--sb-calendar-day-button-span-opacity);
}

.\[\&\>svg\]\:rtg-size-breadcrumb-ellipsis-icon-space-size>svg{
  width: var(--sb-breadcrumb-ellipsis-icon-space-size);
  height: var(--sb-breadcrumb-ellipsis-icon-space-size);
}

.\[\&\>svg\]\:rtg-size-breadcrumb-separator-icon-space-size>svg{
  width: var(--sb-breadcrumb-separator-icon-space-size);
  height: var(--sb-breadcrumb-separator-icon-space-size);
}

.\[\&\[data-state\=open\]\>svg\]\:rtg-rotate-180[data-state=open]>svg{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\[rtg-command-input-wrapper\]_svg\]\:rtg-h-5 [rtg-command-input-wrapper] svg{
  height: 1.25rem;
}

.\[\&_\[rtg-command-input-wrapper\]_svg\]\:rtg-w-5 [rtg-command-input-wrapper] svg{
  width: 1.25rem;
}

.\[\&_\[rtgcmd-group-heading\]\]\:rtg-px-2 [rtgcmd-group-heading]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[rtgcmd-group-heading\]\]\:rtg-font-medium [rtgcmd-group-heading]{
  font-weight: 500;
}

.\[\&_\[rtgcmd-group-heading\]\]\:rtg-text-muted-foreground [rtgcmd-group-heading]{
  color: hsl(var(--muted-foreground));
}

.\[\&_\[rtgcmd-group\]\:not\(\[hidden\]\)_\~\[rtgcmd-group\]\]\:rtg-pt-0 [rtgcmd-group]:not([hidden]) ~[rtgcmd-group]{
  padding-top: 0;
}

.\[\&_\[rtgcmd-group\]\]\:rtg-px-2 [rtgcmd-group]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[rtgcmd-input\]\]\:rtg-h-12 [rtgcmd-input]{
  height: 3rem;
}

.\[\&_\[rtgcmd-item\]\]\:rtg-px-2 [rtgcmd-item]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[rtgcmd-item\]\]\:rtg-py-3 [rtgcmd-item]{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[rtgcmd-item\]_svg\]\:rtg-h-5 [rtgcmd-item] svg{
  height: 1.25rem;
}

.\[\&_\[rtgcmd-item\]_svg\]\:rtg-w-5 [rtgcmd-item] svg{
  width: 1.25rem;
}

.\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-button-icon-space-size svg:not([class*="rtg-size-"]){
  width: var(--rtg-button-icon-space-size-default);
  height: var(--rtg-button-icon-space-size-default);
}

.\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-command-item-icon-space-size svg:not([class*="rtg-size-"]){
  width: var(--sb-command-item-icon-space-size);
  height: var(--sb-command-item-icon-space-size);
}

.\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-context-menu-item-icon-space-size svg:not([class*="rtg-size-"]){
  width: var(--sb-context-menu-item-icon-space-size);
  height: var(--sb-context-menu-item-icon-space-size);
}

.\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-dropdown-menu-item-icon-space-size svg:not([class*="rtg-size-"]){
  width: var(--sb-dropdown-menu-item-icon-space-size);
  height: var(--sb-dropdown-menu-item-icon-space-size);
}

.\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-menubar-item-icon-space-size svg:not([class*="rtg-size-"]){
  width: var(--sb-menubar-item-icon-space-size);
  height: var(--sb-menubar-item-icon-space-size);
}

.\[\&_svg\:not\(\[class\*\=\"rtg-text-\"\]\)\]\:rtg-text-command-item-icon-color-text svg:not([class*="rtg-text-"]){
  color: hsl(var(--sb-command-item-icon-color-text));
}

.\[\&_svg\:not\(\[class\*\=\"rtg-text-\"\]\)\]\:rtg-text-context-menu-item-icon-color-text svg:not([class*="rtg-text-"]){
  color: hsl(var(--sb-context-menu-item-icon-color-text));
}

.\[\&_svg\:not\(\[class\*\=\"rtg-text-\"\]\)\]\:rtg-text-dropdown-menu-item-icon-color-text svg:not([class*="rtg-text-"]){
  color: hsl(var(--sb-dropdown-menu-item-icon-color-text));
}

.\[\&_svg\:not\(\[class\*\=\"rtg-text-\"\]\)\]\:rtg-text-menubar-item-icon-color-text svg:not([class*="rtg-text-"]){
  color: hsl(var(--sb-menubar-item-icon-color-text));
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:rtg-size-4 svg:not([class*='size-']){
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:rtg-pointer-events-none svg{
  pointer-events: none;
}

.\[\&_svg\]\:rtg-shrink-0 svg{
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:rtg-border-0 tr:last-child{
  border-width: 0px;
}

.\[\&_tr\]\:rtg-border-b tr{
  border-bottom-width: 1px;
}

.\[\&_tr\]\:rtg-border-b-table-head-width-border tr{
  border-bottom-width: var(--sb-table-head-width-border);
}

.\[\&_tr\]\:rtg-border-table-head-color-border tr{
  border-color: hsl(var(--sb-table-head-color-border));
}

/*
 * ============================================================
 *  TOKENS
 * ============================================================
 */

/*
 * ----------------------------------------
 *  GENERAL
 * ----------------------------------------
 */

:root {
  --sb-color-saasbase: #6366f1;
  --sb-color-on-saasbase: #ffffff;
}

/*
 * ----------------------------------------
 *  CONTAINER
 * ----------------------------------------
 */

:root {
  --sb-container-space-width: var(--sb-ref-space-width-auto);
  --sb-container-space-py: var(--sb-ref-space-10);
  --sb-container-space-px: var(--sb-ref-space-6);
  --sb-container-color-bg: hsl(var(--sb-sem-color-bg-surface-secondary));
  --sb-container-radius: 0px;
  --sb-container-width-ring: var(--sb-sem-width-ring);
  --sb-container-color-ring: hsl(var(--sb-sem-color-ring-secondary));
  --sb-container-space-min-height: 100vh;
  --sb-container-alignment-justify-content: center;
}

/*
 * ----------------------------------------
 *  COUNTDOWN
 * ----------------------------------------
 */

:root {
  --sb-countdown-font-family: var(--sb-sem-font-family);
  --sb-countdown-font-size: var(--sb-ref-font-size-sm-base);
  --sb-countdown-font-weight: var(--sb-ref-font-weight-normal);
  --sb-countdown-color-text: inherit;
}

/*
 * ----------------------------------------
 *  SUBTITLE
 * ----------------------------------------
 */

:root {
  --sb-subtitle-font-family: var(--sb-sem-font-family);
  --sb-subtitle-font-size: var(--sb-ref-font-size-sm-base);
  --sb-subtitle-font-weight: var(--sb-ref-font-weight-normal);
  --sb-subtitle-color-text: inherit;
}

/*
 * ----------------------------------------
 *  TITLE
 * ----------------------------------------
 */

:root {
  --sb-title-font-family: var(--sb-sem-font-family);
  --sb-title-font-size: var(--sb-ref-font-size-xl);
  --sb-title-font-weight: var(--sb-ref-font-weight-semibold);
  --sb-title-color-text: inherit;
}

/*
 * ----------------------------------------
 *  OTP
 * ----------------------------------------
 */

:root {
  --sb-otp-typography-font-family: var(--sb-sem-font-family);
  --sb-otp-typography-font-size: var(--sb-ref-font-size-sm-base);
  --sb-otp-typography-font-weight: var(--sb-ref-font-weight-normal);
  --sb-otp-typography-color-text: inherit;
  --sb-otp-alignment-justify-content: center;
  --sb-otp-button-color-text-brand: hsl(var(--sb-sem-color-text-brand));
  --sb-otp-resend-alignment-justify-content: start;
}

/* edit identifier */

:root {
  --sb-edit-identifier-alignment-justify-content: center;
  --sb-edit-identifier-typography-p-font-weight: 500;
}

/*
 * ----------------------------------------
 *  FIELD
 * ----------------------------------------
 */

:root {
  --sb-field-label-space-gap: var(--sb-ref-space-1);
  --sb-field-label-space-gap-sm: var(--sb-ref-space-0-5);

  --sb-field-mark-font-weight: var(--sb-ref-font-weight-normal);
  --sb-field-mark-color-text: hsl(var(--sb-sem-color-text-secondary));

  /* * FORGOT * */
  --sb-field-forgot-space-px: var(--sb-ref-space-0);
  --sb-field-forgot-space-size: auto;
  --sb-field-forgot-color-text: inherit;
  --sb-field-forgot-font-size: var(--rtg-label-font-size);
  --sb-field-forgot-font-line-height: var(--rtg-label-font-line-height);
  --sb-field-forgot-font-weight: var(--sb-ref-font-weight-normal);
}

/*
 * ----------------------------------------
 *  WATERMARK
 * ----------------------------------------
 */

:root {
  --sb-watermark-space-width: var(--sb-ref-space-width-auto);
  --sb-watermark-alignment-justify-content: center;
  --sb-watermark-space-py: calc(var(--sb-ref-space) * 0.75);
  --sb-watermark-space-px: calc(var(--sb-ref-space) * 2.25);
  --sb-watermark-space-px-sm: calc(var(--sb-ref-space) * 1.75);
  --sb-watermark-logo-space-size: var(--sb-ref-space-4);

  --sb-watermark-muted-font-weight: var(--sb-ref-font-weight-normal);

  --sb-watermark-muted-default-color-text: hsl(var(--sb-ref-color-base-300));
  --sb-watermark-muted-secondary-color-text: hsl(
    var(--sb-ref-color-base-600) / var(--sb-ref-opacity-85)
  );
  --sb-watermark-muted-outline-color-text: hsl(
    var(--sb-sem-color-text-secondary)
  );
  --sb-watermark-muted-ghost-color-text: hsl(
    var(--sb-sem-color-text-secondary)
  );

  --sb-watermark-logo-brand-color-cube: var(--sb-color-saasbase);
  --sb-watermark-logo-brand-color-vector: var(--sb-color-on-saasbase);
}

[data-theme="dark"] {
  --sb-watermark-muted-default-color-text: hsl(var(--sb-ref-color-base-600));
  --sb-watermark-muted-secondary-color-text: hsl(
    var(--sb-ref-color-base-300) / var(--sb-ref-opacity-85)
  );
}

/*
 * ----------------------------------------
 *  LINK
 * ----------------------------------------
 */

:root {
  --sb-link-space-gap: calc(var(--sb-ref-space) * 0.75);

  --sb-link-color-text: var(--rtg-field-description-color-text);
  --sb-link-font-size: var(--rtg-field-description-font-size);
  --sb-link-font-line-height: var(--rtg-field-description-font-line-height);
  --sb-link-font-weight: var(--rtg-field-description-font-weight);

  --sb-link-button-space-px: var(--sb-ref-space-0);
  --sb-link-button-space-size: auto;

  --sb-link-button-color-text-hover: var(
    --rtg-field-description-link-color-text-hover
  );
  --sb-link-button-opacity-disabled: var(--sb-ref-opacity-100);

  --sb-watermark-alignment-justify-content: center;
}

/* user profile */

:root {
  --sb-account-settings-input-color-bg: hsl(
    var(--sb-sem-color-bg-surface-secondary)
  );
  --sb-account-settings-select-trigger-color-bg: hsl(
    var(--sb-sem-color-bg-surface-secondary)
  );
  --sb-account-settings-select-trigger-color-bg-disabled: transparent;
  --sb-account-settings-input-color-bg-disabled: transparent;
  --sb-account-settings-card-space-py: 0;
  --sb-account-settings-card-space-px: 0;
  --sb-account-settings-urls-info-card-color-bg-editing: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );
  --sb-account-settings-personal-info-card-color-bg-editing: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );
  --sb-account-settings-account-info-popover-space-w: 472px;
  --sb-account-settings-account-info-popover-color-bg: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-account-settings-location-info-card-color-bg-editing: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );
  --sb-account-settings-modal-color-bg: hsl(
    var(--sb-sem-color-bg-surface-secondary)
  );
  --sb-account-settings-page-color-bg: hsl(
    var(--sb-sem-color-bg-surface-secondary)
  );
  --sb-account-settings-modal-width-border: var(--sb-sem-width-border);
  --sb-account-settings-modal-color-border: hsl(var(--sb-sem-color-border));

  --sb-account-settings-card-header-width-border: var(--sb-sem-width-border);
  --sb-account-settings-card-header-color-border: hsl(
    var(--sb-sem-color-border)
  );
  --sb-account-settings-p-font-size: var(--sb-sem-font-size);

  --sb-account-settings-modal-content-max-height: 864px;
  --sb-account-settings-modal-content-space-py: var(--sb-ref-space-2);
  --sb-account-settings-modal-content-space-px: var(--sb-ref-space-4);
  --sb-account-settings-modal-content-pl-md: 0px;
  --sb-account-settings-sidebar-mobile-body-space-px: var(--sb-ref-space-4);
  --sb-account-settings-sidebar-mobile-body-space-py: var(--sb-ref-space-2);
  --sb-account-settings-vertical-content-space-mb: var(--sb-ref-space-16);
  --sb-account-settings-close-button-space: var(--sb-ref-space-8);
  --sb-account-settings-watermark-space-py: var(--sb-ref-space-4);
  --sb-account-settings-content-offset-ml: var(0);
  --sb-account-settings-overlay-color: hsl(var(--sb-ref-color-base-900) / 0.5);
  --sb-account-settings-overlay-z: 9998;
  --sb-account-settings-title-font-size: 18px;
  --sb-account-settings-title-gap: var(--sb-ref-space-2);
  --sb-account-settings-card-header-space-px: var(--sb-ref-space-4);
  --sb-account-settings-card-header-space-py: var(--sb-ref-space-2);
  --sb-account-settings-card-content-space: var(--sb-ref-space-4);
  --sb-account-settings-card-content-gap: var(--sb-ref-space-3);
  --sb-account-settings-card-content-gap-xl: var(--sb-ref-space-4);
  --sb-account-settings-card-section-space-m: var(--sb-ref-space-4);
  --sb-account-settings-card-section-space-mt: var(--sb-ref-space-4);
  --sb-account-settings-card-section-space-mb: var(--sb-ref-space-8);
  --sb-account-settings-card-actions-gap: var(--sb-ref-space-2);
  --sb-account-settings-card-actions-space: var(--sb-ref-space-4);
  --sb-account-settings-card-button-width: 120px;
  --sb-account-settings-card-input-gap: var(--sb-ref-space-2);
  --sb-account-settings-field-row-gap: var(--sb-ref-space-2);
  --sb-account-settings-field-label-min-width: 115px;
  --sb-account-settings-field-label-min-width-md: 140px;
  --sb-account-settings-field-input-wrapper-flex: 1;
  --sb-account-settings-sidebar-tab-spacing-bottom: var(--sb-ref-space-2);
  --sb-account-settings-sidebar-burger-padding: var(--sb-ref-space-2);
  --sb-account-settings-sidebar-burger-label-left: var(--sb-ref-space-2);
  --sb-account-settings-sidebar-burger-label-font-size: 18px;
  --sb-account-settings-sidebar-drawer-body-space: var(--sb-ref-space-4);
  --sb-account-settings-sidebar-body-height: 100%;
  --sb-account-settings-security-panel-max-width: 42rem;
  --sb-account-settings-security-icon-size: var(--sb-ref-space-10);
  --sb-account-settings-card-edit-button-font-size: var(
    --sb-ref-font-size-sm-base
  );
  --sb-account-settings-account-details-space-inline: var(--sb-ref-space-4);
  --sb-account-settings-account-details-space-block: var(--sb-ref-space-2);
  --sb-account-settings-account-details-space-block-md: var(--sb-ref-space-4);
  --sb-account-settings-avatar-wrapper-space-px: var(--sb-ref-space-4);
  --sb-account-settings-avatar-wrapper-space-pb: var(--sb-ref-space-4);
  --sb-account-settings-avatar-wrapper-space-my: var(--sb-ref-space-4);
  --sb-account-settings-avatar-menu-item-space-py: var(--sb-ref-space-1);
  --sb-account-settings-avatar-menu-item-space-px: var(--sb-ref-space-2);
  --sb-account-settings-avatar-menu-item-space-mb: var(--sb-ref-space-2);
  --sb-account-settings-avatar-menu-item-font-size: var(
    --sb-ref-font-size-sm-base
  );
  --sb-account-settings-sidebar-tab-item-space-mb: var(--sb-ref-space-2);
  --sb-account-settings-sidebar-mobile-drawer-width: calc(
    var(--sb-ref-space-10) * 5
  );
  --sb-account-settings-sidebar-mobile-drawer-shadow: var(--sb-sem-shadow-menu);
  --sb-account-settings-sidebar-mobile-drawer-z: 9999;
  --sb-account-settings-sidebar-mobile-overlay-color: hsl(
    var(--sb-ref-color-base-900) / 0.5
  );
  --sb-account-settings-sidebar-mobile-overlay-z: 9998;
  --sb-account-settings-sidebar-mobile-overlay-duration: 300ms;
  --sb-account-settings-label-color-text: hsl(
    var(--sb-sem-color-text-secondary)
  );

  --sb-sidebar-tab-list-default-color-bg: inherit;
  --sb-sidebar-tab-trigger-default-color-bg-active: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );
  --sb-sidebar-tab-trigger-burger-default-color-bg-active: inherit;
  --sb-account-settings-card-radius: 0.5rem;
  --sb-account-settings-modal-radius: 0.5rem;
  --sb-account-settings-info-card-button-space-px-lg: var(--sb-ref-space-4);
}

/* account info */

:root {
  --sb-account-info-edit-form-card-color-bg: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );
  --sb-account-info-verification-form-card-color-bg: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );
  --sb-account-info-avatar-space-size: calc(var(--sb-ref-space-1) * 37);
  --sb-account-info-avatar-color-border: hsl(var(--sb-sem-color-border));
  --sb-account-info-avatar-width-border: 1px;
}

/* Sidebar */

:root {
  --sb-sidebar-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-secondary));
  --sb-sidebar-color-bg: hsl(var(--sb-sem-color-bg-surface-secondary));
  --sb-sidebar-color-text: hsl(var(--sb-sem-color-text));
}

/* nav-user */

:root {
  --sb-nav-user-button-space-py: var(--sb-ref-space-2);
  --sb-nav-user-popover-item-color-bg-hover: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );
  --sb-nav-user-dropdown-menu-content-space-p: var(--sb-ref-space-2);
}

/* account info */

:root {
  --sb-user-account-info-edit-form-card-color-bg: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );
  --sb-user-account-info-verification-form-card-color-bg: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );
}

/* Sidebar */

:root {
  --sb-sidebar-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-secondary));
  --sb-sidebar-color-bg: hsl(var(--sb-sem-color-bg-surface-secondary));
  --sb-sidebar-color-text: hsl(var(--sb-sem-color-text));
}

/*
 * ============================================================
 *  HELPERS: Some of these styles are future UI Kit fixes.
 * ============================================================
 */

/*
 * ----------------------------------------
 *  TOKENS
 * ----------------------------------------
 */

:root {
  --sb-sem-color-role-base: var(--sb-ref-color-base-900);
  --sb-sem-color-role-on-base: var(--sb-ref-color-base-50);

  --sb-sem-color-bg-surface-base: var(--sb-sem-color-role-base) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-border-base-secondary: var(--sb-sem-color-role-base) /
    var(--sb-sem-opacity-border-secondary);
}

[data-theme="dark"] {
  --sb-sem-color-role-base: var(--sb-ref-color-base-200);
  --sb-sem-color-role-on-base: var(--sb-ref-color-base-900);
}

/*
 * ----------------------------------------
 *  ALERT
 * ----------------------------------------
 */

/* * TOKENS * */

:root {
  --rtg-alert-default-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-base));
  --rtg-alert-default-tonal-color-border: hsl(
    var(--sb-sem-color-border-base-secondary)
  );
}

rtg-alert {
  display: block;
}

/*
 * ----------------------------------------
 *  BADGE
 * ----------------------------------------
 */

/* The following styles are scoped to `sb-watermark` such that not unintended
styling side effects occur in other contexts. */

sb-watermark {
  --rtg-badge-ghost-color-text: hsl(var(--sb-sem-color-text));

  --rtg-badge-outline-color-bg: hsl(var(--sb-sem-color-bg));
  --rtg-badge-ghost-color-bg: hsl(var(--sb-sem-color-bg));
}

sb-watermark rtg-badge > [data-variant="outline"] {
  background-color: var(--rtg-badge-outline-color-bg);
}

sb-watermark rtg-badge > [data-variant="ghost"] {
  color: var(--rtg-badge-ghost-color-text);
  background-color: var(--rtg-badge-ghost-color-bg);
}

/*
 * ----------------------------------------
 *  FIELD
 * ----------------------------------------
 */

rtg-field {
  display: block;
}

/*
 * ============================================================
 *  BUTTON
 * ============================================================
 */

sb-passkey-button,
sb-provider-button,
sb-submit-button {
  display: inline-flex;
  flex-shrink: 0;
}

sb-passkey-button > [part="passkey-button"],
sb-provider-button > [part="provider-button"],
sb-submit-button > [part="submit-button"] {
  width: 100%;
}

/*
 * ============================================================
 *  FIELD
 * ============================================================
 */

sb-email-field,
sb-phone-field,
sb-username-field,
sb-name-field,
sb-identifier-field,
sb-password-field,
sb-confirm-field {
  display: block;
  width: 100%;

  --rtg-field-label-space-gap: var(--sb-field-label-space-gap);
}

sb-email-field:has([part="email-field-mark"][data-content="caret"]),
sb-phone-field:has([part="phone-field-mark"][data-content="caret"]),
sb-username-field:has([part="username-field-mark"][data-content="caret"]),
sb-name-field:has([part="name-field-mark"][data-content="caret"]),
sb-identifier-field:has([part="identifier-field-mark"][data-content="caret"]),
sb-password-field:has([part="password-field-mark"][data-content="caret"]),
sb-confirm-field:has([part="confirm-field-mark"][data-content="caret"]) {
  --rtg-field-label-space-gap: var(--sb-field-label-space-gap-sm);
}

sb-email-field [part="email-field-mark"],
sb-phone-field [part="phone-field-mark"],
sb-username-field [part="username-field-mark"],
sb-name-field [part="name-field-mark"],
sb-identifier-field [part="identifier-field-mark"],
sb-password-field [part="password-field-mark"],
sb-confirm-field [part="confirm-field-mark"] {
  font-weight: var(--sb-field-mark-font-weight);
}

sb-email-field:not(:has([data-invalid="true"])) [part="email-field-mark"],
sb-phone-field:not(:has([data-invalid="true"])) [part="phone-field-mark"],
sb-username-field:not(:has([data-invalid="true"])) [part="username-field-mark"],
sb-name-field:not(:has([data-invalid="true"])) [part="name-field-mark"],
sb-identifier-field:not(:has([data-invalid="true"]))
  [part="identifier-field-mark"],
sb-password-field:not(:has([data-invalid="true"])) [part="password-field-mark"],
sb-confirm-field:not(:has([data-invalid="true"])) [part="confirm-field-mark"] {
  color: var(--sb-field-mark-color-text);
}

/*
 * ----------------------------------------
 *  PASSWORD FIELD
 * ----------------------------------------
 */

/* * PASSWORD FIELD FORGOT * */

sb-password-field:has([part="password-field-forgot"])
  [part="password-field-label"]
  > [data-slot="field-label"]
  > [data-slot="label"] {
  width: 100%;
}

sb-password-field [part="password-field-forgot"] {
  margin-left: auto;

  --rtg-button-space-px-default: var(--sb-field-forgot-space-px);
  --rtg-button-space-size-default: var(--sb-field-forgot-space-size);

  --rtg-button-font-weight: var(--sb-field-forgot-font-weight);
  --rtg-button-link-color-text: var(--sb-field-forgot-color-text);
  --rtg-button-font-size-default: var(--sb-field-forgot-font-size);
  --rtg-button-font-line-height-default: var(
    --sb-field-forgot-font-line-height
  );
}

sb-password-field [part="password-field-forgot"] > [data-slot="button"] {
  border: none;
}

/*
 * ============================================================
 *  FORM
 * ============================================================
 */

sb-form {
  display: block;
}

sb-form > [part="form"] {
  display: block;
  width: 100%;
}

sb-otp {
  --rtg-typography-p-font-family: var(--sb-otp-typography-font-family);
  --rtg-typography-p-font-size: var(--sb-otp-typography-font-size);
  --rtg-typography-p-font-weight: var(--sb-otp-typography-font-weight);
  --rtg-typography-p-color-text: var(--sb-otp-typography-color-text);
  --rtg-button-link-color-text: var(--sb-otp-button-color-text-brand);
  display: grid;
  justify-content: var(--sb-otp-alignment-justify-content);
}

sb-otp-resend > div[part="otp-resend"] {
  display: flex;
  justify-content: var(--sb-otp-resend-alignment-justify-content);
}

/*
 * ============================================================
 *  PROVIDER FIELD
 * ============================================================
 */

sb-provider-field {
  display: block;
  width: 100%;
}

sb-provider-field > [part="provider-field"] > [data-slot="field"] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/*
 * ----------------------------------------
 *  PROVIDER FIELD BUTTON
 * ----------------------------------------
 */

sb-provider-field
  > [part="provider-field"][data-columns$="one"]
  [part="provider-field-button"] {
  grid-column: span 12 / span 12;
}

sb-provider-field
  > [part="provider-field"][data-columns$="three"]
  [part="provider-field-button"] {
  grid-column: span 4 / span 4;
}

sb-provider-field
  > [part="provider-field"][data-columns$="four"]
  [part="provider-field-button"] {
  grid-column: span 3 / span 3;
}

sb-provider-field
  > [part="provider-field"][data-columns^="two-"]
  [part="provider-field-button"]:nth-child(-n + 2) {
  grid-column: span 6 / span 6;
}

sb-provider-field
  > [part="provider-field"][data-columns^="three-"]
  [part="provider-field-button"]:nth-child(-n + 3) {
  grid-column: span 4 / span 4;
}

sb-edit-identifier > div {
  display: flex;
  align-items: center;
  justify-content: var(--sb-edit-identifier-alignment-justify-content);
  gap: 0.25rem;
  --rtg-typography-p-font-weight: var(
    --sb-edit-identifier-typography-p-font-weight
  );
}

/*
 * ============================================================
 *  ALERT
 * ============================================================
 */

sb-alert {
  display: block;
  width: 100%;
}

/* * DEFAULT (BASE) TONAL * */

sb-alert
  > [part="alert"][data-variant="tonal"]:has(> [data-variant="default"]) {
  --rtg-alert-color-bg: var(--rtg-alert-default-tonal-color-bg);
  --rtg-alert-color-border: var(--rtg-alert-default-tonal-color-border);
}

/* * OUTLINE VARIANT * */

sb-alert
  > [part="alert"][data-variant="outline"]:has(> [data-variant="default"]) {
  --rtg-alert-color-border: var(--rtg-alert-default-tonal-color-border);
}

sb-alert
  > [part="alert"][data-variant="outline"]:has(> [data-variant="brand"]) {
  --rtg-alert-color-border: var(--rtg-alert-brand-tonal-color-border);
}

sb-alert
  > [part="alert"][data-variant="outline"]:has(> [data-variant="destructive"]) {
  --rtg-alert-color-border: var(--rtg-alert-destructive-tonal-color-border);
}

sb-alert
  > [part="alert"][data-variant="outline"]:has(> [data-variant="warning"]) {
  --rtg-alert-color-border: var(--rtg-alert-warning-tonal-color-border);
}

sb-alert
  > [part="alert"][data-variant="outline"]:has(> [data-variant="success"]) {
  --rtg-alert-color-border: var(--rtg-alert-success-tonal-color-border);
}

sb-alert > [part="alert"][data-variant="outline"]:has(> [data-variant="info"]) {
  --rtg-alert-color-border: var(--rtg-alert-info-tonal-color-border);
}

sb-countdown {
  --rtg-typography-p-font-family: var(--sb-countdown-font-family);
  --rtg-typography-p-font-size: var(--sb-countdown-font-size);
  --rtg-typography-p-font-weight: var(--sb-countdown-font-weight);
  --rtg-typography-p-color-text: var(--sb-countdown-color-text);
}

sb-container {
  --rtg-card-space-width: var(--sb-container-space-width);
  --rtg-card-space-py: var(--sb-container-space-py);
  --rtg-card-space-px: var(--sb-container-space-px);
  --rtg-card-color-bg: var(--sb-container-color-bg);
  --rtg-card-radius: var(--sb-container-radius);
  --rtg-card-width-ring: var(--sb-container-width-ring);
  --rtg-card-color-ring: var(--sb-container-color-ring);
}

sb-container[root] > rtg-card {
  display: inline-block;
}

sb-container[root] > rtg-card > div {
  min-height: var(--sb-container-space-min-height);
  justify-content: var(--sb-container-alignment-justify-content);
}

/*
 * ============================================================
 *  LINK
 * ============================================================
 */

sb-link {
  display: block;
}

sb-link > [part="link"] {
  display: flex;
  gap: var(--sb-link-space-gap);
  color: var(--sb-link-color-text);
  font-size: var(--sb-link-font-size);
  line-height: var(--sb-link-font-line-height);
  font-weight: var(--sb-link-font-weight);

  justify-content: var(--sb-watermark-alignment-justify-content);

  --rtg-button-space-px-default: var(--sb-link-button-space-px);
  --rtg-button-space-size-default: var(--sb-link-button-space-size);

  --rtg-button-link-color-text: var(--sb-link-color-text);
  --rtg-button-font-size-default: var(--sb-link-font-size);
  --rtg-button-font-line-height-default: var(--sb-link-font-line-height);
  --rtg-button-font-weight: var(--sb-link-font-weight);

  --rtg-button-opacity-disabled: var(--sb-link-button-opacity-disabled);
}

sb-link > [part="link"] > [part="link-button"] > [data-slot="button"] {
  text-decoration-line: underline;
  border: none;
}

sb-link > [part="link"] > [part="link-button"] > [data-slot="button"]:hover {
  color: var(--sb-link-button-color-text-hover);
}

sb-subtitle {
  --rtg-typography-p-font-family: var(--sb-subtitle-font-family);
  --rtg-typography-p-font-size: var(--sb-subtitle-font-size);
  --rtg-typography-p-font-weight: var(--sb-subtitle-font-weight);
  --rtg-typography-p-color-text: var(--sb-subtitle-color-text);
}

sb-title {
  --rtg-typography-h-h4-font-family: var(--sb-title-font-family);
  --rtg-typography-h-h4-font-size: var(--sb-title-font-size);
  --rtg-typography-h-h4-font-weight: var(--sb-title-font-weight);
  --rtg-typography-h-color-text: var(--sb-title-color-text);
}

/*
 * ============================================================
 *  WATERMARK
 * ============================================================
 */

/*
 * ----------------------------------------
 *  WATERMARK
 * ----------------------------------------
 */

sb-watermark {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--sb-watermark-space-width);
  /* TO DO: DISCUSS ALIGNMENT TOKENIZATION */
  justify-content: var(--sb-watermark-alignment-justify-content);
  --rtg-badge-space-py: var(--sb-watermark-space-py);
  --rtg-badge-space-px: var(--sb-watermark-space-px);
  --rtg-badge-space-px-has-icon: var(--sb-watermark-space-px-sm);
  --rtg-badge-icon-space-size: var(--sb-watermark-logo-space-size);
}

/* * MUTED VARIANT * */

sb-watermark > [part="watermark"][data-variant="muted"] {
  --rtg-badge-font-weight: var(--sb-watermark-muted-font-weight);

  --rtg-badge-default-color-text: var(--sb-watermark-muted-default-color-text);
  --rtg-badge-secondary-color-text: var(
    --sb-watermark-muted-secondary-color-text
  );
  --rtg-badge-outline-color-text: var(--sb-watermark-muted-outline-color-text);
  --rtg-badge-ghost-color-text: var(--sb-watermark-muted-ghost-color-text);
}

/*
 * ----------------------------------------
 *  WATERMARK LOGO
 * ----------------------------------------
 */

sb-watermark [part="watermark-logo"] > .saasbase-logo-cube {
  fill: var(--sb-watermark-logo-color-cube, var(--sb-color-saasbase));
}

sb-watermark [part="watermark-logo"] > .saasbase-logo-vector {
  stroke: var(--sb-watermark-logo-color-vector, var(--sb-color-on-saasbase));
}

/* ---------------------------------------- */

sb-watermark > [part="watermark"][data-badge="default"] {
  --sb-watermark-logo-color-cube: var(--rtg-badge-default-color-text);
  --sb-watermark-logo-color-vector: var(--rtg-badge-default-color-bg);
}

sb-watermark > [part="watermark"][data-badge="secondary"] {
  --sb-watermark-logo-color-cube: var(--rtg-badge-secondary-color-text);
  --sb-watermark-logo-color-vector: var(--rtg-badge-secondary-color-bg);
}

sb-watermark > [part="watermark"][data-badge="outline"] {
  --sb-watermark-logo-color-cube: var(--rtg-badge-outline-color-text);
  --sb-watermark-logo-color-vector: var(--rtg-badge-outline-color-bg);
}

sb-watermark > [part="watermark"][data-badge="ghost"] {
  --sb-watermark-logo-color-cube: var(--rtg-badge-ghost-color-text);
  --sb-watermark-logo-color-vector: var(--rtg-badge-ghost-color-bg);
}

/* * BRAND VARIANT * */

sb-watermark > [part="watermark"][data-variant="brand"] {
  --sb-watermark-logo-color-cube: var(--sb-watermark-logo-brand-color-cube);
  --sb-watermark-logo-color-vector: var(--sb-watermark-logo-brand-color-vector);
}

#sb-avatar-menu > div {
  box-shadow: none !important;
}

sb-account-settings {
  --rtg-card-radius: var(--sb-account-settings-card-radius);
}

sb-account-settings[mode="PAGE"] {
  background-color: var(--sb-account-settings-page-color-bg);
}

sb-account-settings[mode="MODAL"] {
  background-color: var(--sb-account-settings-modal-color-bg);
}

sb-account-settings div[part="modal-content"] .sb-account-settings-header {
  margin-inline: var(--sb-ref-space-6);
  margin-bottom: var(--sb-ref-space-2);
  display: flex;
  justify-content: space-between;
}

sb-account-settings .sb-account-settings-header {
  /* margin-inline: var(--sb-ref-space-6); */
  margin-bottom: var(--sb-ref-space-6);
  display: flex;
  justify-content: space-between;
}

sb-account-settings
  .sb-account-settings-modal-layout
  .sb-account-settings-header {
  margin-top: var(--sb-ref-space-4) !important;
}

sb-account-settings .sb-account-settings-header-vertical {
  /* margin-inline: var(--sb-ref-space-2); */
  margin-bottom: 0;
}

sb-account-settings
  div[part="modal-content"]
  .sb-account-settings-header-vertical {
  margin-inline: var(--sb-ref-space-7);
  margin-bottom: 0;
}

sb-account-settings rtg-tabs[part="account-settings-tab"] {
  width: 100%;
}

sb-account-settings
  .sb-account-settings-modal-layout
  rtg-tabs[part="account-settings-tab"] {
  height: 100%;
  overflow: hidden;
}

sb-account-settings rtg-tabs[part="account-settings-tab"] > div {
  width: 100%;
}

sb-profile rtg-card {
  --rtg-card-space-py: var(--sb-account-settings-card-space-py);
  --rtg-card-space-px: var(--sb-account-settings-card-space-px);
}

sb-profile rtg-card rtg-input {
  --rtg-input-color-bg: var(--sb-account-settings-input-color-bg);
  --rtg-input-color-bg-disabled: var(
    --sb-account-settings-input-color-bg-disabled
  );
}

sb-profile rtg-card rtg-select-trigger {
  --sb-select-trigger-color-bg: var(
    --sb-account-settings-select-trigger-color-bg
  );
  --sb-select-trigger-color-bg-disabled: var(
    --sb-account-settings-select-trigger-color-bg-disabled
  );
}

sb-profile rtg-card rtg-select-trigger button {
  background-color: var(
    --sb-account-settings-select-trigger-color-bg
  ) !important;
}

sb-profile rtg-card rtg-input-otp-slot > [data-slot="input-otp-slot"] {
  background: var(--sb-account-settings-input-color-bg);
}

/* SideBar */

sb-profile div[part="tab-trigger"]:hover {
  background-color: var(--sb-sidebar-color-bg-hover);
}

sb-profile rtg-card[part="personal-info-card"][editing="true"] {
  --rtg-card-color-bg: var(
    --sb-account-settings-personal-info-card-color-bg-editing
  );
  --rtg-button-space-px-lg: var(
    --sb-account-settings-info-card-button-space-px-lg
  );
}

sb-profile
  rtg-card[part="personal-info-card"][editing="true"]
  > [data-slot="card"] {
  box-shadow: 0 4px 4px -2px hsla(0, 0%, 0%, 0.1);
  border: var(--rtg-card-width-ring) solid var(--rtg-card-color-ring);
}

sb-profile rtg-popover[part="account-info-popover"] {
  --sb-popover-content-color-bg: var(
    --sb-account-settings-account-info-popover-color-bg
  );
  --sb-popover-content-space-w: var(
    --sb-account-settings-account-info-popover-space-w
  );
  --rtg-button-space-px-lg: var(
    --sb-account-settings-info-card-button-space-px-lg
  );
}

sb-profile
  rtg-card[part="urls-info-card"][editing="true"]
  > [data-slot="card"] {
  box-shadow: 0 4px 4px -2px hsla(0, 0%, 0%, 0.1);
  border: var(--rtg-card-width-ring) solid var(--rtg-card-color-ring);
}

sb-profile rtg-card[part="urls-info-card"][editing="true"] {
  --rtg-card-color-bg: var(
    --sb-account-settings-urls-info-card-color-bg-editing
  );
  --rtg-button-space-px-lg: var(
    --sb-account-settings-info-card-button-space-px-lg
  );
}

sb-profile rtg-card[part="location-info-card"][editing="true"] {
  --rtg-card-color-bg: var(
    --sb-account-settings-location-info-card-color-bg-editing
  );
  --rtg-button-space-px-lg: var(
    --sb-account-settings-info-card-button-space-px-lg
  );
}

sb-profile
  rtg-card[part="location-info-card"][editing="true"]
  > [data-slot="card"] {
  box-shadow: 0 4px 4px -2px hsla(0, 0%, 0%, 0.1);
  border: var(--rtg-card-width-ring) solid var(--rtg-card-color-ring);
}

sb-account-settings div[part="modal-content"] {
  background-color: var(--sb-account-settings-modal-color-bg);
  position: relative;
}

sb-account-settings div[part="page-content"] {
  background-color: var(--sb-account-settings-page-color-bg);
}

sb-account-settings div[part="page-content-modal"] {
  background-color: var(--sb-account-settings-page-color-bg);
  border: var(--sb-account-settings-modal-width-border) solid
    var(--sb-account-settings-modal-color-border);
}

sb-account-settings rtg-card-header {
  border-bottom: var(--sb-account-settings-card-header-width-border) solid
    var(--sb-account-settings-card-header-width-border);
}

sb-account-settings {
  --rtg-typography-p-space-mt: 0px;
}

sb-account-settings rtg-card-content rtg-typography-p {
  --rtg-typography-p-font-size-vw-sm: var(--sb-account-settings-p-font-size);
  --rtg-typography-p-font-size: var(--sb-account-settings-p-font-size);
}

rtg-toast-view-port[part="user-profile-toast"] > ol {
  top: 0px;
  height: -moz-fit-content;
  height: fit-content;
}

sb-account-settings rtg-button[part="modal-close-button"] {
  display: none;
}

sb-account-settings
  div[part="modal-content"]
  rtg-button[part="modal-close-button"] {
  display: block;
}

sb-account-settings rtg-button[part="modal-close-button"] button {
  border-radius: 100px !important;
}

sb-account-settings .sb-account-settings-modal-content {
  max-height: var(--sb-account-settings-modal-content-max-height);
  margin: 0;
  padding: var(--sb-account-settings-modal-content-space-py)
    var(--sb-account-settings-modal-content-space-px);
  overflow: auto;
}

/* sb-account-settings .sb-account-settings-modal-content-horizontal {
  padding-left: var(--sb-account-settings-modal-content-pl-md);
} */

sb-account-settings .sb-account-settings-vertical-margin {
  margin-bottom: var(--sb-account-settings-vertical-content-space-mb);
}

sb-account-settings .sb-account-settings-content-md-max-height-full {
  max-height: 100%;
}

sb-account-settings .sb-account-settings-close-button-container {
  position: absolute;
  right: var(--sb-account-settings-close-button-space);
  top: var(--sb-account-settings-close-button-space);
  z-index: 10;
}

sb-account-settings .sb-account-settings-watermark-container {
  position: fixed;
  display: flex;
  justify-content: center;
  bottom: 0;
  width: -webkit-fill-available;
  padding: var(--sb-account-settings-watermark-space-py) 0;
}

sb-account-settings .sb-account-settings-content-offset {
  margin-left: var(--sb-account-settings-content-offset-ml);
  transform: translateZ(0);
}

sb-account-settings .sb-account-settings-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--sb-account-settings-overlay-z);
  background-color: var(--sb-account-settings-overlay-color);
  backdrop-filter: blur(4px);
}

sb-account-settings .sb-account-settings-section-title {
  margin-bottom: var(--sb-account-settings-card-section-space-m);
}

sb-account-settings .sb-account-settings-section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sb-account-settings-card-content-gap-xl);
}

sb-account-settings .sb-account-settings-card-header-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: var(--sb-account-settings-card-header-space-py)
    var(--sb-account-settings-card-header-space-px);
}

sb-account-settings .sb-account-settings-card-title {
  display: flex;
  align-items: center;
  gap: var(--sb-account-settings-title-gap);
  font-size: var(--sb-account-settings-title-font-size);
  font-weight: var(--sb-ref-font-weight-semibold);
  color: var(--sb-sem-color-text-secondary);
  min-width: var(--sb-ref-space-9);
  min-height: var(--sb-ref-space-9);
}

sb-account-settings .sb-account-settings-input-label {
  /* font-weight: var(--sb-ref-font-weight-semibold); */
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sb-account-settings-label-color-text);
}

sb-account-settings .sb-account-settings-card-button-full {
  width: 100%;
  min-width: 120px;
}

sb-account-settings .sb-account-settings-card-edit-button {
  color: var(--rtg-field-description-color-text);
  font-size: var(--sb-account-settings-card-edit-button-font-size);
  display: flex;
  align-items: center;
  gap: var(--sb-ref-space-1);
}

sb-account-settings .sb-account-settings-input-field {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

sb-account-settings .sb-account-settings-card-form-margin-top {
  margin-top: var(--sb-account-settings-card-section-space-m);
}

sb-account-settings .sb-account-settings-field-row {
  display: flex;
  align-items: center;
  gap: var(--sb-account-settings-field-row-gap);
}

sb-account-settings .sb-account-settings-field-column {
  display: flex;
  flex-direction: column;
  gap: var(--sb-account-settings-card-input-gap);
}

sb-account-settings .sb-account-settings-field-label {
  min-width: var(--sb-account-settings-field-label-min-width);
}

@media (min-width: 768px) {
  sb-account-settings .sb-account-settings-field-label {
    min-width: var(--sb-account-settings-field-label-min-width-md);
  }
}

sb-account-settings .sb-account-settings-field-input-wrapper {
  flex: var(--sb-account-settings-field-input-wrapper-flex);
}

sb-account-settings .sb-account-settings-display-row {
  width: 100%;
}

sb-account-settings .sb-account-settings-display-row-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sb-account-settings-card-input-gap);
}

sb-account-settings .sb-account-settings-display-row-action {
  justify-self: end;
}

sb-account-settings .sb-account-settings-account-grid {
  display: grid;
  grid-template-columns: var(--sb-account-settings-account-display-grid);
  align-items: center;
  gap: var(--sb-account-settings-card-input-gap);
}

sb-account-settings .sb-account-settings-component-gap {
  gap: var(--sb-account-settings-card-input-gap);
}

sb-account-settings .sb-account-settings-account-details {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sb-ref-space-1) * 3);
  margin-inline: var(--sb-account-settings-account-details-space-inline);
  margin-block: var(--sb-account-settings-account-details-space-block);
  flex: 1;
}

sb-account-settings .sb-account-settings-avatar-wrapper {
  position: relative;
  display: flex;
  margin-inline: auto;
  padding-inline: var(--sb-account-settings-avatar-wrapper-space-px);
  padding-bottom: var(--sb-account-settings-avatar-wrapper-space-pb);
  margin-block: var(--sb-account-settings-avatar-wrapper-space-my);
}

sb-account-settings .sb-account-settings-avatar-menu-item {
  padding: var(--sb-account-settings-avatar-menu-item-space-py)
    var(--sb-account-settings-avatar-menu-item-space-px);
  margin-bottom: var(--sb-account-settings-avatar-menu-item-space-mb);
  font-size: var(--sb-account-settings-avatar-menu-item-font-size);
  cursor: pointer;
}

sb-account-settings .sb-account-settings-modal-container {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sb-ref-space-4);
  overflow: auto;
}

sb-account-settings .sb-account-settings-dashboard {
  display: flex;
  justify-self: center;
  transform: rotate(0);
}

sb-account-settings .sb-account-settings-dashboard-width {
  width: 100%;
}

sb-account-settings .sb-account-settings-modal-width {
  height: 100%;
  min-width: 375px;
  max-width: 609px;
  width: calc(100vw - 30px);
}

@media (min-width: 640px) {
  sb-account-settings .sb-account-settings-modal-width {
    max-width: 735px;
  }
}

@media (min-width: 768px) {
  sb-account-settings .sb-account-settings-modal-width {
    width: calc(100vw - 32px);
    max-width: 800px;
  }
}

@media (min-width: 1024px) {
  sb-account-settings .sb-account-settings-modal-width {
    min-width: 800px;
  }
}

sb-account-settings .sb-account-settings-page-reset-margin {
  margin: 0 !important;
}

sb-account-settings .sb-account-settings-modal-root {
  border-radius: var(--sb-sem-radius-overlay-lg);
  position: relative;
  /* padding-block: var(--sb-ref-space-6); */
}

sb-account-settings .sb-account-settings-modal-layout {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  max-height: calc(100vh - 60px);
  box-shadow: var(--sb-sem-shadow-overlay-lg);
  border: var(--sb-account-settings-modal-width-border) solid
    var(--sb-account-settings-modal-color-border);
  border-radius: var(--sb-account-settings-modal-radius);
  overflow: hidden;
  flex-direction: column;
}

sb-account-settings .sb-account-settings-avatar-menu-item:last-child {
  margin-bottom: 0;
}

sb-profile .sb-account-settings-row-layout {
  display: grid;
  grid-template-columns: var(--sb-account-settings-form-grid-template);
  align-items: center;
  -moz-column-gap: var(--sb-account-settings-card-input-gap);
       column-gap: var(--sb-account-settings-card-input-gap);
}

@media (min-width: 768px) {
  sb-profile .sb-account-settings-row-layout {
    grid-template-columns: var(--sb-account-settings-form-grid-template-md);
  }
}

sb-profile .sb-account-settings-column-layout {
  display: flex;
  flex-direction: column;
  gap: var(--sb-account-settings-card-input-gap);
}

sb-profile .sb-account-settings-form-body {
  padding: var(--sb-account-settings-card-content-space);
  display: flex;
  flex-direction: column;
  gap: var(--sb-account-settings-card-content-gap);
}

sb-profile .sb-account-settings-card-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--sb-account-settings-card-actions-gap);
  margin: var(--sb-account-settings-card-actions-space);
}

@media (min-width: 768px) {
  sb-profile .sb-account-settings-card-actions {
    flex-direction: row-reverse;
  }
}

sb-profile .sb-account-settings-card-section-title {
  font-size: var(--sb-account-settings-title-font-size);
  font-weight: var(--sb-ref-font-weight-semibold);
  margin: var(--sb-account-settings-card-section-space-mt) 0
    var(--sb-account-settings-card-section-space-mb);
}

sb-profile .sb-account-settings-card-description {
  font-size: var(--sb-ref-font-size-sm-base);
  color: var(--rtg-field-description-color-text);
  margin: 0 0 var(--sb-account-settings-card-section-space-m);
}

sb-security-settings .sb-account-settings-security-loading {
  padding: var(--sb-ref-space-8);
  text-align: center;
}

sb-security-settings .sb-account-settings-security-panel {
  padding: var(--sb-ref-space-6);
  max-width: var(--sb-account-settings-security-panel-max-width);
}

sb-security-settings .sb-account-settings-security-icon {
  width: var(--sb-account-settings-security-icon-size);
  height: var(--sb-account-settings-security-icon-size);
}

sb-account-settings div[part="page-content-modal"] {
  background-color: var(--sb-account-settings-page-color-bg);
  border: none;
}

sb-account-settings rtg-card-header {
  border-bottom: var(--sb-account-settings-card-header-width-border) solid
    var(--sb-account-settings-card-header-width-border);
}

sb-account-settings .sb-account-settings-link-icon {
  color: var(--sb-account-settings-label-color-text);
}

sb-account-settings .sb-account-settings-info-card-rows {
  margin-inline: 0;
}

@media (min-width: 768px) {
  sb-account-settings .sb-account-settings-info-card-rows {
    margin-inline: 0.5rem;
  }
}

sb-account-settings[mode="MODAL"]
  rtg-tabs[orientation="vertical"]
  sb-watermark {
  margin-bottom: var(--sb-ref-space-6);
}

sb-account-settings[mode="MODAL"] .mobile-sidebar-drawer sb-watermark {
  margin-bottom: var(--sb-ref-space-2) !important;
}

/* SideBar */

sb-profile-sidebar div[part="tab-trigger"]:hover {
  background-color: var(--sb-sidebar-color-bg-hover);
}

sb-profile-sidebar div[part="tab-trigger"][active="true"] {
  background-color: var(--sb-sidebar-color-bg-hover);
}

sb-profile-sidebar div[part="tab-trigger"] {
  font-weight: 500;
  padding: var(--sb-ref-space-2) var(--sb-ref-space-4);
  cursor: pointer;
  color: var(--sb-sidebar-color-text);
}

sb-profile-sidebar div[part="mobile-drawer"] {
  background-color: var(--sb-sidebar-color-bg);
}

sb-profile-sidebar .sb-account-settings-sidebar-horizontal {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  margin-right: var(--sb-ref-space-4);
  margin-block: 0;
  height: 100%;
}

sb-profile-sidebar .sb-account-settings-sidebar-horizontal[burger="true"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  margin-right: var(--sb-ref-space-4);
  margin-block: var(--sb-ref-space-2);
  height: 100%;
}

sb-profile-sidebar rtg-typography-h[part="burger-title-label"] {
  --rtg-typography-h-h3-space-mt: 0;
}

sb-account-settings
  div[part="modal-content"]
  sb-profile-sidebar
  .sb-account-settings-sidebar-horizontal {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  margin-inline: var(--sb-ref-space-4);
  margin-block: var(--sb-ref-space-2);
  margin-right: 0;
  height: 100%;
}

sb-profile-sidebar .sb-account-settings-sidebar-vertical {
  display: flex;
  justify-content: space-between;
  /* width: 100%; */
}

sb-profile-sidebar .sb-account-settings-sidebar-horizontal-burger {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  margin-inline: var(--sb-ref-space-6);
  margin-bottom: var(--sb-ref-space-2);
  margin-top: var(--sb-ref-space-4);
  height: 100%;
}

sb-profile-sidebar .sb-account-settings-sidebar-modal-margin {
  margin-inline: var(--sb-ref-space-6);
}

sb-profile-sidebar .sb-account-settings-sidebar-burger-button {
  padding: var(--sb-account-settings-sidebar-burger-padding);
}

sb-profile-sidebar .sb-account-settings-sidebar-burger-label {
  margin-left: var(--sb-account-settings-sidebar-burger-label-left);
  font-size: var(--sb-account-settings-sidebar-burger-label-font-size);
}

sb-profile-sidebar .sb-account-settings-sidebar-drawer-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--sb-account-settings-sidebar-body-height);
  padding: var(--sb-account-settings-sidebar-drawer-body-space);
  width: -moz-min-content;
  width: min-content;
}

sb-profile-sidebar .sb-account-settings-sidebar-tab-list {
  display: flex;
  flex-direction: column;
  gap: var(--sb-account-settings-card-input-gap);
}

sb-profile-sidebar .sb-account-settings-sidebar-tab-item {
  width: 100%;
  margin-bottom: var(--sb-account-settings-sidebar-tab-item-space-mb);
}

sb-profile-sidebar .sb-account-settings-sidebar-tab-item-full {
  width: 100%;
}

sb-profile-sidebar .sb-account-settings-sidebar-mobile-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--sb-account-settings-sidebar-body-height);
  padding: var(--sb-account-settings-sidebar-mobile-body-space-py)
    var(--sb-account-settings-sidebar-mobile-body-space-px);
  /* width: min-content; */
}

sb-profile-sidebar .sb-account-settings-sidebar-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--sb-account-settings-sidebar-mobile-drawer-width);
  box-shadow: var(--sb-account-settings-sidebar-mobile-drawer-shadow);
  z-index: var(--sb-account-settings-sidebar-mobile-drawer-z);
}

sb-profile-sidebar .sb-account-settings-sidebar-mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--sb-account-settings-sidebar-mobile-overlay-color);
  z-index: var(--sb-account-settings-sidebar-mobile-overlay-z);
  transition: opacity var(--sb-account-settings-sidebar-mobile-overlay-duration)
    ease-in-out;
}

sb-profile-sidebar .sb-account-settings-sidebar-mobile-open {
  display: block;
  opacity: 1;
}

sb-profile-sidebar .sb-account-settings-sidebar-mobile-closed {
  display: none;
  opacity: 0;
}

sb-profile-sidebar .sb-account-settings-tab-trigger {
  text-align: left;
  font-weight: 400;
  font-size: var(--sb-ref-font-size-sm-base);
  border-radius: var(--sb-sem-radius-action-sm);
}

sb-profile-sidebar .sb-account-settings-horizontal-tab-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  gap: var(--sb-ref-space-2);
}

sb-profile-sidebar .sb-account-settings-vertical-tab-list {
  width: 160px;
  gap: var(--sb-ref-space-4);
}

sb-profile-sidebar div[part="mobile-drawer"] {
  background-color: var(--sb-sidebar-color-bg);
}

sb-profile-sidebar rtg-tabs-list {
  margin: 1rem 0;
}

@media (min-width: 640px) {
  sb-profile-sidebar rtg-tabs-list[data-orientation="vertical"] {
    width: 100%;
  }
  sb-profile-sidebar rtg-tabs-list[data-orientation="vertical"] > div {
    width: 100%;
  }
}

sb-profile-sidebar rtg-tabs-list[data-orientation="horizontal"] {
  width: 100%;
  --rtg-tabs-trigger-default-color-bg-active: var(
    --sb-sidebar-tab-trigger-default-color-bg-active
  );
  --rtg-tabs-list-default-color-bg: var(--sb-sidebar-tab-list-default-color-bg);
  margin: 0;
}

sb-profile-sidebar
  rtg-tabs-list[data-orientation="horizontal"][data-burger="true"] {
  width: 100%;
  --rtg-tabs-trigger-default-color-bg-active: var(
    --sb-sidebar-tab-trigger-burger-default-color-bg-active
  );
  --rtg-tabs-trigger-font-size: var(--sb-ref-font-size-base-lg);
  margin-top: 2rem;
}

sb-profile-sidebar
  rtg-tabs-list[data-orientation="horizontal"][data-burger="true"]
  rtg-tabs-trigger
  button {
  border: none !important;
  box-shadow: none !important;
  justify-content: center;
}

sb-profile-sidebar rtg-tabs-list[data-orientation="horizontal"] > div {
  width: 100%;
  gap: 0.5rem;
}

sb-account-settings rtg-button[part="burger-close-button"] button {
  border-radius: 100px !important;
}

sb-account-info rtg-card[part="edit-form"] {
  --rtg-card-color-bg: var(--sb-account-info-edit-form-card-color-bg);
  margin-bottom: var(--sb-ref-space-4);
  --rtg-button-space-px-lg: var(
    --sb-account-settings-info-card-button-space-px-lg
  );
}

sb-account-info rtg-card[part="edit-form"] > [data-slot="card"] {
  box-shadow: 0 4px 4px -2px hsla(0, 0%, 0%, 0.1);
  border: var(--rtg-card-width-ring) solid var(--rtg-card-color-ring);
}

sb-account-info rtg-card[part="verification-form"] {
  --rtg-card-color-bg: var(--sb-account-info-verification-form-card-color-bg);
  margin-top: var(--sb-ref-space-4);
}

sb-account-info rtg-avatar {
  --rtg-avatar-space-size-lg: var(--sb-account-info-avatar-space-size);
}

sb-account-info rtg-card > [data-slot="card"] {
  overflow: unset;
}

rtg-button[part="upload-image-button"] {
  --rtg-button-radius-lg: 100%;
}

sb-account-info rtg-avatar > [data-slot="avatar"][data-size="lg"] {
  border: var(--sb-account-info-avatar-width-border) solid
    var(--sb-account-info-avatar-color-border);
  box-shadow: 0 4px 6px -1px hsla(0, 0%, 0%, 0.1);
}

/* @media (max-width: 768px) {
  sb-account-info div[part="label"] {
    display: none;
  }
} */

sb-nav-user rtg-dropdown-menu-trigger rtg-button[part="trigger-button"] {
  padding-bottom: var(--sb-nav-user-button-space-py);
  padding-top: var(--sb-nav-user-button-space-py);
  height: auto !important;
}

sb-nav-user rtg-dropdown-menu-group {
  --sb-dropdown-menu-label-space-py: var(--sb-ref-space-0);
}

sb-nav-user rtg-dropdown-menu-content {
  --sb-dropdown-menu-content-space-p: var(
    --sb-nav-user-dropdown-menu-content-space-p
  );
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.font-geist {
    font-family: "Geist", sans-serif;
  }

.font-inter {
    font-family: "Inter", sans-serif;
  }

.font-roboto {
    font-family: "Roboto", sans-serif;
  }

.font-open-sans {
    font-family: "Open Sans", sans-serif;
  }

.font-lato {
    font-family: "Lato", sans-serif;
  }

.font-montserrat {
    font-family: "Montserrat", sans-serif;
  }

.sb-container{
  width: 100%;
}

@media (min-width: 640px){

  .sb-container{
    max-width: 640px;
  }
}

@media (min-width: 768px){

  .sb-container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){

  .sb-container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){

  .sb-container{
    max-width: 1280px;
  }
}

.sb-absolute{
  position: absolute;
}

.sb-relative{
  position: relative;
}

.sb-sticky{
  position: sticky;
}

.sb-bottom-0{
  bottom: 0px;
}

.sb-bottom-5{
  bottom: 1.25rem;
}

.sb-right-2{
  right: 0.5rem;
}

.sb-right-5{
  right: 1.25rem;
}

.sb-top-0{
  top: 0px;
}

.sb-top-4{
  top: 1rem;
}

.sb-z-40{
  z-index: 40;
}

.sb-m-2{
  margin: 0.5rem;
}

.sb-mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.sb-mb-6{
  margin-bottom: 1.5rem;
}

.sb-mb-8{
  margin-bottom: 2rem;
}

.sb-mt-2{
  margin-top: 0.5rem;
}

.sb-block{
  display: block;
}

.sb-flex{
  display: flex;
}

.sb-grid{
  display: grid;
}

.\!sb-hidden{
  display: none !important;
}

.sb-hidden{
  display: none;
}

.sb-h-16{
  height: 4rem;
}

.sb-h-full{
  height: 100%;
}

.sb-h-screen{
  height: 100vh;
}

.sb-min-h-screen{
  min-height: 100vh;
}

.sb-w-64{
  width: 16rem;
}

.sb-w-\[200px\]{
  width: 200px;
}

.sb-w-full{
  width: 100%;
}

.sb-w-screen{
  width: 100vw;
}

.sb-min-w-0{
  min-width: 0px;
}

.sb-max-w-2xl{
  max-width: 42rem;
}

.sb-max-w-7xl{
  max-width: 80rem;
}

.sb-flex-1{
  flex: 1 1 0%;
}

.sb-shrink-0{
  flex-shrink: 0;
}

.sb-flex-grow{
  flex-grow: 1;
}

.sb-translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.sb-translate-x-\[-100\%\]{
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.sb-rotate-0{
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.sb-transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.sb-cursor-pointer{
  cursor: pointer;
}

.sb-grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.\!sb-flex-row{
  flex-direction: row !important;
}

.sb-flex-row{
  flex-direction: row;
}

.\!sb-flex-col{
  flex-direction: column !important;
}

.sb-flex-col{
  flex-direction: column;
}

.sb-flex-wrap{
  flex-wrap: wrap;
}

.sb-flex-nowrap{
  flex-wrap: nowrap;
}

.sb-items-center{
  align-items: center;
}

.sb-justify-center{
  justify-content: center;
}

.sb-justify-between{
  justify-content: space-between;
}

.sb-gap-1{
  gap: 0.25rem;
}

.sb-gap-2{
  gap: 0.5rem;
}

.sb-gap-3{
  gap: 0.75rem;
}

.sb-gap-4{
  gap: 1rem;
}

.sb-gap-6{
  gap: 1.5rem;
}

.sb-gap-8{
  gap: 2rem;
}

.sb-overflow-x-auto{
  overflow-x: auto;
}

.sb-overflow-x-hidden{
  overflow-x: hidden;
}

.sb-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-rounded{
  border-radius: 0.25rem;
}

.sb-rounded-2xl{
  border-radius: 1rem;
}

.sb-rounded-lg{
  border-radius: 0.5rem;
}

.sb-rounded-xl{
  border-radius: 0.75rem;
}

.sb-border{
  border-width: 1px;
}

.sb-border-b{
  border-bottom-width: 1px;
}

.sb-border-none{
  border-style: none;
}

.sb-border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.sb-bg-\[rgb\(255\,0\,0\)\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
}

.sb-bg-primary{
  background-color: hsl(var(--primary));
}

.sb-bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.sb-bg-slate-200{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.sb-bg-slate-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.sb-bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.sb-p-10{
  padding: 2.5rem;
}

.sb-p-6{
  padding: 1.5rem;
}

.sb-p-8{
  padding: 2rem;
}

.sb-px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.sb-px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.sb-px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.sb-px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.sb-py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.sb-py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.sb-text-left{
  text-align: left;
}

.sb-text-center{
  text-align: center;
}

.sb-font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.sb-text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.sb-text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.sb-text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.sb-text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.sb-font-bold{
  font-weight: 700;
}

.sb-font-medium{
  font-weight: 500;
}

.sb-text-muted-foreground{
  color: hsl(var(--muted-foreground));
}

.sb-text-primary{
  color: hsl(var(--primary));
}

.sb-text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.sb-text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.sb-text-slate-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.sb-text-slate-900{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.sb-text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.sb-underline{
  text-decoration-line: underline;
}

.sb-opacity-0{
  opacity: 0;
}

.sb-opacity-100{
  opacity: 1;
}

.\!sb-shadow-none{
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.sb-shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sb-transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.sb-transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.sb-duration-300{
  transition-duration: 300ms;
}

.sb-ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The moving bar uses a CSS variable --sidebar-ring for color; fallback provided. */

/* Keyframes and small helper classes. Namespaced with sb- to avoid collisions. */

@keyframes sb-linear-move {
    0% {
      transform: translateX(-120%);
    }
    50% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(300%);
    }
  }

#root-container {
    will-change: height; /* Hint to browser to optimize for height changes */
    overflow: hidden; /* Prevent content from overflowing during animation */
    box-sizing: border-box; /* Ensure padding/borders are included in height */
  }

/* global.css */

@keyframes sbFadeIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
      -webkit-transform: translateY(-4px);
      -moz-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
      -o-transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
    }
  }

@keyframes sbFadeOut {
    from {
      opacity: 1;
      transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-4px);
      -webkit-transform: translateY(-4px);
      -moz-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
      -o-transform: translateY(-4px);
    }
  }

.sb_social_wrap {
  --sso-gap: 0.5rem;
  --sso-cols: 3; /* You can dynamically adjust this with JS if needed */
  --sso-item-width: calc(
    100% / var(--sso-cols) - var(--sso-gap) / var(--sso-cols) *
      (var(--sso-cols) - 1)
  );

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  gap: var(--sso-gap);
  width: 100%;
}

/* Buttons */

.sb_social_wrap > * {
  flex: 0 0 var(--sso-item-width);
}

body {
  font-family: var(--sb-sem-font-family);
}

.hover\:sb-bg-primary\/90:hover{
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:sb-bg-slate-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.hover\:sb-text-slate-900:hover{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.disabled\:\!sb-opacity-100:disabled{
  opacity: 1 !important;
}

@media (min-width: 768px){

  .md\:sb-block{
    display: block;
  }

  .md\:sb-grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');

/* * TOKEN IMPORTS * */

/*
 * ===========================================================================
 *  REFERENCE TOKENS INDEX
 * ===========================================================================
 */

/*
 * ===========================================================================
 *  COLOR REFERENCE TOKENS
 *  sb-ref-color-*
 * ---------------------------------------------------------------------------
 *  Color token values are stored as HSL color components. This format allows
 *  for flexible usage with the `hsl()` function and supports alpha channel
 *  when needed. Each palette follows a 50-950 scale where 50 is the lightest
 *  and 950 is the darkest.
 * ===========================================================================
 */

:root {
  --sb-ref-color-white: 0 0% 100%;
  --sb-ref-color-black: 0 0% 0%;
  --sb-ref-color-transparent: 0 0% 0% / 0;

  /* * BASE * */
  /* The base palette consists of neutral colors. It is the foundational color
  of the UI, used for backgrounds, borders, text, and more. */
  --sb-ref-color-base-50: 0 0% 98%;
  --sb-ref-color-base-100: 0 0% 96%;
  --sb-ref-color-base-200: 0 0% 90%;
  --sb-ref-color-base-300: 0 0% 83%;
  --sb-ref-color-base-400: 0 0% 64%;
  --sb-ref-color-base-500: 0 0% 45%;
  --sb-ref-color-base-600: 0 0% 32%;
  --sb-ref-color-base-700: 0 0% 25%;
  --sb-ref-color-base-800: 0 0% 15%;
  --sb-ref-color-base-900: 0 0% 9%;
  --sb-ref-color-base-950: 0 0% 4%;

  /* * BRAND * */
  /* The brand palette is built on the primary color of the brand. It is mainly
  used for key actions and interactive components throughout the UI. */
  --sb-ref-color-brand-50: 0 0% 98%;
  --sb-ref-color-brand-100: 0 0% 96%;
  --sb-ref-color-brand-200: 0 0% 90%;
  --sb-ref-color-brand-300: 0 0% 83%;
  --sb-ref-color-brand-400: 0 0% 64%;
  --sb-ref-color-brand-500: 0 0% 45%;
  --sb-ref-color-brand-600: 0 0% 32%;
  --sb-ref-color-brand-700: 0 0% 25%;
  --sb-ref-color-brand-800: 0 0% 15%;
  --sb-ref-color-brand-900: 0 0% 9%;
  --sb-ref-color-brand-950: 0 0% 4%;

  /* * DESTRUCTIVE * */
  /* The destructive palette is used for desturctive actions, error states, and
  critical alerts. */
  --sb-ref-color-destructive-50: 0 86% 97%;
  --sb-ref-color-destructive-100: 0 93% 94%;
  --sb-ref-color-destructive-200: 0 96% 89%;
  --sb-ref-color-destructive-300: 0 94% 82%;
  --sb-ref-color-destructive-400: 0 91% 71%;
  --sb-ref-color-destructive-500: 0 84% 60%;
  --sb-ref-color-destructive-600: 0 72% 51%;
  --sb-ref-color-destructive-700: 0 74% 42%;
  --sb-ref-color-destructive-800: 0 70% 35%;
  --sb-ref-color-destructive-900: 0 63% 31%;
  --sb-ref-color-destructive-950: 0 75% 15%;

  /* * WARNING * */
  /* The warning palette is used for warning states and cautionary messages,
  alerting users to potential issues or information requiring attention. */
  --sb-ref-color-warning-50: 33 100% 96%;
  --sb-ref-color-warning-100: 34 100% 92%;
  --sb-ref-color-warning-200: 32 98% 83%;
  --sb-ref-color-warning-300: 31 97% 72%;
  --sb-ref-color-warning-400: 27 96% 61%;
  --sb-ref-color-warning-500: 25 95% 53%;
  --sb-ref-color-warning-600: 21 90% 48%;
  --sb-ref-color-warning-700: 17 88% 40%;
  --sb-ref-color-warning-800: 15 79% 34%;
  --sb-ref-color-warning-900: 15 75% 28%;
  --sb-ref-color-warning-950: 13 81% 15%;

  /* * SUCCESS * */
  /* The success palette is used for success states, positive feedback, and
  completed actions. */
  --sb-ref-color-success-50: 138 76% 97%;
  --sb-ref-color-success-100: 141 84% 93%;
  --sb-ref-color-success-200: 141 79% 85%;
  --sb-ref-color-success-300: 142 77% 73%;
  --sb-ref-color-success-400: 142 69% 58%;
  --sb-ref-color-success-500: 142 71% 45%;
  --sb-ref-color-success-600: 142 76% 36%;
  --sb-ref-color-success-700: 142 72% 29%;
  --sb-ref-color-success-800: 143 64% 24%;
  --sb-ref-color-success-900: 144 61% 20%;
  --sb-ref-color-success-950: 145 80% 10%;

  /* * INFO * */
  /* The info palette is used for informational messages, providing helpful
  context, tips, or general information to users. */
  --sb-ref-color-info-50: 214 100% 97%;
  --sb-ref-color-info-100: 214 95% 93%;
  --sb-ref-color-info-200: 213 97% 87%;
  --sb-ref-color-info-300: 212 96% 78%;
  --sb-ref-color-info-400: 213 94% 68%;
  --sb-ref-color-info-500: 217 91% 60%;
  --sb-ref-color-info-600: 221 83% 53%;
  --sb-ref-color-info-700: 224 76% 48%;
  --sb-ref-color-info-800: 226 71% 40%;
  --sb-ref-color-info-900: 224 64% 33%;
  --sb-ref-color-info-950: 226 57% 21%;
}

/*
 * ===========================================================================
 *  FONT REFERENCE TOKENS
 *  sb-ref-font-*
 * ===========================================================================
 */

:root {
  /* * FONT FAMILY * */
  --sb-ref-font-family-geist: 'Geist', sans-serif;
  --sb-ref-font-family-geist-mono: 'Geist Mono', monospace;

  /* * FONT WEIGHT * */
  --sb-ref-font-weight-thin: 100;
  --sb-ref-font-weight-extralight: 200;
  --sb-ref-font-weight-light: 300;
  --sb-ref-font-weight-normal: 400;
  --sb-ref-font-weight-medium: 500;
  --sb-ref-font-weight-semibold: 600;
  --sb-ref-font-weight-bold: 700;
  --sb-ref-font-weight-extrabold: 800;
  --sb-ref-font-weight-black: 900;

  /* * FONT SIZE * */
  --sb-ref-font-size-xs: 0.75rem;
  --sb-ref-font-size-xs-sm: 0.8rem;
  --sb-ref-font-size-sm: 0.875rem;
  --sb-ref-font-size-sm-base: 0.9375rem;
  --sb-ref-font-size-base: 1rem;
  --sb-ref-font-size-base-lg: 1.05rem;
  --sb-ref-font-size-lg: 1.125rem;
  --sb-ref-font-size-xl: 1.25rem;
  --sb-ref-font-size-2xl: 1.5rem;
  --sb-ref-font-size-3xl: 1.875rem;
  --sb-ref-font-size-4xl: 2.25rem;
  --sb-ref-font-size-5xl: 3rem;
  --sb-ref-font-size-6xl: 3.75rem;
  --sb-ref-font-size-7xl: 4.5rem;
  --sb-ref-font-size-8xl: 6rem;
  --sb-ref-font-size-9xl: 8rem;

  /* * LINE HEIGHT * */
  --sb-ref-font-line-height-shortest: 1;
  --sb-ref-font-line-height-shorter: 1.25;
  --sb-ref-font-line-height-short: 1.375;
  --sb-ref-font-line-height-normal: 1.5;
  --sb-ref-font-line-height-tall: 1.625;
  --sb-ref-font-line-height-taller: 2;
  --sb-ref-font-line-height-tallest: 7;

  --sb-ref-font-line-height-of-xs: calc(1 / 0.75);
  --sb-ref-font-line-height-of-xs-sm: calc(1.1 / 0.8);
  --sb-ref-font-line-height-of-sm: calc(1.25 / 0.875);
  --sb-ref-font-line-height-of-sm-base: calc(1.35 / 0.9375);
  --sb-ref-font-line-height-of-base: calc(1.5 / 1);
  --sb-ref-font-line-height-of-base-lg: calc(1.75 / 1.05);
  --sb-ref-font-line-height-of-lg: calc(1.75 / 1.125);
  --sb-ref-font-line-height-of-xl: calc(1.75 / 1.25);
  --sb-ref-font-line-height-of-2xl: calc(2 / 1.5);
  --sb-ref-font-line-height-of-3xl: calc(2.25 / 1.875);
  --sb-ref-font-line-height-of-4xl: calc(2.5 / 2.25);
  --sb-ref-font-line-height-of-5xl: 1;
  --sb-ref-font-line-height-of-6xl: 1;
  --sb-ref-font-line-height-of-7xl: 1;
  --sb-ref-font-line-height-of-8xl: 1;
  --sb-ref-font-line-height-of-9xl: 1;

  /* * LETTER SPACING * */
  --sb-ref-font-letter-spacing-tighter: -0.05em;
  --sb-ref-font-letter-spacing-tight: -0.025em;
  --sb-ref-font-letter-spacing-normal: 0em;
  --sb-ref-font-letter-spacing-wide: 0.025em;
  --sb-ref-font-letter-spacing-wider: 0.05em;
  --sb-ref-font-letter-spacing-widest: 0.1em;
}

/*
 * ===========================================================================
 *  MOTION REFERENCE TOKENS
 *  sb-ref-motion-*
 * ===========================================================================
 */

:root {
  --sb-ref-motion-duration-0: 0ms;
  --sb-ref-motion-duration-50: 50ms;
  --sb-ref-motion-duration-100: 100ms;
  --sb-ref-motion-duration-150: 150ms;
  --sb-ref-motion-duration-200: 200ms;
  --sb-ref-motion-duration-250: 250ms;
  --sb-ref-motion-duration-300: 300ms;
  --sb-ref-motion-duration-350: 350ms;
  --sb-ref-motion-duration-400: 400ms;
  --sb-ref-motion-duration-450: 450ms;
  --sb-ref-motion-duration-500: 500ms;
  --sb-ref-motion-duration-600: 600ms;
  --sb-ref-motion-duration-700: 700ms;
  --sb-ref-motion-duration-800: 800ms;
  --sb-ref-motion-duration-900: 900ms;
  --sb-ref-motion-duration-1000: 1000ms;
  --sb-ref-motion-duration-2000: 2000ms;
  --sb-ref-motion-duration-3000: 3000ms;
  --sb-ref-motion-duration-4000: 4000ms;
  --sb-ref-motion-duration-5000: 5000ms;

  --sb-ref-motion-fn-linear: cubic-bezier(0, 0, 1, 1);
  
  --sb-ref-motion-fn-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sb-ref-motion-fn-ease-in: cubic-bezier(0.42, 0, 1, 1);
  --sb-ref-motion-fn-ease-out: cubic-bezier(0, 0, 0.58, 1);
  --sb-ref-motion-fn-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  --sb-ref-motion-fn-ease-in-subtle: cubic-bezier(0.4, 0, 1, 1);
  --sb-ref-motion-fn-ease-out-subtle: cubic-bezier(0, 0, 0.2, 1);
  --sb-ref-motion-fn-ease-in-out-subtle: cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * ===========================================================================
 *  OPACITY REFERENCE TOKENS
 *  sb-ref-opacity-*
 * ===========================================================================
 */

:root {
  --sb-ref-opacity-0: 0;
  --sb-ref-opacity-4-5: 0.045;
  --sb-ref-opacity-5: 0.05;
  --sb-ref-opacity-7-5: 0.075;
  --sb-ref-opacity-10: 0.1;
  --sb-ref-opacity-12: 0.12;
  --sb-ref-opacity-15: 0.15;
  --sb-ref-opacity-20: 0.2;
  --sb-ref-opacity-25: 0.25;
  --sb-ref-opacity-30: 0.3;
  --sb-ref-opacity-35: 0.35;
  --sb-ref-opacity-40: 0.4;
  --sb-ref-opacity-45: 0.45;
  --sb-ref-opacity-50: 0.5;
  --sb-ref-opacity-55: 0.55;
  --sb-ref-opacity-60: 0.6;
  --sb-ref-opacity-65: 0.65;
  --sb-ref-opacity-70: 0.7;
  --sb-ref-opacity-75: 0.75;
  --sb-ref-opacity-80: 0.8;
  --sb-ref-opacity-85: 0.85;
  --sb-ref-opacity-90: 0.9;
  --sb-ref-opacity-95: 0.95;
  --sb-ref-opacity-100: 1;
}

/*
 * ===========================================================================
 *  RADIUS REFERENCE TOKENS
 *  sb-ref-radius-*
 * ===========================================================================
 */

:root {
  /* Used as the base value for calculating radius reference token values. */
  --sb-ref-radius: 0.625rem;

  --sb-ref-radius-xs: calc(var(--sb-ref-radius) - 6px);
  --sb-ref-radius-xs-sm: calc(var(--sb-ref-radius) - 5px);
  --sb-ref-radius-sm: calc(var(--sb-ref-radius) - 4px);
  --sb-ref-radius-sm-md: calc(var(--sb-ref-radius) - 3px);
  --sb-ref-radius-md: calc(var(--sb-ref-radius) - 2px);
  --sb-ref-radius-lg: var(--sb-ref-radius);
  --sb-ref-radius-lg-xl: calc(var(--sb-ref-radius) + 2px);
  --sb-ref-radius-xl: calc(var(--sb-ref-radius) + 4px);
  --sb-ref-radius-full: calc(var(--sb-ref-radius) * infinity);

  /* Equivalent radius values using the pixels unit */
  --sb-ref-radius-as-px: 10px;

  --sb-ref-radius-xs-as-px: calc(var(--sb-ref-radius-as-px) - 6px);
  --sb-ref-radius-xs-sm-as-px: calc(var(--sb-ref-radius-as-px) - 5px);
  --sb-ref-radius-sm-as-px: calc(var(--sb-ref-radius-as-px) - 4px);
  --sb-ref-radius-sm-md-as-px: calc(var(--sb-ref-radius-as-px) - 3px);
  --sb-ref-radius-md-as-px: calc(var(--sb-ref-radius-as-px) - 2px);
  --sb-ref-radius-lg-as-px: var(--sb-ref-radius-as-px);
  --sb-ref-radius-lg-xl-as-px: calc(var(--sb-ref-radius-as-px) + 2px);
  --sb-ref-radius-xl-as-px: calc(var(--sb-ref-radius-as-px) + 4px);
}

/*
 * ===========================================================================
 *  SHADOW REFERENCE TOKENS
 *  sb-ref-shadow-*
 * ===========================================================================
 */

:root {
  --sb-ref-shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --sb-ref-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sb-ref-shadow-sm:
    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --sb-ref-shadow-md:
    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sb-ref-shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sb-ref-shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --sb-ref-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/*
 * ===========================================================================
 *  SPACE REFERENCE TOKENS
 *  sb-ref-space-*
 * ===========================================================================
 */

:root {
  --sb-ref-space-width-auto: auto;

  --sb-ref-space-fit: fit-content;
  --sb-ref-space-full: 100%;
  --sb-ref-space-auto: auto;
  --sb-ref-space-max: max-content;

  /* Used as the base value for calculating space reference token values. */
  --sb-ref-space: 0.25rem;

  --sb-ref-space-0: calc(var(--sb-ref-space) * 0);
  --sb-ref-space-0-5: calc(var(--sb-ref-space) * 0.5);
  --sb-ref-space-1: calc(var(--sb-ref-space) * 1);
  --sb-ref-space-1-5: calc(var(--sb-ref-space) * 1.5);
  --sb-ref-space-2: calc(var(--sb-ref-space) * 2);
  --sb-ref-space-2-5: calc(var(--sb-ref-space) * 2.5);
  --sb-ref-space-3: calc(var(--sb-ref-space) * 3);
  --sb-ref-space-3-5: calc(var(--sb-ref-space) * 3.5);
  --sb-ref-space-4: calc(var(--sb-ref-space) * 4);
  --sb-ref-space-4-5: calc(var(--sb-ref-space) * 4.5);
  --sb-ref-space-4-6: calc(var(--sb-ref-space) * 4.6);
  --sb-ref-space-5: calc(var(--sb-ref-space) * 5);
  --sb-ref-space-6: calc(var(--sb-ref-space) * 6);
  --sb-ref-space-7: calc(var(--sb-ref-space) * 7);
  --sb-ref-space-8: calc(var(--sb-ref-space) * 8);
  --sb-ref-space-8-25: calc(var(--sb-ref-space) * 8.25);
  --sb-ref-space-9: calc(var(--sb-ref-space) * 9);
  --sb-ref-space-10: calc(var(--sb-ref-space) * 10);
  --sb-ref-space-11: calc(var(--sb-ref-space) * 11);
  --sb-ref-space-12: calc(var(--sb-ref-space) * 12);
  --sb-ref-space-13: calc(var(--sb-ref-space) * 13);
  --sb-ref-space-14: calc(var(--sb-ref-space) * 14);
  --sb-ref-space-15: calc(var(--sb-ref-space) * 15);
  --sb-ref-space-16: calc(var(--sb-ref-space) * 16);
  --sb-ref-space-17: calc(var(--sb-ref-space) * 17);
  --sb-ref-space-18: calc(var(--sb-ref-space) * 18);
  --sb-ref-space-19: calc(var(--sb-ref-space) * 19);
  --sb-ref-space-20: calc(var(--sb-ref-space) * 20);
  --sb-ref-space-21: calc(var(--sb-ref-space) * 21);
  --sb-ref-space-22: calc(var(--sb-ref-space) * 22);
  --sb-ref-space-23: calc(var(--sb-ref-space) * 23);
  --sb-ref-space-24: calc(var(--sb-ref-space) * 24);
  --sb-ref-space-25: calc(var(--sb-ref-space) * 25);
  --sb-ref-space-48: calc(var(--sb-ref-space) * 48);
  --sb-ref-space-55: calc(var(--sb-ref-space) * 55);
  --sb-ref-space-64: calc(var(--sb-ref-space) * 64);
  --sb-ref-space-75: calc(var(--sb-ref-space) * 75);

  /* * NEGATIVE * */
  --sb-ref-space-neg-1: calc(var(--sb-ref-space) * -1);
  --sb-ref-space-neg-1-5: calc(var(--sb-ref-space) * -1.5);
  --sb-ref-space-neg-2: calc(var(--sb-ref-space) * -2);
  --sb-ref-space-neg-3: calc(var(--sb-ref-space) * -3);

  /* * CONTAINER * */
  --sb-ref-space-container-3xs: 16rem;
  --sb-ref-space-container-2xs: 18rem;
  --sb-ref-space-container-xs: 20rem;
  --sb-ref-space-container-sm: 24rem;
  --sb-ref-space-container-md: 28rem;
  --sb-ref-space-container-lg: 32rem;
  --sb-ref-space-container-xl: 36rem;
  --sb-ref-space-container-2xl: 42rem;
  --sb-ref-space-container-3xl: 48rem;
  --sb-ref-space-container-4xl: 56rem;
  --sb-ref-space-container-5xl: 64rem;
  --sb-ref-space-container-6xl: 72rem;
  --sb-ref-space-container-7xl: 80rem;
}

/*
 * ===========================================================================
 *  WIDTH REFERENCE TOKENS
 *  sb-ref-width-*
 * ---------------------------------------------------------------------------
 *  Width tokens are assined to border/ring width variables.
 *  They use the `px` unit in contrast to `space` tokens which use `rem`.
 * ===========================================================================
 */

:root {
  --sb-ref-width-1: 1px;
  --sb-ref-width-2: 2px;
  --sb-ref-width-3: 3px;
}

/*
 * ===========================================================================
 *  BREAKPOINT REFERENCE TOKENS
 *  sb-ref-breakpoint-*
 * ===========================================================================
 */

@custom-media --sb-ref-breakpoint-sm (width >= 40rem);

@custom-media --sb-ref-breakpoint-md (width >= 48rem);

@custom-media --sb-ref-breakpoint-lg (width >= 64rem);

@custom-media --sb-ref-breakpoint-xl (width >= 80rem);

@custom-media --sb-ref-breakpoint-2xl (width >= 96rem);

/*
 * ===========================================================================
 *  SEMANTIC TOKENS INDEX
 * ===========================================================================
 */

/*
 * ===========================================================================
 *  COLOR SEMANTIC TOKENS
 *  sb-sem-color-*
 * ===========================================================================
 */

/*
 * ---------------------------------------------------------------------------
 *  LIGHT THEME
 * ---------------------------------------------------------------------------
 */

/*
 * --------------------------------------------------
 *  ROLE
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-role-bg: var(--sb-ref-color-white);
  --sb-sem-color-role-text: var(--sb-ref-color-base-950);
  --sb-sem-color-role-focus: var(--sb-ref-color-brand-400);

  --sb-sem-color-role-brand: var(--sb-ref-color-brand-900);
  --sb-sem-color-role-on-brand: var(--sb-ref-color-brand-50);

  --sb-sem-color-role-destructive: var(--sb-ref-color-destructive-600);
  --sb-sem-color-role-on-destructive: var(--sb-ref-color-white);

  --sb-sem-color-role-warning: var(--sb-ref-color-warning-600);
  --sb-sem-color-role-on-warning: var(--sb-ref-color-white);

  --sb-sem-color-role-success: var(--sb-ref-color-success-600);
  --sb-sem-color-role-on-success: var(--sb-ref-color-white);

  --sb-sem-color-role-info: var(--sb-ref-color-info-600);
  --sb-sem-color-role-on-info: var(--sb-ref-color-white);
}

/*
 * --------------------------------------------------
 *  BACKGROUND (bg)
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-bg: var(--sb-sem-color-role-bg);
}

/*
 * --------------------------------------------------
 *  BACKGROUND SCRIM (bg-scrim)
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-bg-scrim: var(--sb-ref-color-black) /
    var(--sb-sem-opacity-scrim);
}

/*
 * --------------------------------------------------
 *  BACKGROUND SURFACE (bg-surface)
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-bg-surface: var(--sb-sem-color-role-bg);
  --sb-sem-color-bg-surface-secondary: var(--sb-ref-color-white);
  --sb-sem-color-bg-surface-tertiary: var(--sb-ref-color-base-100);
  --sb-sem-color-bg-surface-quaternary: var(--sb-ref-color-base-100) /
    var(--sb-ref-opacity-50);

  --sb-sem-color-bg-surface-brand: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-destructive: var(--sb-sem-color-role-destructive) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-warning: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-success: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-info: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-surface);
}

/*
 * --------------------------------------------------
 *  BACKGROUND FILL (bg-fill)
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-bg-fill-disabled: var(--sb-ref-color-base-200) /
    var(--sb-ref-opacity-50);

  --sb-sem-color-bg-fill-unchecked: var(--sb-ref-color-base-200);
  --sb-sem-color-bg-fill-on-fill-unchecked: var(--sb-ref-color-white);

  --sb-sem-color-bg-fill-secondary: var(--sb-ref-color-base-100);
  --sb-sem-color-bg-fill-secondary-hover: var(--sb-ref-color-base-100) /
    var(--sb-sem-opacity-secondary-hover);
  /* Secondary badge hover bg */
  --sb-sem-color-bg-fill-secondary-alt-hover: var(--sb-ref-color-base-100) /
    var(--sb-sem-opacity-hover);

  --sb-sem-color-bg-fill-tertiary: var(--sb-ref-color-white);
  --sb-sem-color-bg-fill-tertiary-hover: var(--sb-ref-color-base-100);

  /* Used for select */
  --sb-sem-color-bg-fill-quaternary: var(--sb-ref-color-transparent);
  --sb-sem-color-bg-fill-quaternary-hover: var(--sb-ref-color-transparent);

  --sb-sem-color-bg-fill-inverse: var(--sb-sem-color-role-text);

  /* BRAND */
  --sb-sem-color-bg-fill-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-bg-fill-brand-hover: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-hover);

  --sb-sem-color-bg-fill-brand-on-fill: var(--sb-ref-color-white);

  /* DESTRUCTIVE */
  --sb-sem-color-bg-fill-destructive: var(--sb-sem-color-role-destructive);
  --sb-sem-color-bg-fill-destructive-hover: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-sem-opacity-hover);
  --sb-sem-color-bg-fill-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-10);
  --sb-sem-color-bg-fill-destructive-secondary-hover: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-20);

  --sb-sem-color-bg-fill-transparent: var(--sb-ref-color-transparent);

  /* WARNING */
  --sb-sem-color-bg-fill-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-bg-fill-warning-hover: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-hover);

  /* SUCCESS */
  --sb-sem-color-bg-fill-success: var(--sb-sem-color-role-success);
  --sb-sem-color-bg-fill-success-hover: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-hover);

  /* INFO */
  --sb-sem-color-bg-fill-info: var(--sb-sem-color-role-info);
  --sb-sem-color-bg-fill-info-hover: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-hover);
}

/*
 * --------------------------------------------------
 *  TEXT
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-text: var(--sb-sem-color-role-text);

  --sb-sem-color-text-secondary: var(--sb-ref-color-base-500);
  --sb-sem-color-text-secondary-on-fill: var(--sb-ref-color-base-900);

  --sb-sem-color-text-tertiary: var(--sb-ref-color-base-950) /
    var(--sb-ref-opacity-60);

  --sb-sem-color-text-inverse: var(--sb-sem-color-role-bg);

  /* BRAND */
  --sb-sem-color-text-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-text-brand-on-fill: var(--sb-sem-color-role-on-brand);

  --sb-sem-color-text-brand-secondary: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-text-secondary);

  /* DESTRUCTIVE */
  --sb-sem-color-text-destructive: var(--sb-sem-color-role-destructive);
  --sb-sem-color-text-destructive-on-fill: var(
    --sb-sem-color-role-on-destructive
  );

  --sb-sem-color-text-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-90);
  --sb-sem-color-text-destructive-secondary-on-fill: var(
    --sb-sem-color-role-destructive
  );

  /* WARNING */
  --sb-sem-color-text-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-text-warning-on-fill: var(--sb-sem-color-role-on-warning);

  --sb-sem-color-text-warning-secondary: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-text-secondary);

  /* SUCCESS */
  --sb-sem-color-text-success: var(--sb-sem-color-role-success);
  --sb-sem-color-text-success-on-fill: var(--sb-sem-color-role-on-success);

  --sb-sem-color-text-success-secondary: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-text-secondary);

  /* INFO */
  --sb-sem-color-text-info: var(--sb-sem-color-role-info);
  --sb-sem-color-text-info-on-fill: var(--sb-sem-color-role-on-info);

  --sb-sem-color-text-info-secondary: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-text-secondary);
}

/*
 * --------------------------------------------------
 *  BORDER
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-border: var(--sb-ref-color-base-200);
  --sb-sem-color-border-focus: var(--sb-sem-color-role-focus);
  --sb-sem-color-border-invalid: var(--sb-sem-color-role-destructive);
  --sb-sem-color-border-invalid-secondary: var(--sb-sem-color-role-destructive);

  --sb-sem-color-border-secondary: var(--sb-ref-color-base-200);

  --sb-sem-color-border-tertiary: var(--sb-ref-color-transparent);

  --sb-sem-color-border-transparent: var(--sb-ref-color-transparent);

  --sb-sem-color-border-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-border-brand-secondary: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-border-secondary);
  --sb-sem-color-border-brand-tertiary: var(--sb-sem-color-role-brand) /
    var(--sb-ref-opacity-30);

  --sb-sem-color-border-destructive: var(--sb-sem-color-role-destructive);
  --sb-sem-color-border-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-sem-opacity-border-secondary);
  --sb-sem-color-border-destructive-focus: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-40);

  --sb-sem-color-border-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-border-warning-secondary: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-border-secondary);

  --sb-sem-color-border-success: var(--sb-sem-color-role-success);
  --sb-sem-color-border-success-secondary: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-border-secondary);

  --sb-sem-color-border-info: var(--sb-sem-color-role-info);
  --sb-sem-color-border-info-secondary: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-border-secondary);
}

/*
 * --------------------------------------------------
 *  RING
 * --------------------------------------------------
 */

:root {
  --sb-sem-color-ring-focus: var(--sb-sem-color-role-focus) /
    var(--sb-sem-opacity-ring);

  --sb-sem-color-ring-destructive: var(--sb-sem-color-role-destructive) /
    var(--sb-sem-opacity-ring-secondary);

  /* Ring color used on elements which use a box shadow to create whitespace
  (e.g. avatar) */
  --sb-sem-color-ring-whitespace: var(--sb-sem-color-role-bg);

  /* Weak ring color used for decorative box shadows (e.g. card) */
  --sb-sem-color-ring-secondary: var(--sb-sem-color-role-text) /
    var(--sb-ref-opacity-10);

  /* * RING OFFSET * */
  /* Used for dialog close */
  --sb-sem-color-ring-offset: var(--sb-sem-color-role-bg);
}

/*
 * ---------------------------------------------------------------------------
 *  DARK THEME
 * ---------------------------------------------------------------------------
 */

/*
 * --------------------------------------------------
 *  ROLE
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-role-bg: var(--sb-ref-color-base-950);
  --sb-sem-color-role-text: var(--sb-ref-color-base-50);
  --sb-sem-color-role-focus: var(--sb-ref-color-brand-500);

  --sb-sem-color-role-brand: var(--sb-ref-color-brand-200);
  --sb-sem-color-role-on-brand: var(--sb-ref-color-brand-900);

  --sb-sem-color-role-destructive: var(--sb-ref-color-destructive-400);
  --sb-sem-color-role-on-destructive: var(--sb-ref-color-white);

  --sb-sem-color-role-warning: var(--sb-ref-color-warning-400);
  --sb-sem-color-role-on-warning: var(--sb-ref-color-white);

  --sb-sem-color-role-success: var(--sb-ref-color-success-400);
  --sb-sem-color-role-on-success: var(--sb-ref-color-white);

  --sb-sem-color-role-info: var(--sb-ref-color-info-400);
  --sb-sem-color-role-on-info: var(--sb-ref-color-white);
}

/*
 * --------------------------------------------------
 *  BACKGROUND (bg)
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-bg: var(--sb-sem-color-role-bg);
}

/*
 * --------------------------------------------------
 *  BACKGROUND SCRIM (bg-scrim)
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-bg-scrim: var(--sb-ref-color-black) /
    var(--sb-sem-opacity-scrim);
}

/*
 * --------------------------------------------------
 *  BACKGROUND SURFACE (bg-surface)
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-bg-surface: var(--sb-sem-color-role-bg);
  --sb-sem-color-bg-surface-secondary: var(--sb-ref-color-base-900);
  --sb-sem-color-bg-surface-tertiary: var(--sb-ref-color-base-800);
  --sb-sem-color-bg-surface-quaternary: var(--sb-ref-color-base-800) /
    var(--sb-ref-opacity-50);

  --sb-sem-color-bg-surface-brand: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-destructive: var(--sb-sem-color-role-destructive) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-warning: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-success: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-surface);
  --sb-sem-color-bg-surface-info: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-surface);
}

/*
 * --------------------------------------------------
 *  BACKGROUND FILL (bg-fill)
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-bg-fill-disabled: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-12);

  --sb-sem-color-bg-fill-unchecked: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-12);
  --sb-sem-color-bg-fill-on-fill-unchecked: var(--sb-ref-color-base-50);

  --sb-sem-color-bg-fill-secondary: var(--sb-ref-color-base-800);
  --sb-sem-color-bg-fill-secondary-hover: var(--sb-ref-color-base-800) /
    var(--sb-sem-opacity-secondary-hover);
  /* Secondary badge hover bg */
  --sb-sem-color-bg-fill-secondary-alt-hover: var(--sb-ref-color-base-800) /
    var(--sb-sem-opacity-hover);

  --sb-sem-color-bg-fill-tertiary: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-4-5);
  --sb-sem-color-bg-fill-tertiary-hover: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-7-5);

  /* Used for select */
  --sb-sem-color-bg-fill-quaternary: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-4-5);
  --sb-sem-color-bg-fill-quaternary-hover: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-7-5);

  --sb-sem-color-bg-fill-inverse: var(--sb-sem-color-role-text);

  /* BRAND */
  --sb-sem-color-bg-fill-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-bg-fill-brand-hover: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-hover);

  --sb-sem-color-bg-fill-brand-on-fill: var(--sb-sem-color-role-on-brand);

  /* DESTRUCTIVE */
  --sb-sem-color-bg-fill-destructive: var(--sb-sem-color-role-destructive) /
    var(--sb-ref-opacity-60);
  --sb-sem-color-bg-fill-destructive-hover: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-sem-opacity-hover);
  --sb-sem-color-bg-fill-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-20);
  --sb-sem-color-bg-fill-destructive-secondary-hover: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-30);

  --sb-sem-color-bg-fill-transparent: var(--sb-ref-color-transparent);

  /* WARNING */
  --sb-sem-color-bg-fill-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-bg-fill-warning-hover: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-hover);

  /* SUCCESS */
  --sb-sem-color-bg-fill-success: var(--sb-sem-color-role-success);
  --sb-sem-color-bg-fill-success-hover: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-hover);

  /* INFO */
  --sb-sem-color-bg-fill-info: var(--sb-sem-color-role-info);
  --sb-sem-color-bg-fill-info-hover: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-hover);
}

/*
 * --------------------------------------------------
 *  TEXT
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-text: var(--sb-sem-color-role-text);

  --sb-sem-color-text-secondary: var(--sb-ref-color-base-400);
  --sb-sem-color-text-secondary-on-fill: var(--sb-ref-color-base-50);

  --sb-sem-color-text-tertiary: var(--sb-ref-color-base-400);

  --sb-sem-color-text-inverse: var(--sb-sem-color-role-bg);

  /* BRAND */
  --sb-sem-color-text-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-text-brand-on-fill: var(--sb-sem-color-role-on-brand);

  --sb-sem-color-text-brand-secondary: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-text-secondary);

  /* DESTRUCTIVE */
  --sb-sem-color-text-destructive: var(--sb-sem-color-role-destructive);
  --sb-sem-color-text-destructive-on-fill: var(
    --sb-sem-color-role-on-destructive
  );

  --sb-sem-color-text-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-90);
  --sb-sem-color-text-destructive-secondary-on-fill: var(
    --sb-sem-color-role-destructive
  );

  /* WARNING */
  --sb-sem-color-text-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-text-warning-on-fill: var(--sb-sem-color-role-on-warning);

  --sb-sem-color-text-warning-secondary: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-text-secondary);

  /* SUCCESS */
  --sb-sem-color-text-success: var(--sb-sem-color-role-success);
  --sb-sem-color-text-success-on-fill: var(--sb-sem-color-role-on-success);

  --sb-sem-color-text-success-secondary: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-text-secondary);

  /* INFO */
  --sb-sem-color-text-info: var(--sb-sem-color-role-info);
  --sb-sem-color-text-info-on-fill: var(--sb-sem-color-role-on-info);

  --sb-sem-color-text-info-secondary: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-text-secondary);
}

/*
 * --------------------------------------------------
 *  BORDER
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-border: var(--sb-ref-color-white) / var(--sb-ref-opacity-10);
  --sb-sem-color-border-focus: var(--sb-sem-color-role-focus);
  --sb-sem-color-border-invalid: var(--sb-sem-color-role-destructive);
  --sb-sem-color-border-invalid-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-50);

  --sb-sem-color-border-secondary: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-15);

  --sb-sem-color-border-tertiary: var(--sb-ref-color-white) /
    var(--sb-ref-opacity-15);

  --sb-sem-color-border-transparent: var(--sb-ref-color-transparent);

  --sb-sem-color-border-brand: var(--sb-sem-color-role-brand);
  --sb-sem-color-border-brand-secondary: var(--sb-sem-color-role-brand) /
    var(--sb-sem-opacity-border-secondary);
  --sb-sem-color-border-brand-tertiary: var(--sb-sem-color-role-brand) /
    var(--sb-ref-opacity-20);

  --sb-sem-color-border-destructive: var(--sb-sem-color-role-destructive);
  --sb-sem-color-border-destructive-secondary: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-sem-opacity-border-secondary);
  --sb-sem-color-border-destructive-focus: var(
      --sb-sem-color-role-destructive
    ) /
    var(--sb-ref-opacity-40);

  --sb-sem-color-border-warning: var(--sb-sem-color-role-warning);
  --sb-sem-color-border-warning-secondary: var(--sb-sem-color-role-warning) /
    var(--sb-sem-opacity-border-secondary);

  --sb-sem-color-border-success: var(--sb-sem-color-role-success);
  --sb-sem-color-border-success-secondary: var(--sb-sem-color-role-success) /
    var(--sb-sem-opacity-border-secondary);

  --sb-sem-color-border-info: var(--sb-sem-color-role-info);
  --sb-sem-color-border-info-secondary: var(--sb-sem-color-role-info) /
    var(--sb-sem-opacity-border-secondary);
}

/*
 * --------------------------------------------------
 *  RING
 * --------------------------------------------------
 */

[data-theme='dark'] {
  --sb-sem-color-ring-focus: var(--sb-sem-color-role-focus) /
    var(--sb-sem-opacity-ring);

  --sb-sem-color-ring-destructive: var(--sb-sem-color-role-destructive) /
    var(--sb-sem-opacity-ring-secondary);

  /* Ring color used on elements which use a box shadow to create whitespace
  (e.g. avatar) */
  --sb-sem-color-ring-whitespace: var(--sb-sem-color-role-bg);

  /* Weak ring color used for decorative box shadows (e.g. card) */
  --sb-sem-color-ring-secondary: var(--sb-sem-color-role-text) /
    var(--sb-ref-opacity-10);

  /* * RING OFFSET * */
  /* Used for dialog close */
  --sb-sem-color-ring-offset: var(--sb-sem-color-role-bg);
}

/*
 * ===========================================================================
 *  FONT SEMANTIC TOKENS
 *  sb-sem-font-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  DEFAULT
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-family-default: var(--sb-ref-font-family-geist);
  --sb-sem-font-family-heading: var(--sb-ref-font-family-geist);
  --sb-sem-font-family-mono: var(--sb-ref-font-family-geist-mono);
}

/*
 * --------------------------------------------------
 *  ACTION: button, tabs trigger
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-action-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-action-size-xs: var(--sb-ref-font-size-xs);
  --sb-sem-font-action-size-sm: var(--sb-ref-font-size-xs-sm);
  --sb-sem-font-action-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-action-line-height-xs: var(--sb-ref-font-line-height-of-xs);
  --sb-sem-font-action-line-height-sm: var(--sb-ref-font-line-height-of-xs-sm);

  --sb-sem-font-action-weight: var(--sb-ref-font-weight-medium);
}

/*
 * --------------------------------------------------
 *  INDICATOR: badge
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-indicator-size: var(--sb-ref-font-size-xs);
  --sb-sem-font-indicator-line-height: var(--sb-ref-font-line-height-of-xs);
  --sb-sem-font-indicator-weight: var(--sb-ref-font-weight-medium);
}

/*
 * --------------------------------------------------
 *  IDENTITY: avatar
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-identity-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-identity-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-identity-size-sm: var(--sb-ref-font-size-xs);
  --sb-sem-font-identity-line-height-sm: var(--sb-ref-font-line-height-of-xs);
}

/*
 * --------------------------------------------------
 *  FORM: label, command input, select, input, combobox, textarea
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-form-heading-size: var(--sb-ref-font-size-base);
  --sb-sem-font-form-heading-line-height: var(--sb-ref-font-line-height-of-base);
  --sb-sem-font-form-heading-weight: var(--sb-ref-font-weight-medium);

  --sb-sem-font-form-content-line-height: var(--sb-ref-font-line-height-short);

  --sb-sem-font-form-description-line-height: var(--sb-ref-font-line-height-normal);

  --sb-sem-font-form-label-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-form-label-line-height: var(--sb-ref-font-line-height-shortest);
  --sb-sem-font-form-label-line-height-alt: var(--sb-ref-font-line-height-short);
  --sb-sem-font-form-label-weight: var(--sb-ref-font-weight-medium);

  --sb-sem-font-form-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-form-size-vw-sm: var(--sb-ref-font-size-base);
  --sb-sem-font-form-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-form-line-height-vw-sm: var(--sb-ref-font-line-height-of-base);
  --sb-sem-font-form-weight: var(--sb-ref-font-weight-normal);

  /* Used for select label */
  --sb-sem-font-form-size-sm: var(--sb-ref-font-size-xs);
  --sb-sem-font-form-line-height-sm: var(--sb-ref-font-line-height-of-xs);
}

/*
 * --------------------------------------------------
 *  NAVIGATION: breadcrumb, menubar
 *  (+ pagination, tabs, sidebar, navigation menu)
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-navigation-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-navigation-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-navigation-weight: var(--sb-ref-font-weight-normal);
  --sb-sem-font-navigation-heading-weight: var(--sb-ref-font-weight-medium);
  --sb-sem-font-navigation-label-weight: var(--sb-ref-font-weight-medium);
}

/*
 * --------------------------------------------------
 *  CONTENT: accordion, alert, dialog, drawer, dropdown menu, command, card,
 *  toast (+ popover content)
 * --------------------------------------------------
 */

:root {
  /* * HEADING * */
  --sb-sem-font-content-heading-size: var(--sb-ref-font-size-lg);
  --sb-sem-font-content-heading-line-height: var(
    --sb-ref-font-line-height-shortest
  );

  /* Used for drawer title and card title */
  --sb-sem-font-content-heading-size-sm: var(--sb-ref-font-size-base);
  --sb-sem-font-content-heading-line-height-sm: var(
    --sb-ref-font-line-height-of-base
  );
  /* Used for card title (size="sm") and toast title */
  --sb-sem-font-content-heading-size-xs: var(--sb-ref-font-size-sm);
  --sb-sem-font-content-heading-line-height-xs: var(
    --sb-ref-font-line-height-of-sm
  );
  --sb-sem-font-content-heading-line-height-short: var(--sb-ref-font-line-height-short);

  --sb-sem-font-content-heading-weight: var(--sb-ref-font-weight-semibold);
  --sb-sem-font-content-heading-weight-sm: var(--sb-ref-font-weight-medium);

  --sb-sem-font-content-heading-letter-spacing: var(--sb-ref-font-letter-spacing-tight);

  /* * LABEL * */
  /* Used for dropdown menu label */
  --sb-sem-font-content-label-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-content-label-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-content-label-weight: var(--sb-ref-font-weight-medium);

  /* * BODY * */
  --sb-sem-font-content-body-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-content-body-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-content-body-line-height-tall: var(--sb-ref-font-line-height-tall);
  --sb-sem-font-content-body-weight: var(--sb-ref-font-weight-normal);

  --sb-sem-font-content-body-size-sm: var(--sb-ref-font-size-xs);
  --sb-sem-font-content-body-line-height-sm: var(--sb-ref-font-line-height-of-xs);

  /* * SHORTCUT * */
  /* Used for dropdown menu shortcut */
  --sb-sem-font-content-shortcut-size: var(--sb-ref-font-size-xs);
  --sb-sem-font-content-shortcut-line-height: var(
    --sb-ref-font-line-height-of-xs
  );
  --sb-sem-font-content-shortcut-letter-spacing: var(
    --sb-ref-font-letter-spacing-widest
  );
}

/*
 * --------------------------------------------------
 *  TABLE
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-table-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-table-caption-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-table-weight: var(--sb-ref-font-weight-medium);
  --sb-sem-font-table-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-table-letter-spacing: var(--sb-ref-font-letter-spacing-normal);
}

/*
 * --------------------------------------------------
 *  DATE TIME: calendar, date picker
 * --------------------------------------------------
 */

:root {
  --sb-sem-font-date-time-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-date-time-size-sm: var(--sb-ref-font-size-xs-sm);
  --sb-sem-font-date-time-size-xs: var(--sb-ref-font-size-xs);

  --sb-sem-font-date-time-line-height: var(--sb-ref-font-line-height-shortest);
  --sb-sem-font-date-time-line-height-of-xs: var(
    --sb-ref-font-line-height-of-xs
  );
  --sb-sem-font-date-time-label-line-height: var(
    --sb-ref-font-line-height-of-sm
  );

  --sb-sem-font-date-time-weight: var(--sb-ref-font-weight-normal);
  --sb-sem-font-date-time-label-weight: var(--sb-ref-font-weight-medium);
}

/*
 * --------------------------------------------------
 *
 * --------------------------------------------------
 */

:root {
  /* * HEADING * */
  --sb-sem-font-heading-family: var(--sb-ref-font-family-geist);

  --sb-sem-font-heading-size-h1: var(--sb-ref-font-size-4xl);
  --sb-sem-font-heading-size-h2: var(--sb-ref-font-size-3xl);
  --sb-sem-font-heading-size-h3: var(--sb-ref-font-size-2xl);
  --sb-sem-font-heading-size-h4: var(--sb-ref-font-size-xl);

  --sb-sem-font-heading-line-height-h1: var(--sb-ref-font-line-height-of-4xl);
  --sb-sem-font-heading-line-height-h2: var(--sb-ref-font-line-height-of-3xl);
  --sb-sem-font-heading-line-height-h3: var(--sb-ref-font-line-height-of-2xl);
  --sb-sem-font-heading-line-height-h4: var(--sb-ref-font-line-height-of-xl);

  --sb-sem-font-heading-weight: var(--sb-ref-font-weight-semibold);
  --sb-sem-font-heading-weight-h1: var(--sb-ref-font-weight-extrabold);

  --sb-sem-font-heading-letter-spacing: var(--sb-ref-font-letter-spacing-tight);

  /* * DEFAULT * */
  --sb-sem-font-family: var(--sb-ref-font-family-geist);

  --sb-sem-font-size: var(--sb-ref-font-size-sm-base);
  --sb-sem-font-size-vw-sm: var(--sb-ref-font-size-base-lg);

  --sb-sem-font-line-height: var(--sb-ref-font-line-height-normal);
  --sb-sem-font-weight: var(--sb-ref-font-weight-normal);
  --sb-sem-font-letter-spacing: var(--sb-ref-font-letter-spacing-normal);

  /* SIZES */
  --sb-sem-font-size-sm: var(--sb-ref-font-size-sm);
  --sb-sem-font-line-height-sm: var(--sb-ref-font-line-height-shortest);
  --sb-sem-font-weight-sm: var(--sb-ref-font-weight-medium);

  --sb-sem-font-size-lg: var(--sb-ref-font-size-lg);
  --sb-sem-font-line-height-lg: var(--sb-ref-font-line-height-of-lg);
  --sb-sem-font-weight-lg: var(--sb-ref-font-weight-semibold);

  --sb-sem-font-size-xl: var(--sb-ref-font-size-xl);
  --sb-sem-font-line-height-xl: var(--sb-ref-font-line-height-of-xl);

  /* * PARAGRAPH * */
  --sb-sem-font-paragraph-line-height: var(--sb-ref-space-7);

  /* * LINK * */
  --sb-sem-font-link-weight: var(--sb-ref-font-weight-medium);

  /* * CODE * */
  --sb-sem-font-code-family: var(--sb-ref-font-family-geist-mono);
  --sb-sem-font-code-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-code-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-code-weight: var(--sb-ref-font-weight-semibold);
  --sb-sem-font-code-letter-spacing: var(--sb-ref-font-letter-spacing-normal);

  /* * MUTED * */
  --sb-sem-font-muted-size: var(--sb-ref-font-size-sm);
  --sb-sem-font-muted-line-height: var(--sb-ref-font-line-height-of-sm);
  --sb-sem-font-muted-weight: var(--sb-ref-font-weight-normal);
}

/*
 * ===========================================================================
 *  MOTION SEMANTIC TOKENS
 *  sb-sem-motion-*
 * ===========================================================================
 */

:root {
  --sb-sem-motion-duration-default: var(--sb-ref-motion-duration-150);
  --sb-sem-motion-fn-default: var(--sb-ref-motion-fn-ease-in-out-subtle);

  --sb-sem-motion-duration-fast: var(--sb-ref-motion-duration-100);
  --sb-sem-motion-duration-slow: var(--sb-ref-motion-duration-1000);

  --sb-sem-motion-duration-in-out: var(--sb-ref-motion-duration-200);
  --sb-sem-motion-fn-in-out: var(--sb-ref-motion-fn-ease-out-subtle);

  --sb-sem-motion-duration-pulse: var(--sb-ref-motion-duration-2000);
  --sb-sem-motion-fn-pulse: var(--sb-ref-motion-fn-ease-in-out);
}

/*
 * ===========================================================================
 *  OPACITY SEMANTIC TOKENS
 *  sb-sem-opacity-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMON TOKENS
 * --------------------------------------------------
 */

:root {
  /* * HOVER * */
  /* Applied to background colors in a hover state - e.g. default buttons. */
  --sb-sem-opacity-hover: var(--sb-ref-opacity-90);

  /* Applied to background colors in a hover state - e.g. secondary buttons. */
  --sb-sem-opacity-secondary-hover: var(--sb-ref-opacity-80);

  /* * DISABLED * */
  /* Applied to elements/components in a disabled state - e.g. buttons. */
  --sb-sem-opacity-disabled: var(--sb-ref-opacity-50);

  /* * SCRIM * */
  /* Applied to scrim background colors (semi-transparent) - e.g. popover. */
  --sb-sem-opacity-scrim: var(--sb-ref-opacity-50);

  /* * TEXT * */
  --sb-sem-opacity-text-secondary: var(--sb-ref-opacity-80);

  /* * BORDER * */
  --sb-sem-opacity-border-secondary: var(--sb-ref-opacity-50);

  /* * RING * */
  /* Applied to ring colors - e.g. button rings in a focus(-visible) state. */
  --sb-sem-opacity-ring: var(--sb-ref-opacity-50);

  /* * FORM ICON * */
  /* Used for the command input's search icon */
  --sb-sem-opacity-icon-form: var(--sb-ref-opacity-50);
}

/*
 * --------------------------------------------------
 *  LIGHT THEME TOKENS
 * --------------------------------------------------
 */

[data-theme='light'] {
  /* * SURFACE * */
  /* For brand, destructive, warning, success, and info surfaces */
  --sb-sem-opacity-surface: var(--sb-ref-opacity-5);

  /* * RING * */
  /* Applied to ring colors - e.g. button rings in an (aria-)invalid state. */
  --sb-sem-opacity-ring-secondary: var(--sb-ref-opacity-20);
}

/*
 * --------------------------------------------------
 *  DARK THEME TOKENS
 * --------------------------------------------------
 */

[data-theme='dark'] {
  /* * SURFACE * */
  /* For brand, destructive, warning, success, and info surfaces */
  --sb-sem-opacity-surface: var(--sb-ref-opacity-10);

  /* * RING * */
  /* Applied to ring colors - e.g. button rings in an (aria-)invalid state. */
  --sb-sem-opacity-ring-secondary: var(--sb-ref-opacity-40);
}

/*
 * ===========================================================================
 *  RADIUS SEMANTIC TOKENS
 *  sb-sem-radius-*
 * ===========================================================================
 */

:root {
  /* * ACTION * */
  /* button, toggle, toggle group */
  /* accordion trigger, dialog close, tabs trigger, toast action */
  --sb-sem-radius-action: var(--sb-ref-radius-lg);
  --sb-sem-radius-action-2xs: var(--sb-ref-radius-xs);
  --sb-sem-radius-action-xs: var(--sb-ref-radius-md);
  --sb-sem-radius-action-xs-as-px: var(--sb-ref-radius-lg-as-px);
  --sb-sem-radius-action-sm: var(--sb-ref-radius-md);
  --sb-sem-radius-action-sm-as-px: var(--sb-ref-radius-lg-xl-as-px);
  --sb-sem-radius-action-lg: var(--sb-ref-radius-lg);

  /* * INDICATOR * */
  /* badge, checkbox, progress, switch */
  /* avatar badge, drawer thumb, radio group item, scroll area scroll bar */
  --sb-sem-radius-indicator: var(--sb-ref-radius-full);
  --sb-sem-radius-indicator-sm-as-px: var(--sb-ref-radius-xs-as-px);

  /* * FEEDBACK * */
  /* alert, empty, skeleton */
  --sb-sem-radius-feedback: var(--sb-ref-radius-lg);
  --sb-sem-radius-feedback-sm: var(--sb-ref-radius-md);
  --sb-sem-radius-feedback-lg: var(--sb-ref-radius-xl);

  /* * IDENTITY * */
  /* avatar */
  --sb-sem-radius-identity: var(--sb-ref-radius-full);

  /* * LAYOUT * */
  /* card, item */
  --sb-sem-radius-layout: var(--sb-ref-radius-xl);
  --sb-sem-radius-layout-xs: var(--sb-ref-radius-sm);
  --sb-sem-radius-layout-sm: var(--sb-ref-radius-lg);

  /* * FORM * */
  /* combobox, field, input group, input otp, input, select, textarea */
  --sb-sem-radius-form: var(--sb-ref-radius-lg);
  --sb-sem-radius-form-sm: var(--sb-ref-radius-md);

  /* * OVERLAY * */
  /* command, context menu, dialog, drawer, dropdown menu, hover card, popover, toast */
  --sb-sem-radius-overlay: var(--sb-ref-radius-lg);
  --sb-sem-radius-overlay-xs: var(--sb-ref-radius-sm);
  --sb-sem-radius-overlay-sm: var(--sb-ref-radius-md);
  --sb-sem-radius-overlay-lg: var(--sb-ref-radius-xl);

  /* * NAVIGATION * */
  /* menubar, navigation menu, tabs */
  --sb-sem-radius-navigation: var(--sb-ref-radius-md);
  --sb-sem-radius-navigation-sm: var(--sb-ref-radius-sm);
  --sb-sem-radius-navigation-lg: var(--sb-ref-radius-lg);

  /* * DATE TIME * */
  /* calendar */
  --sb-sem-radius-date-time: var(--sb-ref-radius-md);
}

/*
 * ===========================================================================
 *  SHADOW SEMANTIC TOKENS
 *  sb-sem-shadow-*
 * ===========================================================================
 */

:root {
  /* * ACTION * */
  --sb-sem-shadow-action-active: var(--sb-ref-shadow-sm);

  /* * FORM * */
  --sb-sem-shadow-form: var(--sb-ref-shadow-md);

  /* * OVERLAY * */
  --sb-sem-shadow-overlay: var(--sb-ref-shadow-md);
  --sb-sem-shadow-overlay-lg: var(--sb-ref-shadow-lg);

  /* * NAVIGATION * */
  --sb-sem-shadow-navigation: var(--sb-ref-shadow-md);
  --sb-sem-shadow-navigation-lg: var(--sb-ref-shadow-lg);
}

/*
 * ===========================================================================
 *  SPACE SEMANTIC TOKENS
 *  sb-sem-space-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ACTION: button, accordion trigger, dropdown menu item, switch,
 *  calendar day button, toggle group, tabs trigger
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-action-gap: var(--sb-ref-space-1-5);
  --sb-sem-space-action-gap-xs: var(--sb-ref-space-1);
  --sb-sem-space-action-gap-sm: var(--sb-ref-space-1);
  --sb-sem-space-action-gap-lg: var(--sb-ref-space-1-5);
  --sb-sem-space-action-gap-xl: var(--sb-ref-space-2);
  --sb-sem-space-action-gap-2xl: var(--sb-ref-space-4);

  --sb-sem-space-action-px: var(--sb-ref-space-2-5);
  --sb-sem-space-action-px-2xs: var(--sb-ref-space-1-5);
  --sb-sem-space-action-px-xs: var(--sb-ref-space-2);
  --sb-sem-space-action-px-sm: var(--sb-ref-space-3);
  --sb-sem-space-action-px-md: var(--sb-ref-space-4-5);
  --sb-sem-space-action-px-lg: var(--sb-ref-space-6);
  --sb-sem-space-action-px-xl: var(--sb-ref-space-8);

  --sb-sem-space-action-px-has-icon: var(--sb-ref-space-2);
  --sb-sem-space-action-px-sm-has-icon: var(--sb-ref-space-1-5);
  --sb-sem-space-action-px-lg-has-icon: var(--sb-ref-space-3);

  --sb-sem-space-action-py: var(--sb-ref-space-2);
  --sb-sem-space-action-py-xs: var(--sb-ref-space-0-5);
  --sb-sem-space-action-py-sm: var(--sb-ref-space-1-5);
  --sb-sem-space-action-py-xl: var(--sb-ref-space-4);

  --sb-sem-space-action-size: var(--sb-ref-space-8);
  --sb-sem-space-action-size-xs: var(--sb-ref-space-6);
  --sb-sem-space-action-size-sm: var(--sb-ref-space-7);
  --sb-sem-space-action-size-lg: var(--sb-ref-space-9);
  --sb-sem-space-action-size-xl: var(--sb-ref-space-10);

  --sb-sem-space-action-w-xl: var(--sb-ref-space-full);
  --sb-sem-space-action-h-sm: var(--sb-ref-space-4-6);
}

/*
 * --------------------------------------------------
 *  ICON: button, badge, alert, dropdown menu items
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-icon-size: var(--sb-ref-space-4);
  --sb-sem-space-icon-size-3xs: var(--sb-ref-space-2);
  --sb-sem-space-icon-size-2xs: var(--sb-ref-space-2-5);
  --sb-sem-space-icon-size-xs: var(--sb-ref-space-3);
  --sb-sem-space-icon-size-sm: var(--sb-ref-space-3-5);
  --sb-sem-space-icon-size-lg: var(--sb-ref-space-5);

  --sb-sem-space-icon-size-parent: var(--sb-ref-space-8);
  --sb-sem-space-icon-size-parent-sm: var(--sb-ref-space-6);
  --sb-sem-space-icon-size-parent-lg: var(--sb-ref-space-10);
  --sb-sem-space-icon-mb-parent: var(--sb-ref-space-2);

  --sb-sem-space-icon-translate-y: var(--sb-ref-space-0-5);
}

/*
 * --------------------------------------------------
 *  INDICATOR: badge, drawer thumb, switch, radio group, select, menubar,
 *  checkbox
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-indicator-gap: var(--sb-ref-space-1);

  /* Used for drawer thumb */
  --sb-sem-space-indicator-m: var(--sb-ref-space-4);

  --sb-sem-space-indicator-px: var(--sb-ref-space-2);
  --sb-sem-space-indicator-px-has-icon: var(--sb-ref-space-1-5);
  --sb-sem-space-indicator-px-sm: var(--sb-ref-space-1);
  --sb-sem-space-indicator-py: var(--sb-ref-space-0-5);

  --sb-sem-space-indicator-w: var(--sb-ref-space-fit);
  /* TODO: 'alt' isn't a great modifier for this token */
  /* Used for drawer thumb */
  --sb-sem-space-indicator-w-alt: var(--sb-ref-space-25);

  /* Used for drawer thumb */
  --sb-sem-space-indicator-h: var(--sb-ref-space-2);

  /* Used for switch thumb & checkbox */
  --sb-sem-space-indicator-size-lg: var(--sb-ref-space-4);
  --sb-sem-space-indicator-size-xl: var(--sb-ref-space-5);
  /* Used for select item indicator */
  --sb-sem-space-indicator-size: var(--sb-ref-space-3-5);
  --sb-sem-space-indicator-size-sm: var(--sb-ref-space-3);
  --sb-sem-space-indicator-size-xs: var(--sb-ref-space-2-5);
  /* Used for radio group item indicator (icon) */
  --sb-sem-space-indicator-size-2xs: var(--sb-ref-space-2);
}

/*
 * --------------------------------------------------
 *  FEEDBACK: alert, toast, empty
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-feedback-gap: var(--sb-ref-space-0-5);
  --sb-sem-space-feedback-gap-lg: var(--sb-ref-space-2);
  --sb-sem-space-feedback-gap-xl: var(--sb-ref-space-2-5);
  --sb-sem-space-feedback-gap-2xl: var(--sb-ref-space-4);

  --sb-sem-space-feedback-px: var(--sb-ref-space-2-5);
  --sb-sem-space-feedback-py: var(--sb-ref-space-2);
  --sb-sem-space-feedback-pr-has-action: var(--sb-ref-space-18);
  --sb-sem-space-feedback-p-lg: var(--sb-ref-space-6);

  --sb-sem-space-feedback-w: var(--sb-ref-space-full);
  --sb-sem-space-feedback-w-child: var(--sb-ref-space-full);
  --sb-sem-space-feedback-h: var(--sb-ref-space-2);
  --sb-sem-space-feedback-h-child: var(--sb-ref-space-full);

  --sb-sem-space-feedback-max-w: var(--sb-ref-space-container-sm);
}

/*
 * --------------------------------------------------
 *  IDENTITY: avatar
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-identity-size: var(--sb-ref-space-8);
  --sb-sem-space-identity-size-sm: var(--sb-ref-space-6);
  --sb-sem-space-identity-size-lg: var(--sb-ref-space-10);
}

/*
 * --------------------------------------------------
 *  DIVIDER: dropdown menu separator, select
 * --------------------------------------------------
 */

:root {
  /* Used for dropdown menu separator and select separator */
  --sb-sem-space-divider-mx: var(--sb-ref-space-neg-1);
  --sb-sem-space-divider-my: var(--sb-ref-space-1);
  --sb-sem-space-divider-h: var(--sb-ref-space-5);
  --sb-sem-space-divider-my: var(--sb-ref-space-2);
}

/*
 * --------------------------------------------------
 *  LAYOUT: card, accordion, item
 *  (+ separator, carousel, resizable, scroll area)
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-layout-gap: var(--sb-ref-space-4);
  --sb-sem-space-layout-gap-sm: var(--sb-ref-space-3);
  --sb-sem-space-layout-gap-xs: var(--sb-ref-space-2-5);
  --sb-sem-space-layout-gap-2xs: var(--sb-ref-space-2);
  /* Used for layout element children (e.g. card header) */
  --sb-sem-space-layout-gap-child: var(--sb-ref-space-1);

  --sb-sem-space-layout-p: var(--sb-ref-space-4);
  --sb-sem-space-layout-p-sm: var(--sb-ref-space-3);
  --sb-sem-space-layout-p-xs: var(--sb-ref-space-2-5);
  --sb-sem-space-layout-p-2xs: var(--sb-ref-space-2);

  --sb-sem-space-layout-h-closed: var(--sb-ref-space-0);
  --sb-sem-space-layout-h-open: var(--sb-ref-space-8-25);

  --sb-sem-space-layout-pt-child: var(--sb-ref-space-0);
  --sb-sem-space-layout-pb-child: var(--sb-ref-space-4);
}

/*
 * --------------------------------------------------
 *  FORM: label, input otp, command, radio group, select, input, textarea, field
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-form-gap: var(--sb-ref-space-3);
  --sb-sem-space-form-gap-sm: var(--sb-ref-space-2);
  --sb-sem-space-form-gap-lg: var(--sb-ref-space-4);
  --sb-sem-space-form-gap-xl: var(--sb-ref-space-5);

  --sb-sem-space-form-p: var(--sb-ref-space-3);
  --sb-sem-space-form-p-sm: var(--sb-ref-space-2);
  --sb-sem-space-form-p-xs: var(--sb-ref-space-1-5);
  --sb-sem-space-form-p-2xs: var(--sb-ref-space-1);

  --sb-sem-space-form-py: var(--sb-ref-space-1);
  --sb-sem-space-form-py-lg: var(--sb-ref-space-2);
  --sb-sem-space-form-px: var(--sb-ref-space-2-5);

  --sb-sem-space-form-pr: var(--sb-ref-space-8);

  --sb-sem-space-form-size: var(--sb-ref-space-9);
  --sb-sem-space-form-size-sm: var(--sb-ref-space-8);
  --sb-sem-space-form-size-lg: var(--sb-ref-space-10);
  /* Used for switch thumb and radio group item */
  --sb-sem-space-form-size-xs: var(--sb-ref-space-4);

  /* Used for textarea */
  --sb-sem-space-form-min-h: var(--sb-ref-space-16);

  --sb-sem-space-form-w: var(--sb-ref-space-full);
}

/*
 * --------------------------------------------------
 *  NAVIGATION: breadcrumb, pagination, menubar, tabs
 *  (+ sidebar, navigation menu)
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-navigation-gap-lg: var(--sb-ref-space-2-5);
  --sb-sem-space-navigation-gap: var(--sb-ref-space-2);
  --sb-sem-space-navigation-gap-sm: var(--sb-ref-space-1-5);
  --sb-sem-space-navigation-gap-xs: var(--sb-ref-space-1);

  --sb-sem-space-navigation-p-xs: var(--sb-ref-space-1);
  --sb-sem-space-navigation-p-sm: var(--sb-ref-space-1-5);
  --sb-sem-space-navigation-p: var(--sb-ref-space-2);

  --sb-sem-space-navigation-pl: var(--sb-ref-space-8);

  --sb-sem-space-navigation-px: var(--sb-ref-space-2-5);

  --sb-sem-space-navigation-size: var(--sb-ref-space-9);
  --sb-sem-space-navigation-size-sm: var(--sb-ref-space-8);

  /* Used for menubar content */
  --sb-sem-space-navigation-min-w: var(--sb-ref-space-48);
}

/*
 * --------------------------------------------------
 *  OVERLAY: dialog, hover card, drawer, dropdown menu, command, popover
 *  (+ tooltip, context menu, sheet)
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-overlay-gap: var(--sb-ref-space-4);
  /* Used for dialog header, dialog footer, and drawer footer */
  --sb-sem-space-overlay-gap-sm: var(--sb-ref-space-2);
  /* Used for drawer header */
  --sb-sem-space-overlay-gap-xs: var(--sb-ref-space-1-5);
  --sb-sem-space-overlay-gap-2xs: var(--sb-ref-space-0-5);

  /* Used for drawer content */
  --sb-sem-space-overlay-m: var(--sb-ref-space-24);

  --sb-sem-space-overlay-p: var(--sb-ref-space-6);
  /* Used for hover card, drawer header, popover content */
  --sb-sem-space-overlay-p-sm: var(--sb-ref-space-4);
  /* Used for dropdown menu content and command group */
  --sb-sem-space-overlay-p-xs: var(--sb-ref-space-1);

  /* Used for dropdown menu label */
  --sb-sem-space-overlay-px: var(--sb-ref-space-2);
  --sb-sem-space-overlay-py: var(--sb-ref-space-1-5);

  /* Used for command empty */
  --sb-sem-space-overlay-py-lg: var(--sb-ref-space-6);

  --sb-sem-space-overlay-w: var(--sb-ref-space-full);
  /* Used for popover content */
  --sb-sem-space-overlay-w-sm: var(--sb-ref-space-container-2xs);
  /* Used for hover card */
  --sb-sem-space-overlay-w-xs: var(--sb-ref-space-64);

  /* Used for command */
  --sb-sem-space-overlay-h: var(--sb-ref-space-full);

  --sb-sem-space-overlay-max-w: var(--sb-ref-space-container-lg);
  --sb-sem-space-overlay-max-w-sm: calc(
    var(--sb-ref-space-full) - var(--sb-ref-space-8)
  );

  /* Used for dropdown menu content */
  --sb-sem-space-overlay-min-w: var(--sb-ref-space-55);

  /* Used for command list */
  --sb-sem-space-overlay-max-h: var(--sb-ref-space-75);
}

/*
 * --------------------------------------------------
 *  DATE TIME: calendar, date picker
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-date-time-gap: var(--sb-ref-space-4);
  --sb-sem-space-date-time-gap-sm: var(--sb-ref-space-1);

  --sb-sem-space-date-time-p: var(--sb-ref-space-3);
  --sb-sem-space-date-time-p-sm: var(--sb-ref-space-0);
  --sb-sem-space-date-time-p-lg: var(--sb-ref-space-8);

  --sb-sem-space-date-time-mt: var(--sb-ref-space-2);

  /* Used for date picker trigger button */
  --sb-sem-space-date-time-w: var(--sb-ref-space-container-2xs);

  --sb-sem-space-date-time-h: var(--sb-ref-space-8);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY
 * --------------------------------------------------
 */

:root {
  --sb-sem-space-typography-2xs: var(--sb-ref-space-1);
  --sb-sem-space-typography-xs: var(--sb-ref-space-2);
  --sb-sem-space-typography-sm: var(--sb-ref-space-4);
  --sb-sem-space-typography: var(--sb-ref-space-6);
  --sb-sem-space-typography-lg: var(--sb-ref-space-8);
  --sb-sem-space-typography-xl: var(--sb-ref-space-10);

  --sb-sem-space-typography-heading-scroll-m: var(--sb-ref-space-20);
}

/*
 * ===========================================================================
 *  WIDTH SEMANTIC TOKENS
 *  sb-sem-width-*
 * ===========================================================================
 */

:root {
  /* * BORDER * */
  /* Default border width used for bordered elements/components - e.g. outline
  buttons. */
  --sb-sem-width-border: var(--sb-ref-width-1);

  --sb-sem-width-border-decorative: var(--sb-ref-width-2);

  /* * RING * */
  /* Default ring width used for the box shadow of elements/components - e.g.
  buttons in their (aria-)invalid state. */
  --sb-sem-width-ring: var(--sb-ref-width-1);

  /* Ring width used for the box shadow of elements/components in a focus state
   - e.g. buttons in their focus(-visible) state. */
  --sb-sem-width-ring-focus: var(--sb-ref-width-3);
  /* Used for dialog close */
  --sb-sem-width-ring-sm-focus: var(--sb-ref-width-2);

  --sb-sem-width-ring-invalid: var(--sb-ref-width-3);

  /* Ring width used for the box shadow of elements/components in a focus state
   - e.g. buttons in their focus(-visible) state. */
  --sb-sem-width-scrollbar-hover: calc(var(--sb-ref-width-3) * 2);

  /* Ring width used on elements which use a box shadow to create whitespace
  (e.g. avatar) */
  --sb-sem-width-ring-whitespace: var(--sb-ref-width-2);

  /* * OUTLINE * */
  --sb-sem-width-outline-focus: var(--sb-ref-width-1);
}

/*
 * ===========================================================================
 *  COMPONENT TOKENS INDEX
 * ===========================================================================
 */

/*
 * ===========================================================================
 *  ACCORDION COMPONENT TOKENS
 *  sb-accordion-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ACCORDION ITEM
 * --------------------------------------------------
 */

:root {
  --sb-accordion-item-width-border: var(--sb-sem-width-border);
  --sb-accordion-item-color-border: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  ACCORDION TRIGGER
 * --------------------------------------------------
 */

:root {
  --sb-accordion-trigger-space-gap: var(--sb-sem-space-action-gap-2xl);

  --sb-accordion-trigger-space-py: var(--sb-sem-space-action-py-xl);

  --sb-accordion-trigger-space-w: var(--sb-sem-space-action-w-xl);

  --sb-accordion-trigger-radius: var(--sb-sem-radius-action);

  --sb-accordion-trigger-font-size: var(--sb-sem-font-action-size);
  --sb-accordion-trigger-font-line-height: var(
    --sb-sem-font-action-line-height
  );
  --sb-accordion-trigger-font-weight: var(--sb-sem-font-action-weight);

  --sb-accordion-trigger-width-border-focus: var(--sb-sem-width-border);
  --sb-accordion-trigger-color-border-focus: var(--sb-sem-color-border-focus);

  --sb-accordion-trigger-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-accordion-trigger-color-ring-focus: var(--sb-sem-color-ring-focus);

  /* * ACCORDION CHEVRON * */
  --sb-accordion-trigger-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-accordion-trigger-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  ACCORDION CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-accordion-content-font-size: var(--sb-sem-font-content-body-size);
  --sb-accordion-content-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );
  --sb-accordion-content-font-weight: var(--sb-sem-font-content-body-weight);

  --sb-accordion-content-space-h-closed: var(--sb-sem-space-layout-h-closed);
  --sb-accordion-content-space-h-open: var(--sb-sem-space-layout-h-open);

  --sb-accordion-content-motion-duration-closed: var(--sb-sem-motion-duration-in-out);
  --sb-accordion-content-motion-fn-closed: var(--sb-sem-motion-fn-in-out);

  --sb-accordion-content-motion-duration-open: var(--sb-sem-motion-duration-in-out);
  --sb-accordion-content-motion-fn-open: var(--sb-sem-motion-fn-in-out);

  --sb-accordion-content-div-space-pt: var(--sb-sem-space-layout-pt-child);
  --sb-accordion-content-div-space-pb: var(--sb-sem-space-layout-pb-child);
}

/*
 * ===========================================================================
 *  ALERT COMPONENT TOKENS
 *  rtg-alert-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ALERT
 * --------------------------------------------------
 */

:root {
  --rtg-alert-space-gap: var(--sb-sem-space-feedback-gap);
  --rtg-alert-space-gap-x-has-icon: var(--sb-sem-space-feedback-gap-lg);

  --rtg-alert-space-py: var(--sb-sem-space-feedback-py);
  --rtg-alert-space-px: var(--sb-sem-space-feedback-px);
  --rtg-alert-space-pr-has-action: var(--sb-sem-space-feedback-pr-has-action);

  --rtg-alert-font-size: var(--sb-sem-font-content-body-size);
  --rtg-alert-font-line-height: var(--sb-sem-font-content-body-line-height);

  --rtg-alert-color-bg: hsl(var(--sb-sem-color-bg-surface-secondary));

  --rtg-alert-width-border: var(--sb-sem-width-border);
  --rtg-alert-color-border: hsl(var(--sb-sem-color-border));
  --rtg-alert-radius: var(--sb-sem-radius-feedback);

  /* * VARIANTS * */
  /* DEFAULT */
  --rtg-alert-default-color-text: hsl(var(--sb-sem-color-text));

  /* BRAND & BRAND TONAL */
  --rtg-alert-brand-color-text: hsl(var(--sb-sem-color-text-brand));
  --rtg-alert-brand-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-brand));
  --rtg-alert-brand-tonal-color-border: hsl(var(--sb-sem-color-border-brand-secondary));

  /* DESTRUCTIVE & DESTRUCTIVE TONAL */
  --rtg-alert-destructive-color-text: hsl(var(--sb-sem-color-text-destructive));
  --rtg-alert-destructive-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-destructive));
  --rtg-alert-destructive-tonal-color-border: hsl(var(--sb-sem-color-border-destructive-secondary));

  /* WARNING & WARNING TONAL */
  --rtg-alert-warning-color-text: hsl(var(--sb-sem-color-text-warning));
  --rtg-alert-warning-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-warning));
  --rtg-alert-warning-tonal-color-border: hsl(var(--sb-sem-color-border-warning-secondary));

  /* SUCCESS & SUCCESS TONAL */
  --rtg-alert-success-color-text: hsl(var(--sb-sem-color-text-success));
  --rtg-alert-success-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-success));
  --rtg-alert-success-tonal-color-border: hsl(var(--sb-sem-color-border-success-secondary));

  /* INFO & INFO TONAL */
  --rtg-alert-info-color-text: hsl(var(--sb-sem-color-text-info));
  --rtg-alert-info-tonal-color-bg: hsl(var(--sb-sem-color-bg-surface-info));
  --rtg-alert-info-tonal-color-border: hsl(var(--sb-sem-color-border-info-secondary));

  /* * ICON CHILD * */
  --rtg-alert-icon-space-size: var(--sb-sem-space-icon-size);
  --rtg-alert-icon-space-translate-y: var(--sb-sem-space-icon-translate-y);
}

/*
 * --------------------------------------------------
 *  ALERT TITLE
 * --------------------------------------------------
 */

:root {
  --rtg-alert-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);

  /* * LINK CHILD * */
  --rtg-alert-title-color-link-hover: hsl(var(--sb-sem-color-text));
}

/*
 * --------------------------------------------------
 *  ALERT DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --rtg-alert-description-font-size: var(--sb-sem-font-content-body-size);
  --rtg-alert-description-font-line-height: var(--sb-sem-font-content-body-line-height);

  /* * VARIANTS * */
  --rtg-alert-description-default-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-alert-description-brand-color-text: hsl(var(--sb-sem-color-text-brand-secondary));
  --rtg-alert-description-destructive-color-text: hsl(var(--sb-sem-color-text-destructive-secondary));
  --rtg-alert-description-warning-color-text: hsl(var(--sb-sem-color-text-warning-secondary));
  --rtg-alert-description-success-color-text: hsl(var(--sb-sem-color-text-success-secondary));
  --rtg-alert-description-info-color-text: hsl(var(--sb-sem-color-text-info-secondary));

  /* * LINK CHILD * */
  --rtg-alert-description-color-link-hover: hsl(var(--sb-sem-color-text));

  /* * PARAGRAPH CHILD * */
  --rtg-alert-description-p-space-mb: var(--sb-ref-space-4);
}

/*
 * --------------------------------------------------
 *  ALERT ACTION
 * --------------------------------------------------
 */

:root {
  --rtg-alert-action-space-top: var(--sb-ref-space-2);
  --rtg-alert-action-space-right: var(--sb-ref-space-2);
}

/*
 * ===========================================================================
 *  AVATAR COMPONENT TOKENS
 *  rtg-avatar-*
 * ===========================================================================
 */

:root {
  /* Used for avatar group avatar children */
  --rtg-avatar-space-me-in-group: var(--sb-ref-space-neg-2);

  /* Used for avatar and avatar group count */
  --rtg-avatar-space-size: var(--sb-sem-space-identity-size);
  --rtg-avatar-space-size-sm: var(--sb-sem-space-identity-size-sm);
  --rtg-avatar-space-size-lg: var(--sb-sem-space-identity-size-lg);

  /* Used for avatar fallback and avatar group count */
  --rtg-avatar-font-size: var(--sb-sem-font-identity-size);
  --rtg-avatar-font-size-sm: var(--sb-sem-font-identity-size-sm);
  --rtg-avatar-font-line-height: var(--sb-sem-font-identity-line-height);
  --rtg-avatar-font-line-height-sm: var(--sb-sem-font-identity-line-height-sm);
  --rtg-avatar-color-text: hsl(var(--sb-sem-color-text-secondary));

  /* Used for avatar fallback and avatar group count */
  --rtg-avatar-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* Used for avatar, avatar image, avatar image, and avatar group count */
  --rtg-avatar-radius: var(--sb-sem-radius-identity);

  /* Used for avatar, avatar badge, and avatar group count */
  --rtg-avatar-width-ring: var(--sb-sem-width-ring-whitespace);
  --rtg-avatar-color-ring: hsl(var(--sb-sem-color-ring-whitespace));

  /* Used for icons inside avatar group count */
  --rtg-avatar-icon-space-size: var(--sb-sem-space-icon-size);
  --rtg-avatar-icon-space-size-sm: var(--sb-sem-space-icon-size-xs);
  --rtg-avatar-icon-space-size-lg: var(--sb-sem-space-icon-size-lg);
}

/*
 * --------------------------------------------------
 *  AVATAR BADGE
 * --------------------------------------------------
 */

:root {
  --rtg-avatar-badge-space-size: var(--sb-sem-space-indicator-size-xs);
  --rtg-avatar-badge-space-size-sm: var(--sb-sem-space-indicator-size-2xs);
  --rtg-avatar-badge-space-size-lg: var(--sb-sem-space-indicator-size-sm);

  --rtg-avatar-badge-color-text: hsl(var(--sb-sem-color-text-brand-on-fill));

  --rtg-avatar-badge-color-bg: hsl(var(--sb-sem-color-bg-fill-brand));

  --rtg-avatar-badge-radius: var(--sb-sem-radius-indicator);

  --rtg-avatar-badge-icon-space-size: var(--sb-sem-space-icon-size-3xs);
  --rtg-avatar-badge-icon-space-size-lg: var(--sb-sem-space-icon-size-2xs);
}

/*
 * ===========================================================================
 *  BADGE COMPONENT TOKENS
 *  rtg-badge-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMON TOKENS
 * --------------------------------------------------
 */

:root {
  --rtg-badge-space-gap: var(--sb-sem-space-indicator-gap);
  --rtg-badge-space-px: var(--sb-sem-space-indicator-px);
  --rtg-badge-space-px-has-icon: var(--sb-sem-space-indicator-px-has-icon);
  --rtg-badge-space-py: var(--sb-sem-space-indicator-py);

  --rtg-badge-radius: var(--sb-sem-radius-indicator);
  --rtg-badge-width-border: var(--sb-sem-width-border);
  --rtg-badge-color-border: hsl(var(--sb-sem-color-border-transparent));

  --rtg-badge-font-size: var(--sb-sem-font-indicator-size);
  --rtg-badge-font-line-height: var(--sb-sem-font-indicator-line-height);
  --rtg-badge-font-weight: var(--sb-sem-font-indicator-weight);

  --rtg-badge-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-badge-motion-duration: var(--sb-sem-motion-duration-default);

  --rtg-badge-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-badge-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));
  --rtg-badge-width-ring-focus: var(--sb-sem-width-ring-focus);

  --rtg-badge-color-border-invalid: hsl(var(--sb-sem-color-border-invalid));
  --rtg-badge-width-ring-invalid: var(--sb-sem-width-ring);
  --rtg-badge-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));

  --rtg-badge-icon-space-size: var(--sb-sem-space-icon-size-xs);
}

/*
 * --------------------------------------------------
 *  VARIANT TOKENS
 * --------------------------------------------------
 */

:root {
  /* * DEFAULT * */
  --rtg-badge-default-color-text: hsl(var(--sb-sem-color-text-brand-on-fill));
  --rtg-badge-default-color-bg: hsl(var(--sb-sem-color-bg-fill-brand));

  --rtg-badge-default-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-brand-hover));

  /* * SECONDARY * */
  --rtg-badge-secondary-color-text: hsl(var(--sb-sem-color-text-secondary-on-fill));
  --rtg-badge-secondary-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));

  --rtg-badge-secondary-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-secondary-hover));

  /* * OUTLINE * */
  --rtg-badge-outline-color-text: hsl(var(--sb-sem-color-text));
  --rtg-badge-outline-color-border: hsl(var(--sb-sem-color-border));

  --rtg-badge-outline-color-text-hover: hsl(var(--sb-sem-color-text-secondary-on-fill));
  --rtg-badge-outline-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* * GHOST * */
  --rtg-badge-ghost-color-text-hover: hsl(var(--sb-sem-color-text-secondary-on-fill));
  --rtg-badge-ghost-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* * DESTRUCTIVE * */
  --rtg-badge-destructive-color-text: hsl(var(--sb-sem-color-text-destructive-secondary-on-fill));
  --rtg-badge-destructive-color-bg: hsl(var(--sb-sem-color-bg-fill-destructive-secondary));

  --rtg-badge-destructive-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-destructive-secondary-hover));

  --rtg-badge-destructive-color-ring-focus: hsl(var(--sb-sem-color-ring-destructive));

  /* * LINK * */
  --rtg-badge-link-color-text: hsl(var(--sb-sem-color-text-brand));
}

/*
 * ===========================================================================
 *  BREADCRUMB COMPONENT TOKENS
 *  sb-breadcrumb-*
 * ===========================================================================
 */

:root {
  /* * BREADCRUMB LIST * */
  --sb-breadcrumb-list-space-gap-sm: var(--sb-sem-space-navigation-gap-sm);
  --sb-breadcrumb-list-space-gap: var(--sb-sem-space-navigation-gap-lg);

  --sb-breadcrumb-list-font-size: var(--sb-sem-font-navigation-size);
  --sb-breadcrumb-list-font-line-height: var(
    --sb-sem-font-navigation-line-height
  );
  --sb-breadcrumb-list-font-weight: var(--sb-sem-font-navigation-weight);
  --sb-breadcrumb-list-color-text: var(--sb-sem-color-text-secondary);

  /* * BREADCRUMB ITEM * */
  --sb-breadcrumb-item-space-gap: var(--sb-sem-space-navigation-gap-sm);

  /* * BREADCRUMB LINK * */
  --sb-breadcrumb-link-color-text-hover: var(--sb-sem-color-text);

  /* * BREADCRUMB PAGE * */
  --sb-breadcrumb-page-font-weight: var(--sb-sem-font-navigation-weight);
  --sb-breadcrumb-page-color-text: var(--sb-sem-color-text);

  /* * BREADCRUMB SEPARATOR * */
  --sb-breadcrumb-separator-icon-space-size: var(--sb-sem-space-icon-size-sm);

  /* * BREADCRUMB ELLIPSIS * */
  --sb-breadcrumb-ellipsis-space-size: var(--sb-sem-space-navigation-size);
  --sb-breadcrumb-ellipsis-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * ===========================================================================
 *  BUTTON COMPONENT TOKENS
 *  rtg-button-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMON
 * --------------------------------------------------
 */

:root {
  --rtg-button-font-weight: var(--sb-sem-font-action-weight);

  --rtg-button-width-border: var(--sb-sem-width-border);
  --rtg-button-color-border: hsl(var(--sb-sem-color-border-transparent));
  --rtg-button-radius-in-group: var(--sb-sem-radius-action);

  --rtg-button-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-button-motion-duration: var(--sb-sem-motion-duration-default);

  --rtg-button-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-button-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-button-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  --rtg-button-opacity-disabled: var(--sb-sem-opacity-disabled);

  --rtg-button-color-border-invalid: hsl(var(--sb-sem-color-border-invalid-secondary));
  --rtg-button-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-button-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));
}

/*
 * --------------------------------------------------
 *  VARIANTS
 * --------------------------------------------------
 */

:root {
  /* * DEFAULT * */
  --rtg-button-default-color-text: hsl(var(--sb-sem-color-text-brand-on-fill));
  --rtg-button-default-color-bg: hsl(var(--sb-sem-color-bg-fill-brand));

  --rtg-button-default-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-brand-hover));

  /* * SECONDARY * */
  --rtg-button-secondary-color-text: hsl(var(--sb-sem-color-text-secondary-on-fill));
  --rtg-button-secondary-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));

  --rtg-button-secondary-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-secondary-hover));

  --rtg-button-secondary-color-text-expanded: hsl(var(--sb-sem-color-text-secondary-on-fill));
  --rtg-button-secondary-color-bg-expanded: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* * OUTLINE * */
  --rtg-button-outline-color-bg: hsl(var(--sb-sem-color-bg-fill-tertiary));
  --rtg-button-outline-color-border: hsl(var(--sb-sem-color-border-secondary));

  --rtg-button-outline-color-text-hover: hsl(var(--sb-sem-color-text));
  --rtg-button-outline-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-tertiary-hover));

  --rtg-button-outline-color-text-expanded: hsl(var(--sb-sem-color-text));
  --rtg-button-outline-color-bg-expanded: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* * GHOST * */
  --rtg-button-ghost-color-text-hover: hsl(var(--sb-sem-color-text));
  --rtg-button-ghost-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-tertiary-hover));

  --rtg-button-ghost-color-text-expanded: hsl(var(--sb-sem-color-text));
  --rtg-button-ghost-color-bg-expanded: hsl(var(--sb-sem-color-bg-fill-secondary));

  /* * DESTRUCTIVE * */
  --rtg-button-destructive-color-text: hsl(var(--sb-sem-color-text-destructive-secondary-on-fill));
  --rtg-button-destructive-color-bg: hsl(var(--sb-sem-color-bg-fill-destructive-secondary));

  --rtg-button-destructive-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-destructive-secondary-hover));

  --rtg-button-destructive-color-border-focus: hsl(var(--sb-sem-color-border-destructive-focus));
  --rtg-button-destructive-color-ring-focus: hsl(var(--sb-sem-color-ring-destructive));

  /* * LINK * */
  --rtg-button-link-color-text: hsl(var(--sb-sem-color-text-brand));
}

/*
 * --------------------------------------------------
 *  SIZES
 * --------------------------------------------------
 */

:root {
  --rtg-button-space-gap-default: var(--sb-sem-space-action-gap);
  --rtg-button-space-gap-xs: var(--sb-sem-space-action-gap-xs);
  --rtg-button-space-gap-sm: var(--sb-sem-space-action-gap-sm);
  --rtg-button-space-gap-lg: var(--sb-sem-space-action-gap-lg);

  --rtg-button-space-px-default: var(--sb-sem-space-action-px);
  --rtg-button-space-px-xs: var(--sb-sem-space-action-px-xs);
  --rtg-button-space-px-sm: var(--sb-sem-space-action-px);
  --rtg-button-space-px-lg: var(--sb-sem-space-action-px);

  --rtg-button-space-px-default-has-icon: var(--sb-sem-space-action-px-has-icon);
  --rtg-button-space-px-xs-has-icon: var(--sb-sem-space-action-px-sm-has-icon);
  --rtg-button-space-px-sm-has-icon: var(--sb-sem-space-action-px-sm-has-icon);
  --rtg-button-space-px-lg-has-icon: var(--sb-sem-space-action-px-lg-has-icon);

  --rtg-button-space-size-default: var(--sb-sem-space-action-size);
  --rtg-button-space-size-xs: var(--sb-sem-space-action-size-xs);
  --rtg-button-space-size-sm: var(--sb-sem-space-action-size-sm);
  --rtg-button-space-size-lg: var(--sb-sem-space-action-size-lg);

  --rtg-button-font-size-default: var(--sb-sem-font-action-size);
  --rtg-button-font-size-xs: var(--sb-sem-font-action-size-xs);
  --rtg-button-font-size-sm: var(--sb-sem-font-action-size-sm);
  --rtg-button-font-size-lg: var(--sb-sem-font-action-size);

  --rtg-button-font-line-height-default: var(--sb-sem-font-action-line-height);
  --rtg-button-font-line-height-xs: var(--sb-sem-font-action-line-height-xs);
  --rtg-button-font-line-height-sm: var(--sb-sem-font-action-line-height-sm);
  --rtg-button-font-line-height-lg: var(--sb-sem-font-action-line-height);

  --rtg-button-radius-default: var(--sb-sem-radius-action);
  --rtg-button-radius-xs: min(var(--sb-sem-radius-action-xs), var(--sb-sem-radius-action-xs-as-px));
  --rtg-button-radius-sm: min(var(--sb-sem-radius-action-sm), var(--sb-sem-radius-action-sm-as-px));
  --rtg-button-radius-lg: var(--sb-sem-radius-action-lg);

  --rtg-button-icon-space-size-default: var(--sb-sem-space-icon-size);
  --rtg-button-icon-space-size-xs: var(--sb-sem-space-icon-size-xs);
  --rtg-button-icon-space-size-sm: var(--sb-sem-space-icon-size-sm);
  --rtg-button-icon-space-size-lg: var(--sb-sem-space-icon-size);
}

/*
 * ===========================================================================
 *  CALENDAR COMPONENT TOKENS
 *  sb-calendar-*
 * ===========================================================================
 */

:root {
  --sb-calendar-space-p: var(--sb-sem-space-date-time-p);
  --sb-calendar-color-bg: var(--sb-sem-color-bg-surface);

  /* * MONTHS * */
  --sb-calendar-months-space-gap: var(--sb-sem-space-date-time-gap);

  /* * NAV * */
  --sb-calendar-nav-space-gap: var(--sb-sem-space-date-time-gap-sm);

  /* * MONTH * */
  --sb-calendar-month-space-gap: var(--sb-sem-space-date-time-gap);

  /* * BUTTON PREVIOUS * */
  --sb-calendar-button-previous-opacity-disabled: var(
    --sb-sem-opacity-disabled
  );

  /* * BUTTON NEXT * */
  --sb-calendar-button-next-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* * CHEVRON * */
  --sb-calendar-chevron-space-size: var(--sb-sem-space-icon-size);

  /* * MONTH CAPTION * */
  --sb-calendar-month-caption-space-px: var(--sb-sem-space-date-time-p-lg);
  --sb-calendar-month-caption-space-h: var(--sb-sem-space-date-time-h);

  /* * CAPTION LABEL * */
  --sb-calendar-caption-label-font-size: var(--sb-sem-font-date-time-size);
  --sb-calendar-caption-label-font-line-height: var(
    --sb-sem-font-date-time-label-line-height
  );
  --sb-calendar-caption-label-font-weight: var(
    --sb-sem-font-date-time-label-weight
  );

  /* * WEEKDAY * */
  --sb-calendar-weekday-font-size: var(--sb-sem-font-date-time-size-sm);
  --sb-calendar-weekday-font-line-height: var(
    --sb-sem-font-date-time-line-height
  );
  --sb-calendar-weekday-font-weight: var(--sb-sem-font-date-time-weight);
  --sb-calendar-weekday-color-text: var(--sb-sem-color-text-secondary);
  --sb-calendar-weekday-radius: var(--sb-sem-radius-date-time);

  /* * WEEK * */
  --sb-calendar-week-space-mt: var(--sb-sem-space-date-time-mt);

  /* * DAY * */
  --sb-calendar-day-space-p: var(--sb-sem-space-date-time-p-sm);

  --sb-calendar-day-radius: var(--sb-sem-radius-date-time);

  --sb-calendar-day-today-color-bg: var(--sb-sem-color-bg-fill-secondary);

  --sb-calendar-day-color-bg-selected: var(--sb-sem-color-bg-fill-secondary);

  --sb-calendar-day-width-border-focus: var(--sb-sem-width-border);
  --sb-calendar-day-color-border-focus: var(--sb-sem-color-border-focus);
  --sb-calendar-day-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-calendar-day-color-ring-focus: var(--sb-sem-color-ring-focus);

  /* * DAY BUTTON * */
  --sb-calendar-day-button-space-gap: var(--sb-sem-space-action-gap-sm);

  --sb-calendar-day-button-space-min-w: var(--sb-sem-space-action-size);

  --sb-calendar-day-button-font-size: var(--sb-sem-font-date-time-size);
  --sb-calendar-day-button-font-line-height: var(
    --sb-sem-font-date-time-line-height
  );
  --sb-calendar-day-button-font-weight: var(--sb-sem-font-date-time-weight);

  /* DISABLED */
  --sb-calendar-day-button-color-text-disabled: var(
    --sb-sem-color-text-secondary
  );
  --sb-calendar-day-button-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* OUTSIDE */
  --sb-calendar-day-button-outside-color-text: var(
    --sb-sem-color-text-secondary
  );

  /* TODAY */
  --sb-calendar-day-button-today-color-text: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-calendar-day-button-today-color-bg: var(
    --sb-sem-color-bg-fill-secondary
  );

  /* SINGLE SELECTED */
  --sb-calendar-day-button-color-bg-single-selected: var(
    --sb-sem-color-bg-fill-brand
  );
  --sb-calendar-day-button-color-text-single-selected: var(
    --sb-sem-color-text-brand-on-fill
  );

  /* RANGE START */
  --sb-calendar-day-button-color-bg-range-start: var(
    --sb-sem-color-bg-fill-brand
  );
  --sb-calendar-day-button-color-text-range-start: var(
    --sb-sem-color-text-brand-on-fill
  );

  /* RANGE MIDDLE */
  --sb-calendar-day-button-color-bg-range-middle: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-calendar-day-button-color-text-range-middle: var(
    --sb-sem-color-text-secondary-on-fill
  );

  /* RANGE END */
  --sb-calendar-day-button-color-bg-range-end: var(
    --sb-sem-color-bg-fill-brand
  );
  --sb-calendar-day-button-color-text-range-end: var(
    --sb-sem-color-text-brand-on-fill
  );

  /* SPAN */
  --sb-calendar-day-button-span-font-size: var(--sb-sem-font-date-time-size-xs);
  --sb-calendar-day-button-span-font-line-height: var(
    --sb-sem-font-date-time-line-height-of-xs
  );
  --sb-calendar-day-button-span-opacity: var(--sb-ref-opacity-70); /* TODO: sem token */
}

/*
 * ===========================================================================
 *  CARD COMPONENT TOKENS
 *  rtg-card-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  CARD
 * --------------------------------------------------
 */

:root {
  --rtg-card-space-width: var(--sb-ref-space-width-auto);
  --rtg-card-space-gap: var(--sb-sem-space-layout-gap);
  --rtg-card-space-gap-sm: var(--sb-sem-space-layout-gap-sm);

  /* Used for card, card header, and card footer */
  --rtg-card-space-py: var(--sb-sem-space-layout-p);
  --rtg-card-space-py-sm: var(--sb-sem-space-layout-p-sm);
  /* Used for card header, card content, and card footer */
  --rtg-card-space-px: var(--sb-sem-space-layout-p);
  --rtg-card-space-px-sm: var(--sb-sem-space-layout-p-sm);

  --rtg-card-font-size: var(--sb-sem-font-content-body-size);
  --rtg-card-font-line-height: var(--sb-sem-font-content-body-line-height);
  --rtg-card-color-text: hsl(var(--sb-sem-color-text));

  --rtg-card-color-bg: hsl(var(--sb-sem-color-bg-surface-secondary));

  --rtg-card-radius: var(--sb-sem-radius-layout);

  --rtg-card-width-ring: var(--sb-sem-width-ring);
  --rtg-card-color-ring: hsl(var(--sb-sem-color-ring-secondary));
}

/*
 * --------------------------------------------------
 *  CARD HEADER
 * --------------------------------------------------
 */

:root {
  --rtg-card-header-space-gap: var(--sb-sem-space-layout-gap-child);

  --rtg-card-header-width-border: var(--sb-sem-width-border);
  --rtg-card-header-color-border: hsl(var(--sb-sem-color-border));
}

/*
 * --------------------------------------------------
 *  CARD TITLE
 * --------------------------------------------------
 */

:root {
  --rtg-card-title-font-size: var(--sb-sem-font-content-heading-size-sm);
  --rtg-card-title-font-size-sm: var(--sb-sem-font-content-heading-size-xs);
  --rtg-card-title-font-line-height: var(
    --sb-sem-font-content-heading-line-height-sm
  );
  --rtg-card-title-font-line-height-sm: var(
    --sb-sem-font-content-heading-line-height-xs
  );
  --rtg-card-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);
}

/*
 * --------------------------------------------------
 *  CARD DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --rtg-card-description-font-size: var(--sb-sem-font-content-body-size);
  --rtg-card-description-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );
  --rtg-card-description-color-text: hsl(var(--sb-sem-color-text-secondary));
}

/*
 * --------------------------------------------------
 *  CARD FOOTER
 * --------------------------------------------------
 */

:root {
  --rtg-card-footer-width-border: var(--sb-sem-width-border);
  --rtg-card-footer-color-border: hsl(var(--sb-sem-color-border));
  --sb-carousel-space-w: var(--sb-ref-space-full);
  --sb-carousel-space-h: var(--sb-ref-space-full);
  --sb-carousel-space-mx: var(--sb-ref-space-auto);
  --sb-carousel-motion-duration: var(--sb-ref-motion-duration-500);
  --sb-carousel-motion-fn: var(--sb-ref-motion-fn-ease-in-out);

  /* viewport */
  --sb-carousel-viewport-space-w: var(--sb-ref-space-full);
  --sb-carousel-viewport-space-h: var(--sb-ref-space-full);

  /* slide */
  --sb-carousel-slide-space-px: var(--sb-ref-space-1);
  --sb-carousel-slide-space-py: var(--sb-ref-space-1);
  --sb-carousel-slide-space-h: var(--sb-ref-space-full);

  /* controls */
  --sb-carousel-control-horizontal-space-left: calc(
    var(--sb-ref-space-1) * 15 * -1
  );
  --sb-carousel-control-horizontal-space-right: calc(
    var(--sb-ref-space-1) * 15 * -1
  );
  --sb-carousel-control-vertical-space-h: var(--sb-ref-space-full);
  --sb-carousel-control-vertical-space-w: var(--sb-ref-space-full);

  /* button */
  --sb-carousel-button-color-bg: var(--sb-sem-color-bg-fill-brand);
  --sb-carousel-button-color-text: var(--sb-sem-color-text-brand-on-fill);
  --sb-carousel-button-space-px: var(--sb-ref-space-1);
  --sb-carousel-button-space-py: var(--sb-ref-space-1);
  --sb-carousel-button-radius: calc(var(--sb-ref-space-1) * 250);
  --sb-carousel-button-space-w: var(--sb-ref-space-10);
  --sb-carousel-button-space-h: var(--sb-ref-space-10);
  --sb-carousel-button-color-bg-hover: var(--sb-sem-color-bg-fill-brand-hover);
  --sb-carousel-button-opacity-disabled: var(--sb-sem-opacity-disabled);
  --sb-carousel-button-vertical-prev-space-top: calc(
    var(--sb-ref-space-1) * 12.5 * -1
  );
  --sb-carousel-button-vertical-next-space-top: calc(
    var(--sb-ref-space-1) * 12.5
  );
}

/*
 * ===========================================================================
 *  CHECKBOX COMPONENT TOKENS
 *  rtg-checkbox-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  CHECKBOX
 * --------------------------------------------------
 */

:root {
  --rtg-checkbox-space-size: var(--sb-sem-space-indicator-size-lg);

  --rtg-checkbox-color-bg: hsl(var(--sb-sem-color-bg-fill-quaternary));

  --rtg-checkbox-width-border: var(--sb-sem-width-border);
  --rtg-checkbox-color-border: hsl(var(--sb-sem-color-border-secondary));
  --rtg-checkbox-radius: var(--sb-sem-radius-indicator-sm-as-px);

  --rtg-checkbox-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-checkbox-motion-duration: var(--sb-sem-motion-duration-default);

  /* CHECKED */
  --rtg-checkbox-color-text-checked: hsl(var(--sb-sem-color-text-brand-on-fill));
  --rtg-checkbox-color-bg-checked: hsl(var(--sb-sem-color-bg-fill-brand));
  --rtg-checkbox-color-border-checked: hsl(var(--sb-sem-color-border-brand));

  /* INVALID */
  --rtg-checkbox-color-border-invalid: hsl(var(--sb-sem-color-border-invalid-secondary));
  --rtg-checkbox-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-checkbox-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));

  /* FOCUS VISIBLE */
  --rtg-checkbox-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-checkbox-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-checkbox-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  /* DISABLED */
  --rtg-checkbox-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* * AFTER (::after) * */
  --rtg-checkbox-after-space-inset-x: var(--sb-ref-space-neg-3);
  --rtg-checkbox-after-space-inset-y: var(--sb-ref-space-neg-2);
}

/*
 * --------------------------------------------------
 *  CHECKBOX INDICATOR
 * --------------------------------------------------
 */

:root {
  /* * CHECKBOX INDICATOR ICON * */
  --rtg-checkbox-indicator-icon-space-size: var(--sb-sem-space-icon-size-sm);
  /* empty */
  --sb-combo-box-empty-font-size: var(--sb-sem-font-form-size);
  --sb-combo-box-empty-space-py: var(--sb-ref-space-6);

  /* group */
  --sb-combo-box-group-space-mt: var(--sb-ref-space-1);
  --sb-combo-box-group-space-max-h: calc(var(--sb-ref-space-1) * 80);
  --sb-combo-box-group-space-w: var(--sb-ref-space-full);
  --sb-combo-box-group-radius: var(--sb-sem-radius-form);
  --sb-combo-box-group-color-border: var(--sb-sem-color-border);
  --sb-combo-box-group-width-border: var(--sb-sem-width-border);
  --sb-combo-box-group-color-bg: var(--sb-sem-color-bg-surface);
  --sb-combo-box-group-space-px: var(--sb-ref-space-1);
  --sb-combo-box-group-space-py: var(--sb-ref-space-1);
  --sb-combo-box-group-shadow: var(--sb-sem-shadow-form);
  --sb-combo-box-group-motion-duration: var(--sb-ref-motion-duration-500);
  --sb-combo-box-group-motion-fn: var(--sb-ref-motion-fn-ease-out);

  /* input */
  --sb-combo-box-input-space-w: var(--sb-ref-space-full);
  --sb-combo-box-input-space-h: var(--sb-ref-space-8);
  --sb-combo-box-input-radius: var(--sb-sem-radius-form);
  --sb-combo-box-input-space-px: var(--sb-ref-space-2);
  --sb-combo-box-input-space-py: var(--sb-ref-space-2);
  --sb-combo-box-input-font-size: var(--sb-sem-font-form-size);
  --sb-combo-box-input-color-text: var(--sb-sem-color-text);
  --sb-combo-box-input-color-bg: var(--sb-sem-color-bg-surface);
  --sb-combo-box-input-color-text-placeholder: var(
    --sb-sem-color-text-secondary
  );

  /* trigger */
  --sb-combo-box-trigger-space-h: var(--sb-ref-space-10);
  --sb-combo-box-trigger-radius: var(--sb-sem-radius-form);
  --sb-combo-box-trigger-color-border: var(--sb-sem-color-border);
  --sb-combo-box-trigger-width-border: var(--sb-sem-width-border);
  --sb-combo-box-trigger-color-bg: var(--sb-sem-color-bg-surface);
  --sb-combo-box-trigger-space-px: var(--sb-ref-space-3);
  --sb-combo-box-trigger-space-py: var(--sb-ref-space-2);
  --sb-combo-box-trigger-font-size: var(--sb-sem-font-action-size);
  --sb-combo-box-trigger-color-ring-focus: var(--sb-sem-color-ring-focus);
  --sb-combo-box-trigger-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-combo-box-trigger-width-ring-offset-focus: var(
    --sb-sem-width-ring-sm-focus
  );
  --sb-combo-box-trigger-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* value */
  --sb-combo-box-value-space-w: calc(var(--sb-ref-space-1) * 45);

  /* item */
  --sb-combo-box-item-space-w: var(--sb-ref-space-full);
  --sb-combo-box-item-radius: var(--sb-sem-radius-form-sm);
  --sb-combo-box-item-space-px: var(--sb-ref-space-4);
  --sb-combo-box-item-space-py: var(--sb-ref-space-2);
  --sb-combo-box-item-color-bg-hover: var(--sem-color-bg-surface-selected);
}

/*
 * ===========================================================================
 *  COMMAND COMPONENT TOKENS
 *  sb-command-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMAND
 * --------------------------------------------------
 */

:root {
  --sb-command-space-w: var(--sb-sem-space-overlay-w);
  --sb-command-space-h: var(--sb-sem-space-overlay-h);

  --sb-command-color-text: var(--sb-sem-color-text);

  --sb-command-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-command-radius: var(--sb-sem-radius-overlay-lg);
}

/*
 * --------------------------------------------------
 *  COMMAND INPUT
 * --------------------------------------------------
 */

:root {
  --sb-command-input-space-py: var(--sb-sem-space-form-p);

  --sb-command-input-space-w: var(--sb-sem-space-form-w);
  --sb-command-input-space-h: var(--sb-sem-space-form-size-lg);

  --sb-command-input-font-size: var(--sb-sem-font-form-size);
  --sb-command-input-font-line-height: var(--sb-sem-font-form-line-height);

  --sb-command-input-color-bg: var(--sb-sem-color-bg-fill-transparent);

  --sb-command-input-radius: var(--sb-sem-radius-overlay);

  --sb-command-input-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-command-input-placeholder-color-text: var(--sb-sem-color-text-secondary);

  /* * WRAPPER * */
  --sb-command-input-wrapper-space-gap: var(--sb-sem-space-form-gap-sm);

  --sb-command-input-wrapper-space-px: var(--sb-sem-space-form-p);

  --sb-command-input-wrapper-space-h: var(--sb-sem-space-form-size);

  --sb-command-input-wrapper-width-border: var(--sb-sem-width-border);
  --sb-command-input-wrapper-color-border: var(--sb-sem-color-border);

  /* * ICON * */
  --sb-command-input-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-command-input-icon-opacity: var(--sb-sem-opacity-icon-form);
}

/*
 * --------------------------------------------------
 *  COMMAND LIST
 * --------------------------------------------------
 */

:root {
  --sb-command-list-space-max-h: var(--sb-sem-space-overlay-max-h);
}

/*
 * --------------------------------------------------
 *  COMMAND EMPTY
 * --------------------------------------------------
 */

:root {
  --sb-command-empty-space-py: var(--sb-sem-space-overlay-py-lg);

  --sb-command-empty-font-size: var(--sb-sem-font-content-body-size);
  --sb-command-empty-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );
}

/*
 * --------------------------------------------------
 *  COMMAND GROUP
 * --------------------------------------------------
 */

:root {
  --sb-command-group-space-p: var(--sb-sem-space-overlay-p-xs);

  --sb-command-group-color-text: var(--sb-sem-color-text);
}

/*
 * --------------------------------------------------
 *  COMMAND HEADING
 * --------------------------------------------------
 */

:root {
  --sb-command-heading-space-px: var(--sb-sem-space-overlay-px);
  --sb-command-heading-space-py: var(--sb-sem-space-overlay-py);

  --sb-command-heading-font-size: var(--sb-sem-font-content-label-size);
  --sb-command-heading-font-line-height: var(
    --sb-sem-font-content-label-line-height
  );
  --sb-command-heading-font-weight: var(--sb-sem-font-content-label-weight);
  --sb-command-heading-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  COMMAND SEPARATOR
 * --------------------------------------------------
 */

:root {
  --sb-command-separator-space-mx: var(--sb-sem-space-divider-mx);

  --sb-command-separator-space-h: var(--sb-sem-width-border);

  --sb-command-separator-color-bg: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  COMMAND ITEM
 * --------------------------------------------------
 */

:root {
  --sb-command-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-command-item-space-px: var(--sb-sem-space-action-px-xs);
  --sb-command-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-command-item-font-size: var(--sb-sem-font-content-body-size);
  --sb-command-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-command-item-radius: var(--sb-sem-radius-overlay-xs);

  --sb-command-item-color-bg-hover: var(--sb-sem-color-bg-fill-secondary);
  --sb-command-item-color-text-hover: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-command-item-color-bg-selected: var(--sb-sem-color-bg-fill-secondary);
  --sb-command-item-color-text-selected: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-command-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-command-item-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-command-item-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  COMMAND SHORTCUT
 * --------------------------------------------------
 */

:root {
  --sb-command-shortcut-font-size: var(--sb-sem-font-content-shortcut-size);
  --sb-command-shortcut-font-line-height: var(
    --sb-sem-font-content-shortcut-line-height
  );
  --sb-command-shortcut-font-letter-spacing: var(
    --sb-sem-font-content-shortcut-letter-spacing
  );
  --sb-command-shortcut-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * ===========================================================================
 *  CONTEXT MENU COMPONENT TOKENS
 *  sb-context-menu-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  CONTEXT MENU CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-content-space-p: var(--sb-sem-space-overlay-p-xs);

  --sb-context-menu-content-space-min-w: var(--sb-sem-space-overlay-min-w);

  --sb-context-menu-content-color-text: var(--sb-sem-color-text);

  --sb-context-menu-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-context-menu-content-radius: var(--sb-sem-radius-overlay);
  --sb-context-menu-content-width-border: var(--sb-sem-width-border);
  --sb-context-menu-content-color-border: var(--sb-sem-color-border);

  --sb-context-menu-content-shadow: var(--sb-sem-shadow-overlay);
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU ITEM
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-context-menu-item-space-px: var(--sb-sem-space-action-px-xs);
  --sb-context-menu-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-context-menu-item-font-size: var(--sb-sem-font-content-body-size);
  --sb-context-menu-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-context-menu-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-context-menu-item-color-bg-hover: var(--sb-sem-color-bg-fill-secondary);
  --sb-context-menu-item-color-text-hover: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-context-menu-item-color-bg-focus: var(--sb-sem-color-bg-fill-secondary);
  --sb-context-menu-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-context-menu-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-context-menu-item-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-context-menu-item-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU CHECKBOX ITEM
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-checkbox-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-context-menu-checkbox-item-space-pl: var(--sb-sem-space-action-px-xl);
  --sb-context-menu-checkbox-item-space-pr: var(--sb-sem-space-action-px-xs);
  --sb-context-menu-checkbox-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-context-menu-checkbox-item-font-size: var(
    --sb-sem-font-content-body-size
  );
  --sb-context-menu-checkbox-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-context-menu-checkbox-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-context-menu-checkbox-item-color-bg-focus: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-context-menu-checkbox-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-context-menu-checkbox-item-opacity-disabled: var(
    --sb-sem-opacity-disabled
  );

  --sb-context-menu-checkbox-item-icon-container-space-size: var(
    --sb-sem-space-icon-size-sm
  );

  --sb-context-menu-checkbox-item-icon-space-size: var(
    --sb-sem-space-icon-size
  );
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU RADIO ITEM
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-radio-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-context-menu-radio-item-space-pl: var(--sb-sem-space-action-px-xl);
  --sb-context-menu-radio-item-space-pr: var(--sb-sem-space-action-px-xs);
  --sb-context-menu-radio-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-context-menu-radio-item-font-size: var(--sb-sem-font-content-body-size);
  --sb-context-menu-radio-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-context-menu-radio-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-context-menu-radio-item-color-bg-focus: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-context-menu-radio-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-context-menu-radio-item-opacity-disabled: var(
    --sb-sem-opacity-disabled
  );

  --sb-context-menu-radio-item-icon-container-space-size: var(
    --sb-sem-space-icon-size-sm
  );

  --sb-context-menu-radio-item-icon-space-size: var(
    --sb-sem-space-icon-size-3xs
  );
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU LABEL
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-label-space-px: var(--sb-sem-space-overlay-px);
  --sb-context-menu-label-space-py: var(--sb-sem-space-overlay-py);

  --sb-context-menu-label-font-size: var(--sb-sem-font-content-label-size);
  --sb-context-menu-label-font-line-height: var(
    --sb-sem-font-content-label-line-height
  );
  --sb-context-menu-label-font-weight: var(--sb-sem-font-content-label-weight);
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU SEPARATOR
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-separator-space-mx: var(--sb-sem-space-divider-mx);
  --sb-context-menu-separator-space-my: var(--sb-sem-space-divider-my);

  --sb-context-menu-separator-space-h: var(--sb-sem-width-border);

  --sb-context-menu-separator-color-bg: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  CONTEXT MENU SHORTCUT
 * --------------------------------------------------
 */

:root {
  --sb-context-menu-shortcut-font-size: var(
    --sb-sem-font-content-shortcut-size
  );
  --sb-context-menu-shortcut-font-line-height: var(
    --sb-sem-font-content-shortcut-line-height
  );
  --sb-context-menu-shortcut-font-letter-spacing: var(
    --sb-sem-font-content-shortcut-letter-spacing
  );
  --sb-context-menu-shortcut-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * ===========================================================================
 *  DATE PICKER COMPONENT TOKENS
 *  sb-date-picker-*
 * ===========================================================================
 */

:root {
  --sb-date-picker-trigger-button-space-w: var(--sb-sem-space-date-time-w);
  --sb-date-picker-trigger-button-font-weight: var(--sb-sem-font-date-time-weight);
  --sb-date-picker-trigger-button-color-text-empty: var(
    --sb-sem-color-text-secondary
  );

  --sb-date-picker-content-space-p: var(--sb-sem-space-date-time-p-sm);
}

/*
 * ===========================================================================
 *  DIALOG COMPONENT TOKENS
 *  sb-dialog-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  DIALOG CLOSE
 * --------------------------------------------------
 */

:root {
  --sb-dialog-close-radius: min(var(--sb-sem-radius-action-sm), var(--sb-sem-radius-action-sm-as-px));

  --sb-dialog-close-color-ring-offset: var(--sb-sem-color-ring-offset);

  --sb-dialog-close-width-ring-focus: var(--sb-sem-width-ring-sm-focus);
  --sb-dialog-close-color-ring-focus: var(--sb-sem-color-ring-focus);
  --sb-dialog-close-width-ring-offset: var(--sb-sem-width-ring-sm-focus);

  --sb-dialog-close-color-bg: var(--sb-sem-color-bg-fill-secondary);
  --sb-dialog-close-color-text: var(--sb-sem-color-text-secondary);

  --sb-dialog-close-color-text-hover: hsl(var(--sb-sem-color-text));
  --sb-dialog-close-color-bg-hover: hsl(var(--sb-sem-color-bg-fill-tertiary-hover));

  --sb-dialog-close-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * --------------------------------------------------
 *  DIALOG OVERLAY
 * --------------------------------------------------
 */

:root {
  --sb-dialog-overlay-color-bg: var(--sb-sem-color-bg-scrim);
}

/*
 * --------------------------------------------------
 *  DIALOG CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-dialog-content-space-gap: var(--sb-sem-space-overlay-gap);

  --sb-dialog-content-space-p: var(--sb-sem-space-overlay-p);

  --sb-dialog-content-space-w: var(--sb-sem-space-overlay-w);
  --sb-dialog-content-space-max-w-sm: var(--sb-sem-space-overlay-max-w-sm);
  --sb-dialog-content-space-max-w: var(--sb-sem-space-overlay-max-w);

  --sb-dialog-content-color-bg: var(--sb-sem-color-bg-surface);

  --sb-dialog-content-radius: var(--sb-sem-radius-overlay);
  --sb-dialog-content-width-border: var(--sb-sem-width-border);
  --sb-dialog-content-color-border: var(--sb-sem-color-border);

  --sb-dialog-content-shadow: var(--sb-sem-shadow-overlay-lg);
}

/*
 * --------------------------------------------------
 *  DIALOG HEADER
 * --------------------------------------------------
 */

:root {
  --sb-dialog-header-space-gap: var(--sb-sem-space-overlay-gap-sm);
}

/*
 * --------------------------------------------------
 *  DIALOG FOOTER
 * --------------------------------------------------
 */

:root {
  --sb-dialog-footer-space-gap: var(--sb-sem-space-overlay-gap-sm);
}

/*
 * --------------------------------------------------
 *  DIALOG TITLE
 * --------------------------------------------------
 */

:root {
  --sb-dialog-title-font-size: var(--sb-sem-font-content-heading-size);
  --sb-dialog-title-font-line-height: var(
    --sb-sem-font-content-heading-line-height
  );
  --sb-dialog-title-font-weight: var(--sb-sem-font-content-heading-weight);
}

/*
 * --------------------------------------------------
 *  DIALOG DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --sb-dialog-description-font-size: var(--sb-sem-font-content-body-size);
  --sb-dialog-description-font-line-height: var(
    var(--sb-sem-font-content-body-line-height)
  );
  --sb-dialog-description-font-weight: var(--sb-sem-font-content-body-weight);
  --sb-dialog-description-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * ===========================================================================
 *  DRAWER COMPONENT TOKENS
 *  sb-drawer-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  DRAWER OVERLAY
 * --------------------------------------------------
 */

:root {
  --sb-drawer-overlay-color-bg: var(--sb-sem-color-bg-scrim);
}

/*
 * --------------------------------------------------
 *  DRAWER CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-drawer-content-space-mt: var(--sb-sem-space-overlay-m);
  --sb-drawer-content-color-bg: var(--sb-sem-color-bg-surface);
  --sb-drawer-content-radius: var(--sb-sem-radius-overlay);
  --sb-drawer-content-width-border: var(--sb-sem-width-border);
  --sb-drawer-content-color-border: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  DRAWER THUMB
 * --------------------------------------------------
 */

:root {
  --sb-drawer-thumb-space-mt: var(--sb-sem-space-indicator-m);
  --sb-drawer-thumb-space-w: var(--sb-sem-space-indicator-w-alt);
  --sb-drawer-thumb-space-h: var(--sb-sem-space-indicator-h);
  --sb-drawer-thumb-color-bg: var(--sb-sem-color-bg-fill-secondary);
  --sb-drawer-thumb-radius: var(--sb-sem-radius-indicator);
}

/*
 * --------------------------------------------------
 *  DRAWER HEADER
 * --------------------------------------------------
 */

:root {
  --sb-drawer-header-space-gap: var(--sb-sem-space-overlay-gap-xs);
  --sb-drawer-header-space-gap-sm: var(--sb-sem-space-overlay-gap-2xs);
  --sb-drawer-header-space-p: var(--sb-sem-space-overlay-p-sm);
}

/*
 * --------------------------------------------------
 *  DRAWER FOOTER
 * --------------------------------------------------
 */

:root {
  --sb-drawer-footer-space-gap: var(--sb-sem-space-overlay-gap-sm);
  --sb-drawer-footer-space-p: var(--sb-sem-space-overlay-p-sm);
}

/*
 * --------------------------------------------------
 *  DRAWER TITLE
 * --------------------------------------------------
 */

:root {
  --sb-drawer-title-font-size: var(--sb-sem-font-content-heading-size-sm);
  --sb-drawer-title-font-line-height: var(
    --sb-sem-font-content-heading-line-height-sm
  );
  --sb-drawer-title-font-weight: var(--sb-sem-font-content-heading-weight);
  --sb-drawer-title-color-text: var(--sb-sem-color-text);
}

/*
 * --------------------------------------------------
 *  DRAWER DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --sb-drawer-description-font-size: var(--sb-sem-font-content-body-size);
  --sb-drawer-description-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );
  --sb-drawer-description-font-weight: var(--sb-sem-font-content-body-weight);
  --sb-drawer-description-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * ===========================================================================
 *  DROPDOWN MENU COMPONENT TOKENS
 *  sb-dropdown-menu-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  DROPDOWN MENU CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-content-space-p: var(--sb-sem-space-overlay-p-xs);

  --sb-dropdown-menu-content-space-min-w: var(--sb-sem-space-overlay-min-w);

  --sb-dropdown-menu-content-color-text: var(--sb-sem-color-text);

  --sb-dropdown-menu-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-dropdown-menu-content-radius: var(--sb-sem-radius-overlay);
  --sb-dropdown-menu-content-width-border: var(--sb-sem-width-border);
  --sb-dropdown-menu-content-color-border: var(--sb-sem-color-border);

  --sb-dropdown-menu-content-shadow: var(--sb-sem-shadow-overlay);
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU ITEM
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-dropdown-menu-item-space-px: var(--sb-sem-space-action-px-xs);
  --sb-dropdown-menu-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-dropdown-menu-item-font-size: var(--sb-sem-font-content-body-size);
  --sb-dropdown-menu-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-dropdown-menu-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-dropdown-menu-item-color-bg-hover: var(--sb-sem-color-bg-fill-secondary);
  --sb-dropdown-menu-item-color-text-hover: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-dropdown-menu-item-color-bg-focus: var(--sb-sem-color-bg-fill-secondary);
  --sb-dropdown-menu-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-dropdown-menu-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-dropdown-menu-item-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-dropdown-menu-item-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU CHECKBOX ITEM
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-checkbox-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-dropdown-menu-checkbox-item-space-pl: var(--sb-sem-space-action-px-xl);
  --sb-dropdown-menu-checkbox-item-space-pr: var(--sb-sem-space-action-px-xs);
  --sb-dropdown-menu-checkbox-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-dropdown-menu-checkbox-item-font-size: var(
    --sb-sem-font-content-body-size
  );
  --sb-dropdown-menu-checkbox-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-dropdown-menu-checkbox-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-dropdown-menu-checkbox-item-color-bg-focus: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-dropdown-menu-checkbox-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-dropdown-menu-checkbox-item-opacity-disabled: var(
    --sb-sem-opacity-disabled
  );

  --sb-dropdown-menu-checkbox-item-icon-container-space-size: var(
    --sb-sem-space-icon-size-sm
  );

  --sb-dropdown-menu-checkbox-item-icon-space-size: var(
    --sb-sem-space-icon-size
  );
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU RADIO ITEM
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-radio-item-space-gap: var(--sb-sem-space-action-gap-xl);

  --sb-dropdown-menu-radio-item-space-pl: var(--sb-sem-space-action-px-xl);
  --sb-dropdown-menu-radio-item-space-pr: var(--sb-sem-space-action-px-xs);
  --sb-dropdown-menu-radio-item-space-py: var(--sb-sem-space-action-py-sm);

  --sb-dropdown-menu-radio-item-font-size: var(--sb-sem-font-content-body-size);
  --sb-dropdown-menu-radio-item-font-line-height: var(
    --sb-sem-font-content-body-line-height
  );

  --sb-dropdown-menu-radio-item-radius: var(--sb-sem-radius-overlay-sm);

  --sb-dropdown-menu-radio-item-color-bg-focus: var(
    --sb-sem-color-bg-fill-secondary
  );
  --sb-dropdown-menu-radio-item-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );

  --sb-dropdown-menu-radio-item-opacity-disabled: var(
    --sb-sem-opacity-disabled
  );

  --sb-dropdown-menu-radio-item-icon-container-space-size: var(
    --sb-sem-space-icon-size-sm
  );

  --sb-dropdown-menu-radio-item-icon-space-size: var(
    --sb-sem-space-icon-size-3xs
  );
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU LABEL
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-label-space-px: var(--sb-sem-space-overlay-px);
  --sb-dropdown-menu-label-space-py: var(--sb-sem-space-overlay-py);

  --sb-dropdown-menu-label-font-size: var(--sb-sem-font-content-label-size);
  --sb-dropdown-menu-label-font-line-height: var(
    --sb-sem-font-content-label-line-height
  );
  --sb-dropdown-menu-label-font-weight: var(--sb-sem-font-content-label-weight);
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU SEPARATOR
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-separator-space-mx: var(--sb-sem-space-divider-mx);
  --sb-dropdown-menu-separator-space-my: var(--sb-sem-space-divider-my);

  --sb-dropdown-menu-separator-space-h: var(--sb-sem-width-border);

  --sb-dropdown-menu-separator-color-bg: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  DROPDOWN MENU SHORTCUT
 * --------------------------------------------------
 */

:root {
  --sb-dropdown-menu-shortcut-font-size: var(
    --sb-sem-font-content-shortcut-size
  );
  --sb-dropdown-menu-shortcut-font-line-height: var(
    --sb-sem-font-content-shortcut-line-height
  );
  --sb-dropdown-menu-shortcut-font-letter-spacing: var(
    --sb-sem-font-content-shortcut-letter-spacing
  );
  --sb-dropdown-menu-shortcut-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * ===========================================================================
 *  EMPTY COMPONENT TOKENS
 *  rtg-empty-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  EMPTY
 * --------------------------------------------------
 */

:root {
  --rtg-empty-space-gap: var(--sb-sem-space-feedback-gap-2xl);
  --rtg-empty-space-p: var(--sb-sem-space-feedback-p-lg);
  --rtg-empty-width-border: var(--sb-sem-width-border);
  --rtg-empty-color-border: hsl(var(--sb-sem-color-border));
  --rtg-empty-radius: var(--sb-sem-radius-feedback-lg);
}

/*
 * --------------------------------------------------
 *  EMPTY HEADER
 * --------------------------------------------------
 */

:root {
  --rtg-empty-header-space-gap: var(--sb-sem-space-feedback-gap-lg);
  --rtg-empty-header-space-max-w: var(--sb-sem-space-feedback-max-w);
}

/*
 * --------------------------------------------------
 *  EMPTY MEDIA
 * --------------------------------------------------
 */

:root {
  --rtg-empty-media-space-mb: var(--sb-sem-space-icon-mb-parent);

  --rtg-empty-media-default-color-bg: hsl(var(--sb-sem-color-bg-fill-transparent));

  --rtg-empty-media-icon-space-size: var(--sb-sem-space-icon-size-parent);
  --rtg-empty-media-icon-color-text: hsl(var(--sb-sem-color-text));
  --rtg-empty-media-icon-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));
  --rtg-empty-media-icon-radius: var(--sb-sem-radius-feedback);
  --rtg-empty-media-icon-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * --------------------------------------------------
 *  EMPTY TITLE
 * --------------------------------------------------
 */

:root {
  --rtg-empty-title-font-family: var(--sb-sem-font-family-heading);
  --rtg-empty-title-font-size: var(--sb-sem-font-content-heading-size-xs);
  --rtg-empty-title-font-line-height: var(--sb-sem-font-content-heading-line-height-xs);
  --rtg-empty-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);
  --rtg-empty-title-font-letter-spacing: var(--sb-sem-font-content-heading-letter-spacing);
}

/*
 * --------------------------------------------------
 *  EMPTY DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --rtg-empty-description-font-size: var(--sb-sem-font-content-body-size);
  --rtg-empty-description-font-line-height: var(--sb-sem-font-content-body-line-height-tall);
  --rtg-empty-description-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-empty-description-color-link-hover: hsl(var(--sb-sem-color-text-brand));
}

/*
 * --------------------------------------------------
 *  EMPTY CONTENT
 * --------------------------------------------------
 */

:root {
  --rtg-empty-content-space-gap: var(--sb-sem-space-feedback-gap-xl);
  --rtg-empty-content-space-max-w: var(--sb-sem-space-feedback-max-w);
  --rtg-empty-content-font-size: var(--sb-sem-font-content-body-size);
  --rtg-empty-content-font-line-height: var(--sb-sem-font-content-body-line-height);
}

/*
 * ===========================================================================
 *  FIELD COMPONENT TOKENS
 *  rtg-field-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  FIELD SET
 * --------------------------------------------------
 */

:root {
  --rtg-field-set-space-gap: var(--sb-sem-space-form-gap-lg);
  --rtg-field-set-space-gap-has-checkbox-group: var(--sb-sem-space-form-gap);
  --rtg-field-set-space-gap-has-radio-group: var(--sb-sem-space-form-gap);
}

/*
 * --------------------------------------------------
 *  FIELD LEGEND
 * --------------------------------------------------
 */

:root {
  --rtg-field-legend-space-mb: var(--sb-ref-space-1-5);
  --rtg-field-legend-font-weight: var(--sb-sem-font-form-heading-weight);

  /* * VARIANTS * */
  /* LABEL */
  --rtg-field-legend-label-font-size: var(--sb-sem-font-form-label-size);
  --rtg-field-legend-label-font-line-height: var(--sb-sem-font-form-label-line-height);

  /* LEGEND */
  --rtg-field-legend-legend-font-size: var(--sb-sem-font-form-heading-size);
  --rtg-field-legend-legend-font-line-height: var(--sb-sem-font-form-heading-line-height);
}

/*
 * --------------------------------------------------
 *  FIELD GROUP
 * --------------------------------------------------
 */

:root {
  --rtg-field-group-space-gap: var(--sb-sem-space-form-gap-xl);

  --rtg-field-group-space-gap-is-checkbox-group: var(--sb-sem-space-form-gap);
  --rtg-field-group-space-gap-is-nested: var(--sb-sem-space-form-gap-lg);
}

/*
 * --------------------------------------------------
 *  FIELD
 * --------------------------------------------------
 */

:root {
  --rtg-field-space-gap: var(--sb-sem-space-form-gap-sm);

  --rtg-field-color-text-invalid: hsl(var(--sb-sem-color-text-destructive));

  --rtg-field-space-p-in-label: var(--sb-ref-space-2-5);

  /* * CHECKBOX CHILD * */
  --rtg-field-checkbox-space-mt: 1px;

  /* * RADIO CHILD * */
  --rtg-field-radio-space-mt: 1px;
}

/*
 * --------------------------------------------------
 *  FIELD CONTENT
 * --------------------------------------------------
 */

:root {
  --rtg-field-content-space-gap: var(--sb-ref-space-0-5);
  --rtg-field-content-font-line-height: var(--sb-sem-font-form-content-line-height);
}

/*
 * --------------------------------------------------
 *  FIELD LABEL
 * --------------------------------------------------
 */

:root {
  --rtg-field-label-space-gap: var(--sb-sem-space-form-gap-sm);
  --rtg-field-label-font-line-height: var(--sb-sem-font-form-label-line-height-alt);

  --rtg-field-label-width-border-has-field: var(--sb-sem-width-border);
  --rtg-field-label-color-border-has-field: hsl(var(--sb-sem-color-border));
  --rtg-field-label-radius-has-field: var(--sb-sem-radius-form);

  --rtg-field-label-color-bg-has-checked: hsl(var(--sb-sem-color-bg-surface-brand));
  --rtg-field-label-color-border-has-checked: hsl(var(--sb-sem-color-border-brand-tertiary));

  --rtg-field-label-opacity-disabled: var(--sb-sem-opacity-disabled);
}

/*
 * --------------------------------------------------
 *  FIELD TITLE
 * --------------------------------------------------
 */

:root {
  --rtg-field-title-space-gap: var(--sb-sem-space-form-gap-sm);

  --rtg-field-title-font-size: var(--sb-sem-font-form-label-size);
  --rtg-field-title-font-line-height: var(--sb-sem-font-form-label-line-height-alt);
  --rtg-field-title-font-weight: var(--sb-sem-font-form-label-weight);

  --rtg-field-title-opacity-disabled: var(--sb-sem-opacity-disabled);
}

/*
 * --------------------------------------------------
 *  FIELD DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --rtg-field-description-font-size: var(--sb-sem-font-form-size);
  --rtg-field-description-font-line-height: var(--sb-sem-font-form-description-line-height);
  --rtg-field-description-font-weight: var(--sb-sem-font-form-weight);
  --rtg-field-description-color-text: hsl(var(--sb-sem-color-text-secondary));

  --rtg-field-description-space-mt-after-legend: var(--sb-ref-space-neg-1-5);
  --rtg-field-description-space-mt-is-last: var(--sb-ref-space-0);
  --rtg-field-description-space-mt-is-2-last: var(--sb-ref-space-neg-1);

  --rtg-field-description-link-color-text-hover: hsl(var(--sb-sem-color-text-brand));
}

/*
 * --------------------------------------------------
 *  FIELD SEPARATOR
 * --------------------------------------------------
 */

:root {
  --rtg-field-separator-space-my: var(--sb-ref-space-neg-2);
  --rtg-field-separator-space-h: var(--sb-sem-space-divider-h);
  --rtg-field-separator-font-size: var(--sb-sem-font-form-size);
  --rtg-field-separator-font-line-height: var(--sb-sem-font-form-line-height);

  /* * CONTENT * */
  --rtg-field-separator-content-space-px: var(--sb-sem-space-form-gap-sm);
  --rtg-field-separator-content-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-field-separator-content-color-bg: hsl(var(--sb-sem-color-bg));
}

/*
 * --------------------------------------------------
 *  FIELD ERROR
 * --------------------------------------------------
 */

:root {
  --rtg-field-error-font-size: var(--sb-sem-font-form-size);
  --rtg-field-error-font-line-height: var(--sb-sem-font-form-line-height);
  --rtg-field-error-font-weight: var(--sb-sem-font-form-weight);
  --rtg-field-error-color-text: hsl(var(--sb-sem-color-text-destructive));

  --rtg-field-error-content-space-gap: var(--sb-ref-space-1);
  --rtg-field-error-content-space-ml: var(--sb-ref-space-4);
  --sb-form-space-y: var(--sb-ref-space-4);

  /* description */
  --sb-form-description-font-size: var(--sb-sem-font-form-size);
  --sb-form-description-color-text: var(--sb-sem-color-text-secondary);
  --sb-form-description-space-mt: var(--sb-ref-space-1);

  /* field */
  --sb-form-field-space-y: var(--sb-ref-space-2);

  /* item */
  --sb-form-item-space-y: var(--sb-ref-space-1);

  /* label */
  --sb-form-label-font-size: var(--sb-sem-font-form-label-size);
  --sb-form-label-font-weight: var(--sb-sem-font-form-label-weight);
  --sb-form-label-space-mb: var(--sb-ref-space-1);
  --sb-form-label-opacity-peer-disabled: var(--sb-sem-opacity-disabled);
  --sb-form-label-color-text-error: var(--sb-sem-color-text-destructive);

  /* message */
  --sb-form-message-font-size: var(--sb-sem-font-form-label-size);
  --sb-form-message-color-text: var(--sb-sem-color-text-destructive);
}

/*
 * ===========================================================================
 *  HOVER CARD COMPONENT TOKENS
 *  sb-hover-card-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  HOVER CARD CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-hover-card-content-space-p: var(--sb-sem-space-overlay-p-sm);

  --sb-hover-card-content-space-w: var(--sb-sem-space-overlay-w-xs);

  --sb-hover-card-content-color-text: var(--sb-sem-color-text);

  --sb-hover-card-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-hover-card-content-radius: var(--sb-sem-radius-overlay);
  --sb-hover-card-content-width-border: var(--sb-sem-width-border);
  --sb-hover-card-content-color-border: var(--sb-sem-color-border);

  --sb-hover-card-content-shadow: var(--sb-sem-shadow-overlay);
}

/*
 * ===========================================================================
 *  INPUT GROUP COMPONENT TOKENS
 *  rtg-input-group-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  INPUT GROUP
 * --------------------------------------------------
 */

:root {
  --rtg-input-group-space-h: var(--sb-sem-space-form-size-sm);
  --rtg-input-group-color-bg: hsl(var(--sb-sem-color-bg-fill-quaternary));
  --rtg-input-group-width-border: var(--sb-sem-width-border);
  --rtg-input-group-color-border: hsl(var(--sb-sem-color-border-secondary));
  --rtg-input-group-radius: var(--sb-sem-radius-form);
  --rtg-input-group-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-input-group-motion-duration: var(--sb-sem-motion-duration-default);

  --rtg-input-group-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-input-group-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-input-group-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  --rtg-input-group-color-border-invalid: hsl(var(--sb-sem-color-border-invalid-secondary));
  --rtg-input-group-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-input-group-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));

  --rtg-input-group-color-bg-disabled: hsl(var(--sb-sem-color-bg-fill-disabled));
  --rtg-input-group-opacity-disabled: var(--sb-sem-opacity-disabled);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP ADDON
 * --------------------------------------------------
 */

:root {
  --rtg-input-group-addon-space-gap: var(--sb-sem-space-form-gap-sm);
  --rtg-input-group-addon-space-py: var(--sb-sem-space-form-p-xs);
  --rtg-input-group-addon-font-size: var(--sb-sem-font-form-size);
  --rtg-input-group-addon-font-line-height: var(--sb-sem-font-form-line-height);
  --rtg-input-group-addon-font-weight: var(--sb-sem-font-form-heading-weight);
  --rtg-input-group-addon-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-input-group-addon-opacity-disabled: var(--sb-sem-opacity-disabled);

  --rtg-input-group-addon-width-border: var(--sb-sem-width-border);
  --rtg-input-group-addon-color-border: hsl(var(--sb-sem-color-border));

  --rtg-input-group-addon-icon-space-size: var(--sb-sem-space-icon-size);
  --rtg-input-group-addon-kbd-radius: var(--sb-ref-radius-xs-sm);

  --rtg-input-group-addon-inline-space-px: var(--sb-sem-space-form-p-sm);
  --rtg-input-group-addon-inline-space-mx-has-button: -0.3rem;
  --rtg-input-group-addon-inline-space-mx-has-kbd: -0.15rem;

  --rtg-input-group-addon-block-space-px: var(--sb-sem-space-form-px);
  --rtg-input-group-addon-block-space-py: var(--sb-sem-space-form-p-sm);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP BUTTON
 * --------------------------------------------------
 */

:root {
  --rtg-input-group-button-space-gap-sm: var(--sb-sem-space-action-gap-xl);
  --rtg-input-group-button-space-px-xs: var(--sb-sem-space-action-gap-lg);
  --rtg-input-group-button-space-size-sm: var(--sb-sem-space-action-size);
  --rtg-input-group-button-font-size: var(--sb-sem-font-action-size);
  --rtg-input-group-button-font-line-height: var(--sb-sem-font-action-line-height);
  --rtg-input-group-button-radius-xs: var(--sb-ref-radius-sm-md);
  --rtg-input-group-button-icon-space-size-xs: var(--sb-sem-space-icon-size-sm);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP TEXT
 * --------------------------------------------------
 */

:root {
  --rtg-input-group-text-space-gap: var(--sb-sem-space-form-gap-sm);
  --rtg-input-group-text-font-size: var(--sb-sem-font-form-size);
  --rtg-input-group-text-font-line-height: var(--sb-sem-font-form-line-height);
  --rtg-input-group-text-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-input-group-text-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP INPUT
 * --------------------------------------------------
 */

:root {
  --rtg-input-group-input-space-px: var(--sb-sem-space-form-p-xs);
  --rtg-input-group-input-space-py: var(--sb-sem-space-form-p);
}

/*
 * ===========================================================================
 *  INPUT OTP COMPONENT TOKENS
 *  rtg-input-otp-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  INPUT OTP
 * --------------------------------------------------
 */

:root {
  --rtg-input-otp-space-gap: var(--sb-sem-space-form-gap-sm);

  /* Used by group and slot */
  --rtg-input-otp-radius: var(--sb-sem-radius-form);

  /* DISABLED */
  --rtg-input-otp-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* INVALID */
  /* Used by group and slot */
  --rtg-input-otp-color-border-invalid: hsl(var(--sb-sem-color-border-invalid));
  --rtg-input-otp-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-input-otp-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));
}

/*
 * --------------------------------------------------
 *  INPUT OTP SLOT
 * --------------------------------------------------
 */

:root {
  --rtg-input-otp-slot-space-w: var(--sb-sem-space-form-size-sm);
  --rtg-input-otp-slot-space-h: var(--sb-sem-space-form-size-sm);

  --rtg-input-otp-slot-font-size: var(--sb-sem-font-form-size);
  --rtg-input-otp-slot-font-line-height: var(--sb-sem-font-form-line-height);

  --rtg-input-otp-slot-color-bg: hsl(var(--sb-sem-color-bg-fill-quaternary));

  --rtg-input-otp-slot-width-border: var(--sb-sem-width-border);
  --rtg-input-otp-slot-color-border: hsl(var(--sb-sem-color-border-secondary));

  --rtg-input-otp-slot-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-input-otp-slot-motion-duration: var(--sb-sem-motion-duration-default);

  /* ACTIVE */
  --rtg-input-otp-slot-color-border-active: hsl(var(--sb-sem-color-border-focus));
  --rtg-input-otp-slot-width-ring-active: var(--sb-sem-width-ring-focus);
  --rtg-input-otp-slot-color-ring-active: hsl(var(--sb-sem-color-ring-focus));
}

/*
 * --------------------------------------------------
 *  INPUT OTP SEPARATOR
 * --------------------------------------------------
 */

:root {
  --rtg-input-otp-separator-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * ===========================================================================
 *  INPUT COMPONENT TOKENS
 *  rtg-input-*
 * ===========================================================================
 */

:root {
  --rtg-input-space-py: var(--sb-sem-space-form-py);
  --rtg-input-space-px: var(--sb-sem-space-form-px);

  --rtg-input-space-h: var(--sb-sem-space-form-size-sm);

  --rtg-input-font-size: var(--sb-sem-font-form-size);
  --rtg-input-font-size-vw-sm: var(--sb-sem-font-form-size-vw-sm);
  --rtg-input-font-line-height: var(--sb-sem-font-form-line-height);
  --rtg-input-font-line-height-vw-sm: var(--sb-sem-font-form-line-height-vw-sm);

  --rtg-input-color-bg: hsl(var(--sb-sem-color-bg-fill-quaternary));

  --rtg-input-width-border: var(--sb-sem-width-border);
  --rtg-input-color-border: hsl(var(--sb-sem-color-border-secondary));
  --rtg-input-radius: var(--sb-sem-radius-form);

  --rtg-input-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-input-motion-duration: var(--sb-sem-motion-duration-default);

  /* FOCUS VISIBLE */
  --rtg-input-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-input-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-input-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  /* INVALID */
  --rtg-input-color-border-invalid: hsl(var(--sb-sem-color-border-invalid-secondary));
  --rtg-input-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-input-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));

  /* DISABLED */
  --rtg-input-color-bg-disabled: hsl(var(--sb-sem-color-bg-fill-disabled));
  --rtg-input-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* * PLACEHOLDER * */
  --rtg-input-placeholder-color-text: hsl(var(--sb-sem-color-text-secondary));

  /* * FILE SELECTOR BUTTON * */
  --rtg-input-file-button-space-h: var(--sb-sem-space-action-size-xs);

  --rtg-input-file-button-font-size: var(--sb-sem-font-action-size);
  --rtg-input-file-button-font-line-height: var(--sb-sem-font-action-line-height);
  --rtg-input-file-button-font-weight: var(--sb-sem-font-action-weight);
  --rtg-input-file-button-color-text: hsl(var(--sb-sem-color-text));

  --rtg-input-file-button-color-bg: hsl(var(--sb-sem-color-bg-fill-transparent));

  --rtg-input-file-button-width-border: 0px;
}

/*
 * ===========================================================================
 *  ITEM COMPONENT TOKENS
 *  rtg-item-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ITEM GROUP
 * --------------------------------------------------
 */

:root {
  --rtg-item-group-space-gap-default: var(--sb-sem-space-layout-gap);
  --rtg-item-group-space-gap-sm: var(--sb-sem-space-layout-gap-xs);
  --rtg-item-group-space-gap-xs: var(--sb-sem-space-layout-gap-2xs);
}

/*
 * --------------------------------------------------
 *  ITEM SEPARATOR
 * --------------------------------------------------
 */

:root {
  --rtg-item-separator-space-my: var(--sb-sem-space-divider-my);
}

/*
 * --------------------------------------------------
 *  ITEM
 * --------------------------------------------------
 */

:root {
  --rtg-item-font-size: var(--sb-sem-font-content-body-size);
  --rtg-item-font-line-height: var(--sb-sem-font-content-body-line-height);
  --rtg-item-width-border: var(--sb-sem-width-border);
  --rtg-item-radius: var(--sb-sem-radius-layout-sm);
  --rtg-item-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-item-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-item-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));
  --rtg-item-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-item-motion-duration: var(--sb-sem-motion-duration-fast);

  /* * LINK * */
  --rtg-item-color-bg-hover: hsl(var(--sb-sem-color-bg-surface-tertiary));

  /* * VARIANTS * */
  --rtg-item-muted-color-bg: hsl(var(--sb-sem-color-bg-surface-quaternary));

  --rtg-item-default-color-border: hsl(var(--sb-sem-color-border-transparent));
  --rtg-item-outline-color-border: hsl(var(--sb-sem-color-border));
  --rtg-item-muted-color-border: hsl(var(--sb-sem-color-border-transparent));

  /* * SIZES * */
  --rtg-item-space-gap-default: var(--sb-sem-space-layout-gap-xs);
  --rtg-item-space-gap-sm: var(--sb-sem-space-layout-gap-xs);
  --rtg-item-space-gap-xs: var(--sb-sem-space-layout-gap-2xs);

  --rtg-item-space-px-default: var(--sb-sem-space-layout-p-sm);
  --rtg-item-space-px-sm: var(--sb-sem-space-layout-p-sm);
  --rtg-item-space-px-xs: var(--sb-sem-space-layout-p-xs);

  --rtg-item-space-py-default: var(--sb-sem-space-layout-p-xs);
  --rtg-item-space-py-sm: var(--sb-sem-space-layout-p-xs);
  --rtg-item-space-py-xs: var(--sb-sem-space-layout-p-2xs);

  --rtg-item-space-p-xs-in-dropdown-menu: var(--sb-ref-space-0);
}

/*
 * --------------------------------------------------
 *  ITEM MEDIA
 * --------------------------------------------------
 */

:root {
  --rtg-item-media-space-gap: var(--sb-sem-space-layout-gap-2xs);
  --rtg-item-media-space-translate-y-with-description: var(--sb-sem-space-icon-translate-y);

  --rtg-item-media-default-color-bg: hsl(var(--sb-sem-color-bg-fill-transparent));
  --rtg-item-media-icon-icon-space-size: var(--sb-sem-space-icon-size);
  --rtg-item-media-image-space-size-default: var(--sb-sem-space-icon-size-parent-lg);
  --rtg-item-media-image-space-size-sm: var(--sb-sem-space-icon-size-parent);
  --rtg-item-media-image-space-size-xs: var(--sb-sem-space-icon-size-parent-sm);
  --rtg-item-media-image-radius: var(--sb-sem-radius-layout-xs);
}

/*
 * --------------------------------------------------
 *  ITEM CONTENT
 * --------------------------------------------------
 */

:root {
  --rtg-item-content-space-gap: var(--sb-sem-space-layout-gap-child);
  --rtg-item-content-space-gap-xs: var(--sb-ref-space-0);
}

/*
 * --------------------------------------------------
 *  ITEM TITLE
 * --------------------------------------------------
 */

:root {
  --rtg-item-title-space-gap: var(--sb-sem-space-layout-gap-2xs);
  --rtg-item-title-font-family: var(--sb-sem-font-family-heading);
  --rtg-item-title-font-size: var(--sb-sem-font-content-heading-size-xs);
  --rtg-item-title-font-line-height: var(--sb-sem-font-content-heading-line-height-short);
  --rtg-item-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);
}

/*
 * --------------------------------------------------
 *  ITEM DESCRIPTION
 * --------------------------------------------------
 */

:root {
  --rtg-item-description-font-size: var(--sb-sem-font-content-body-size);
  --rtg-item-description-font-line-height: var(--sb-ref-font-line-height-normal);
  --rtg-item-description-font-weight: var(--sb-sem-font-content-body-weight);
  --rtg-item-description-color-text: hsl(var(--sb-sem-color-text-secondary));

  --rtg-item-description-font-size-xs: var(--sb-sem-font-content-body-size-sm);
  --rtg-item-description-font-line-height-xs: var(--sb-sem-font-content-body-line-height-sm);

  --rtg-item-description-link-color-text-hover: hsl(var(--sb-sem-color-text-brand));
}

/*
 * --------------------------------------------------
 *  ITEM ACTIONS
 * --------------------------------------------------
 */

:root {
  --rtg-item-actions-space-gap: var(--sb-sem-space-layout-gap-2xs);
}

/*
 * --------------------------------------------------
 *  ITEM HEADER
 * --------------------------------------------------
 */

:root {
  --rtg-item-header-space-gap: var(--sb-sem-space-layout-gap-2xs);
}

/*
 * --------------------------------------------------
 *  ITEM FOOTER
 * --------------------------------------------------
 */

:root {
  --rtg-item-footer-space-gap: var(--sb-sem-space-layout-gap-2xs);
}

/*
 * ===========================================================================
 *  KBD COMPONENT TOKENS
 *  rtg-kbd-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  KBD
 * --------------------------------------------------
 */

:root {
  --rtg-kbd-space-gap: var(--sb-sem-space-indicator-gap);
  --rtg-kbd-space-px: var(--sb-sem-space-indicator-px-sm);
  --rtg-kbd-space-size: var(--sb-sem-space-indicator-size-xl);
  --rtg-kbd-font-family: var(--sb-sem-font-family-default);
  --rtg-kbd-font-size: var(--sb-sem-font-indicator-size);
  --rtg-kbd-font-line-height: var(--sb-sem-font-indicator-line-height);
  --rtg-kbd-font-weight: var(--sb-sem-font-indicator-weight);
  --rtg-kbd-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-kbd-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));
  --rtg-kbd-radius: var(--sb-ref-radius-sm);

  --rtg-kbd-icon-space-size: var(--sb-sem-space-icon-size-xs);
}

/*
 * --------------------------------------------------
 *  KBD GROUP
 * --------------------------------------------------
 */

:root {
  --rtg-kbd-group-space-gap: var(--sb-sem-space-indicator-gap);
}

/*
 * ===========================================================================
 *  LABEL COMPONENT TOKENS
 *  rtg-label-*
 * ===========================================================================
 */

:root {
  --rtg-label-space-gap: var(--sb-sem-space-form-gap-sm);

  --rtg-label-font-size: var(--sb-sem-font-form-label-size);
  --rtg-label-font-line-height: var(--sb-sem-font-form-label-line-height);
  --rtg-label-font-weight: var(--sb-sem-font-form-label-weight);

  --rtg-label-opacity-disabled: var(--sb-sem-opacity-disabled);
}

/*
 * ===========================================================================
 *  MENUBAR COMPONENT TOKENS
 *  sb-menubar-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  MENUBAR
 * --------------------------------------------------
 */

:root {
  --sb-menubar-space-gap: var(--sb-sem-space-navigation-gap-xs);

  --sb-menubar-space-p: var(--sb-sem-space-navigation-p-xs);

  --sb-menubar-space-h: var(--sb-sem-space-navigation-size);

  --sb-menubar-color-bg: var(--sb-sem-color-bg-surface);

  --sb-menubar-radius: var(--sb-sem-radius-navigation-lg);
  --sb-menubar-width-border: var(--sb-sem-width-border);
  --sb-menubar-color-border: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  MENUBAR TRIGGER
 * --------------------------------------------------
 */

:root {
  --sb-menubar-trigger-space-px: var(--sb-sem-space-navigation-p);
  --sb-menubar-trigger-space-py: var(--sb-sem-space-navigation-p-xs);

  --sb-menubar-trigger-font-size: var(--sb-sem-font-navigation-size);
  --sb-menubar-trigger-font-line-height: var(
    --sb-sem-font-navigation-line-height
  );
  --sb-menubar-trigger-font-weight: var(
    --sb-sem-font-navigation-heading-weight
  );

  --sb-menubar-trigger-radius: var(--sb-sem-radius-navigation-sm);

  --sb-menubar-trigger-color-text-active: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-menubar-trigger-color-bg-active: var(--sb-sem-color-bg-fill-secondary);

  --sb-menubar-trigger-color-text-focus: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-menubar-trigger-color-bg-focus: var(--sb-sem-color-bg-fill-secondary);
}

/*
 * --------------------------------------------------
 *  MENUBAR CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-menubar-content-space-p: var(--sb-sem-space-navigation-p-xs);

  --sb-menubar-content-space-min-w: var(--sb-sem-space-navigation-min-w);

  --sb-menubar-content-color-text: var(--sb-sem-color-text);

  --sb-menubar-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-menubar-content-radius: var(--sb-sem-radius-navigation-lg);
  --sb-menubar-content-width-border: var(--sb-sem-width-border);
  --sb-menubar-content-color-border: var(--sb-sem-color-border);

  --sb-menubar-content-shadow: var(--sb-sem-shadow-navigation);
}

/*
 * --------------------------------------------------
 *  MENUBAR ITEM
 * --------------------------------------------------
 */

:root {
  --sb-menubar-item-space-gap: var(--sb-sem-space-navigation-gap);

  --sb-menubar-item-space-px: var(--sb-sem-space-navigation-p);
  --sb-menubar-item-space-py: var(--sb-sem-space-navigation-p-sm);

  --sb-menubar-item-font-size: var(--sb-sem-font-navigation-size);
  --sb-menubar-item-font-line-height: var(--sb-sem-font-navigation-line-height);

  --sb-menubar-item-radius: var(--sb-sem-radius-navigation);

  --sb-menubar-item-color-text-active: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-menubar-item-color-bg-active: var(--sb-sem-color-bg-fill-secondary);

  --sb-menubar-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-menubar-item-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-menubar-item-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  MENUBAR CHECKBOX ITEM
 * --------------------------------------------------
 */

:root {
  --sb-menubar-checkbox-item-space-gap: var(--sb-sem-space-navigation-gap);

  --sb-menubar-checkbox-item-space-pl: var(--sb-sem-space-navigation-pl);
  --sb-menubar-checkbox-item-space-pr: var(--sb-sem-space-navigation-p);
  --sb-menubar-checkbox-item-space-py: var(--sb-sem-space-navigation-p-sm);

  --sb-menubar-checkbox-item-font-size: var(--sb-sem-font-navigation-size);
  --sb-menubar-checkbox-item-font-line-height: var(
    --sb-sem-font-navigation-line-height
  );

  --sb-menubar-checkbox-item-radius: var(--sb-sem-radius-navigation);

  --sb-menubar-checkbox-item-color-text-active: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-menubar-checkbox-item-color-bg-active: var(
    --sb-sem-color-bg-fill-secondary
  );

  --sb-menubar-checkbox-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-menubar-checkbox-item-indicator-space-size: var(
    --sb-sem-space-indicator-size
  );

  --sb-menubar-checkbox-item-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * --------------------------------------------------
 *  MENUBAR RADIO ITEM
 * --------------------------------------------------
 */

:root {
  --sb-menubar-radio-item-space-gap: var(--sb-sem-space-navigation-gap);

  --sb-menubar-radio-item-space-pl: var(--sb-sem-space-navigation-pl);
  --sb-menubar-radio-item-space-pr: var(--sb-sem-space-navigation-p);
  --sb-menubar-radio-item-space-py: var(--sb-sem-space-navigation-p-sm);

  --sb-menubar-radio-item-font-size: var(--sb-sem-font-navigation-size);
  --sb-menubar-radio-item-font-line-height: var(
    --sb-sem-font-navigation-line-height
  );

  --sb-menubar-radio-item-radius: var(--sb-sem-radius-navigation);

  --sb-menubar-radio-item-color-text-active: var(
    --sb-sem-color-text-secondary-on-fill
  );
  --sb-menubar-radio-item-color-bg-active: var(
    --sb-sem-color-bg-fill-secondary
  );

  --sb-menubar-radio-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-menubar-radio-item-indicator-space-size: var(
    --sb-sem-space-indicator-size
  );

  --sb-menubar-radio-item-icon-space-size: var(--sb-sem-space-icon-size-3xs);
}

/*
 * --------------------------------------------------
 *  MENUBAR LABEL
 * --------------------------------------------------
 */

:root {
  --sb-menubar-label-space-px: var(--sb-sem-space-navigation-p);
  --sb-menubar-label-space-py: var(--sb-sem-space-navigation-p-sm);

  --sb-menubar-label-font-size: var(--sb-sem-font-navigation-size);
  --sb-menubar-label-font-line-height: var(
    --sb-sem-font-navigation-line-height
  );
  --sb-menubar-label-font-weight: var(--sb-sem-font-navigation-label-weight);
}

/*
 * --------------------------------------------------
 *  MENUBAR SEPARATOR
 * --------------------------------------------------
 */

:root {
  --sb-menubar-separator-space-mx: var(--sb-sem-space-divider-mx);
  --sb-menubar-separator-space-my: var(--sb-sem-space-divider-my);

  --sb-menubar-separator-space-h: var(--sb-sem-width-border);

  --sb-menubar-separator-color-bg: var(--sb-sem-color-border);
}

/*
 * --------------------------------------------------
 *  MENUBAR SHORTCUT
 * --------------------------------------------------
 */

:root {
  --sb-menubar-shortcut-font-size: var(--sb-sem-font-content-shortcut-size);
  --sb-menubar-shortcut-font-line-height: var(
    --sb-sem-font-content-shortcut-line-height
  );
  --sb-menubar-shortcut-font-letter-spacing: var(
    --sb-sem-font-content-shortcut-letter-spacing
  );
  --sb-menubar-shortcut-color-text: var(--sb-sem-color-text-secondary);
  /* content */
  --sb-navigation-menu-content-space-top: var(--sb-ref-space-full);

  /* menu */
  --sb-navigation-menu-space-max-w: var(--sb-ref-space-max);

  /* menu list */
  --sb-navigation-menu-list-space-x: var(--sb-ref-space-1);

  /* menu item */
  --sb-navigation-menu-item-radius: var(--sb-sem-radius-navigation);
  --sb-navigation-menu-item-color-bg: var(--sb-sem-color-bg-surface);
  --sb-navigation-menu-list-space-px: var(--sb-ref-space-6);
  --sb-navigation-menu-list-space-py: var(--sb-ref-space-2);
  --sb-navigation-menu-item-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );

  /* menu item icon */
  --sb-navigation-menu-item-icon-space-ml: var(--sb-ref-space-1);
  --sb-navigation-menu-item-icon-space-w: var(--sb-ref-space-3);
  --sb-navigation-menu-item-icon-space-h: var(--sb-ref-space-3);
  --sb-navigation-menu-item-icon-motion-duration: var(--sb-ref-motion-duration-300);

  /* link */
  --sb-navigation-menu-link-space-h: var(--sb-ref-space-full);
  --sb-navigation-menu-link-space-w: var(--sb-ref-space-full);
  --sb-navigation-menu-link-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-navigation-menu-link-color-bg: var(--sb-sem-color-bg-surface);
  --sb-navigation-menu-link-radius: var(--sb-sem-radius-navigation-sm);
  --sb-navigation-menu-link-space-py: var(--sb-ref-space-2);
  --sb-navigation-menu-link-space-px: var(--sb-ref-space-6);

  /* content container */
  --sb-navigation-menu-content-container-space-w: var(--sb-ref-space-full);
  --sb-navigation-menu-content-container-space-mt: var(--sb-ref-space-1-5);
  --sb-navigation-menu-content-container-radius: var(--sb-sem-radius-navigation);
  --sb-navigation-menu-content-container-shadow: var(--sb-sem-shadow-navigation-lg);

  --sb-navigation-menu-content-container-color-bg: var(
    --sb-sem-color-bg-surface
  );

  --sb-navigation-menu-content-container-color-border: var(
    --sb-sem-color-border
  );

  --sb-navigation-menu-content-container-width-border: var(
    --sb-sem-width-border
  );
}

/*
 * ===========================================================================
 *  PAGINATION COMPONENT TOKENS
 *  sb-pagination-*
 * ===========================================================================
 */

:root {
  --sb-pagination-content-space-gap: var(--sb-sem-space-navigation-gap-xs);

  --sb-pagination-previous-space-gap: var(--sb-sem-space-navigation-gap-xs);
  --sb-pagination-previous-space-px: var(--sb-sem-space-navigation-px);

  --sb-pagination-next-space-gap: var(--sb-sem-space-navigation-gap-xs);
  --sb-pagination-next-space-px: var(--sb-sem-space-navigation-px);

  --sb-pagination-ellipsis-space-size: var(--sb-sem-space-navigation-size);
  --sb-pagination-ellipsis-icon-space-size: var(--sb-sem-space-icon-size);
}

/*
 * ===========================================================================
 *  POPOVER COMPONENT TOKENS
 *  sb-popover-*
 * ===========================================================================
 */

:root {
  --sb-popover-content-space-p: var(--sb-sem-space-overlay-p-sm);

  --sb-popover-content-space-w: var(--sb-sem-space-overlay-w-sm);

  --sb-popover-content-color-text: var(--sb-sem-color-text);

  --sb-popover-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-popover-content-radius: var(--sb-sem-radius-overlay);
  --sb-popover-content-width-border: var(--sb-sem-width-border);
  --sb-popover-content-color-border: var(--sb-sem-color-border);

  --sb-popover-content-shadow: var(--sb-sem-shadow-overlay);
}

/*
 * ===========================================================================
 *  PROGRESS COMPONENT TOKENS
 *  sb-progress-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ROOT
 * --------------------------------------------------
 */

:root {
  --sb-progress-space-w: var(--sb-sem-space-feedback-w);
  --sb-progress-space-h: var(--sb-sem-space-feedback-h);

  --sb-progress-color-bg: var(--sb-sem-color-bg-fill-secondary);

  --sb-progress-radius: var(--sb-sem-radius-indicator);
}

/*
 * --------------------------------------------------
 *  INDICATOR
 * --------------------------------------------------
 */

:root {
  --sb-progress-indicator-space-w: var(--sb-sem-space-feedback-w-child);
  --sb-progress-indicator-space-h: var(--sb-sem-space-feedback-h-child);

  --sb-progress-indicator-color-bg: var(--sb-sem-color-bg-fill-brand);
}

/*
 * ===========================================================================
 *  RADIO GROUP COMPONENT TOKENS
 *  sb-radio-group-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  RADIO GROUP
 * --------------------------------------------------
 */

:root {
  --sb-radio-group-space-gap: var(--sb-sem-space-form-gap);
}

/*
 * --------------------------------------------------
 *  RADIO GROUP ITEM
 * --------------------------------------------------
 */

:root {
  --sb-radio-group-item-space-size: var(--sb-sem-space-form-size-xs);

  --sb-radio-group-item-color-bg: var(--sb-sem-color-bg-fill-tertiary);

  --sb-radio-group-item-radius: var(--sb-sem-radius-indicator);
  --sb-radio-group-item-width-border: var(--sb-sem-width-border);
  --sb-radio-group-item-color-border: var(--sb-sem-color-border-secondary);

  --sb-radio-group-item-color-border-focus: var(--sb-sem-color-border-focus);
  --sb-radio-group-item-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-radio-group-item-color-ring-focus: var(--sb-sem-color-ring-focus);

  --sb-radio-group-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-radio-group-item-color-border-invalid: var(
    --sb-sem-color-border-invalid
  );
  --sb-radio-group-item-width-ring-invalid: var(--sb-sem-width-ring);
  --sb-radio-group-item-color-ring-invalid: var(--sb-sem-color-ring-destructive);
}

/*
 * --------------------------------------------------
 *  RADIO GROUP INDICATOR
 * --------------------------------------------------
 */

:root {
  --sb-radio-group-indicator-space-size: var(--sb-sem-space-indicator-size-2xs);
  --sb-radio-group-indicator-color-fill: var(--sb-sem-color-bg-fill-brand);
}

/*
 * ===========================================================================
 *  SCROLL AREA COMPONENT TOKENS
 *  sb-scrollarea-*
 * ===========================================================================
 */

:root {
  --sb-scrollarea-color-bg: var(--sb-sem-color-bg-surface-secondary);
  --sb-scrollarea-color-border: var(--sb-sem-color-border);
}

/*
 * ===========================================================================
 *  SELECT COMPONENT TOKENS
 *  sb-select-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  SELECT VALUE
 * --------------------------------------------------
 */

:root {
  --sb-select-value-space-gap: var(--sb-sem-space-form-gap-sm);
}

/*
 * --------------------------------------------------
 *  SELECT TRIGGER
 * --------------------------------------------------
 */

:root {
  --sb-select-trigger-space-gap: var(--sb-sem-space-form-gap-sm);

  --sb-select-trigger-space-px: var(--sb-sem-space-form-p);
  --sb-select-trigger-space-py: var(--sb-sem-space-form-p-sm);

  --sb-select-trigger-space-h: var(--sb-sem-space-form-size-sm);

  --sb-select-trigger-font-size: var(--sb-sem-font-form-size);
  --sb-select-trigger-font-line-height: var(--sb-sem-font-form-line-height);

  --sb-select-trigger-color-bg: var(--sb-sem-color-bg-fill-quaternary);

  --sb-select-trigger-radius: var(--sb-sem-radius-form);
  --sb-select-trigger-width-border: var(--sb-sem-width-border);
  --sb-select-trigger-color-border: var(--sb-sem-color-border-secondary);

  --sb-select-trigger-color-bg-hover: var(--sb-sem-color-bg-fill-quaternary-hover);

  --sb-select-trigger-color-border-focus: var(--sb-sem-color-border-focus);
  --sb-select-trigger-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-select-trigger-color-ring-focus: var(--sb-sem-color-ring-focus);

  --sb-select-trigger-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-select-trigger-color-border-invalid: var(--sb-sem-color-border-invalid);
  --sb-select-trigger-width-ring-invalid: var(--sb-sem-width-ring);
  --sb-select-trigger-color-ring-invalid: var(--sb-sem-color-ring-destructive);

  --sb-select-trigger-placeholder-color-text: var(
    --sb-sem-color-text-secondary
  );

  /* * ICON * */
  --sb-select-trigger-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-select-trigger-icon-color-text: var(--sb-sem-color-text-secondary);
  --sb-select-trigger-icon-opacity: var(--sb-sem-opacity-icon-form);
}

/*
 * --------------------------------------------------
 *  SELECT CONTENT
 * --------------------------------------------------
 */

:root {
  --sb-select-content-color-text: var(--sb-sem-color-text);

  --sb-select-content-color-bg: var(--sb-sem-color-bg-surface-secondary);

  --sb-select-content-radius: var(--sb-sem-radius-form);
  --sb-select-content-width-border: var(--sb-sem-width-border);
  --sb-select-content-color-border: var(--sb-sem-color-border);

  --sb-select-content-shadow: var(--sb-sem-shadow-form);

  /* * VIEWPORT * */
  --sb-select-content-viewport-space-p: var(--sb-sem-space-form-p-2xs);
}

/*
 * --------------------------------------------------
 *  SELECT LABEL
 * --------------------------------------------------
 */

:root {
  --sb-select-label-space-px: var(--sb-sem-space-form-p-sm);
  --sb-select-label-space-py: var(--sb-sem-space-form-p-xs);

  --sb-select-label-font-size: var(--sb-sem-font-form-size-sm);
  --sb-select-label-font-line-height: var(--sb-sem-font-form-line-height-sm);
  --sb-select-label-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  SELECT ITEM
 * --------------------------------------------------
 */

:root {
  --sb-select-item-space-gap: var(--sb-sem-space-form-gap-sm);

  --sb-select-item-space-pl: var(--sb-sem-space-form-p-sm);
  --sb-select-item-space-pr: var(--sb-sem-space-form-pr);
  --sb-select-item-space-py: var(--sb-sem-space-form-p-xs);

  --sb-select-item-font-size: var(--sb-sem-font-form-size);
  --sb-select-item-font-line-height: var(--sb-sem-font-form-line-height);

  --sb-select-item-radius: var(--sb-sem-radius-form-sm);

  --sb-select-item-color-text-hover: var(--sb-sem-color-text-secondary-on-fill);
  --sb-select-item-color-bg-hover: var(--sb-sem-color-bg-fill-secondary);

  --sb-select-item-color-text-focus: var(--sb-sem-color-text-secondary-on-fill);
  --sb-select-item-color-bg-focus: var(--sb-sem-color-bg-fill-secondary);

  --sb-select-item-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* * INDICATOR * */
  --sb-select-item-indicator-space-size: var(--sb-sem-space-indicator-size);

  /* * ICON * */
  --sb-select-item-icon-space-size: var(--sb-sem-space-icon-size);
  --sb-select-item-icon-color-text: var(--sb-sem-color-text-secondary);
}

/*
 * --------------------------------------------------
 *  SELECT SEPARATOR
 * --------------------------------------------------
 */

:root {
  --sb-select-separator-space-mx: var(--sb-sem-space-divider-mx);
  --sb-select-separator-space-my: var(--sb-sem-space-divider-my);

  --sb-select-separator-space-h: var(--sb-sem-width-border);

  --sb-select-separator-color-bg: var(--sb-sem-color-border);
}

/*
 * ===========================================================================
 *  SEPARATOR COMPONENT TOKENS
 *  rtg-separator-*
 * ===========================================================================
 */

:root {
  --rtg-separator-color-bg: hsl(var(--sb-sem-color-border));
  --rtg-separator-horizontal-space-h: var(--sb-sem-width-border);
  --rtg-separator-vertical-space-w: var(--sb-sem-width-border);
}

/*
 * ===========================================================================
 *  SKELETON COMPONENT TOKENS
 *  sb-skeleton-*
 * ===========================================================================
 */

:root {
  --sb-skeleton-color-bg: var(--sb-sem-color-bg-fill-secondary);
  --sb-skeleton-radius: var(--sb-sem-radius-feedback-sm);
  --sb-skeleton-motion-duration: var(--sb-sem-motion-duration-pulse);
  --sb-skeleton-motion-fn: var(--sb-sem-motion-fn-pulse);
  --sb-skeleton-opacity-at-50: var(--sb-ref-opacity-50);
}

/*
 * ===========================================================================
 *  SPINNER COMPONENT TOKENS
 *  rtg-spinner-*
 * ===========================================================================
 */

:root {
  --rtg-spinner-space-size: var(--sb-sem-space-icon-size);

  --rtg-spinner-motion-duration: var(--sb-sem-motion-duration-slow);
  --rtg-spinner-motion-fn: var(--sb-ref-motion-fn-linear);
}

/*
 * ===========================================================================
 *  SWITCH COMPONENT TOKENS
 *  sb-switch-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  SWITCH
 * --------------------------------------------------
 */

:root {
  --sb-switch-space-w: var(--sb-sem-space-action-size);
  --sb-switch-space-h: var(--sb-sem-space-action-h-sm);

  --sb-switch-radius: var(--sb-sem-radius-indicator);
  --sb-switch-width-border: var(--sb-sem-width-border);
  --sb-switch-color-border: var(--sb-sem-color-border-transparent);

  --sb-switch-color-bg-checked: var(--sb-sem-color-bg-fill-brand);
  --sb-switch-color-bg-unchecked: var(--sb-sem-color-bg-fill-unchecked);

  --sb-switch-color-border-focus: var(--sb-sem-color-border-focus);
  --sb-switch-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-switch-color-ring-focus: var(--sb-sem-color-ring-focus);

  --sb-switch-opacity-disabled: var(--sb-sem-opacity-disabled);
}

/*
 * --------------------------------------------------
 *  SWITCH THUMB
 * --------------------------------------------------
 */

:root {
  --sb-switch-thumb-space-size: var(--sb-sem-space-indicator-size-lg);

  --sb-switch-thumb-color-bg-checked: var(--sb-sem-color-bg-fill-brand-on-fill);
  --sb-switch-thumb-color-bg-unchecked: var(
    --sb-sem-color-bg-fill-on-fill-unchecked
  );

  --sb-switch-thumb-radius: var(--sb-sem-radius-indicator);
  /* table preview */
  --sb-table-preview-color-bg: var(--sb-sem-color-bg-surface-secondary);
  --sb-table-preview-space-w: var(--sb-ref-space-full);
  --sb-table-preview-space-px: var(--sb-ref-space-10);
  --sb-table-preview-space-py: var(--sb-ref-space-10);

  /* table container */
  --sb-table-container-space-w: var(--sb-ref-space-full);

  /* table */
  --sb-table-space-w: var(--sb-ref-space-full);
  --sb-table-font-size: var(--sb-sem-font-table-size);

  /* table caption */
  --sb-table-caption-space-mt: var(--sb-ref-space-4);
  --sb-table-caption-font-size: var(--sb-sem-font-table-caption-size);
  --sb-table-caption-color-text: var(--sb-sem-color-text-secondary);

  /* table head */
  --sb-table-head-color-border: var(--sb-sem-color-border);
  --sb-table-head-width-border: calc(var(--sb-ref-space-0-5) - 1px);

  --sb-table-head-row-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-table-head-cell-space-h: var(--sb-ref-space-10);
  --sb-table-head-cell-space-px: var(--sb-ref-space-2);
  --sb-table-head-cell-font-weight: var(--sb-sem-font-table-weight);
  --sb-table-head-cell-color-text: var(--sb-sem-color-text-secondary);

  /* table body */
  --sb-table-body-color-border: var(--sb-sem-color-border);
  --sb-table-body-width-border: calc(var(--sb-ref-space-0-5) - 1px);

  --sb-table-body-row-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-table-body-cell-space-py: var(--sb-ref-space-2);
  --sb-table-body-cell-space-px: var(--sb-ref-space-2);

  /* table footer */
  --sb-table-footer-color-border: var(--sb-sem-color-border);
  --sb-table-footer-width-border: calc(var(--sb-ref-space-0-5) - 1px);

  --sb-table-footer-font-weight: var(--sb-sem-font-table-weight);
  --sb-table-footer-color-bg: var(--sb-sem-color-bg-fill-tertiary-hover);
  --sb-table-footer-row-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-table-footer-cell-space-py: var(--sb-ref-space-2);
  --sb-table-footer-cell-space-px: var(--sb-ref-space-2);
}

/*
 * ===========================================================================
 *  TABS COMPONENT TOKENS
 *  rtg-tabs-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  TABS
 * --------------------------------------------------
 */

:root {
  --rtg-tabs-space-gap: var(--sb-sem-space-navigation-gap);
}

/*
 * --------------------------------------------------
 *  TABS LIST
 * --------------------------------------------------
 */

:root {
  --rtg-tabs-list-space-p: 3px;
  --rtg-tabs-list-color-text: hsl(var(--sb-sem-color-text-secondary));

  /* * VARIANTS * */
  --rtg-tabs-list-default-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));
  --rtg-tabs-list-default-radius: var(--sb-sem-radius-navigation-lg);

  --rtg-tabs-list-line-space-gap: var(--sb-sem-space-navigation-gap-xs);
  --rtg-tabs-list-line-color-bg: hsl(var(--sb-sem-color-bg-fill-transparent));

  /* * ORIENTATIONS * */
  --rtg-tabs-list-horizontal-space-h: var(--sb-sem-space-navigation-size-sm);
}

/*
 * --------------------------------------------------
 *  TABS TRIGGER
 * --------------------------------------------------
 */

:root {
  --rtg-tabs-trigger-space-gap: var(--sb-sem-space-action-gap);

  --rtg-tabs-trigger-space-py: var(--sb-sem-space-action-py-xs);
  --rtg-tabs-trigger-space-px: var(--sb-sem-space-action-px-2xs);

  --rtg-tabs-trigger-font-size: var(--sb-sem-font-action-size);
  --rtg-tabs-trigger-font-line-height: var(--sb-sem-font-action-line-height);
  --rtg-tabs-trigger-font-weight: var(--sb-sem-font-action-weight);
  --rtg-tabs-trigger-color-text: hsl(var(--sb-sem-color-text-tertiary));

  --rtg-tabs-trigger-width-border: var(--sb-sem-width-border);
  --rtg-tabs-trigger-color-border: hsl(var(--sb-sem-color-border-transparent));
  --rtg-tabs-trigger-radius: var(--sb-sem-radius-action-xs);

  --rtg-tabs-trigger-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-tabs-trigger-motion-duration: var(--sb-sem-motion-duration-default);

  /* HOVER */
  --rtg-tabs-trigger-color-text-hover: hsl(var(--sb-sem-color-text));

  /* FOCUS VISIBLE */
  --rtg-tabs-trigger-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-tabs-trigger-width-outline-focus: var(--sb-sem-width-outline-focus);
  --rtg-tabs-trigger-color-outline-focus: hsl(var(--sb-sem-color-border-focus));

  --rtg-tabs-trigger-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-tabs-trigger-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  /* DISABLED */
  --rtg-tabs-trigger-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* ACTIVE */
  --rtg-tabs-trigger-color-text-active: hsl(var(--sb-sem-color-text));

  /* * VARIANTS * */
  --rtg-tabs-trigger-default-color-bg-active: hsl(var(--sb-sem-color-bg-fill-tertiary));
  --rtg-tabs-trigger-default-color-border-active: hsl(var(--sb-sem-color-border-tertiary));
  --rtg-tabs-trigger-default-shadow-active: var(--sb-sem-shadow-action-active);

  /* * ICON CHILD * */
  --rtg-tabs-trigger-icon-space-size: var(--sb-sem-space-icon-size);

  /* * AFTER (::after) (underline of line variant) * */
  --rtg-tabs-trigger-after-color-bg: hsl(var(--sb-sem-color-bg-fill-inverse));
  --rtg-tabs-trigger-after-opacity: var(--sb-ref-opacity-0);

  --rtg-tabs-trigger-horizontal-after-space-bottom: -5px;
  --rtg-tabs-trigger-horizontal-after-space-h: var(--sb-ref-space-0-5);

  --rtg-tabs-trigger-vertical-after-space-right: var(--sb-ref-space-neg-1);
  --rtg-tabs-trigger-vertical-after-space-w: var(--sb-ref-space-0-5);

  --rtg-tabs-trigger-line-after-opacity-active: var(--sb-ref-opacity-100);
}

/*
 * --------------------------------------------------
 *  TABS CONTENT
 * --------------------------------------------------
 */

:root {
  --rtg-tabs-content-font-size: var(--sb-sem-font-content-body-size);
  --rtg-tabs-content-font-line-height: var(--sb-sem-font-content-body-line-height);
}

/*
 * ===========================================================================
 *  TEXTAREA COMPONENT TOKENS
 *  rtg-textarea-*
 * ===========================================================================
 */

:root {
  --rtg-textarea-space-px: var(--sb-sem-space-form-px);
  --rtg-textarea-space-py: var(--sb-sem-space-form-py-lg);

  --rtg-textarea-space-min-h: var(--sb-sem-space-form-min-h);

  --rtg-textarea-font-size: var(--sb-sem-font-form-size);
  --rtg-textarea-font-size-vw-sm: var(--sb-sem-font-form-size-vw-sm);
  --rtg-textarea-font-line-height: var(--sb-sem-font-form-line-height);
  --rtg-textarea-font-line-height-vw-sm: var(--sb-sem-font-form-line-height-vw-sm);

  --rtg-textarea-color-bg: hsl(var(--sb-sem-color-bg-fill-quaternary));

  --rtg-textarea-width-border: var(--sb-sem-width-border);
  --rtg-textarea-color-border: hsl(var(--sb-sem-color-border-secondary));
  --rtg-textarea-radius: var(--sb-sem-radius-form);

  --rtg-textarea-motion-fn: var(--sb-sem-motion-fn-default);
  --rtg-textarea-motion-duration: var(--sb-sem-motion-duration-default);

  /* FOCUS VISIBLE */
  --rtg-textarea-color-border-focus: hsl(var(--sb-sem-color-border-focus));
  --rtg-textarea-width-ring-focus: var(--sb-sem-width-ring-focus);
  --rtg-textarea-color-ring-focus: hsl(var(--sb-sem-color-ring-focus));

  /* INVALID */
  --rtg-textarea-color-border-invalid: hsl(var(--sb-sem-color-border-invalid-secondary));
  --rtg-textarea-width-ring-invalid: var(--sb-sem-width-ring-invalid);
  --rtg-textarea-color-ring-invalid: hsl(var(--sb-sem-color-ring-destructive));

  /* DISABLED */
  --rtg-textarea-color-bg-disabled: hsl(var(--sb-sem-color-bg-fill-disabled));
  --rtg-textarea-opacity-disabled: var(--sb-sem-opacity-disabled);

  /* * PLACEHOLDER * */
  --rtg-textarea-placeholder-color-text: hsl(var(--sb-sem-color-text-secondary));
  /* toast title */
  --sb-toast-title-font-size: var(--sb-sem-font-content-heading-size-xs);
  --sb-toast-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);

  /* toast description  */
  --sb-toast-description-font-size: var(--sb-sem-font-content-body-size);
  --sb-toast-description-opacity: var(--sb-ref-opacity-90);

  /* toast action */
  --sb-toast-action-font-size: var(--sb-sem-font-action-size);
  --sb-toast-action-color-ring-focus: var(--sb-sem-color-ring-focus);
  --sb-toast-action-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-toast-action-font-weight: var(--sb-sem-font-action-weight);
  --sb-toast-action-space-h: var(--sb-ref-space-8);
  --sb-toast-action-radius: var(--sb-sem-radius-action-2xs);
  --sb-toast-action-space-px: var(--sb-ref-space-1-5);
  --sb-toast-action-space-py: var(--sb-ref-space-0-5);
  --sb-toast-action-color-text: var(--sb-sem-color-text);
  --sb-toast-action-opacity-disabled: var(--sb-sem-opacity-disabled);
  --sb-toast-action-default-color-bg: var(--sb-sem-color-bg-fill-tertiary);
  --sb-toast-action-default-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toast-action-color-border: var(--sb-sem-color-border-secondary);

  --sb-toast-action-destructive-color-bg: var(
    --sb-sem-color-bg-fill-destructive
  );
  --sb-toast-action-destructive-color-bg-hover: var(
    --sb-ref-color-destructive-400
  );
  --sb-toast-action-destructive-color-ring-focus: var(
    --sb-sem-color-ring-destructive
  );
  --sb-toast-action-destructive-color-text: var(
    --sb-sem-color-text-destructive-on-fill
  );

  /* toast viewport root */
  --sb-toast-viewport-root-space-px: var(--sb-ref-space-4);
  --sb-toast-viewport-root-space-py: var(--sb-ref-space-4);
  --sb-toast-viewport-root-space-w-md: calc(var(--sb-ref-space-5) * 21);
  --sb-toast-viewport-root-space-w: var(--sb-ref-space-full);

  /* toast viewport item */
  --sb-toast-viewport-item-space-w: var(--sb-ref-space-full);
  --sb-toast-viewport-item-space-gap: var(--sb-sem-space-feedback-gap-lg);
  --sb-toast-viewport-item-radius: var(--sb-sem-radius-overlay);
  --sb-toast-viewport-item-space-px: var(--sb-ref-space-4);
  --sb-toast-viewport-item-space-py: var(--sb-ref-space-4);
  --sb-toast-viewport-item-shadow: var(--sb-sem-shadow-overlay);
  --sb-toast-viewport-default-color-bg: var(
    --sb-sem-color-bg-surface-secondary
  );
  --sb-toast-viewport-default-color-border: var(
    --sb-sem-color-border-secondary
  );
  --sb-toast-viewport-default-color-text: var(--sb-sem-color-text);
  --sb-toast-viewport-destructive-color-bg: var(
    --sb-sem-color-bg-fill-destructive
  );
  --sb-toast-viewport-destructive-color-text: var(
    --sb-sem-color-role-on-destructive
  );
}

/*
 * ======================================================
 * Toast viewport item animations
 * ======================================================
 */

:root {
  /* base animation */
  --sb-toast-viewport-item-motion-duration-in: var(--sb-sem-motion-duration-in-out);
  --sb-toast-viewport-item-motion-fn-in: var(--sb-sem-motion-fn-in-out);

  --sb-toast-viewport-item-motion-duration-out: var(--sb-sem-motion-duration-in-out);
  --sb-toast-viewport-item-motion-fn-out: var(--sb-sem-motion-fn-in-out);

  /* opacity */
  --sb-toast-viewport-item-opacity-exit: var(--sb-ref-opacity-40);

  /* motion distance */
  --sb-toast-viewport-item-translate-x-exit: 200%;
  --sb-toast-viewport-item-translate-y-enter-mobile: 0%;
  --sb-toast-viewport-item-translate-y-enter-desktop: 0%;
}

/*
 * ===========================================================================
 *  TOGGLE GROUP COMPONENT TOKENS
 *  sb-toggle-group-item-*
 * ===========================================================================
 */

:root {
  --sb-toggle-group-item-color-bg-on: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toggle-group-item-color-text-on: var(--sb-sem-color-text);
  --sb-toggle-group-item-color-ring-focus: var(--sb-sem-color-ring-focus);

  --sb-toggle-group-item-default-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toggle-group-item-default-color-text-hover: var(--sb-sem-color-text);

  --sb-toggle-group-item-outline-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toggle-group-item-outline-color-text-hover: var(--sb-sem-color-text);
  --sb-toggle-group-item-outline-color-border: var(
    --sb-sem-color-border-secondary
  );

  --sb-toggle-group-item-radius: var(--sb-sem-radius-action);
  --sb-toggle-group-item-font-size: var(--sb-sem-font-action-size);
  --sb-toggle-group-item-font-weight: var(--sb-sem-font-action-weight);

  --sb-toggle-group-item-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-toggle-group-item-width-ring-offset-focus: var(
    --sb-sem-width-ring-sm-focus
  );
  --sb-toggle-group-item-opacity-disabled: var(--sb-sem-opacity-disabled);
  --sb-toggle-group-item-space-h-sm: var(--sb-sem-space-action-size);
  --sb-toggle-group-item-space-h-md: var(--sb-sem-space-action-size-lg);
  --sb-toggle-group-item-space-h-lg: var(--sb-sem-space-action-size-xl);
  --sb-toggle-group-item-space-px-sm: var(--sb-sem-space-action-px-sm);
  --sb-toggle-group-item-space-px-md: var(--sb-sem-space-action-px-md);
  --sb-toggle-group-item-space-px-lg: var(--sb-sem-space-action-px-lg);
  --sb-toggle-group-space-gap: var(--sb-sem-space-action-gap-sm);
}

/*
 * ===========================================================================
 *  TOGGLE COMPONENT TOKENS
 *  sb-toggle-*
 * ===========================================================================
 */

:root {
  --sb-toggle-color-bg-on: var(--sb-sem-color-bg-fill-tertiary-hover);
  --sb-toggle-color-text-on: var(--sb-sem-color-text);
  --sb-toggle-color-ring-focus: var(--sb-sem-color-ring-focus);

  --sb-toggle-default-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toggle-default-color-text-hover: var(--sb-sem-color-text);

  --sb-toggle-outline-color-bg-hover: var(
    --sb-sem-color-bg-fill-tertiary-hover
  );
  --sb-toggle-outline-color-text-hover: var(--sb-sem-color-text);
  --sb-toggle-outline-color-border: var(--sb-sem-color-border-secondary);

  --sb-toggle-radius: var(--sb-sem-radius-action);
  --sb-toggle-font-size: var(--sb-sem-font-action-size);
  --sb-toggle-font-weight: var(--sb-sem-font-action-weight);

  --sb-toggle-width-ring-focus: var(--sb-sem-width-ring-focus);
  --sb-toggle-width-ring-offset-focus: var(--sb-sem-width-ring-sm-focus);
  --sb-toggle-opacity-disabled: var(--sb-sem-opacity-disabled);

  --sb-toggle-space-h-sm: var(--sb-sem-space-action-size);
  --sb-toggle-space-h-md: var(--sb-sem-space-action-size-lg);
  --sb-toggle-space-h-lg: var(--sb-sem-space-action-size-xl);
  --sb-toggle-space-px-sm: var(--sb-sem-space-action-px-sm);
  --sb-toggle-space-px-md: var(--sb-sem-space-action-px-md);
  --sb-toggle-space-px-lg: var(--sb-sem-space-action-px-lg);
}

/*
 * ===========================================================================
 *  TYPOGRAPHY COMPONENT TOKENS
 *  rtg-typography-*
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  TYPOGRAPHY H
 * --------------------------------------------------
 */

:root {
  --rtg-typography-h-color-text: inherit;

  --rtg-typography-h-space-scroll-m: var(
    --sb-sem-space-typography-heading-scroll-m
  );
  --rtg-typography-h-font-family: var(--sb-sem-font-heading-family);
  --rtg-typography-h-font-weight: var(--sb-sem-font-heading-weight);
  --rtg-typography-h-font-letter-spacing: var(
    --sb-sem-font-heading-letter-spacing
  );

  /* * LEVELS * */

  /* LEVEL 1 */
  --rtg-typography-h-h1-font-size: var(--sb-sem-font-heading-size-h1);
  --rtg-typography-h-h1-font-line-height: var(
    --sb-sem-font-heading-line-height-h1
  );
  --rtg-typography-h-h1-font-weight: var(--sb-sem-font-heading-weight-h1);

  /* LEVEL 2 */
  --rtg-typography-h-h2-space-pb: var(--sb-sem-space-typography-xs);
  --rtg-typography-h-h2-space-mt: var(--sb-sem-space-typography-xl);

  --rtg-typography-h-h2-font-size: var(--sb-sem-font-heading-size-h2);
  --rtg-typography-h-h2-font-line-height: var(
    --sb-sem-font-heading-line-height-h2
  );
  --rtg-typography-h-h2-font-weight: var(--sb-sem-font-heading-weight);

  --rtg-typography-h-h2-width-border: var(--sb-sem-width-border);
  --rtg-typography-h-h2-color-border: hsl(var(--sb-sem-color-border));

  /* LEVEL 3 */
  --rtg-typography-h-h3-space-mt: var(--sb-sem-space-typography-lg);

  --rtg-typography-h-h3-font-size: var(--sb-sem-font-heading-size-h3);
  --rtg-typography-h-h3-font-line-height: var(
    --sb-sem-font-heading-line-height-h3
  );

  /* LEVEL 4 */
  --rtg-typography-h-h4-space-mt: var(--sb-sem-space-typography);

  --rtg-typography-h-h4-font-size: var(--sb-sem-font-heading-size-h4);
  --rtg-typography-h-h4-font-line-height: var(
    --sb-sem-font-heading-line-height-h4
  );
  --rtg-typography-h-h4-font-weight: var(--sb-sem-font-heading-weight);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY P
 * --------------------------------------------------
 */

:root {
  --rtg-typography-p-space-mt: var(--sb-sem-space-typography);

  --rtg-typography-p-font-family: var(--sb-sem-font-family);
  --rtg-typography-p-font-size: var(--sb-sem-font-size);
  --rtg-typography-p-font-size-vw-sm: var(--sb-sem-font-size-vw-sm);
  --rtg-typography-p-font-line-height: var(--sb-sem-font-paragraph-line-height);
  --rtg-typography-p-font-weight: var(--sb-sem-font-weight);
  --rtg-typography-p-font-letter-spacing: var(--sb-sem-font-letter-spacing);
  --rtg-typography-p-color-text: inherit;

  --rtg-typography-p-link-color-text: hsl(var(--sb-sem-color-text-brand));
  --rtg-typography-p-link-font-weight: var(--sb-sem-font-link-weight);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY BLOCKQUOTE
 * --------------------------------------------------
 */

:root {
  --rtg-typography-blockquote-space-pl: var(--sb-sem-space-typography);
  --rtg-typography-blockquote-space-mt: var(--sb-sem-space-typography);

  --rtg-typography-blockquote-font-family: var(--sb-sem-font-family);
  --rtg-typography-blockquote-font-size: var(--sb-sem-font-size);
  --rtg-typography-blockquote-font-size-vw-sm: var(--sb-sem-font-size-vw-sm);
  --rtg-typography-blockquote-font-line-height: var(--sb-sem-font-line-height);
  --rtg-typography-blockquote-font-weight: var(--sb-sem-font-weight);
  --rtg-typography-blockquote-font-letter-spacing: var(
    --sb-sem-font-letter-spacing
  );

  --rtg-typography-blockquote-width-border: var(
    --sb-sem-width-border-decorative
  );
  --rtg-typography-blockquote-color-border: hsl(var(--sb-sem-color-border));
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY TABLE
 * --------------------------------------------------
 */

:root {
  --rtg-typography-table-space-my: var(--sb-sem-space-typography);

  --rtg-typography-table-font-family: var(--sb-sem-font-family);
  --rtg-typography-table-font-size: var(--sb-sem-font-size);
  --rtg-typography-table-font-size-vw-sm: var(--sb-sem-font-size-vw-sm);
  --rtg-typography-table-font-line-height: var(--sb-sem-font-line-height);
  --rtg-typography-table-font-weight: var(--sb-sem-font-weight);
  --rtg-typography-table-font-letter-spacing: var(--sb-sem-font-letter-spacing);

  /* * TABLE ROW * */
  --rtg-typography-table-row-space-p: var(--sb-ref-space-0);
  --rtg-typography-table-row-space-m: var(--sb-ref-space-0);

  --rtg-typography-table-row-width-border: var(--sb-sem-width-border);
  --rtg-typography-table-row-color-border: hsl(var(--sb-sem-color-border));

  --rtg-typography-table-row-color-text-even: hsl(
    var(--sb-sem-color-text-secondary-on-fill)
  );
  --rtg-typography-table-row-color-bg-even: hsl(
    var(--sb-sem-color-bg-fill-secondary)
  );

  /* * TABLE CELL * */
  --rtg-typography-table-cell-space-px: var(--sb-sem-space-typography-sm);
  --rtg-typography-table-cell-space-py: var(--sb-sem-space-typography-xs);

  --rtg-typography-table-cell-width-border: var(--sb-sem-width-border);
  --rtg-typography-table-cell-color-border: hsl(var(--sb-sem-color-border));

  --rtg-typography-table-cell-header-font-weight: var(
    --sb-ref-font-weight-bold
  );
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LIST
 * --------------------------------------------------
 */

:root {
  --rtg-typography-list-space-ml: var(--sb-sem-space-typography);
  --rtg-typography-list-space-my: var(--sb-sem-space-typography);

  --rtg-typography-list-font-family: var(--sb-sem-font-family);
  --rtg-typography-list-font-size: var(--sb-sem-font-size);
  --rtg-typography-list-font-size-vw-sm: var(--sb-sem-font-size-vw-sm);
  --rtg-typography-list-font-line-height: var(--sb-sem-font-line-height);
  --rtg-typography-list-font-weight: var(--sb-sem-font-weight);
  --rtg-typography-list-font-letter-spacing: var(--sb-sem-font-letter-spacing);

  --rtg-typography-list-item-space-mt: var(--sb-sem-space-typography-xs);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY CODE
 * --------------------------------------------------
 */

:root {
  --rtg-typography-code-space-px: var(--sb-sem-space-typography-xs);
  --rtg-typography-code-space-py: var(--sb-sem-space-typography-2xs);

  --rtg-typography-code-color-text: hsl(
    var(--sb-sem-color-text-secondary-on-fill)
  );
  --rtg-typography-code-font-family: var(--sb-sem-font-code-family);
  --rtg-typography-code-font-size: var(--sb-sem-font-code-size);
  --rtg-typography-code-font-line-height: var(--sb-sem-font-code-line-height);
  --rtg-typography-code-font-weight: var(--sb-sem-font-code-weight);
  --rtg-typography-code-font-letter-spacing: var(
    --sb-sem-font-code-letter-spacing
  );

  --rtg-typography-code-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));

  --rtg-typography-code-radius: var(--sb-ref-radius-lg);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LEAD
 * --------------------------------------------------
 */

:root {
  --rtg-typography-lead-space-mt: var(--sb-sem-space-typography);

  --rtg-typography-lead-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-typography-lead-font-family: var(--sb-sem-font-family);
  --rtg-typography-lead-font-size: var(--sb-sem-font-size-xl);
  --rtg-typography-lead-font-line-height: var(--sb-sem-font-line-height-xl);
  --rtg-typography-lead-font-weight: var(--sb-sem-font-weight);
  --rtg-typography-lead-font-letter-spacing: var(--sb-sem-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LARGE
 * --------------------------------------------------
 */

:root {
  --rtg-typography-large-font-family: var(--sb-sem-font-family);
  --rtg-typography-large-font-size: var(--sb-sem-font-size-lg);
  --rtg-typography-large-font-line-height: var(--sb-sem-font-line-height-lg);
  --rtg-typography-large-font-weight: var(--sb-sem-font-weight-lg);
  --rtg-typography-large-font-letter-spacing: var(--sb-sem-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY SMALL
 * --------------------------------------------------
 */

:root {
  --rtg-typography-small-font-family: var(--sb-sem-font-family);
  --rtg-typography-small-font-size: var(--sb-sem-font-size-sm);
  --rtg-typography-small-font-line-height: var(--sb-sem-font-line-height-sm);
  --rtg-typography-small-font-weight: var(--sb-sem-font-weight-sm);
  --rtg-typography-small-font-letter-spacing: var(--sb-sem-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY MUTED
 * --------------------------------------------------
 */

:root {
  --rtg-typography-muted-color-text: hsl(var(--sb-sem-color-text-secondary));
  --rtg-typography-muted-font-family: var(--sb-sem-font-family);
  --rtg-typography-muted-font-size: var(--sb-sem-font-muted-size);
  --rtg-typography-muted-font-line-height: var(--sb-sem-font-muted-line-height);
  --rtg-typography-muted-font-weight: var(--sb-sem-font-muted-weight);
  --rtg-typography-muted-font-letter-spacing: var(--sb-sem-font-letter-spacing);
}

/* * COMPONENT STYLE IMPORTS * */

/*
 * ===========================================================================
 *  ALERT COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ALERT
 * --------------------------------------------------
 */

rtg-alert {
  width: 100%;
}

rtg-alert > [data-slot="alert"] {
  display: grid;

  gap: var(--rtg-alert-space-gap);
  padding: var(--rtg-alert-space-py) var(--rtg-alert-space-px);

  width: 100%;

  font-size: var(--rtg-alert-font-size);
  line-height: var(--rtg-alert-font-line-height);
  text-align: left;

  background-color: var(--rtg-alert-color-bg);

  border: var(--rtg-alert-width-border) solid var(--rtg-alert-color-border);
  border-radius: var(--rtg-alert-radius);
}

rtg-alert > [data-slot="alert"]:has(> svg) {
  grid-template-columns: auto 1fr;
  -moz-column-gap: var(--rtg-alert-space-gap-x-has-icon);
       column-gap: var(--rtg-alert-space-gap-x-has-icon);
}

rtg-alert > [data-slot="alert"]:has(> rtg-alert-action) {
  position: relative;
  padding-right: var(--rtg-alert-space-pr-has-action);
}

/* * VARIANTS * */

rtg-alert > [data-slot="alert"][data-variant="default"] {
  color: var(--rtg-alert-default-color-text);
}

/* BRAND & BRAND TONAL */

rtg-alert > [data-slot="alert"][data-variant^="brand"] {
  color: var(--rtg-alert-brand-color-text);
}

rtg-alert > [data-slot="alert"][data-variant="brand-tonal"] {
  background-color: var(--rtg-alert-brand-tonal-color-bg);
  border-color: var(--rtg-alert-brand-tonal-color-border);
}

/* DESTRUCTIVE & DESTRUCTIVE TONAL */

rtg-alert > [data-slot="alert"][data-variant^="destructive"] {
  color: var(--rtg-alert-destructive-color-text);
}

rtg-alert > [data-slot="alert"][data-variant="destructive-tonal"] {
  background-color: var(--rtg-alert-destructive-tonal-color-bg);
  border-color: var(--rtg-alert-destructive-tonal-color-border);
}

/* WARNING & WARNING TONAL */

rtg-alert > [data-slot="alert"][data-variant^="warning"] {
  color: var(--rtg-alert-warning-color-text);
}

rtg-alert > [data-slot="alert"][data-variant="warning-tonal"] {
  background-color: var(--rtg-alert-warning-tonal-color-bg);
  border-color: var(--rtg-alert-warning-tonal-color-border);
}

/* SUCCESS & SUCCESS TONAL */

rtg-alert > [data-slot="alert"][data-variant^="success"] {
  color: var(--rtg-alert-success-color-text);
}

rtg-alert > [data-slot="alert"][data-variant="success-tonal"] {
  background-color: var(--rtg-alert-success-tonal-color-bg);
  border-color: var(--rtg-alert-success-tonal-color-border);
}

/* INFO & INFO TONAL */

rtg-alert > [data-slot="alert"][data-variant^="info"] {
  color: var(--rtg-alert-info-color-text);
}

rtg-alert > [data-slot="alert"][data-variant="info-tonal"] {
  background-color: var(--rtg-alert-info-tonal-color-bg);
  border-color: var(--rtg-alert-info-tonal-color-border);
}

/* * ICON CHILD * */

rtg-alert > [data-slot="alert"] svg {
  grid-row: span 2 / span 2;

  width: var(--rtg-alert-icon-space-size);
  height: var(--rtg-alert-icon-space-size);

  color: currentColor;

  translate: 0 var(--rtg-alert-icon-space-translate-y);
}

/*
 * --------------------------------------------------
 *  ALERT TITLE
 * --------------------------------------------------
 */

rtg-alert-title > [data-slot="alert-title"] {
  font-weight: var(--rtg-alert-title-font-weight);
}

rtg-alert > [data-slot="alert"]:has(> svg) > rtg-alert-title > [data-slot="alert-title"] {
  grid-column-start: 2;
}

/* * LINK CHILD * */

rtg-alert-title > [data-slot="alert-title"] a {
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

rtg-alert-title > [data-slot="alert-title"] a:hover {
  color: var(--rtg-alert-title-color-link-hover);
}

/*
 * --------------------------------------------------
 *  ALERT DESCRIPTION
 * --------------------------------------------------
 */

rtg-alert-description > [data-slot="alert-description"] {
  font-size: var(--rtg-alert-description-font-size);
  line-height: var(--rtg-alert-description-font-line-height);
  text-wrap: balance;
}

@media (width >= 48rem) {
  rtg-alert-description > [data-slot="alert-description"] {
    text-wrap: pretty;
  }
}

/* * VARIANTS * */

rtg-alert > [data-slot="alert"][data-variant="default"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-description-default-color-text);
}

rtg-alert > [data-slot="alert"][data-variant^="brand"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-brand-default-color-text);
}

rtg-alert > [data-slot="alert"][data-variant^="destructive"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-destructive-default-color-text);
}

rtg-alert > [data-slot="alert"][data-variant^="warning"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-warning-default-color-text);
}

rtg-alert > [data-slot="alert"][data-variant^="success"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-success-default-color-text);
}

rtg-alert > [data-slot="alert"][data-variant^="info"] > rtg-alert-description > [data-slot="alert-description"] {
  color: var(--rtg-alert-info-default-color-text);
}

/* * LINK CHILD * */

rtg-alert-description > [data-slot="alert-description"] a {
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

rtg-alert-description > [data-slot="alert-description"] a:hover {
  color: var(--rtg-alert-description-color-link-hover);
}

/* * PARAGRAPH CHILD * */

rtg-alert-description > [data-slot="alert-description"] p:not(:last-child) {
  margin-bottom: var(--rtg-alert-description-p-space-mb);
}

/*
 * --------------------------------------------------
 *  ALERT ACTION
 * --------------------------------------------------
 */

rtg-alert-action {
  position: absolute;
  top: var(--rtg-alert-action-space-top);
  right: var(--rtg-alert-action-space-right);
}

/*
 * ===========================================================================
 *  AVATAR COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  AVATAR
 * --------------------------------------------------
 */

rtg-avatar {
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

rtg-avatar > [data-slot="avatar"] {
  display: flex;
  position: relative;

  width: var(--rtg-avatar-space-size);
  height: var(--rtg-avatar-space-size);

  border-radius: var(--rtg-avatar-radius);
}

rtg-avatar > [data-slot="avatar"][data-size="sm"] {
  width: var(--rtg-avatar-space-size-sm);
  height: var(--rtg-avatar-space-size-sm);
}

rtg-avatar > [data-slot="avatar"][data-size="lg"] {
  width: var(--rtg-avatar-space-size-lg);
  height: var(--rtg-avatar-space-size-lg);
}

/*
 * --------------------------------------------------
 *  AVATAR IMAGE
 * --------------------------------------------------
 */

rtg-avatar-image {
  width: 100%;
  height: 100%;
}

rtg-avatar-image > [data-slot="avatar-image"] {
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
     object-fit: cover;

  border-radius: var(--rtg-avatar-radius);
}

/*
 * --------------------------------------------------
 *  AVATAR FALLBACK
 * --------------------------------------------------
 */

rtg-avatar-fallback {
  width: 100%;
  height: 100%;
}

rtg-avatar-fallback > [data-slot="avatar-fallback"] {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  font-size: var(--rtg-avatar-font-size);
  line-height: var(--rtg-avatar-font-line-height);
  color: var(--rtg-avatar-color-text);

  background-color: var(--rtg-avatar-color-bg);

  border-radius: var(--rtg-avatar-radius);
}

rtg-avatar > [data-slot="avatar"][data-size="sm"] > rtg-avatar-fallback > [data-slot="avatar-fallback"] {
  font-size: var(--rtg-avatar-font-size-sm);
  line-height: var(--rtg-avatar-font-line-height-sm);
}

/*
 * --------------------------------------------------
 *  AVATAR BADGE
 * --------------------------------------------------
 */

rtg-avatar-badge {
  display: inline-flex;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;

  width: var(--rtg-avatar-badge-space-size);
  height: var(--rtg-avatar-badge-space-size);

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;
}

rtg-avatar > [data-slot="avatar"][data-size="sm"] > rtg-avatar-badge {
  width: var(--rtg-avatar-badge-space-size-sm);
  height: var(--rtg-avatar-badge-space-size-sm);
}

rtg-avatar > [data-slot="avatar"][data-size="lg"] > rtg-avatar-badge {
  width: var(--rtg-avatar-badge-space-size-lg);
  height: var(--rtg-avatar-badge-space-size-lg);
}

rtg-avatar-badge > [data-slot="avatar-badge"] {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  color: var(--rtg-avatar-badge-color-text);

  background-color: var(--rtg-avatar-badge-color-bg);

  border-radius: var(--rtg-avatar-badge-radius);

  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-avatar-width-ring) var(--rtg-avatar-color-ring),
    0 0 rgb(0 0 0);
}

/* * AVATAR BADGE ICON CHILD * */

rtg-avatar > [data-slot="avatar"][data-size="default"] > rtg-avatar-badge > [data-slot="avatar-badge"] > svg {
  width: var(--rtg-avatar-badge-icon-space-size);
  height: var(--rtg-avatar-badge-icon-space-size);
}

rtg-avatar > [data-slot="avatar"][data-size="sm"] > rtg-avatar-badge > [data-slot="avatar-badge"] > svg {
  display: none;
}

rtg-avatar > [data-slot="avatar"][data-size="lg"] > rtg-avatar-badge > [data-slot="avatar-badge"] > svg {
  width: var(--rtg-avatar-badge-icon-space-size-lg);
  height: var(--rtg-avatar-badge-icon-space-size-lg);
}

/*
 * --------------------------------------------------
 *  AVATAR GROUP
 * --------------------------------------------------
 */

rtg-avatar-group > [data-slot="avatar-group"] {
  display: flex;
}

rtg-avatar-group > [data-slot="avatar-group"] > :not(:last-child) {
  margin-inline-start: 0;
  margin-inline-end: var(--rtg-avatar-space-me-in-group);
}

rtg-avatar-group > [data-slot="avatar-group"] > rtg-avatar > [data-slot="avatar"] {
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-avatar-width-ring) var(--rtg-avatar-color-ring),
    0 0 rgb(0 0 0);
}

/*
 * --------------------------------------------------
 *  AVATAR GROUP COUNT
 * --------------------------------------------------
 */

rtg-avatar-group-count {
  flex-shrink: 0;
}

rtg-avatar-group-count > [data-slot="avatar-group-count"] {
  display: flex;
  position: relative;

  align-items: center;
  justify-content: center;

  width: var(--rtg-avatar-space-size);
  height: var(--rtg-avatar-space-size);

  font-size: var(--rtg-avatar-font-size);
  line-height: var(--rtg-avatar-font-line-height);
  color: var(--rtg-avatar-color-text);

  background-color: var(--rtg-avatar-color-bg);

  border-radius: var(--rtg-avatar-radius);

  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-avatar-width-ring) var(--rtg-avatar-color-ring),
    0 0 rgb(0 0 0);
}

rtg-avatar-group > [data-slot="avatar-group"]:has(> rtg-avatar > [data-slot="avatar"][data-size="sm"]) > rtg-avatar-group-count > [data-slot="avatar-group-count"] {
  width: var(--rtg-avatar-space-size-sm);
  height: var(--rtg-avatar-space-size-sm);

  font-size: var(--rtg-avatar-font-size-sm);
  line-height: var(--rtg-avatar-font-line-height-sm);
}

rtg-avatar-group > [data-slot="avatar-group"]:has(> rtg-avatar > [data-slot="avatar"][data-size="lg"]) > rtg-avatar-group-count > [data-slot="avatar-group-count"] {
  width: var(--rtg-avatar-space-size-lg);
  height: var(--rtg-avatar-space-size-lg);
}

/* * AVATAR GROUP COUNT ICON CHILD * */

rtg-avatar-group-count > [data-slot="avatar-group-count"] > svg {
  width: var(--rtg-avatar-icon-space-size);
  height: var(--rtg-avatar-icon-space-size);
}

rtg-avatar-group > [data-slot="avatar-group"]:has(> rtg-avatar > [data-slot="avatar"][data-size="sm"]) > rtg-avatar-group-count > [data-slot="avatar-group-count"] > svg {
  width: var(--rtg-avatar-icon-space-size-sm);
  height: var(--rtg-avatar-icon-space-size-sm);
}

rtg-avatar-group > [data-slot="avatar-group"]:has(> rtg-avatar > [data-slot="avatar"][data-size="lg"]) > rtg-avatar-group-count > [data-slot="avatar-group-count"] > svg {
  width: var(--rtg-avatar-icon-space-size-lg);
  height: var(--rtg-avatar-icon-space-size-lg);
}

/*
 * ===========================================================================
 *  BADGE COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMON
 * --------------------------------------------------
 */

rtg-badge {
  display: inline-flex;
  flex-shrink: 0;
}

rtg-badge > [data-slot=badge] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rtg-badge-space-gap);
  flex-shrink: 0;
  padding-inline: var(--rtg-badge-space-px);
  padding-block: var(--rtg-badge-space-py);
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--rtg-badge-font-size);
  line-height: var(--rtg-badge-font-line-height);
  font-weight: var(--rtg-badge-font-weight);
  white-space: nowrap;
  border: var(--rtg-badge-width-border) solid var(--rtg-badge-color-border);
  border-radius: var(--rtg-badge-radius);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, box-shadow;
  transition-timing-function: var(--rtg-badge-motion-fn);
  transition-duration: var(--rtg-badge-motion-duration);
  overflow: hidden;
}

rtg-badge > [data-slot=badge]:has(.rtg-icon-inline-start) {
  padding-left: var(--rtg-badge-space-px-has-icon);
}

rtg-badge > [data-slot=badge]:has(.rtg-icon-inline-end) {
  padding-right: var(--rtg-badge-space-px-has-icon);
}

rtg-badge > [data-slot=badge]:focus-visible {
  border-color: var(--rtg-badge-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-badge-width-ring-focus) var(--rtg-badge-color-ring-focus),
    0 0 rgb(0 0 0);
}

rtg-badge > [data-slot=badge][aria-invalid] {
  border-color: var(--rtg-badge-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-badge-width-ring-invalid) var(--rtg-badge-color-ring-invalid),
    0 0 rgb(0 0 0);
}

rtg-badge > [data-slot=badge] svg {
  width: var(--rtg-badge-icon-space-size);
  height: var(--rtg-badge-icon-space-size);
  pointer-events: none;
}

/*
 * --------------------------------------------------
 *  VARIANTS
 * --------------------------------------------------
 */

/* * DEFAULT * */

rtg-badge > [data-slot=badge][data-variant=default] {
  color: var(--rtg-badge-default-color-text);
  background-color: var(--rtg-badge-default-color-bg);
}

rtg-badge > a[data-slot=badge][data-variant=default]:hover {
  background-color: var(--rtg-badge-default-color-bg-hover);
}

/* * SECONDARY * */

rtg-badge > [data-slot=badge][data-variant=secondary] {
  color: var(--rtg-badge-secondary-color-text);
  background-color: var(--rtg-badge-secondary-color-bg);
}

rtg-badge > a[data-slot=badge][data-variant=secondary]:hover {
  background-color: var(--rtg-badge-secondary-color-bg-hover);
}

/* * OUTLINE * */

rtg-badge > [data-slot=badge][data-variant=outline] {
  color: var(--rtg-badge-outline-color-text);
  border-color: var(--rtg-badge-outline-color-border);
}

rtg-badge > a[data-slot=badge][data-variant=outline]:hover {
  color: var(--rtg-badge-outline-color-text-hover);
  background-color: var(--rtg-badge-outline-color-bg-hover);
}

/* * GHOST * */

rtg-badge > a[data-slot=badge][data-variant=ghost]:hover {
  color: var(--rtg-badge-ghost-color-text-hover);
  background-color: var(--rtg-badge-ghost-color-bg-hover);
}

/* * DESTRUCTIVE * */

rtg-badge > [data-slot=badge][data-variant=destructive] {
  color: var(--rtg-badge-destructive-color-text);
  background-color: var(--rtg-badge-destructive-color-bg);
}

rtg-badge > a[data-slot=badge][data-variant=destructive]:hover {
  background-color: var(--rtg-badge-destructive-color-bg-hover);
}

rtg-badge > [data-slot=badge][data-variant=destructive]:focus-visible {
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-badge-width-ring-focus) var(--rtg-badge-destructive-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* * LINK * */

rtg-badge > [data-slot=badge][data-variant=link] {
  color: var(--rtg-badge-link-color-text);
  text-underline-offset: 4px;
}

rtg-badge > [data-slot=badge][data-variant=link]:hover {
  text-decoration-line: underline;
}

/*
 * ===========================================================================
 *  BUTTON COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  COMMON
 * --------------------------------------------------
 */

rtg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

rtg-button > [data-slot="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  font-weight: var(--rtg-button-font-weight);
  white-space: nowrap;

  background-clip: padding-box;

  border: var(--rtg-button-width-border) solid var(--rtg-button-color-border);
  outline: none;

  transition-property: all;
  transition-timing-function: var(--rtg-button-motion-fn);
  transition-duration: var(--rtg-button-motion-duration);
}

rtg-button > [data-slot="button"]:focus-visible {
  border-color: var(--rtg-button-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-button-width-ring-focus) var(--rtg-button-color-ring-focus),
    0 0 rgb(0 0 0);
}

rtg-button > [data-slot="button"]:disabled {
  opacity: var(--rtg-button-opacity-disabled);
  pointer-events: none;
}

rtg-button > [data-slot="button"][aria-invalid] {
  border-color: var(--rtg-button-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-button-width-ring-invalid) var(--rtg-button-color-ring-invalid),
    0 0 rgb(0 0 0);
}

rtg-button > [data-slot="button"] > :is(svg, rtg-spinner, rtg-kbd) {
  flex-shrink: 0;
  pointer-events: none;
}

/*
 * --------------------------------------------------
 *  VARIANTS
 * --------------------------------------------------
 */

/* * DEFAULT * */

rtg-button > [data-slot="button"][data-variant="default"] {
  color: var(--rtg-button-default-color-text);
  background-color: var(--rtg-button-default-color-bg);
}

rtg-button > [data-slot="button"][data-variant="default"]:hover {
  background-color: var(--rtg-button-default-color-bg-hover);
}

/* * SECONDARY * */

rtg-button > [data-slot="button"][data-variant="secondary"] {
  color: var(--rtg-button-secondary-color-text);
  background-color: var(--rtg-button-secondary-color-bg);
}

rtg-button > [data-slot="button"][data-variant="secondary"]:hover {
  background-color: var(--rtg-button-secondary-color-bg-hover);
}

rtg-button > [data-slot="button"][data-variant="secondary"][aria-expanded] {
  color: var(--rtg-button-secondary-color-text-expanded);
  background-color: var(--rtg-button-secondary-color-bg-expanded);
}

/* * OUTLINE * */

rtg-button > [data-slot="button"][data-variant="outline"] {
  background-color: var(--rtg-button-outline-color-bg);
  border-color: var(--rtg-button-outline-color-border);
}

rtg-button > [data-slot="button"][data-variant="outline"]:hover {
  color: var(--rtg-button-outline-color-text-hover);
  background-color: var(--rtg-button-outline-color-bg-hover);
}

rtg-button > [data-slot="button"][data-variant="outline"][aria-expanded] {
  color: var(--rtg-button-outline-color-text-expanded);
  background-color: var(--rtg-button-outline-color-bg-expanded);
}

/* * GHOST * */

rtg-button > [data-slot="button"][data-variant="ghost"]:hover {
  color: var(--rtg-button-ghost-color-text-hover);
  background-color: var(--rtg-button-ghost-color-bg-hover);
}

rtg-button > [data-slot="button"][data-variant="ghost"][aria-expanded] {
  color: var(--rtg-button-ghost-color-text-expanded);
  background-color: var(--rtg-button-ghost-color-bg-expanded);
}

/* * DESTRUCTIVE * */

rtg-button > [data-slot="button"][data-variant="destructive"] {
  color: var(--rtg-button-destructive-color-text);
  background-color: var(--rtg-button-destructive-color-bg);
}

rtg-button > [data-slot="button"][data-variant="destructive"]:hover {
  background-color: var(--rtg-button-destructive-color-bg-hover);
}

rtg-button > [data-slot="button"][data-variant="destructive"]:focus-visible {
  border-color: var(--rtg-button-destructive-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-button-width-ring-focus) var(--rtg-button-destructive-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* * LINK * */

rtg-button > [data-slot="button"][data-variant="link"] {
  color: var(--rtg-button-link-color-text);
  text-underline-offset: 4px;
}

rtg-button > [data-slot="button"][data-variant="link"]:hover {
  text-decoration-line: underline;
}

/*
 * --------------------------------------------------
 *  SIZES
 * --------------------------------------------------
 */

/* * DEFAULT * */

rtg-button:has(> [data-slot="button"][data-size="default"]) {
  height: var(--rtg-button-space-size-default);
}

rtg-button > [data-slot="button"][data-size="default"] {
  gap: var(--rtg-button-space-gap-default);

  padding-left: var(--rtg-button-space-px-default);
  padding-right: var(--rtg-button-space-px-default);

  font-size: var(--rtg-button-font-size-default);
  line-height: var(--rtg-button-font-line-height-default);

  border-radius: var(--rtg-button-radius-default);
}

rtg-button > [data-slot="button"][data-size="default"]:has(.rtg-icon-inline-start) {
  padding-left: var(--rtg-button-space-px-default-has-icon);
}

rtg-button > [data-slot="button"][data-size="default"]:has(.rtg-icon-inline-end) {
  padding-right: var(--rtg-button-space-px-default-has-icon);
}

rtg-button > [data-slot="button"][data-size="default"] svg {
  width: var(--rtg-button-icon-space-size-default);
  height: var(--rtg-button-icon-space-size-default);
}

/* * EXTRA SMALL & ICON EXTRA SMALL * */

/* xs & icon-xs */

rtg-button:has(> [data-slot="button"][data-size$="xs"]) {
  height: var(--rtg-button-space-size-xs);
}

rtg-button > [data-slot="button"][data-size$="xs"] {
  font-size: var(--rtg-button-font-size-xs);
  line-height: var(--rtg-button-font-line-height-xs);

  border-radius: var(--rtg-button-radius-xs);
}

/* xs */

rtg-button > [data-slot="button"][data-size="xs"] {
  gap: var(--rtg-button-space-gap-xs);

  padding-left: var(--rtg-button-space-px-xs);
  padding-right: var(--rtg-button-space-px-xs);
}

rtg-button > [data-slot="button"][data-size="xs"]:has(.rtg-icon-inline-start) {
  padding-left: var(--rtg-button-space-px-xs-has-icon);
}

rtg-button > [data-slot="button"][data-size="xs"]:has(.rtg-icon-inline-end) {
  padding-right: var(--rtg-button-space-px-xs-has-icon);
}

/* icon-xs */

rtg-button:has(> [data-slot="button"][data-size="icon-xs"]) {
  width: var(--rtg-button-space-size-xs);
}

/* xs & icon-xs: in button-group */

[data-slot="button-group"] > rtg-button > [data-slot="button"][data-size$="xs"] {
  border-radius: var(--rtg-button-radius-in-group);
}

/* xs & icon-xs: icon/svg child */

rtg-button > [data-slot="button"][data-size$="xs"] svg {
  width: var(--rtg-button-icon-space-size-xs);
  height: var(--rtg-button-icon-space-size-xs);
}

/* * SMALL & ICON SMALL * */

/* sm & icon-sm */

rtg-button:has(> [data-slot="button"][data-size$="sm"]) {
  height: var(--rtg-button-space-size-sm);
}

rtg-button > [data-slot="button"][data-size$="sm"] {
  font-size: var(--rtg-button-font-size-sm);
  line-height: var(--rtg-button-font-line-height-sm);

  border-radius: var(--rtg-button-radius-sm);
}

/* sm */

rtg-button > [data-slot="button"][data-size="sm"] {
  gap: var(--rtg-button-space-gap-sm);

  padding-left: var(--rtg-button-space-px-sm);
  padding-right: var(--rtg-button-space-px-sm);
}

rtg-button > [data-slot="button"][data-size="sm"]:has(.rtg-icon-inline-start) {
  padding-left: var(--rtg-button-space-px-sm-has-icon);
}

rtg-button > [data-slot="button"][data-size="sm"]:has(.rtg-icon-inline-end) {
  padding-right: var(--rtg-button-space-px-sm-has-icon);
}

/* icon-sm */

rtg-button:has(> [data-slot="button"][data-size="icon-sm"]) {
  width: var(--rtg-button-space-size-sm);
}

/* sm & icon-sm: in button-group */

[data-slot="button-group"] > rtg-button > [data-slot="button"][data-size$="sm"] {
  border-radius: var(--rtg-button-radius-in-group);
}

/* sm & icon-sm: icon/svg child */

rtg-button > [data-slot="button"][data-size$="sm"] svg {
  width: var(--rtg-button-icon-space-size-sm);
  height: var(--rtg-button-icon-space-size-sm);
}

/* * LARGE & ICON LARGE * */

/* lg & icon-lg */

rtg-button:has(> [data-slot="button"][data-size$="lg"]) {
  height: var(--rtg-button-space-size-lg);
}

rtg-button > [data-slot="button"][data-size$="lg"] {
  font-size: var(--rtg-button-font-size-lg);
  line-height: var(--rtg-button-font-line-height-lg);

  border-radius: var(--rtg-button-radius-lg);
}

/* lg */

rtg-button > [data-slot="button"][data-size="lg"] {
  gap: var(--rtg-button-space-gap-lg);

  padding-left: var(--rtg-button-space-px-lg);
  padding-right: var(--rtg-button-space-px-lg);
}

rtg-button > [data-slot="button"][data-size="lg"]:has(.rtg-icon-inline-start) {
  padding-left: var(--rtg-button-space-px-lg-has-icon);
}

rtg-button > [data-slot="button"][data-size="lg"]:has(.rtg-icon-inline-end) {
  padding-right: var(--rtg-button-space-px-lg-has-icon);
}

/* icon-lg */

rtg-button:has(> [data-slot="button"][data-size="icon-lg"]) {
  width: var(--rtg-button-space-size-lg);
}

/* lg & icon-lg: icon/svg child */

rtg-button > [data-slot="button"][data-size$="lg"] svg {
  width: var(--rtg-button-icon-space-size-lg);
  height: var(--rtg-button-icon-space-size-lg);
}

/* * ICON * */

rtg-button:has(> [data-slot="button"][data-size="icon"]) {
  width: var(--rtg-button-space-size-default);
  height: var(--rtg-button-space-size-default);
}

rtg-button > [data-slot="button"][data-size="icon"] {
  font-size: var(--rtg-button-font-size-default);
  line-height: var(--rtg-button-font-line-height-default);

  border-radius: var(--rtg-button-radius-default);
}

rtg-button > [data-slot="button"][data-size="icon"] svg {
  width: var(--rtg-button-icon-space-size-default);
  height: var(--rtg-button-icon-space-size-default);
}

/*
 * ===========================================================================
 *  CARD COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  CARD
 * --------------------------------------------------
 */

rtg-card {
  width: var(--rtg-card-space-width);
}

rtg-card > [data-slot='card'] {
  width: 100%;
  display: flex;
  overflow: hidden;

  flex-direction: column;
  gap: var(--rtg-card-space-gap);

  padding-top: var(--rtg-card-space-py);
  padding-bottom: var(--rtg-card-space-py);

  font-size: var(--rtg-card-font-size);
  line-height: var(--rtg-card-font-line-height);
  color: var(--rtg-card-color-text);

  background-color: var(--rtg-card-color-bg);

  border-radius: var(--rtg-card-radius);

  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-card-width-ring) var(--rtg-card-color-ring),
    0 0 rgb(0 0 0);
}

rtg-card > [data-slot='card'][data-size='sm'] {
  gap: var(--rtg-card-space-gap-sm);

  padding-top: var(--rtg-card-space-py-sm);
  padding-bottom: var(--rtg-card-space-py-sm);
}

rtg-card > [data-slot='card']:has([data-slot='card-footer'][data-border]) {
  padding-bottom: 0;
}

rtg-card > [data-slot='card']:has(> img:first-child) {
  padding-top: 0;
}

rtg-card [data-slot='card'] > img:first-child {
  border-top-left-radius: var(--rtg-card-radius);
  border-top-right-radius: var(--rtg-card-radius);
}

rtg-card [data-slot='card'] > img:last-child {
  border-bottom-left-radius: var(--rtg-card-radius);
  border-bottom-right-radius: var(--rtg-card-radius);
}

/*
 * --------------------------------------------------
 *  CARD HEADER
 * --------------------------------------------------
 */

rtg-card-header > [data-slot='card-header'] {
  display: grid;
  grid-auto-rows: min-content;
  align-items: start;
  gap: var(--rtg-card-header-space-gap);

  padding-left: var(--rtg-card-space-px);
  padding-right: var(--rtg-card-space-px);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  > rtg-card-header
  > [data-slot='card-header'] {
  padding-left: var(--rtg-card-space-px-sm);
  padding-right: var(--rtg-card-space-px-sm);
}

rtg-card-header > [data-slot='card-header'][data-border] {
  padding-bottom: var(--rtg-card-space-py);
  border-bottom: var(--rtg-card-header-width-border) solid
    var(--rtg-card-header-color-border);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  > rtg-card-header
  > [data-slot='card-header'][data-border] {
  padding-bottom: var(--rtg-card-space-py-sm);
}

rtg-card-header > [data-slot='card-header']:has(> rtg-card-description) {
  grid-template-rows: auto auto;
}

rtg-card-header > [data-slot='card-header']:has(> rtg-card-action) {
  grid-template-columns: 1fr auto;
}

/*
 * --------------------------------------------------
 *  CARD TITLE
 * --------------------------------------------------
 */

rtg-card-title > [data-slot='card-title'] {
  font-size: var(--rtg-card-title-font-size);
  line-height: var(--rtg-card-title-font-line-height);
  font-weight: var(--rtg-card-title-font-weight);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  rtg-card-title
  > [data-slot='card-title'] {
  font-size: var(--rtg-card-title-font-size-sm);
  line-height: var(--rtg-card-title-font-line-height-sm);
}

/*
 * --------------------------------------------------
 *  CARD DESCRIPTION
 * --------------------------------------------------
 */

rtg-card-description > [data-slot='card-description'] {
  font-size: var(--rtg-card-description-font-size);
  line-height: var(--rtg-card-description-font-line-height);
  color: var(--rtg-card-description-color-text);
}

/*
 * --------------------------------------------------
 *  CARD ACTION
 * --------------------------------------------------
 */

rtg-card-action {
  grid-column-start: 2;
  grid-row: span 2 / span 2;
  grid-row-start: 1;
  align-self: flex-start;
  justify-self: end;
}

/*
 * --------------------------------------------------
 *  CARD CONTENT
 * --------------------------------------------------
 */

rtg-card-content > [data-slot='card-content'] {
  padding-left: var(--rtg-card-space-px);
  padding-right: var(--rtg-card-space-px);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  > rtg-card-content
  > [data-slot='card-content'] {
  padding-left: var(--rtg-card-space-px-sm);
  padding-right: var(--rtg-card-space-px-sm);
}

/*
 * --------------------------------------------------
 *  CARD FOOTER
 * --------------------------------------------------
 */

rtg-card-footer > [data-slot='card-footer'] {
  display: flex;
  align-items: center;

  padding-left: var(--rtg-card-space-px);
  padding-right: var(--rtg-card-space-px);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  > rtg-card-footer
  > [data-slot='card-footer'] {
  padding-left: var(--rtg-card-space-px-sm);
  padding-right: var(--rtg-card-space-px-sm);
}

rtg-card-footer > [data-slot='card-footer'][data-border] {
  padding-block: var(--rtg-card-space-py);
  background-color: hsl(var(--sb-sem-color-bg-surface-quaternary));
  border-top: var(--rtg-card-footer-width-border) solid
    var(--rtg-card-footer-color-border);
}

rtg-card
  > [data-slot='card'][data-size='sm']
  > rtg-card-footer
  > [data-slot='card-footer'][data-border] {
  padding-block: var(--rtg-card-space-py-sm);
}

/*
 * ===========================================================================
 *  CHECKBOX COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  CHECKBOX
 * --------------------------------------------------
 */

rtg-checkbox {
  display: flex;
  position: relative;

  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

rtg-checkbox > [data-slot="checkbox"] {
  display: flex;
  position: relative;

  align-items: center;
  justify-content: center;

  width: var(--rtg-checkbox-space-size);
  height: var(--rtg-checkbox-space-size);

  background-color: var(--rtg-checkbox-color-bg);

  border: var(--rtg-checkbox-width-border) solid var(--rtg-checkbox-color-border);
  border-radius: var(--rtg-checkbox-radius);
  outline: none;

  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--rtg-checkbox-motion-fn);
  transition-duration: var(--rtg-checkbox-motion-duration);
}

/* CHECKED */

rtg-checkbox > [data-slot="checkbox"][data-state="checked"] {
  color: var(--rtg-checkbox-color-text-checked);
  background-color: var(--rtg-checkbox-color-bg-checked);
  border-color: var(--rtg-checkbox-color-border-checked);
}

/* INVALID */

rtg-checkbox > [data-slot="checkbox"][aria-invalid] {
  border-color: var(--rtg-checkbox-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-checkbox-width-ring-invalid) var(--rtg-checkbox-color-ring-invalid),
    0 0 rgb(0 0 0);
}

/* CHECKED & INVAlID */

rtg-checkbox > [data-slot="checkbox"][data-state="checked"][aria-invalid] {
  border-color: var(--rtg-checkbox-color-border-checked);
}

/* FOCUS VISIBLE */

rtg-checkbox > [data-slot="checkbox"]:focus-visible {
  border-color: var(--rtg-checkbox-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-checkbox-width-ring-focus) var(--rtg-checkbox-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* DISABLED */

rtg-checkbox > [data-slot="checkbox"]:disabled {
  opacity: var(--rtg-checkbox-opacity-disabled);
  cursor: not-allowed;
}

rtg-field > [data-slot="field"][data-disabled] rtg-checkbox > [data-slot="checkbox"] {
  opacity: var(--rtg-checkbox-opacity-disabled);
}

/* * AFTER (::after) * */

rtg-checkbox > [data-slot="checkbox"]::after {
  position: absolute;
  inset-inline: var(--rtg-checkbox-after-space-inset-x);
  inset-block: var(--rtg-checkbox-after-space-inset-y);
}

/*
 * --------------------------------------------------
 *  CHECKBOX INDICATOR
 * --------------------------------------------------
 */

rtg-checkbox > [data-slot="checkbox"] > [data-slot="checkbox-indicator"] {
  display: grid;
  place-content: center;
  color: currentColor;
  transition-property: none;
  pointer-events: none;
}

/* * CHECKBOX INDICATOR ICON * */

rtg-checkbox > [data-slot="checkbox"] > [data-slot="checkbox-indicator"] > svg {
  width: var(--rtg-checkbox-indicator-icon-space-size);
  height: var(--rtg-checkbox-indicator-icon-space-size);
}

/*
 * --------------------------------------------------
 *  CHECKBOX INPUT
 * --------------------------------------------------
 */

rtg-checkbox > [data-slot="checkbox-input"] {
  position: absolute;
  margin: 0px;
  width: var(--rtg-checkbox-space-size);
  height: var(--rtg-checkbox-space-size);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

/*
 * ===========================================================================
 *  EMPTY COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  EMPTY
 * --------------------------------------------------
 */

rtg-empty {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

rtg-empty > [data-slot=empty] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rtg-empty-space-gap);
  padding: var(--rtg-empty-space-p);
  width: 100%;
  text-align: center;
  text-wrap: balance;
  border-radius: var(--rtg-empty-radius);
}

rtg-empty > [data-slot=empty][data-border] {
  border: var(--rtg-empty-width-border) dashed var(--rtg-empty-color-border);
}

/*
 * --------------------------------------------------
 *  EMPTY HEADER
 * --------------------------------------------------
 */

rtg-empty-header {
  max-width: var(--rtg-empty-header-space-max-w);
}

rtg-empty-header > [data-slot=empty-header] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rtg-empty-header-space-gap);
}

/*
 * --------------------------------------------------
 *  EMPTY MEDIA
 * --------------------------------------------------
 */

rtg-empty-media {
  flex-shrink: 0;
}

rtg-empty-media > [data-slot=empty-media] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--rtg-empty-media-space-mb);
}

rtg-empty-media > [data-slot=empty-media] svg {
  flex-shrink: 0;
  pointer-events: none;
}

rtg-empty-media > [data-slot=empty-media][data-variant=default] {
  background-color: var(--rtg-empty-media-default-color-bg);
}

rtg-empty-media > [data-slot=empty-media][data-variant=icon] {
  width: var(--rtg-empty-media-icon-space-size);
  height: var(--rtg-empty-media-icon-space-size);
  color: var(--rtg-empty-media-icon-color-text);
  background-color: var(--rtg-empty-media-icon-color-bg);
  border-radius: var(--rtg-empty-media-icon-radius);
}

rtg-empty-media > [data-slot=empty-media][data-variant=icon] svg {
  width: var(--rtg-empty-media-icon-icon-space-size);
  height: var(--rtg-empty-media-icon-icon-space-size);
}

/*
 * --------------------------------------------------
 *  EMPTY TITLE
 * --------------------------------------------------
 */

rtg-empty-title > [data-slot=empty-title] {
  font-family: var(--rtg-empty-title-font-family);
  font-size: var(--rtg-empty-title-font-size);
  line-height: var(--rtg-empty-title-font-line-height);
  font-weight: var(--rtg-empty-title-font-weight);
  letter-spacing: var(--rtg-empty-title-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  EMPTY DESCRIPTION
 * --------------------------------------------------
 */

rtg-empty-description > [data-slot=empty-description] {
  font-size: var(--rtg-empty-description-font-size);
  line-height: var(--rtg-empty-description-font-line-height);
  color: var(--rtg-empty-description-color-text);
}

rtg-empty-description > [data-slot=empty-description] > a {
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

rtg-empty-description > [data-slot=empty-description] > a:hover {
  color: var(--rtg-empty-description-color-link-hover);
}

/*
 * --------------------------------------------------
 *  EMPTY CONTENT
 * --------------------------------------------------
 */

rtg-empty-content {
  width: 100%;
  max-width: var(--rtg-empty-content-space-max-w);
  min-width: 0;
}

rtg-empty-content > [data-slot=empty-content] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rtg-empty-content-space-gap);
  width: 100%;
  font-size: var(--rtg-empty-content-font-size);
  line-height: var(--rtg-empty-content-font-line-height);
  text-wrap: balance;
}

/*
 * ===========================================================================
 *  FIELD COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  FIELD SET
 * --------------------------------------------------
 */

rtg-field-set > [data-slot="field-set"] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-field-set-space-gap);
}

rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="checkbox"]) {
  gap: var(--rtg-field-set-space-gap-has-checkbox-group);
}

rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="radio"]) {
  gap: var(--rtg-field-set-space-gap-has-radio-group);
}

/*
 * --------------------------------------------------
 *  FIELD LEGEND
 * --------------------------------------------------
 */

rtg-field-legend {
  margin-bottom: calc(var(--rtg-field-legend-space-mb) - var(--rtg-field-set-space-gap));
}

rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="checkbox"]) rtg-field-legend {
  margin-bottom: calc(var(--rtg-field-legend-space-mb) - var(--rtg-field-set-space-gap-has-checkbox-group));
}

rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="radio"]) rtg-field-legend {
  margin-bottom: calc(var(--rtg-field-legend-space-mb) - var(--rtg-field-set-space-gap-has-radio-group));
}

rtg-field-legend > [data-slot="field-legend"] {
  font-weight: var(--rtg-field-legend-font-weight);
}

/* * VARIANTS * */

rtg-field-legend > [data-slot="field-legend"][data-variant="label"] {
  font-size: var(--rtg-field-legend-label-font-size);
  line-height: var(--rtg-field-legend-label-font-line-height);
}

rtg-field-legend > [data-slot="field-legend"][data-variant="legend"] {
  font-size: var(--rtg-field-legend-legend-font-size);
  line-height: var(--rtg-field-legend-legend-font-line-height);
}

/*
 * --------------------------------------------------
 *  FIELD GROUP
 * --------------------------------------------------
 */

rtg-field-group {
  width: 100%;

  container-name: field-group;
  container-type: inline-size;
}

rtg-field-group > [data-slot="field-group"] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-field-group-space-gap);
  width: 100%;
}

rtg-field-group > [data-slot="field-group"][data-type="checkbox"] {
  gap: var(--rtg-field-group-space-gap-is-checkbox-group);
}

rtg-field-group > [data-slot="field-group"] > rtg-field-group > [data-slot="field-group"] {
  gap: var(--rtg-field-group-space-gap-is-nested);
}

/*
 * --------------------------------------------------
 *  FIELD
 * --------------------------------------------------
 */

rtg-field {
  width: 100%;
}

rtg-field > [data-slot="field"] {
  display: flex;
  gap: var(--rtg-field-space-gap);
  width: 100%;
}

/* INVALID */

rtg-field > [data-slot="field"][data-invalid="true"] {
  color: var(--rtg-field-color-text-invalid);
}

/* * ORIENTATIONS * */

/* VERTICAL */

rtg-field > [data-slot="field"][data-orientation="vertical"] {
  flex-direction: column;
}

rtg-field > [data-slot="field"][data-orientation="vertical"] > * {
  width: 100%;
}

rtg-field > [data-slot="field"][data-orientation="vertical"] > .rtg-sr-only {
  width: auto;
}

/* HORIZONTAL */

rtg-field > [data-slot="field"][data-orientation="horizontal"] {
  flex-direction: row;
  align-items: center;
}

rtg-field > [data-slot="field"][data-orientation="horizontal"] > *:has(> [data-slot="field-label"]) {
  flex: auto;
}

rtg-field > [data-slot="field"][data-orientation="horizontal"]:has(> rtg-field-content) {
  align-items: start;
}

/* Checkbox Child */

rtg-field > [data-slot="field"][data-orientation="horizontal"]:has(> rtg-field-content) > *:has(> [role="checkbox"]) {
  margin-top: var(--rtg-field-checkbox-space-mt);
}

/* Radio Child */

rtg-field > [data-slot="field"][data-orientation="horizontal"]:has(> rtg-field-content) > *:has(> [role="radio"]) {
  margin-top: var(--rtg-field-radio-space-mt);
}

/* RESPONSIVE */

rtg-field > [data-slot="field"][data-orientation="responsive"] {
  flex-direction: column;
}

rtg-field > [data-slot="field"][data-orientation="responsive"] > * {
  width: 100%;
}

rtg-field > [data-slot="field"][data-orientation="responsive"] > .rtg-sr-only {
  width: auto;
}

@container field-group (width >= 28rem) {
  rtg-field > [data-slot="field"][data-orientation="responsive"] {
    flex-direction: row;
    align-items: center;
  }

  rtg-field > [data-slot="field"][data-orientation="responsive"] > * {
    width: auto;
  }

  rtg-field > [data-slot="field"][data-orientation="responsive"] > *:has(> [data-slot="field-label"]) {
    flex: auto;
  }

  rtg-field > [data-slot="field"][data-orientation="responsive"]:has(> rtg-field-content) {
    align-items: start;
  }

  /* Checkbox Child */
  rtg-field > [data-slot="field"][data-orientation="responsive"]:has(> rtg-field-content) > *:has(> [role="checkbox"]) {
    margin-top: var(--rtg-field-checkbox-space-mt);
  }

  /* Radio Child */
  rtg-field > [data-slot="field"][data-orientation="responsive"]:has(> rtg-field-content) > *:has(> [role="radio"]) {
    margin-top: var(--rtg-field-radio-space-mt);
  }
}

/*
 * --------------------------------------------------
 *  FIELD CONTENT
 * --------------------------------------------------
 */

rtg-field-content {
  flex: 1;
}

rtg-field-content > [data-slot="field-content"] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-field-content-space-gap);

  line-height: var(--rtg-field-content-font-line-height);
}

/*
 * --------------------------------------------------
 *  FIELD LABEL
 * --------------------------------------------------
 */

rtg-field-label > [data-slot="field-label"] > [data-slot="label"] {
  display: flex;
  gap: var(--rtg-field-label-space-gap);
  width: -moz-fit-content;
  width: fit-content;
  line-height: var(--rtg-field-label-font-line-height);
}

rtg-field-label > [data-slot="field-label"] > [data-slot="label"]:has(> rtg-field) {
  flex-direction: column;
  width: 100%;
  border: var(--rtg-field-label-width-border-has-field) solid var(--rtg-field-label-color-border-has-field);
  border-radius: var(--rtg-field-label-radius-has-field);
}

rtg-field-label > [data-slot="field-label"] > [data-slot="label"]:has([data-state="checked"]) {
  background-color: var(--rtg-field-label-color-bg-has-checked);
  border-color: var(--rtg-field-label-color-border-has-checked);
}

rtg-field > [data-slot="field"][data-disabled="true"] rtg-field-label > [data-slot="field-label"] > [data-slot="label"] {
  opacity: var(--rtg-field-label-opacity-disabled);
}

/* * FIELD CHILD * */

rtg-field-label > [data-slot="field-label"] > [data-slot="label"] > rtg-field > [data-slot="field"] {
  padding: var(--rtg-field-space-p-in-label);
}

/*
 * --------------------------------------------------
 *  FIELD TITLE
 * --------------------------------------------------
 */

rtg-field-title > [data-slot="field-label"] {
  display: flex;
  align-items: center;
  gap: var(--rtg-field-title-space-gap);

  width: -moz-fit-content;

  width: fit-content;

  font-size: var(--rtg-field-title-font-size);
  line-height: var(--rtg-field-title-font-line-height);
  font-weight: var(--rtg-field-title-font-weight);
}

rtg-field > [data-slot="field"][data-disabled="true"] rtg-field-title > [data-slot="field-label"] {
  opacity: var(--rtg-field-title-opacity-disabled);
}

/*
 * --------------------------------------------------
 *  FIELD DESCRIPTION
 * --------------------------------------------------
 */

rtg-field-description > [data-slot="field-description"] {
  font-size: var(--rtg-field-description-font-size);
  line-height: var(--rtg-field-description-font-line-height);
  font-weight: var(--rtg-field-description-font-weight);
  color: var(--rtg-field-description-color-text);
  text-align: left;
}

rtg-field-legend:has(> [data-slot="field-legend"][data-variant="legend"]) + rtg-field-description {
  margin-top: var(--rtg-field-description-space-mt-after-legend);
  margin-top: calc(var(--rtg-field-description-space-mt-after-legend));
}

rtg-field-description:nth-last-child(2) {
  margin-top: var(--rtg-field-description-space-mt-is-2-last);
}

rtg-field-description > [data-slot="field-description"] > a {
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

rtg-field-description > [data-slot="field-description"] > a:hover {
  color: var(--rtg-field-description-link-color-text-hover);
}

rtg-field > [data-slot="field"][data-orientation="horizontal"] > rtg-field-description > [data-slot="field-description"] {
  text-wrap: balance;
}

/*
 * --------------------------------------------------
 *  FIELD SEPARATOR
 * --------------------------------------------------
 */

rtg-field-separator > [data-slot="field-separator"] {
  position: relative;

  margin-top: var(--rtg-field-separator-space-my);
  margin-bottom: var(--rtg-field-separator-space-my);

  height: var(--rtg-field-separator-space-h);

  font-size: var(--rtg-field-separator-font-size);
  line-height: var(--rtg-field-separator-font-line-height);
}

/* * SEPARATOR * */

rtg-field-separator > [data-slot="field-separator"] > rtg-separator {
  position: absolute;
  inset: 0;
  top: calc(0.5 * 100%);
}

/* * CONTENT * */

rtg-field-separator > [data-slot="field-separator"] > [data-slot="field-separator-content"] {
  display: block;
  position: relative;

  padding-left: var(--rtg-field-separator-content-space-px);
  padding-right: var(--rtg-field-separator-content-space-px);
  margin-left: auto;
  margin-right: auto;

  width: -moz-fit-content;

  width: fit-content;

  color: var(--rtg-field-separator-content-color-text);

  background-color: var(--rtg-field-separator-content-color-bg);
}

/*
 * --------------------------------------------------
 *  FIELD ERROR
 * --------------------------------------------------
 */

rtg-field-error > [data-slot="field-error"] {
  font-size: var(--rtg-field-error-font-size);
  line-height: var(--rtg-field-error-font-line-height);
  font-weight: var(--rtg-field-error-font-weight);
  color: var(--rtg-field-error-color-text);
}

rtg-field-error > [data-slot="field-error"] > [data-slot="field-error-content"] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-field-error-content-space-gap);

  margin-left: var(--rtg-field-error-content-space-ml);

  list-style-type: disc;
}

/*
 * ===========================================================================
 *  INPUT COMPONENT STYLES
 * ===========================================================================
 */

rtg-input {
  width: 100%;
  min-width: 0;
}

rtg-input > [data-slot="input"] {
  width: 100%;
  height: var(--rtg-input-space-h);

  padding: var(--rtg-input-space-py) var(--rtg-input-space-px);

  font-size: var(--rtg-input-font-size-vw-sm);
  line-height: var(--rtg-input-font-line-height-vw-sm);

  background-color: var(--rtg-input-color-bg);

  border: var(--rtg-input-width-border) solid var(--rtg-input-color-border);
  border-radius: var(--rtg-input-radius);
  outline: none;

  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--rtg-input-motion-fn);
  transition-duration: var(--rtg-input-motion-duration);
}

@media (width >= 48rem) {
  rtg-input > [data-slot="input"] {
    font-size: var(--rtg-input-font-size);
    line-height: var(--rtg-input-font-line-height);
  }
}

/* FOCUS VISIBLE */

rtg-input > [data-slot="input"]:focus-visible {
  border-color: var(--rtg-input-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-width-ring-focus) var(--rtg-input-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* INVALID */

rtg-input > [data-slot="input"][aria-invalid] {
  border-color: var(--rtg-input-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-width-ring-invalid) var(--rtg-input-color-ring-invalid),
    0 0 rgb(0 0 0);
}

/* DISABLED */

rtg-input > [data-slot="input"]:disabled {
  background-color: var(--rtg-input-color-bg-disabled);
  opacity: var(--rtg-input-opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

/* * PLACEHOLDER * */

rtg-input > [data-slot="input"]::-moz-placeholder {
  color: var(--rtg-input-placeholder-color-text);
}

rtg-input > [data-slot="input"]::placeholder {
  color: var(--rtg-input-placeholder-color-text);
}

/* * FILE SELECTOR BUTTON * */

rtg-input > [data-slot="input"]::file-selector-button {
  display: inline-flex;

  height: var(--rtg-input-file-button-space-h);

  font-size: var(--rtg-input-file-button-font-size);
  line-height: var(--rtg-input-file-button-font-line-height);
  font-weight: var(--rtg-input-file-button-font-weight);
  color: var(--rtg-input-file-button-color-text);

  background-color: var(--rtg-input-file-button-color-bg);

  border-width: var(--rtg-input-file-button-width-border);
}

/*
 * ===========================================================================
 *  INPUT GROUP COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  INPUT GROUP
 * --------------------------------------------------
 */

rtg-input-group {
  display: flex;
  width: 100%;
  min-width: 0;
}

rtg-input-group > [data-slot=input-group] {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--rtg-input-group-space-h);
  background-color: var(--rtg-input-group-color-bg);
  border: var(--rtg-input-group-width-border) solid var(--rtg-input-group-color-border);
  border-radius: var(--rtg-input-group-radius);
  outline: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--rtg-input-group-motion-fn);
  transition-duration: var(--rtg-input-group-motion-duration);
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-start]) {
  flex-direction: column;
  height: auto;
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-end]) {
  flex-direction: column;
  height: auto;
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-textarea) {
  height: auto;
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-start]) > rtg-input-group-input > [data-slot=input-group-input] > [data-slot=input] {
  padding-left: var(--rtg-input-group-input-space-px);
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-end]) > rtg-input-group-input > [data-slot=input-group-input] > [data-slot=input] {
  padding-right: var(--rtg-input-group-input-space-px);
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-start]) > rtg-input-group-input > [data-slot=input-group-input] > [data-slot=input] {
  padding-bottom: var(--rtg-input-group-input-space-py);
}

rtg-input-group > [data-slot=input-group]:has(> rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-end]) > rtg-input-group-input > [data-slot=input-group-input] > [data-slot=input] {
  padding-top: var(--rtg-input-group-input-space-py);
}

/* TODO: When combobox is refactored */

/*
in-data-[slot=combobox-content]:focus-within:border-inherit
in-data-[slot=combobox-content]:focus-within:ring-0
*/

rtg-input-group > [data-slot=input-group]:has([disabled]) {
  background-color: var(--rtg-input-group-color-bg-disabled);
  opacity: var(--rtg-input-group-opacity-disabled);
}

rtg-input-group > [data-slot=input-group]:has([data-slot=input]:focus-visible, [data-slot=textarea]:focus-visible) {
  border-color: var(--rtg-input-group-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-group-width-ring-focus) var(--rtg-input-group-color-ring-focus),
    0 0 rgb(0 0 0);
}

rtg-input-group > [data-slot=input-group]:has([data-slot][aria-invalid=true]) {
  border-color: var(--rtg-input-group-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-group-width-ring-invalid) var(--rtg-input-group-color-ring-invalid),
    0 0 rgb(0 0 0);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP ADDON
 * --------------------------------------------------
 */

rtg-input-group-addon {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: text;
}

rtg-input-group-addon > [data-slot=input-group-addon] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rtg-input-group-addon-space-gap);
  padding-block: var(--rtg-input-group-addon-space-py);
  height: auto;
  font-size: var(--rtg-input-group-addon-font-size);
  line-height: var(--rtg-input-group-addon-font-line-height);
  font-weight: var(--rtg-input-group-addon-font-weight);
  color: var(--rtg-input-group-addon-color-text);
}

rtg-input-group > [data-slot=input-group][data-disabled=true] rtg-input-group-addon > [data-slot=input-group-addon] {
  opacity: var(--rtg-input-group-addon-opacity-disabled);
}

rtg-input-group-addon > [data-slot=input-group-addon] > svg {
  width: var(--rtg-input-group-addon-icon-space-size);
  height: var(--rtg-input-group-addon-icon-space-size);
  pointer-events: none;
}

rtg-input-group-addon > [data-slot=input-group-addon] > rtg-kbd {
  --rtg-kbd-radius: var(--rtg-input-group-addon-kbd-radius);
}

/* * ALIGN * */

/* INLINE START */

rtg-input-group-addon:has(> [data-slot=input-group-addon][data-align=inline-start]) {
  order: -9999;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-start] {
  padding-left: var(--rtg-input-group-addon-inline-space-px);
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-start]:has(> rtg-input-group-button) {
  margin-left: var(--rtg-input-group-addon-inline-space-mx-has-button);
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-start]:has(> rtg-kbd) {
  margin-left: var(--rtg-input-group-addon-inline-space-mx-has-kbd);
}

/* INLINE END */

rtg-input-group-addon:has(> [data-slot=input-group-addon][data-align=inline-end]) {
  order: 9999;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-end] {
  padding-right: var(--rtg-input-group-addon-inline-space-px);
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-end]:has(> rtg-input-group-button) {
  margin-right: var(--rtg-input-group-addon-inline-space-mx-has-button);
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=inline-end]:has(> rtg-kbd) {
  margin-right: var(--rtg-input-group-addon-inline-space-mx-has-kbd);
}

/* BLOCK START */

rtg-input-group-addon:has(> [data-slot=input-group-addon][data-align=block-start]) {
  order: -9999;
  width: 100%;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-start] {
  justify-content: start;
  padding-inline: var(--rtg-input-group-addon-block-space-px);
  padding-top: var(--rtg-input-group-addon-block-space-py);
  width: 100%;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-start][data-border] {
  padding-bottom: var(--rtg-input-group-addon-block-space-py);
  border-bottom: var(--rtg-input-group-addon-width-border) solid var(--rtg-input-group-addon-color-border);
}

/* BLOCK END */

rtg-input-group-addon:has(> [data-slot=input-group-addon][data-align=block-end]) {
  order: 9999;
  width: 100%;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-end] {
  justify-content: start;
  padding-inline: var(--rtg-input-group-addon-block-space-px);
  padding-bottom: var(--rtg-input-group-addon-block-space-py);
  width: 100%;
}

rtg-input-group-addon > [data-slot=input-group-addon][data-align=block-end][data-border] {
  padding-top: var(--rtg-input-group-addon-block-space-py);
  border-top: var(--rtg-input-group-addon-width-border) solid var(--rtg-input-group-addon-color-border);
}

/*
 * --------------------------------------------------
 *  INPUT GROUP BUTTON
 * --------------------------------------------------
 */

rtg-input-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

rtg-input-group-button > rtg-button[data-slot=input-group-button] {
  display: flex;

  --rtg-button-space-gap-sm: var(--rtg-input-group-button-space-gap-sm);
  --rtg-button-space-px-xs: var(--rtg-input-group-button-space-px-xs);
  --rtg-button-font-size-xs: var(--rtg-input-group-button-font-size);
  --rtg-button-font-size-sm: var(--rtg-input-group-button-font-size);
  --rtg-button-font-line-height-xs: var(--rtg-input-group-button-font-line-height);
  --rtg-button-font-line-height-sm: var(--rtg-input-group-button-font-line-height);
  --rtg-button-radius-xs: var(--rtg-input-group-button-radius-xs);
  --rtg-button-icon-space-size-xs: var(--rtg-input-group-button-icon-space-size-xs);
}

rtg-input-group-button > rtg-button[data-slot=input-group-button]:has(> [data-slot=button][data-size=icon-sm]) {
  --rtg-button-space-size-sm: var(--rtg-input-group-button-space-size-sm);
}

rtg-input-group-button > rtg-button[data-slot=input-group-button] > [data-slot=button] {
  display: flex;
}

/*
 * --------------------------------------------------
 *  INPUT GROUP TEXT
 * --------------------------------------------------
 */

rtg-input-group-text > [data-slot=input-group-text] {
  display: flex;
  align-items: center;
  gap: var(--rtg-input-group-text-space-gap);
  font-size: var(--rtg-input-group-text-font-size);
  line-height: var(--rtg-input-group-text-font-line-height);
  color: var(--rtg-input-group-text-color-text);
}

rtg-input-group-text > [data-slot=input-group-text] svg {
  width: var(--rtg-input-group-text-icon-space-size);
  height: var(--rtg-input-group-text-icon-space-size);
  pointer-events: none;
}

/*
 * --------------------------------------------------
 *  INPUT GROUP INPUT
 * --------------------------------------------------
 */

rtg-input-group-input {
  flex: 1;
  width: 100%;

  --rtg-input-color-bg: transparent;
  --rtg-input-width-border: 0;
  --rtg-input-radius: 0;
  --rtg-input-width-ring-focus: 0;
  --rtg-input-width-ring-invalid: 0;
  --rtg-input-color-bg-disabled: transparent;
}

/*
 * --------------------------------------------------
 *  INPUT GROUP TEXTAREA
 * --------------------------------------------------
 */

rtg-input-group-textarea {
  flex: 1;
  width: 100%;

  --rtg-textarea-color-bg: transparent;
  --rtg-textarea-width-border: 0;
  --rtg-textarea-radius: 0;
  --rtg-textarea-width-ring-focus: 0;
  --rtg-textarea-width-ring-invalid: 0;
  --rtg-textarea-color-bg-disabled: transparent;
}

rtg-input-group-textarea > rtg-textarea[data-slot=input-group-textarea] > [data-slot=textarea] {
  resize: none;
}

/*
 * ===========================================================================
 *  INPUT OTP COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  INPUT OTP
 * --------------------------------------------------
 */

/* * CONTAINER SLOT * */

rtg-input-otp > [data-slot="input-otp-container"] {
  display: flex;
  position: relative;

  align-items: center;
  gap: var(--rtg-input-otp-space-gap);

  cursor: text;
  pointer-events: none;

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;
}

/* DISABLED */

rtg-input-otp > [data-slot="input-otp-container"]:has([disabled]) {
  opacity: var(--rtg-input-otp-opacity-disabled);
  cursor: default;
}

/* * WRAPPER SLOT * */

rtg-input-otp > [data-slot="input-otp-container"] > [data-slot="input-otp-wrapper"] {
  position: absolute;
  inset: 0px;
  pointer-events: none;
}

/* * INPUT SLOT * */

rtg-input-otp > [data-slot="input-otp-container"] > [data-slot="input-otp-wrapper"] > [data-slot="input-otp"] {
  position: absolute;
  inset: 0px;
  width: calc(100% + 40px);
  height: 100%;
  display: flex;
  text-align: left;
  opacity: 1;
  color: transparent;
  pointer-events: all;
  background: transparent;
  caret-color: transparent;
  border: 0px solid transparent;
  outline: transparent solid 0px;
  box-shadow: none;
  line-height: 1;
  letter-spacing: -0.5em;
  font-size: var(--rtg-input-otp-slot-space-h);
  font-family: monospace;
  font-variant-numeric: tabular-nums;
  clip-path: inset(0px 40px 0px 0px);
}

rtg-input-otp > [data-slot="input-otp-container"] > [data-slot="input-otp-wrapper"] > [data-slot="input-otp"]:disabled {
  cursor: not-allowed;
}

/*
 * --------------------------------------------------
 *  INPUT OTP GROUP
 * --------------------------------------------------
 */

rtg-input-otp-group > [data-slot="input-otp-group"] {
  display: flex;
  align-items: center;
  border-radius: var(--rtg-input-otp-radius);
}

/* INVALID */

rtg-input-otp-group > [data-slot="input-otp-group"]:has([aria-invalid]) {
  border-style: solid;
  border-color: var(--rtg-input-otp-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-otp-width-ring-invalid) var(--rtg-input-otp-color-ring-invalid),
    0 0 rgb(0 0 0);
}

/*
 * --------------------------------------------------
 *  INPUT OTP SLOT
 * --------------------------------------------------
 */

rtg-input-otp-slot > [data-slot="input-otp-slot"] {
  display: flex;
  position: relative;

  align-items: center;
  justify-content: center;

  width: var(--rtg-input-otp-slot-space-w);
  height: var(--rtg-input-otp-slot-space-h);

  font-size: var(--rtg-input-otp-slot-font-size);
  line-height: var(--rtg-input-otp-slot-font-line-height);

  background-color: var(--rtg-input-otp-slot-color-bg);

  border-top-width: var(--rtg-input-otp-slot-width-border);
  border-right-width: var(--rtg-input-otp-slot-width-border);
  border-bottom-width: var(--rtg-input-otp-slot-width-border);
  border-style: solid;
  border-color: var(--rtg-input-otp-slot-color-border);
  outline: none;

  transition-property: all;
  transition-timing-function: var(--rtg-input-otp-slot-motion-fn);
  transition-duration: var(--rtg-input-otp-slot-motion-duration);
}

/* ACTIVE */

rtg-input-otp-slot > [data-slot="input-otp-slot"][data-state="active"] {
  z-index: 10;
  border-color: var(--rtg-input-otp-slot-color-border-active);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-otp-slot-width-ring-active) var(--rtg-input-otp-slot-color-ring-active),
    0 0 rgb(0 0 0);
}

/* INVALID */

rtg-input-otp-slot > [data-slot="input-otp-slot"][aria-invalid] {
  border-color: var(--rtg-input-otp-color-border-invalid);
}

rtg-input-otp-slot > [data-slot="input-otp-slot"][data-state="active"][aria-invalid] {
  border-color: var(--rtg-input-otp-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-input-otp-width-ring-invalid) var(--rtg-input-otp-color-ring-invalid),
    0 0 rgb(0 0 0);
}

/* * FIRST SLOT CHILD * */

rtg-input-otp-slot:first-child > [data-slot="input-otp-slot"] {
  border-left-width: var(--rtg-input-otp-slot-width-border);
  border-top-left-radius: var(--rtg-input-otp-radius);
  border-bottom-left-radius: var(--rtg-input-otp-radius);
}

/* * LAST SLOT CHILD * */

rtg-input-otp-slot:last-child > [data-slot="input-otp-slot"] {
  border-top-right-radius: var(--rtg-input-otp-radius);
  border-bottom-right-radius: var(--rtg-input-otp-radius);
}

/* * CARET WRAPPER * */

rtg-input-otp-slot > [data-slot="input-otp-slot"] > [data-slot="input-otp-caret-wrapper"] {
  display: flex;
  position: absolute;
  inset: 0px;

  align-items: center;
  justify-content: center;

  pointer-events: none;
}

/* * CARET * */

@keyframes rtg-input-otp-slot-caret-blink {
  0%, 70%, 100% { opacity: 1; }
  20%, 50% { opacity: 0; }
}

rtg-input-otp-slot > [data-slot="input-otp-slot"] > [data-slot="input-otp-slot-caret-wrapper"] > [data-slot="input-otp-slot-caret"] {
  width: var(--sb-sem-width-border);
  height: var(--sb-ref-space-4);
  background-color: hsl(var(--sb-sem-color-text));
  animation: rtg-input-otp-slot-caret-blink 1.25s ease-out infinite;
}

/*
 * --------------------------------------------------
 *  INPUT OTP SEPARATOR
 * --------------------------------------------------
 */

rtg-input-otp-separator > [data-slot="input-otp-separator"] {
  display: flex;
  align-items: center;
}

rtg-input-otp-separator > [data-slot="input-otp-separator"] svg {
  width: var(--rtg-input-otp-separator-icon-space-size);
  height: var(--rtg-input-otp-separator-icon-space-size);
}

/*
 * ===========================================================================
 *  ITEM COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  ITEM GROUP
 * --------------------------------------------------
 */

rtg-item-group {
  width: 100%;
}

rtg-item-group > [data-slot=item-group] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-item-group-space-gap-default);
  width: 100%;
}

rtg-item-group > [data-slot=item-group]:has(> rtg-item > [data-slot=item][data-size=sm]) {
  gap: var(--rtg-item-group-space-gap-sm);
}

rtg-item-group > [data-slot=item-group]:has(> rtg-item > [data-slot=item][data-size=xs]) {
  gap: var(--rtg-item-group-space-gap-xs);
}

/*
 * --------------------------------------------------
 *  ITEM SEPARATOR
 * --------------------------------------------------
 */

rtg-item-separator {
  display: contents;
}

rtg-item-separator > [data-slot=item-separator] {
  margin-top: var(--rtg-item-separator-space-my);
  margin-bottom: var(--rtg-item-separator-space-my);
}

/*
 * --------------------------------------------------
 *  ITEM
 * --------------------------------------------------
 */

rtg-item > [data-slot=item] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  font-size: var(--rtg-item-font-size);
  line-height: var(--rtg-item-font-line-height);
  border-width: var(--rtg-item-width-border);
  border-style: solid;
  border-radius: var(--rtg-item-radius);
  outline: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--rtg-item-motion-fn);
  transition-duration: var(--rtg-item-motion-duration);
}

rtg-item > [data-slot=item]:focus-visible {
  border-color: var(--rtg-item-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-item-width-ring-focus) var(--rtg-item-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* * LINK * */

rtg-item > a[data-slot=item]:hover {
  background-color: var(--rtg-item-color-bg-hover);
}

/* * VARIANTS * */

rtg-item > [data-slot=item][data-variant=default] {
  border-color: var(--rtg-item-default-color-border);
}

rtg-item > [data-slot=item][data-variant=outline] {
  border-color: var(--rtg-item-outline-color-border);
}

rtg-item > [data-slot=item][data-variant=muted] {
  background-color: var(--rtg-item-muted-color-bg);
  border-color: var(--rtg-item-muted-color-border);
}

/* * SIZES * */

rtg-item > [data-slot=item][data-size=default] {
  gap: var(--rtg-item-space-gap-default);
  padding-inline: var(--rtg-item-space-px-default);
  padding-block: var(--rtg-item-space-py-default);
}

rtg-item > [data-slot=item][data-size=sm] {
  gap: var(--rtg-item-space-gap-sm);
  padding-inline: var(--rtg-item-space-px-sm);
  padding-block: var(--rtg-item-space-py-sm);
}

rtg-item > [data-slot=item][data-size=xs] {
  gap: var(--rtg-item-space-gap-xs);
  padding-inline: var(--rtg-item-space-px-xs);
  padding-block: var(--rtg-item-space-py-xs);
}

rtg-dropdown-menu-content > [data-slot=dropdown-menu-content] rtg-item > [data-slot=item][data-size=xs] {
  padding: var(--rtg-item-space-p-xs-in-dropdown-menu);
}

/*
 * --------------------------------------------------
 *  ITEM MEDIA
 * --------------------------------------------------
 */

rtg-item-media {
  flex-shrink: 0;
}

rtg-item-media > [data-slot=item-media] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rtg-item-media-space-gap);
  flex-shrink: 0;
}

rtg-item > [data-slot=item]:has(rtg-item-description) rtg-item-media {
  align-self: flex-start;
}

rtg-item > [data-slot=item]:has(rtg-item-description) rtg-item-media > [data-slot=item-media] {
  transform: translateY(var(--rtg-item-media-space-translate-y-with-description));
}

rtg-item-media > [data-slot=item-media] svg {
  pointer-events: none;
}

rtg-item-media > [data-slot=item-media][data-variant=default] {
  background-color: var(--rtg-item-media-default-color-bg);
}

rtg-item-media > [data-slot=item-media][data-variant=icon] svg {
  width: var(--rtg-item-media-icon-icon-space-size);
  height: var(--rtg-item-media-icon-icon-space-size);
}

rtg-item-media > [data-slot=item-media][data-variant=image] {
  overflow: hidden;
  width: var(--rtg-item-media-image-space-size-default);
  height: var(--rtg-item-media-image-space-size-default);
  border-radius: var(--rtg-item-media-image-radius);
}

rtg-item > [data-slot=item][data-size=sm] rtg-item-media > [data-slot=item-media][data-variant=image] {
  width: var(--rtg-item-media-image-space-size-sm);
  height: var(--rtg-item-media-image-space-size-sm);
}

rtg-item > [data-slot=item][data-size=xs] rtg-item-media > [data-slot=item-media][data-variant=image] {
  width: var(--rtg-item-media-image-space-size-xs);
  height: var(--rtg-item-media-image-space-size-xs);
}

rtg-item-media > [data-slot=item-media][data-variant=image] img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*
 * --------------------------------------------------
 *  ITEM CONTENT
 * --------------------------------------------------
 */

rtg-item-content {
  flex: 1;
}

rtg-item-content:has(+ rtg-item-content) {
  flex: none;
}

rtg-item-content > [data-slot=item-content] {
  display: flex;
  flex-direction: column;
  gap: var(--rtg-item-content-space-gap);
}

rtg-item > [data-slot=item][data-size=xs] rtg-item-content > [data-slot=item-content] {
  gap: var(--rtg-item-content-space-gap-xs);
}

/*
 * --------------------------------------------------
 *  ITEM TITLE
 * --------------------------------------------------
 */

rtg-item-title > [data-slot=item-title] {
  display: flex;
  align-items: center;
  gap: var(--rtg-item-title-space-gap);
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--rtg-item-title-font-family);
  font-size: var(--rtg-item-title-font-size);
  line-height: var(--rtg-item-title-font-line-height);
  font-weight: var(--rtg-item-title-font-weight);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  overflow: hidden;
}

/*
 * --------------------------------------------------
 *  ITEM DESCRIPTION
 * --------------------------------------------------
 */

rtg-item-description > [data-slot=item-description] {
  text-align: left;
  font-size: var(--rtg-item-description-font-size);
  line-height: var(--rtg-item-description-font-line-height);
  font-weight: var(--rtg-item-description-font-weight);
  color: var(--rtg-item-description-color-text);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;

}

rtg-item > [data-slot=item][data-size=xs] rtg-item-description > [data-slot=item-description] {
  font-size: var(--rtg-item-description-font-size-xs);
  line-height: var(--rtg-item-description-font-line-height-xs);
}

rtg-item-description > [data-slot=item-description] > a {
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

rtg-item-description > [data-slot=item-description] > a:hover {
  color: var(--rtg-item-description-link-color-text-hover);
}

/*
 * --------------------------------------------------
 *  ITEM ACTIONS
 * --------------------------------------------------
 */

rtg-item-actions > [data-slot=item-actions] {
  display: flex;
  align-items: center;
  gap: var(--rtg-item-actions-space-gap);
}

/*
 * --------------------------------------------------
 *  ITEM HEADER
 * --------------------------------------------------
 */

rtg-item-header {
  flex-basis: 100%;
}

rtg-item-header > [data-slot=item-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rtg-item-header-space-gap);
  width: 100%;
}

/*
 * --------------------------------------------------
 *  ITEM FOOTER
 * --------------------------------------------------
 */

rtg-item-footer {
  flex-basis: 100%;
}

rtg-item-footer > [data-slot=item-footer] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rtg-item-footer-space-gap);
  width: 100%;
}

/*
 * ===========================================================================
 *  KBD COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  KBD
 * --------------------------------------------------
 */

rtg-kbd {
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

rtg-kbd > [data-slot=kbd] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rtg-kbd-space-gap);
  padding-inline: var(--rtg-kbd-space-px);
  width: -moz-fit-content;
  width: fit-content;
  height: var(--rtg-kbd-space-size);
  min-width: var(--rtg-kbd-space-size);
  font-family: var(--rtg-kbd-font-family);
  font-size: var(--rtg-kbd-font-size);
  line-height: var(--rtg-kbd-font-line-height);
  font-weight: var(--rtg-kbd-font-weight);
  color: var(--rtg-kbd-color-text);
  background-color: var(--rtg-kbd-color-bg);
  border-radius: var(--rtg-kbd-radius);
  pointer-events: none;
}

/* TODO: When tooltip is refactored */

/*
in-data-[slot=tooltip-content]:bg-background/20
dark:in-data-[slot=tooltip-content]:bg-background/10
in-data-[slot=tooltip-content]:text-background
*/

rtg-kbd > [data-slot=kbd] svg {
  width: var(--rtg-kbd-icon-space-size);
  height: var(--rtg-kbd-icon-space-size);
}

/*
 * --------------------------------------------------
 *  KBD GROUP
 * --------------------------------------------------
 */

rtg-kbd-group {
  display: inline-flex;
}

rtg-kbd-group > [data-slot=kbd-group] {
  display: inline-flex;
  align-items: center;
  gap: var(--rtg-kbd-group-space-gap);
}

/*
 * ===========================================================================
 *  LABEL COMPONENT STYLES
 * ===========================================================================
 */

rtg-label > [data-slot="label"] {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  gap: var(--rtg-label-space-gap);

  font-size: var(--rtg-label-font-size);
  line-height: var(--rtg-label-font-line-height);
  font-weight: var(--rtg-label-font-weight);
}

/* DISABLED */

*:has([disabled]) > rtg-label > [data-slot="label"] {
  opacity: var(--rtg-label-opacity-disabled);
  pointer-events: none;
}

*:has(> [disabled]) + rtg-label > [data-slot="label"] {
  opacity: var(--rtg-label-opacity-disabled);
  cursor: not-allowed;
}

/*
 * ===========================================================================
 *  PASSWORD INPUT COMPONENT STYLES
 * ===========================================================================
 */

rtg-password-input {
  display: flex;
  width: 100%;
  min-width: 0;
}

/*
 * ===========================================================================
 *  SEPARATOR COMPONENT STYLES
 * ===========================================================================
 */

rtg-separator {
  flex-shrink: 0;
}

rtg-separator:has(> [data-slot="separator"][data-orientation="horizontal"]) {
  width: 100%;
  height: var(--rtg-separator-horizontal-space-h);
}

rtg-separator:has(> [data-slot="separator"][data-orientation="vertical"]) {
  align-self: stretch;
  width: var(--rtg-separator-vertical-space-w);
}

rtg-separator > [data-slot="separator"] {
  width: 100%;
  height: 100%;
  background-color: var(--rtg-separator-color-bg);
}

/*
 * ===========================================================================
 *  SPINNER COMPONENT STYLES
 * ===========================================================================
 */

rtg-spinner {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

rtg-spinner > [data-slot=spinner] {
  width: var(--rtg-spinner-space-size);
  height: var(--rtg-spinner-space-size);
  animation: rtg-spinner-motion-spin var(--rtg-spinner-motion-duration) var(--rtg-spinner-motion-fn) infinite;
}

@keyframes rtg-spinner-motion-spin {
  100% {
    transform: rotate(360deg);
  }
}

/*
 * ===========================================================================
 *  TABS COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  TABS
 * --------------------------------------------------
 */

rtg-tabs {
  display: flex;
}

rtg-tabs > [data-slot="tabs"] {
  display: flex;
  gap: var(--rtg-tabs-space-gap);
}

rtg-tabs > [data-slot="tabs"][data-orientation="horizontal"] {
  flex-direction: column;
}

/*
 * --------------------------------------------------
 *  TABS LIST
 * --------------------------------------------------
 */

rtg-tabs-list {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: -moz-fit-content;

  width: fit-content;
}

rtg-tabs-list > [data-slot="tabs-list"] {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: var(--rtg-tabs-list-space-p);

  color: var(--rtg-tabs-list-color-text);

  outline: none;
}

/* * VARIANTS * */

rtg-tabs-list > [data-slot="tabs-list"][data-variant="default"] {
  background-color: var(--rtg-tabs-list-default-color-bg);
  border-radius: var(--rtg-tabs-list-default-radius);
}

rtg-tabs-list > [data-slot="tabs-list"][data-variant="line"] {
  gap: var(--rtg-tabs-list-line-space-gap);
  background-color: var(--rtg-tabs-list-line-color-bg);
}

/* * ORIENTATIONS * */

rtg-tabs-list > [data-slot="tabs-list"][data-orientation="horizontal"] {
  height: var(--rtg-tabs-list-horizontal-space-h);
}

rtg-tabs-list > [data-slot="tabs-list"][data-orientation="vertical"] {
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
}

/*
 * --------------------------------------------------
 *  TABS TRIGGER
 * --------------------------------------------------
 */

rtg-tabs-trigger {
  display: inline-flex;

  flex: 1;
  align-items: center;
  justify-content: center;
}

rtg-tabs-trigger > [data-slot="tabs-trigger"] {
  display: inline-flex;
  position: relative;

  align-items: center;
  justify-content: center;
  gap: var(--rtg-tabs-trigger-space-gap);

  padding: var(--rtg-tabs-trigger-space-py) var(--rtg-tabs-trigger-space-px);

  width: 100%;
  height: calc(100% - 1px);

  font-size: var(--rtg-tabs-trigger-font-size);
  line-height: var(--rtg-tabs-trigger-font-line-height);
  font-weight: var(--rtg-tabs-trigger-font-weight);
  color: var(--rtg-tabs-trigger-color-text);
  white-space: nowrap;

  border: var(--rtg-tabs-trigger-width-border) solid var(--rtg-tabs-trigger-color-border);
  border-radius: var(--rtg-tabs-trigger-radius);

  transition-property: all;
  transition-timing-function: var(--rtg-tabs-trigger-motion-fn);
  transition-duration: var(--rtg-tabs-trigger-motion-duration);
}

/* HOVER */

rtg-tabs-trigger > [data-slot="tabs-trigger"]:hover {
  color: var(--rtg-tabs-trigger-color-text-hover);
}

/* FOCUS VISIBLE */

rtg-tabs-trigger > [data-slot="tabs-trigger"]:focus-visible {
  border-color: var(--rtg-tabs-trigger-color-border-focus);
  outline: var(--rtg-tabs-trigger-width-outline-focus) solid var(--rtg-tabs-trigger-color-outline-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-tabs-trigger-width-ring-focus) var(--rtg-tabs-trigger-color-ring-focus),
    0 0 rgb(0 0 0);
}

/* ACTIVE */

rtg-tabs-trigger > [data-slot="tabs-trigger"][data-state="active"] {
  color: var(--rtg-tabs-trigger-color-text-active);
}

/* DISABLED */

rtg-tabs-trigger > [data-slot="tabs-trigger"]:disabled {
  opacity: var(--rtg-tabs-trigger-opacity-disabled);
  pointer-events: none;
}

/* * VARIANTS * */

rtg-tabs-list > [data-slot="tabs-list"][data-variant="default"] > rtg-tabs-trigger > [data-slot="tabs-trigger"][data-state="active"] {
  background-color: var(--rtg-tabs-trigger-default-color-bg-active);
  border-color: var(--rtg-tabs-trigger-default-color-border-active);
  box-shadow: var(--rtg-tabs-trigger-default-shadow-active);
}

/* * ORIENTATIONS * */

rtg-tabs-trigger:has(> [data-slot="tabs-trigger"][data-orientation="vertical"]) {
  width: 100%;
}

rtg-tabs-trigger > [data-slot="tabs-trigger"][data-orientation="vertical"] {
  justify-content: start;
}

/* * ICON CHILD * */

rtg-tabs-trigger > [data-slot="tabs-trigger"] svg {
  flex-shrink: 0;

  width: var(--rtg-tabs-trigger-icon-space-size);
  height: var(--rtg-tabs-trigger-icon-space-size);

  pointer-events: none;
}

/* * AFTER (::after) (underline of line variant) * */

rtg-tabs-trigger > [data-slot="tabs-trigger"]::after {
  position: absolute;

  background-color: var(--rtg-tabs-trigger-after-color-bg);

  opacity: var(--rtg-tabs-trigger-after-opacity);

  transition-property: opacity;
  transition-timing-function: var(--rtg-tabs-trigger-motion-fn);
  transition-duration: var(--rtg-tabs-trigger-motion-duration);
}

rtg-tabs-trigger > [data-slot="tabs-trigger"][data-orientation="horizontal"]::after {
  inset-inline: 0;
  bottom: var(--rtg-tabs-trigger-horizontal-after-space-bottom);
  height: var(--rtg-tabs-trigger-horizontal-after-space-h);
}

rtg-tabs-trigger > [data-slot="tabs-trigger"][data-orientation="vertical"]::after {
  inset-block: 0;
  right: var(--rtg-tabs-trigger-vertical-after-space-right);
  width: var(--rtg-tabs-trigger-vertical-after-space-w);
}

rtg-tabs-list > [data-slot="tabs-list"][data-variant="line"] > rtg-tabs-trigger > [data-slot="tabs-trigger"][data-state="active"]::after {
  content: "";
  opacity: var(--rtg-tabs-trigger-line-after-opacity-active);
}

/*
 * --------------------------------------------------
 *  TABS CONTENT
 * --------------------------------------------------
 */

rtg-tabs-content {
  flex: 1;
}

rtg-tabs-content:has(> [data-slot="tabs-content"][data-state="inactive"]) {
  display: none;
}

rtg-tabs-content > [data-slot="tabs-content"] {
  font-size: var(--rtg-tabs-content-font-size);
  line-height: var(--rtg-tabs-content-font-line-height);

  outline: none;
}

rtg-tabs-content > [data-slot="tabs-content"][data-state="active"] {
  animation-duration: 0s;
}

/*
 * ===========================================================================
 *  TEXTAREA COMPONENT STYLES
 * ===========================================================================
 */

rtg-textarea {
  width: 100%;
}

rtg-textarea > [data-slot=textarea] {
  field-sizing: content;
  display: flex;
  padding-inline: var(--rtg-textarea-space-px);
  padding-block: var(--rtg-textarea-space-py);
  width: 100%;
  min-height: var(--rtg-textarea-space-min-h);
  font-size: var(--rtg-textarea-font-size-vw-sm);
  line-height: var(--rtg-textarea-font-line-height-vw-sm);
  background-color: var(--rtg-textarea-color-bg);
  border: var(--rtg-textarea-width-border) solid var(--rtg-textarea-color-border);
  border-radius: var(--rtg-textarea-radius);
  outline: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--rtg-textarea-motion-fn);
  transition-duration: var(--rtg-textarea-motion-duration);
}

@media (width >= 48rem) {
  rtg-textarea > [data-slot=textarea] {
    font-size: var(--rtg-textarea-font-size);
    line-height: var(--rtg-textarea-font-line-height);
  }
}

rtg-textarea > [data-slot=textarea]:focus-visible {
  border-color: var(--rtg-textarea-color-border-focus);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-textarea-width-ring-focus) var(--rtg-textarea-color-ring-focus),
    0 0 rgb(0 0 0);
}

rtg-textarea > [data-slot=textarea][aria-invalid] {
  border-color: var(--rtg-textarea-color-border-invalid);
  box-shadow:
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 rgb(0 0 0),
    0 0 0 var(--rtg-textarea-width-ring-invalid) var(--rtg-textarea-color-ring-invalid),
    0 0 rgb(0 0 0);
}

rtg-textarea > [data-slot=textarea]:disabled {
  background-color: var(--rtg-textarea-color-bg-disabled);
  opacity: var(--rtg-textarea-opacity-disabled);
  cursor: not-allowed;
}

rtg-textarea > [data-slot=textarea]::-moz-placeholder {
  color: var(--rtg-textarea-placeholder-color-text);
}

rtg-textarea > [data-slot=textarea]::placeholder {
  color: var(--rtg-textarea-placeholder-color-text);
}

/*
 * ===========================================================================
 *  TYPOGRAPHY COMPONENT STYLES
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  TYPOGRAPHY H
 * --------------------------------------------------
 */

rtg-typography-h > [data-slot='typography-h'] {
  scroll-margin: var(--rtg-typography-h-space-scroll-m);
  color: var(--rtg-typography-h-color-text);

  font-family: var(--rtg-typography-h-font-family);
  font-weight: var(--rtg-typography-h-font-weight);
  letter-spacing: var(--rtg-typography-h-font-letter-spacing);
}

/* * LEVELS * */

/* LEVEL 1 */

rtg-typography-h > [data-slot='typography-h'][data-level='h1'] {
  font-size: var(--rtg-typography-h-h1-font-size);
  line-height: var(--rtg-typography-h-h1-font-line-height);
  font-weight: var(--rtg-typography-h-h1-font-weight);
  text-wrap: balance;
}

/* LEVEL 2 */

rtg-typography-h > [data-slot='typography-h'][data-level='h2'] {
  padding-bottom: var(--rtg-typography-h-h2-space-pb);

  font-size: var(--rtg-typography-h-h2-font-size);
  line-height: var(--rtg-typography-h-h2-font-line-height);

  border-bottom: var(--rtg-typography-h-h2-width-border) solid
    var(--rtg-typography-h-h2-color-border);
}

rtg-typography-h:not(:first-child)
  > [data-slot='typography-h'][data-level='h2'] {
  margin-top: var(--rtg-typography-h-h2-space-mt);
}

/* LEVEL 3 */

rtg-typography-h > [data-slot='typography-h'][data-level='h3'] {
  font-size: var(--rtg-typography-h-h3-font-size);
  line-height: var(--rtg-typography-h-h3-font-line-height);
}

rtg-typography-h:not(:first-child)
  > [data-slot='typography-h'][data-level='h3'] {
  margin-top: var(--rtg-typography-h-h3-space-mt);
}

/* LEVEL 4 */

rtg-typography-h > [data-slot='typography-h'][data-level='h4'] {
  font-size: var(--rtg-typography-h-h4-font-size);
  line-height: var(--rtg-typography-h-h4-font-line-height);
}

rtg-typography-h:not(:first-child)
  > [data-slot='typography-h'][data-level='h4'] {
  margin-top: var(--rtg-typography-h-h4-space-mt);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY P
 * --------------------------------------------------
 */

rtg-typography-p > [data-slot='typography-p'] {
  font-family: var(--rtg-typography-p-font-family);
  font-size: var(--rtg-typography-p-font-size-vw-sm);
  line-height: var(--rtg-typography-p-font-line-height);
  font-weight: var(--rtg-typography-p-font-weight);
  letter-spacing: var(--rtg-typography-p-font-letter-spacing);
  color: var(--rtg-typography-p-color-text);
}

rtg-typography-p:not(:first-child) > [data-slot='typography-p'] {
  margin-top: var(--rtg-typography-p-space-mt);
}

@media (width >= 48rem) {
  rtg-typography-p > [data-slot='typography-p'] {
    font-size: var(--rtg-typography-p-font-size);
  }
}

rtg-typography-p > [data-slot='typography-p'] > a {
  color: var(--rtg-typography-p-link-color-text);
  font-weight: var(--rtg-typography-p-link-font-weight);
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY BLOCKQUOTE
 * --------------------------------------------------
 */

rtg-typography-blockquote > [data-slot='typography-blockquote'] {
  padding-left: var(--rtg-typography-blockquote-space-pl);

  font-family: var(--rtg-typography-blockquote-font-family);
  font-size: var(--rtg-typography-blockquote-font-size-vw-sm);
  line-height: var(--rtg-typography-blockquote-font-line-height);
  font-weight: var(--rtg-typography-blockquote-font-weight);
  letter-spacing: var(--rtg-typography-blockquote-font-letter-spacing);
  font-style: italic;

  border-left: var(--rtg-typography-blockquote-width-border) solid
    var(--rtg-typography-blockquote-color-border);
}

rtg-typography-blockquote:not(:first-child)
  > [data-slot='typography-blockquote'] {
  margin-top: var(--rtg-typography-blockquote-space-mt);
}

@media (width >= 48rem) {
  rtg-typography-blockquote > [data-slot='typography-blockquote'] {
    font-size: var(--rtg-typography-blockquote-font-size);
  }
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY TABLE
 * --------------------------------------------------
 */

rtg-typography-table {
  width: 100%;
  overflow-y: auto;
}

rtg-typography-table > table {
  margin-bottom: var(--rtg-typography-table-space-my);
  width: 100%;
}

rtg-typography-table:not(:first-child) > table {
  margin-top: var(--rtg-typography-table-space-my);
}

/* * TABLE ROW * */

rtg-typography-table tr {
  padding: var(--rtg-typography-table-row-space-p);
  margin: var(--rtg-typography-table-row-space-m);

  border-top: var(--rtg-typography-table-row-width-border) solid
    var(--rtg-typography-table-row-color-border);
}

rtg-typography-table tr:nth-child(2n) {
  color: var(--rtg-typography-table-row-color-text-even);
  background-color: var(--rtg-typography-table-row-color-bg-even);
}

/* * TABLE CELL * */

rtg-typography-table :is(th, td) {
  padding-inline: var(--rtg-typography-table-cell-space-px);
  padding-block: var(--rtg-typography-table-cell-space-py);

  font-family: var(--rtg-typography-table-font-family);
  font-size: var(--rtg-typography-table-font-size-vw-sm);
  line-height: var(--rtg-typography-table-font-line-height);
  font-weight: var(--rtg-typography-table-font-weight);
  letter-spacing: var(--rtg-typography-table-font-letter-spacing);
  text-align: left;

  border: var(--rtg-typography-table-cell-width-border) solid
    var(--rtg-typography-table-cell-color-border);
}

@media (width >= 48rem) {
  rtg-typography-table :is(th, td) {
    font-size: var(--rtg-typography-table-font-size);
  }
}

/* HEADER CELL */

rtg-typography-table th {
  font-weight: var(--rtg-typography-table-cell-header-font-weight);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LIST
 * --------------------------------------------------
 */

rtg-typography-list > [data-slot='typography-list'] {
  margin-left: var(--rtg-typography-list-space-ml);
  margin-bottom: var(--rtg-typography-list-space-my);

  list-style-type: disc;
}

rtg-typography-list:not(:first-child) > [data-slot='typography-list'] {
  margin-top: var(--rtg-typography-list-space-my);
}

/* * LIST ITEM * */

rtg-typography-list > [data-slot='typography-list'] > li {
  font-family: var(--rtg-typography-list-font-family);
  font-size: var(--rtg-typography-list-font-size-vw-sm);
  line-height: var(--rtg-typography-list-font-line-height);
  font-weight: var(--rtg-typography-list-font-weight);
  letter-spacing: var(--rtg-typography-list-font-letter-spacing);
}

rtg-typography-list > [data-slot='typography-list'] > li:not(:first-child) {
  margin-top: var(--rtg-typography-list-item-space-mt);
}

@media (width >= 48rem) {
  rtg-typography-list > [data-slot='typography-list'] > li {
    font-size: var(--rtg-typography-list-font-size);
  }
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY CODE
 * --------------------------------------------------
 */

rtg-typography-code > [data-slot='typography-code'] {
  position: relative;

  padding-inline: var(--rtg-typography-code-space-px);
  padding-block: var(--rtg-typography-code-space-py);

  color: var(--rtg-typography-code-color-text);
  font-family: var(--rtg-typography-code-font-family);
  font-size: var(--rtg-typography-code-font-size);
  line-height: var(--rtg-typography-code-font-line-height);
  font-weight: var(--rtg-typography-code-font-weight);
  letter-spacing: var(--rtg-typography-code-font-letter-spacing);

  background-color: var(--rtg-typography-code-color-bg);
  border-radius: var(--rtg-typography-code-radius);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LEAD
 * --------------------------------------------------
 */

rtg-typography-lead > [data-slot='typography-lead'] {
  color: var(--rtg-typography-lead-color-text);
  font-family: var(--rtg-typography-lead-font-family);
  font-size: var(--rtg-typography-lead-font-size);
  line-height: var(--rtg-typography-lead-font-line-height);
  font-weight: var(--rtg-typography-lead-font-weight);
  letter-spacing: var(--rtg-typography-lead-font-letter-spacing);
}

rtg-typography-lead:not(:first-child) > [data-slot='typography-lead'] {
  margin-top: var(--rtg-typography-lead-space-mt);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY LARGE
 * --------------------------------------------------
 */

rtg-typography-large > [data-slot='typography-large'] {
  font-family: var(--rtg-typography-large-font-family);
  font-size: var(--rtg-typography-large-font-size);
  line-height: var(--rtg-typography-large-font-line-height);
  font-weight: var(--rtg-typography-large-font-weight);
  letter-spacing: var(--rtg-typography-large-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY SMALL
 * --------------------------------------------------
 */

rtg-typography-small > [data-slot='typography-small'] {
  font-family: var(--rtg-typography-small-font-family);
  font-size: var(--rtg-typography-small-font-size);
  line-height: var(--rtg-typography-small-font-line-height);
  font-weight: var(--rtg-typography-small-font-weight);
  letter-spacing: var(--rtg-typography-small-font-letter-spacing);
}

/*
 * --------------------------------------------------
 *  TYPOGRAPHY MUTED
 * --------------------------------------------------
 */

rtg-typography-muted > [data-slot='typography-muted'] {
  color: var(--rtg-typography-muted-color-text);
  font-family: var(--rtg-typography-muted-font-family);
  font-size: var(--rtg-typography-muted-font-size);
  line-height: var(--rtg-typography-muted-font-line-height);
  font-weight: var(--rtg-typography-muted-font-weight);
  letter-spacing: var(--rtg-typography-muted-font-letter-spacing);
}

/*
 * ===========================================================================
 *  Temporary component styles for components which have not been refactored
 * ===========================================================================
 */

/*
 * --------------------------------------------------
 *  DIALOG
 * --------------------------------------------------
 */

/* * DIALOG CONTENT: CLOSE * */

rtg-dialog-content [data-slot=dialog-content-close]:hover {
  color: var(--sb-dialog-close-color-text-hover);
  background-color: var(--sb-dialog-close-color-bg-hover);
}

/*
 * --------------------------------------------------
 *  SCROLL AREA
 * --------------------------------------------------
 */

rtg-scroll-area > [data-slot=scroll-area] {
  border-radius: inherit;
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

*{
  border-color: hsl(var(--border));
}

body{
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
}

/* p {
    margin-top: 6px;
    margin-block-start: 6px;
  } */

.rtg-sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.rtg-pointer-events-none{
  pointer-events: none;
}

.rtg-pointer-events-auto{
  pointer-events: auto;
}

.rtg-visible{
  visibility: visible;
}

.rtg-invisible{
  visibility: hidden;
}

.rtg-fixed{
  position: fixed;
}

.rtg-absolute{
  position: absolute;
}

.rtg-relative{
  position: relative;
}

.rtg-inset-0{
  inset: 0px;
}

.rtg-inset-x-0{
  left: 0px;
  right: 0px;
}

.rtg-bottom-0{
  bottom: 0px;
}

.rtg-left-1\/2{
  left: 50%;
}

.rtg-left-2{
  left: 0.5rem;
}

.rtg-left-\[50\%\]{
  left: 50%;
}

.rtg-left-carousel-control-horizontal-space-left{
  left: var(--sb-carousel-control-horizontal-space-left);
}

.rtg-right-2{
  right: 0.5rem;
}

.rtg-right-4{
  right: 1rem;
}

.rtg-right-carousel-control-horizontal-space-right{
  right: var(--sb-carousel-control-horizontal-space-right);
}

.rtg-top-0{
  top: 0px;
}

.rtg-top-1\/2{
  top: 50%;
}

.rtg-top-4{
  top: 1rem;
}

.rtg-top-\[50\%\]{
  top: 50%;
}

.rtg-top-carousel-button-vertical-next-space-top{
  top: var(--sb-carousel-button-vertical-next-space-top);
}

.rtg-top-carousel-button-vertical-prev-space-top{
  top: var(--sb-carousel-button-vertical-prev-space-top);
}

.rtg-top-navigation-menu-content-space-top{
  top: var(--sb-navigation-menu-content-space-top);
}

.rtg-z-10{
  z-index: 10;
}

.rtg-z-20{
  z-index: 20;
}

.rtg-z-50{
  z-index: 50;
}

.rtg-z-\[100\]{
  z-index: 100;
}

.rtg-col-span-2{
  grid-column: span 2 / span 2;
}

.rtg-row-span-3{
  grid-row: span 3 / span 3;
}

.rtg-m-auto{
  margin: auto;
}

.rtg-mx-3{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.rtg-mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.rtg-mx-carousel-space-mx{
  margin-left: var(--sb-carousel-space-mx);
  margin-right: var(--sb-carousel-space-mx);
}

.rtg-mx-context-menu-separator-space-mx{
  margin-left: var(--sb-context-menu-separator-space-mx);
  margin-right: var(--sb-context-menu-separator-space-mx);
}

.rtg-mx-dropdown-menu-separator-space-mx{
  margin-left: var(--sb-dropdown-menu-separator-space-mx);
  margin-right: var(--sb-dropdown-menu-separator-space-mx);
}

.rtg-mx-menubar-separator-space-mx{
  margin-left: var(--sb-menubar-separator-space-mx);
  margin-right: var(--sb-menubar-separator-space-mx);
}

.rtg-mx-select-separator-space-mx{
  margin-left: var(--sb-select-separator-space-mx);
  margin-right: var(--sb-select-separator-space-mx);
}

.rtg-my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.rtg-my-context-menu-separator-space-my{
  margin-top: var(--sb-context-menu-separator-space-my);
  margin-bottom: var(--sb-context-menu-separator-space-my);
}

.rtg-my-dropdown-menu-separator-space-my{
  margin-top: var(--sb-dropdown-menu-separator-space-my);
  margin-bottom: var(--sb-dropdown-menu-separator-space-my);
}

.rtg-my-menubar-separator-space-my{
  margin-top: var(--sb-menubar-separator-space-my);
  margin-bottom: var(--sb-menubar-separator-space-my);
}

.rtg-my-select-separator-space-my{
  margin-top: var(--sb-select-separator-space-my);
  margin-bottom: var(--sb-select-separator-space-my);
}

.rtg-mb-2{
  margin-bottom: 0.5rem;
}

.rtg-mb-4{
  margin-bottom: 1rem;
}

.rtg-mb-form-label-space-mb{
  margin-bottom: var(--sb-form-label-space-mb);
}

.rtg-ml-auto{
  margin-left: auto;
}

.rtg-ml-navigation-menu-item-icon-space-ml{
  margin-left: var(--sb-navigation-menu-item-icon-space-ml);
}

.rtg-mr-2{
  margin-right: 0.5rem;
}

.rtg-mt-10{
  margin-top: 2.5rem;
}

.rtg-mt-2{
  margin-top: 0.5rem;
}

.rtg-mt-3{
  margin-top: 0.75rem;
}

.rtg-mt-4{
  margin-top: 1rem;
}

.rtg-mt-8{
  margin-top: 2rem;
}

.rtg-mt-auto{
  margin-top: auto;
}

.rtg-mt-calendar-week-space-mt{
  margin-top: var(--sb-calendar-week-space-mt);
}

.rtg-mt-combo-box-group-space-mt{
  margin-top: var(--sb-combo-box-group-space-mt);
}

.rtg-mt-drawer-content-space-mt{
  margin-top: var(--sb-drawer-content-space-mt);
}

.rtg-mt-drawer-thumb-space-mt{
  margin-top: var(--sb-drawer-thumb-space-mt);
}

.rtg-mt-form-description-space-mt{
  margin-top: var(--sb-form-description-space-mt);
}

.rtg-mt-navigation-menu-content-container-space-mt{
  margin-top: var(--sb-navigation-menu-content-container-space-mt);
}

.rtg-mt-table-caption-space-mt{
  margin-top: var(--sb-table-caption-space-mt);
}

.rtg-line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.rtg-line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rtg-block{
  display: block;
}

.rtg-inline-block{
  display: inline-block;
}

.rtg-flex{
  display: flex;
}

.rtg-inline-flex{
  display: inline-flex;
}

.rtg-table{
  display: table;
}

.rtg-grid{
  display: grid;
}

.rtg-contents{
  display: contents;
}

.rtg-hidden{
  display: none;
}

.rtg-aspect-square{
  aspect-ratio: 1 / 1;
}

.rtg-size-3\.5{
  width: 0.875rem;
  height: 0.875rem;
}

.rtg-size-4{
  width: 1rem;
  height: 1rem;
}

.rtg-size-5{
  width: 1.25rem;
  height: 1.25rem;
}

.rtg-size-accordion-trigger-icon-space-size{
  width: var(--sb-accordion-trigger-icon-space-size);
  height: var(--sb-accordion-trigger-icon-space-size);
}

.rtg-size-auto{
  width: auto;
  height: auto;
}

.rtg-size-breadcrumb-ellipsis-space-size{
  width: var(--sb-breadcrumb-ellipsis-space-size);
  height: var(--sb-breadcrumb-ellipsis-space-size);
}

.rtg-size-button-icon-space-size{
  width: var(--rtg-button-icon-space-size-default);
  height: var(--rtg-button-icon-space-size-default);
}

.rtg-size-button-space-size-icon{
  width: var(--rtg-button-space-size-default);
  height: var(--rtg-button-space-size-default);
}

.rtg-size-button-space-size-icon-lg{
  width: var(--rtg-button-space-size-lg);
  height: var(--rtg-button-space-size-lg);
}

.rtg-size-button-space-size-icon-sm{
  width: var(--rtg-button-space-size-sm);
  height: var(--rtg-button-space-size-sm);
}

.rtg-size-calendar-chevron-space-size{
  width: var(--sb-calendar-chevron-space-size);
  height: var(--sb-calendar-chevron-space-size);
}

.rtg-size-command-input-icon-space-size{
  width: var(--sb-command-input-icon-space-size);
  height: var(--sb-command-input-icon-space-size);
}

.rtg-size-command-item-icon-space-size{
  width: var(--sb-command-item-icon-space-size);
  height: var(--sb-command-item-icon-space-size);
}

.rtg-size-context-menu-checkbox-item-icon-container-space-size{
  width: var(--sb-context-menu-checkbox-item-icon-container-space-size);
  height: var(--sb-context-menu-checkbox-item-icon-container-space-size);
}

.rtg-size-context-menu-checkbox-item-icon-space-size{
  width: var(--sb-context-menu-checkbox-item-icon-space-size);
  height: var(--sb-context-menu-checkbox-item-icon-space-size);
}

.rtg-size-context-menu-item-icon-space-size{
  width: var(--sb-context-menu-item-icon-space-size);
  height: var(--sb-context-menu-item-icon-space-size);
}

.rtg-size-context-menu-radio-item-icon-container-space-size{
  width: var(--sb-context-menu-radio-item-icon-container-space-size);
  height: var(--sb-context-menu-radio-item-icon-container-space-size);
}

.rtg-size-context-menu-radio-item-icon-space-size{
  width: var(--sb-context-menu-radio-item-icon-space-size);
  height: var(--sb-context-menu-radio-item-icon-space-size);
}

.rtg-size-dialog-close-icon-space-size{
  width: var(--sb-dialog-close-icon-space-size);
  height: var(--sb-dialog-close-icon-space-size);
}

.rtg-size-dropdown-menu-checkbox-item-icon-container-space-size{
  width: var(--sb-dropdown-menu-checkbox-item-icon-container-space-size);
  height: var(--sb-dropdown-menu-checkbox-item-icon-container-space-size);
}

.rtg-size-dropdown-menu-checkbox-item-icon-space-size{
  width: var(--sb-dropdown-menu-checkbox-item-icon-space-size);
  height: var(--sb-dropdown-menu-checkbox-item-icon-space-size);
}

.rtg-size-dropdown-menu-item-icon-space-size{
  width: var(--sb-dropdown-menu-item-icon-space-size);
  height: var(--sb-dropdown-menu-item-icon-space-size);
}

.rtg-size-dropdown-menu-radio-item-icon-container-space-size{
  width: var(--sb-dropdown-menu-radio-item-icon-container-space-size);
  height: var(--sb-dropdown-menu-radio-item-icon-container-space-size);
}

.rtg-size-dropdown-menu-radio-item-icon-space-size{
  width: var(--sb-dropdown-menu-radio-item-icon-space-size);
  height: var(--sb-dropdown-menu-radio-item-icon-space-size);
}

.rtg-size-full{
  width: 100%;
  height: 100%;
}

.rtg-size-menubar-checkbox-item-icon-space-size{
  width: var(--sb-menubar-checkbox-item-icon-space-size);
  height: var(--sb-menubar-checkbox-item-icon-space-size);
}

.rtg-size-menubar-checkbox-item-indicator-space-size{
  width: var(--sb-menubar-checkbox-item-indicator-space-size);
  height: var(--sb-menubar-checkbox-item-indicator-space-size);
}

.rtg-size-menubar-item-icon-space-size{
  width: var(--sb-menubar-item-icon-space-size);
  height: var(--sb-menubar-item-icon-space-size);
}

.rtg-size-menubar-radio-item-icon-space-size{
  width: var(--sb-menubar-radio-item-icon-space-size);
  height: var(--sb-menubar-radio-item-icon-space-size);
}

.rtg-size-menubar-radio-item-indicator-space-size{
  width: var(--sb-menubar-radio-item-indicator-space-size);
  height: var(--sb-menubar-radio-item-indicator-space-size);
}

.rtg-size-pagination-ellipsis-icon-space-size{
  width: var(--sb-pagination-ellipsis-icon-space-size);
  height: var(--sb-pagination-ellipsis-icon-space-size);
}

.rtg-size-pagination-ellipsis-space-size{
  width: var(--sb-pagination-ellipsis-space-size);
  height: var(--sb-pagination-ellipsis-space-size);
}

.rtg-size-radio-group-indicator-space-size{
  width: var(--sb-radio-group-indicator-space-size);
  height: var(--sb-radio-group-indicator-space-size);
}

.rtg-size-radio-group-item-space-size{
  width: var(--sb-radio-group-item-space-size);
  height: var(--sb-radio-group-item-space-size);
}

.rtg-size-select-item-icon-space-size{
  width: var(--sb-select-item-icon-space-size);
  height: var(--sb-select-item-icon-space-size);
}

.rtg-size-select-item-indicator-space-size{
  width: var(--sb-select-item-indicator-space-size);
  height: var(--sb-select-item-indicator-space-size);
}

.rtg-size-select-trigger-icon-space-size{
  width: var(--sb-select-trigger-icon-space-size);
  height: var(--sb-select-trigger-icon-space-size);
}

.rtg-size-switch-thumb-space-size{
  width: var(--sb-switch-thumb-space-size);
  height: var(--sb-switch-thumb-space-size);
}

.\!rtg-h-\[360px\]{
  height: 360px !important;
}

.rtg-h-10{
  height: 2.5rem;
}

.rtg-h-2{
  height: 0.5rem;
}

.rtg-h-20{
  height: 5rem;
}

.rtg-h-24{
  height: 6rem;
}

.rtg-h-3\.5{
  height: 0.875rem;
}

.rtg-h-4{
  height: 1rem;
}

.rtg-h-5{
  height: 1.25rem;
}

.rtg-h-6{
  height: 1.5rem;
}

.rtg-h-72{
  height: 18rem;
}

.rtg-h-8{
  height: 2rem;
}

.rtg-h-9{
  height: 2.25rem;
}

.rtg-h-\[120px\]{
  height: 120px;
}

.rtg-h-\[150px\]{
  height: 150px;
}

.rtg-h-\[300px\]{
  height: 300px;
}

.rtg-h-\[400px\]{
  height: 400px;
}

.rtg-h-\[450px\]{
  height: 450px;
}

.rtg-h-auto{
  height: auto;
}

.rtg-h-button-space-h-default{
  height: var(--rtg-button-space-size-default);
}

.rtg-h-button-space-h-lg{
  height: var(--rtg-button-space-size-lg);
}

.rtg-h-button-space-h-sm{
  height: var(--rtg-button-space-size-sm);
}

.rtg-h-calendar-month-caption-space-h{
  height: var(--sb-calendar-month-caption-space-h);
}

.rtg-h-carousel-button-space-h{
  height: var(--sb-carousel-button-space-h);
}

.rtg-h-carousel-control-vertical-space-h{
  height: var(--sb-carousel-control-vertical-space-h);
}

.rtg-h-carousel-slide-space-h{
  height: var(--sb-carousel-slide-space-h);
}

.rtg-h-carousel-space-h{
  height: var(--sb-carousel-space-h);
}

.rtg-h-carousel-viewport-space-h{
  height: var(--sb-carousel-viewport-space-h);
}

.rtg-h-combo-box-input-space-h{
  height: var(--sb-combo-box-input-space-h);
}

.rtg-h-combo-box-trigger-space-h{
  height: var(--sb-combo-box-trigger-space-h);
}

.rtg-h-command-input-space-h{
  height: var(--sb-command-input-space-h);
}

.rtg-h-command-input-wrapper-space-h{
  height: var(--sb-command-input-wrapper-space-h);
}

.rtg-h-command-separator-space-h{
  height: var(--sb-command-separator-space-h);
}

.rtg-h-command-space-h{
  height: var(--sb-command-space-h);
}

.rtg-h-context-menu-separator-space-h{
  height: var(--sb-context-menu-separator-space-h);
}

.rtg-h-drawer-thumb-space-h{
  height: var(--sb-drawer-thumb-space-h);
}

.rtg-h-dropdown-menu-separator-space-h{
  height: var(--sb-dropdown-menu-separator-space-h);
}

.rtg-h-full{
  height: 100%;
}

.rtg-h-menubar-separator-space-h{
  height: var(--sb-menubar-separator-space-h);
}

.rtg-h-menubar-space-h{
  height: var(--sb-menubar-space-h);
}

.rtg-h-navigation-menu-item-icon-space-h{
  height: var(--sb-navigation-menu-item-icon-space-h);
}

.rtg-h-navigation-menu-link-space-h{
  height: var(--sb-navigation-menu-link-space-h);
}

.rtg-h-progress-indicator-space-h{
  height: var(--sb-progress-indicator-space-h);
}

.rtg-h-progress-space-h{
  height: var(--sb-progress-space-h);
}

.rtg-h-select-separator-space-h{
  height: var(--sb-select-separator-space-h);
}

.rtg-h-select-trigger-space-h{
  height: var(--sb-select-trigger-space-h);
}

.rtg-h-switch-space-h{
  height: var(--sb-switch-space-h);
}

.rtg-h-table-head-cell-space-h{
  height: var(--sb-table-head-cell-space-h);
}

.rtg-h-toast-action-space-h{
  height: var(--sb-toast-action-space-h);
}

.rtg-h-toggle-group-item-space-h-lg{
  height: var(--sb-toggle-group-item-space-h-lg);
}

.rtg-h-toggle-group-item-space-h-md{
  height: var(--sb-toggle-group-item-space-h-md);
}

.rtg-h-toggle-group-item-space-h-sm{
  height: var(--sb-toggle-group-item-space-h-sm);
}

.rtg-h-toggle-space-h-lg{
  height: var(--sb-toggle-space-h-lg);
}

.rtg-h-toggle-space-h-md{
  height: var(--sb-toggle-space-h-md);
}

.rtg-h-toggle-space-h-sm{
  height: var(--sb-toggle-space-h-sm);
}

.rtg-max-h-72{
  max-height: 18rem;
}

.rtg-max-h-\[360px\]{
  max-height: 360px;
}

.rtg-max-h-\[80vh\]{
  max-height: 80vh;
}

.rtg-max-h-combo-box-group-space-max-h{
  max-height: var(--sb-combo-box-group-space-max-h);
}

.rtg-max-h-command-list-space-max-h{
  max-height: var(--sb-command-list-space-max-h);
}

.rtg-max-h-screen{
  max-height: 100vh;
}

.rtg-min-h-\[350px\]{
  min-height: 350px;
}

.\!rtg-w-\[310px\]{
  width: 310px !important;
}

.rtg-w-2{
  width: 0.5rem;
}

.rtg-w-20{
  width: 5rem;
}

.rtg-w-3\.5{
  width: 0.875rem;
}

.rtg-w-4{
  width: 1rem;
}

.rtg-w-48{
  width: 12rem;
}

.rtg-w-52{
  width: 13rem;
}

.rtg-w-56{
  width: 14rem;
}

.rtg-w-64{
  width: 16rem;
}

.rtg-w-72{
  width: 18rem;
}

.rtg-w-8{
  width: 2rem;
}

.rtg-w-80{
  width: 20rem;
}

.rtg-w-\[180px\]{
  width: 180px;
}

.rtg-w-\[300px\]{
  width: 300px;
}

.rtg-w-\[350px\]{
  width: 350px;
}

.rtg-w-\[400px\]{
  width: 400px;
}

.rtg-w-\[40px\]{
  width: 40px;
}

.rtg-w-\[60\%\]{
  width: 60%;
}

.rtg-w-\[80\%\]{
  width: 80%;
}

.rtg-w-\[800px\]{
  width: 800px;
}

.rtg-w-accordion-trigger-space-w{
  width: var(--sb-accordion-trigger-space-w);
}

.rtg-w-auto{
  width: auto;
}

.rtg-w-carousel-button-space-w{
  width: var(--sb-carousel-button-space-w);
}

.rtg-w-carousel-control-vertical-space-w{
  width: var(--sb-carousel-control-vertical-space-w);
}

.rtg-w-carousel-space-w{
  width: var(--sb-carousel-space-w);
}

.rtg-w-carousel-viewport-space-w{
  width: var(--sb-carousel-viewport-space-w);
}

.rtg-w-combo-box-group-space-w{
  width: var(--sb-combo-box-group-space-w);
}

.rtg-w-combo-box-input-space-w{
  width: var(--sb-combo-box-input-space-w);
}

.rtg-w-combo-box-item-space-w{
  width: var(--sb-combo-box-item-space-w);
}

.rtg-w-combo-box-value-space-w{
  width: var(--sb-combo-box-value-space-w);
}

.rtg-w-command-input-space-w{
  width: var(--sb-command-input-space-w);
}

.rtg-w-command-space-w{
  width: var(--sb-command-space-w);
}

.rtg-w-date-picker-trigger-button-space-w{
  width: var(--sb-date-picker-trigger-button-space-w);
}

.rtg-w-dialog-content-space-w{
  width: var(--sb-dialog-content-space-w);
}

.rtg-w-drawer-thumb-space-w{
  width: var(--sb-drawer-thumb-space-w);
}

.rtg-w-fit{
  width: -moz-fit-content;
  width: fit-content;
}

.rtg-w-full{
  width: 100%;
}

.rtg-w-hover-card-content-space-w{
  width: var(--sb-hover-card-content-space-w);
}

.rtg-w-max{
  width: -moz-max-content;
  width: max-content;
}

.rtg-w-navigation-menu-content-container-space-w{
  width: var(--sb-navigation-menu-content-container-space-w);
}

.rtg-w-navigation-menu-item-icon-space-w{
  width: var(--sb-navigation-menu-item-icon-space-w);
}

.rtg-w-navigation-menu-link-space-w{
  width: var(--sb-navigation-menu-link-space-w);
}

.rtg-w-popover-content-space-w{
  width: var(--sb-popover-content-space-w);
}

.rtg-w-progress-indicator-space-w{
  width: var(--sb-progress-indicator-space-w);
}

.rtg-w-progress-space-w{
  width: var(--sb-progress-space-w);
}

.rtg-w-switch-space-w{
  width: var(--sb-switch-space-w);
}

.rtg-w-table-container-space-w{
  width: var(--sb-table-container-space-w);
}

.rtg-w-table-preview-space-w{
  width: var(--sb-table-preview-space-w);
}

.rtg-w-table-space-w{
  width: var(--sb-table-space-w);
}

.rtg-w-toast-viewport-item-space-w{
  width: var(--sb-toast-viewport-item-space-w);
}

.rtg-w-toast-viewport-root-space-w{
  width: var(--sb-toast-viewport-root-space-w);
}

.rtg-min-w-0{
  min-width: 0px;
}

.rtg-min-w-calendar-day-button-space-min-w{
  min-width: var(--sb-calendar-day-button-space-min-w);
}

.rtg-min-w-context-menu-content-space-min-w{
  min-width: var(--sb-context-menu-content-space-min-w);
}

.rtg-min-w-dropdown-menu-content-space-min-w{
  min-width: var(--sb-dropdown-menu-content-space-min-w);
}

.rtg-min-w-menubar-content-space-min-w{
  min-width: var(--sb-menubar-content-space-min-w);
}

.rtg-max-w-\[260px\]{
  max-width: 260px;
}

.rtg-max-w-\[310px\]{
  max-width: 310px;
}

.rtg-max-w-\[450px\]{
  max-width: 450px;
}

.rtg-max-w-dialog-content-space-max-w-sm{
  max-width: var(--sb-dialog-content-space-max-w-sm);
}

.rtg-max-w-lg{
  max-width: 32rem;
}

.rtg-max-w-md{
  max-width: 28rem;
}

.rtg-max-w-navigation-menu-space-max-w{
  max-width: var(--sb-navigation-menu-space-max-w);
}

.rtg-max-w-sm{
  max-width: 24rem;
}

.rtg-max-w-xl{
  max-width: 36rem;
}

.rtg-max-w-xs{
  max-width: 20rem;
}

.rtg-flex-1{
  flex: 1 1 0%;
}

.rtg-flex-shrink-0{
  flex-shrink: 0;
}

.rtg-shrink-0{
  flex-shrink: 0;
}

.rtg-flex-grow{
  flex-grow: 1;
}

.rtg-flex-grow-0{
  flex-grow: 0;
}

.rtg-basis-full{
  flex-basis: 100%;
}

.rtg-caption-bottom{
  caption-side: bottom;
}

.rtg-border-collapse{
  border-collapse: collapse;
}

.rtg-origin-top{
  transform-origin: top;
}

.rtg--translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg--translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-x-0\.5{
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-x-\[-50\%\]{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-x-\[calc\(100\%-2px\)\]{
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-y-0\.5{
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-y-1{
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-y-2{
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-translate-y-\[-50\%\]{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-scale-y-0{
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-scale-y-100{
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtg-transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes rtg-skeleton-animate{
  50%{
    opacity: var(--sb-skeleton-opacity-at-50);
  }
}

.rtg-animate-skeleton-animate{
  animation: rtg-skeleton-animate var(--sb-skeleton-motion-duration) var(--sb-skeleton-motion-fn) infinite;
}

.rtg-cursor-default{
  cursor: default;
}

.rtg-cursor-not-allowed{
  cursor: not-allowed;
}

.rtg-cursor-pointer{
  cursor: pointer;
}

.rtg-select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rtg-resize-none{
  resize: none;
}

.rtg-scroll-my-1{
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}

.rtg-scroll-py-1{
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}

.rtg-list-inside{
  list-style-position: inside;
}

.rtg-list-decimal{
  list-style-type: decimal;
}

.rtg-list-disc{
  list-style-type: disc;
}

.rtg-list-none{
  list-style-type: none;
}

.rtg-grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rtg-grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rtg-grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rtg-flex-row{
  flex-direction: row;
}

.rtg-flex-row-reverse{
  flex-direction: row-reverse;
}

.rtg-flex-col{
  flex-direction: column;
}

.rtg-flex-col-reverse{
  flex-direction: column-reverse;
}

.rtg-flex-wrap{
  flex-wrap: wrap;
}

.rtg-flex-nowrap{
  flex-wrap: nowrap;
}

.rtg-items-start{
  align-items: flex-start;
}

.rtg-items-center{
  align-items: center;
}

.rtg-justify-start{
  justify-content: flex-start;
}

.rtg-justify-end{
  justify-content: flex-end;
}

.rtg-justify-center{
  justify-content: center;
}

.rtg-justify-between{
  justify-content: space-between;
}

.rtg-gap-1{
  gap: 0.25rem;
}

.rtg-gap-1\.5{
  gap: 0.375rem;
}

.rtg-gap-2{
  gap: 0.5rem;
}

.rtg-gap-3{
  gap: 0.75rem;
}

.rtg-gap-4{
  gap: 1rem;
}

.rtg-gap-5{
  gap: 1.25rem;
}

.rtg-gap-6{
  gap: 1.5rem;
}

.rtg-gap-8{
  gap: 2rem;
}

.rtg-gap-accordion-trigger-space-gap{
  gap: var(--sb-accordion-trigger-space-gap);
}

.rtg-gap-breadcrumb-item-space-gap{
  gap: var(--sb-breadcrumb-item-space-gap);
}

.rtg-gap-breadcrumb-list-space-gap-sm{
  gap: var(--sb-breadcrumb-list-space-gap-sm);
}

.rtg-gap-button-space-gap-default{
  gap: var(--rtg-button-space-gap-default);
}

.rtg-gap-button-space-gap-lg{
  gap: var(--rtg-button-space-gap-lg);
}

.rtg-gap-button-space-gap-sm{
  gap: var(--rtg-button-space-gap-sm);
}

.rtg-gap-calendar-day-button-space-gap{
  gap: var(--sb-calendar-day-button-space-gap);
}

.rtg-gap-calendar-month-space-gap{
  gap: var(--sb-calendar-month-space-gap);
}

.rtg-gap-calendar-months-space-gap{
  gap: var(--sb-calendar-months-space-gap);
}

.rtg-gap-calendar-nav-space-gap{
  gap: var(--sb-calendar-nav-space-gap);
}

.rtg-gap-command-input-wrapper-space-gap{
  gap: var(--sb-command-input-wrapper-space-gap);
}

.rtg-gap-command-item-space-gap{
  gap: var(--sb-command-item-space-gap);
}

.rtg-gap-context-menu-checkbox-item-space-gap{
  gap: var(--sb-context-menu-checkbox-item-space-gap);
}

.rtg-gap-context-menu-item-space-gap{
  gap: var(--sb-context-menu-item-space-gap);
}

.rtg-gap-context-menu-radio-item-space-gap{
  gap: var(--sb-context-menu-radio-item-space-gap);
}

.rtg-gap-dialog-content-space-gap{
  gap: var(--sb-dialog-content-space-gap);
}

.rtg-gap-dialog-footer-space-gap{
  gap: var(--sb-dialog-footer-space-gap);
}

.rtg-gap-dialog-header-space-gap{
  gap: var(--sb-dialog-header-space-gap);
}

.rtg-gap-drawer-footer-space-gap{
  gap: var(--sb-drawer-footer-space-gap);
}

.rtg-gap-drawer-header-space-gap-sm{
  gap: var(--sb-drawer-header-space-gap-sm);
}

.rtg-gap-dropdown-menu-checkbox-item-space-gap{
  gap: var(--sb-dropdown-menu-checkbox-item-space-gap);
}

.rtg-gap-dropdown-menu-item-space-gap{
  gap: var(--sb-dropdown-menu-item-space-gap);
}

.rtg-gap-dropdown-menu-radio-item-space-gap{
  gap: var(--sb-dropdown-menu-radio-item-space-gap);
}

.rtg-gap-menubar-checkbox-item-space-gap{
  gap: var(--sb-menubar-checkbox-item-space-gap);
}

.rtg-gap-menubar-item-space-gap{
  gap: var(--sb-menubar-item-space-gap);
}

.rtg-gap-menubar-radio-item-space-gap{
  gap: var(--sb-menubar-radio-item-space-gap);
}

.rtg-gap-menubar-space-gap{
  gap: var(--sb-menubar-space-gap);
}

.rtg-gap-pagination-content-space-gap{
  gap: var(--sb-pagination-content-space-gap);
}

.rtg-gap-pagination-next-space-gap{
  gap: var(--sb-pagination-next-space-gap);
}

.rtg-gap-pagination-previous-space-gap{
  gap: var(--sb-pagination-previous-space-gap);
}

.rtg-gap-radio-group-space-gap{
  gap: var(--sb-radio-group-space-gap);
}

.rtg-gap-select-item-space-gap{
  gap: var(--sb-select-item-space-gap);
}

.rtg-gap-select-trigger-space-gap{
  gap: var(--sb-select-trigger-space-gap);
}

.rtg-gap-select-value-space-gap{
  gap: var(--sb-select-value-space-gap);
}

.rtg-gap-toast-viewport-item-space-gap{
  gap: var(--sb-toast-viewport-item-space-gap);
}

.rtg-gap-toggle-group-space-gap{
  gap: var(--sb-toggle-group-space-gap);
}

.rtg-space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.rtg-space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.rtg-space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.rtg-space-x-navigation-menu-list-space-x > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(var(--sb-navigation-menu-list-space-x) * var(--tw-space-x-reverse));
  margin-left: calc(var(--sb-navigation-menu-list-space-x) * calc(1 - var(--tw-space-x-reverse)));
}

.rtg-space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.rtg-space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.rtg-space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.rtg-space-y-form-field-space-y > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--sb-form-field-space-y) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--sb-form-field-space-y) * var(--tw-space-y-reverse));
}

.rtg-space-y-form-item-space-y > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--sb-form-item-space-y) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--sb-form-item-space-y) * var(--tw-space-y-reverse));
}

.rtg-place-self-center{
  place-self: center;
}

.rtg-overflow-auto{
  overflow: auto;
}

.rtg-overflow-hidden{
  overflow: hidden;
}

.rtg-overflow-y-auto{
  overflow-y: auto;
}

.rtg-overflow-x-hidden{
  overflow-x: hidden;
}

.rtg-whitespace-nowrap{
  white-space: nowrap;
}

.rtg-text-balance{
  text-wrap: balance;
}

.rtg-break-words{
  overflow-wrap: break-word;
}

.\!rtg-rounded-2xl{
  border-radius: calc(var(--radius) + 8px) !important;
}

.rtg-rounded-2xl{
  border-radius: calc(var(--radius) + 8px);
}

.rtg-rounded-accordion-trigger-radius{
  border-radius: var(--sb-accordion-trigger-radius);
}

.rtg-rounded-button-radius{
  border-radius: var(--rtg-button-radius-default);
}

.rtg-rounded-calendar-day-radius{
  border-radius: var(--sb-calendar-day-radius);
}

.rtg-rounded-calendar-weekday-radius{
  border-radius: var(--sb-calendar-weekday-radius);
}

.rtg-rounded-carousel-button-radius{
  border-radius: var(--sb-carousel-button-radius);
}

.rtg-rounded-combo-box-group-radius{
  border-radius: var(--sb-combo-box-group-radius);
}

.rtg-rounded-combo-box-input-radius{
  border-radius: var(--sb-combo-box-input-radius);
}

.rtg-rounded-combo-box-item-radius{
  border-radius: var(--sb-combo-box-item-radius);
}

.rtg-rounded-combo-box-trigger-radius{
  border-radius: var(--sb-combo-box-trigger-radius);
}

.rtg-rounded-command-input-radius{
  border-radius: var(--sb-command-input-radius);
}

.rtg-rounded-command-item-radius{
  border-radius: var(--sb-command-item-radius);
}

.rtg-rounded-command-radius{
  border-radius: var(--sb-command-radius);
}

.rtg-rounded-context-menu-checkbox-item-radius{
  border-radius: var(--sb-context-menu-checkbox-item-radius);
}

.rtg-rounded-context-menu-content-radius{
  border-radius: var(--sb-context-menu-content-radius);
}

.rtg-rounded-context-menu-item-radius{
  border-radius: var(--sb-context-menu-item-radius);
}

.rtg-rounded-context-menu-radio-item-radius{
  border-radius: var(--sb-context-menu-radio-item-radius);
}

.rtg-rounded-dialog-close-radius{
  border-radius: var(--sb-dialog-close-radius);
}

.rtg-rounded-dialog-content-radius{
  border-radius: var(--sb-dialog-content-radius);
}

.rtg-rounded-drawer-thumb-radius{
  border-radius: var(--sb-drawer-thumb-radius);
}

.rtg-rounded-dropdown-menu-checkbox-item-radius{
  border-radius: var(--sb-dropdown-menu-checkbox-item-radius);
}

.rtg-rounded-dropdown-menu-content-radius{
  border-radius: var(--sb-dropdown-menu-content-radius);
}

.rtg-rounded-dropdown-menu-item-radius{
  border-radius: var(--sb-dropdown-menu-item-radius);
}

.rtg-rounded-dropdown-menu-radio-item-radius{
  border-radius: var(--sb-dropdown-menu-radio-item-radius);
}

.rtg-rounded-full{
  border-radius: 9999px;
}

.rtg-rounded-hover-card-content-radius{
  border-radius: var(--sb-hover-card-content-radius);
}

.rtg-rounded-lg{
  border-radius: var(--radius);
}

.rtg-rounded-md{
  border-radius: calc(var(--radius) - 2px);
}

.rtg-rounded-menubar-checkbox-item-radius{
  border-radius: var(--sb-menubar-checkbox-item-radius);
}

.rtg-rounded-menubar-content-radius{
  border-radius: var(--sb-menubar-content-radius);
}

.rtg-rounded-menubar-item-radius{
  border-radius: var(--sb-menubar-item-radius);
}

.rtg-rounded-menubar-radio-item-radius{
  border-radius: var(--sb-menubar-radio-item-radius);
}

.rtg-rounded-menubar-radius{
  border-radius: var(--sb-menubar-radius);
}

.rtg-rounded-menubar-trigger-radius{
  border-radius: var(--sb-menubar-trigger-radius);
}

.rtg-rounded-navigation-menu-content-container-radius{
  border-radius: var(--sb-navigation-menu-content-container-radius);
}

.rtg-rounded-navigation-menu-item-radius{
  border-radius: var(--sb-navigation-menu-item-radius);
}

.rtg-rounded-navigation-menu-link-radius{
  border-radius: var(--sb-navigation-menu-link-radius);
}

.rtg-rounded-none{
  border-radius: 0px;
}

.rtg-rounded-popover-content-radius{
  border-radius: var(--sb-popover-content-radius);
}

.rtg-rounded-progress-radius{
  border-radius: var(--sb-progress-radius);
}

.rtg-rounded-radio-group-item-radius{
  border-radius: var(--sb-radio-group-item-radius);
}

.rtg-rounded-select-content-radius{
  border-radius: var(--sb-select-content-radius);
}

.rtg-rounded-select-item-radius{
  border-radius: var(--sb-select-item-radius);
}

.rtg-rounded-select-trigger-radius{
  border-radius: var(--sb-select-trigger-radius);
}

.rtg-rounded-skeleton-radius{
  border-radius: var(--sb-skeleton-radius);
}

.rtg-rounded-switch-radius{
  border-radius: var(--sb-switch-radius);
}

.rtg-rounded-switch-thumb-radius{
  border-radius: var(--sb-switch-thumb-radius);
}

.rtg-rounded-toast-action-radius{
  border-radius: var(--sb-toast-action-radius);
}

.rtg-rounded-toast-viewport-item-radius{
  border-radius: var(--sb-toast-viewport-item-radius);
}

.rtg-rounded-toggle-group-item-radius{
  border-radius: var(--sb-toggle-group-item-radius);
}

.rtg-rounded-toggle-radius{
  border-radius: var(--sb-toggle-radius);
}

.rtg-rounded-l-calendar-day-radius{
  border-top-left-radius: var(--sb-calendar-day-radius);
  border-bottom-left-radius: var(--sb-calendar-day-radius);
}

.rtg-rounded-r-calendar-day-radius{
  border-top-right-radius: var(--sb-calendar-day-radius);
  border-bottom-right-radius: var(--sb-calendar-day-radius);
}

.rtg-rounded-t-drawer-content-radius{
  border-top-left-radius: var(--sb-drawer-content-radius);
  border-top-right-radius: var(--sb-drawer-content-radius);
}

.rtg-border{
  border-width: 1px;
}

.rtg-border-0{
  border-width: 0px;
}

.rtg-border-button-outline-width-border{
  border-width: var(--rtg-button-width-border);
}

.rtg-border-combo-box-group-width-border{
  border-width: var(--sb-combo-box-group-width-border);
}

.rtg-border-combo-box-trigger-width-border{
  border-width: var(--sb-combo-box-trigger-width-border);
}

.rtg-border-context-menu-content-width-border{
  border-width: var(--sb-context-menu-content-width-border);
}

.rtg-border-dialog-content-width-border{
  border-width: var(--sb-dialog-content-width-border);
}

.rtg-border-dropdown-menu-content-width-border{
  border-width: var(--sb-dropdown-menu-content-width-border);
}

.rtg-border-hover-card-content-width-border{
  border-width: var(--sb-hover-card-content-width-border);
}

.rtg-border-menubar-content-width-border{
  border-width: var(--sb-menubar-content-width-border);
}

.rtg-border-menubar-width-border{
  border-width: var(--sb-menubar-width-border);
}

.rtg-border-navigation-menu-content-container-width-border{
  border-width: var(--sb-navigation-menu-content-container-width-border);
}

.rtg-border-popover-content-width-border{
  border-width: var(--sb-popover-content-width-border);
}

.rtg-border-radio-group-item-width-border{
  border-width: var(--sb-radio-group-item-width-border);
}

.rtg-border-select-content-width-border{
  border-width: var(--sb-select-content-width-border);
}

.rtg-border-select-trigger-width-border{
  border-width: var(--sb-select-trigger-width-border);
}

.rtg-border-switch-width-border{
  border-width: var(--sb-switch-width-border);
}

.rtg-border-b{
  border-bottom-width: 1px;
}

.rtg-border-b-accordion-item-width-border{
  border-bottom-width: var(--sb-accordion-item-width-border);
}

.rtg-border-b-command-input-wrapper-width-border{
  border-bottom-width: var(--sb-command-input-wrapper-width-border);
}

.rtg-border-b-table-body-width-border{
  border-bottom-width: var(--sb-table-body-width-border);
}

.rtg-border-b-table-footer-width-border{
  border-bottom-width: var(--sb-table-footer-width-border);
}

.rtg-border-b-table-head-width-border{
  border-bottom-width: var(--sb-table-head-width-border);
}

.rtg-border-t-drawer-content-width-border{
  border-top-width: var(--sb-drawer-content-width-border);
}

.rtg-border-t-table-footer-width-border{
  border-top-width: var(--sb-table-footer-width-border);
}

.rtg-border-dashed{
  border-style: dashed;
}

.rtg-border-none{
  border-style: none;
}

.rtg-border-button-outline-color-border{
  border-color: var(--rtg-button-outline-color-border);
}

.rtg-border-combo-box-group-color-border{
  border-color: hsl(var(--sb-combo-box-group-color-border));
}

.rtg-border-combo-box-trigger-color-border{
  border-color: hsl(var(--sb-combo-box-trigger-color-border));
}

.rtg-border-context-menu-content-color-border{
  border-color: hsl(var(--sb-context-menu-content-color-border));
}

.rtg-border-dialog-content-color-border{
  border-color: hsl(var(--sb-dialog-content-color-border));
}

.rtg-border-dropdown-menu-content-color-border{
  border-color: hsl(var(--sb-dropdown-menu-content-color-border));
}

.rtg-border-hover-card-content-color-border{
  border-color: hsl(var(--sb-hover-card-content-color-border));
}

.rtg-border-input{
  border-color: hsl(var(--input));
}

.rtg-border-menubar-color-border{
  border-color: hsl(var(--sb-menubar-color-border));
}

.rtg-border-menubar-content-color-border{
  border-color: hsl(var(--sb-menubar-content-color-border));
}

.rtg-border-navigation-menu-content-container-color-border{
  border-color: hsl(var(--sb-navigation-menu-content-container-color-border));
}

.rtg-border-popover-content-color-border{
  border-color: hsl(var(--sb-popover-content-color-border));
}

.rtg-border-radio-group-item-color-border{
  border-color: hsl(var(--sb-radio-group-item-color-border));
}

.rtg-border-scrollarea-color-border{
  border-color: hsl(var(--sb-scrollarea-color-border));
}

.rtg-border-select-content-color-border{
  border-color: hsl(var(--sb-select-content-color-border));
}

.rtg-border-select-trigger-color-border{
  border-color: hsl(var(--sb-select-trigger-color-border));
}

.rtg-border-switch-color-border{
  border-color: hsl(var(--sb-switch-color-border));
}

.rtg-border-table-body-color-border{
  border-color: hsl(var(--sb-table-body-color-border));
}

.rtg-border-table-footer-color-border{
  border-color: hsl(var(--sb-table-footer-color-border));
}

.rtg-border-table-head-color-border{
  border-color: hsl(var(--sb-table-head-color-border));
}

.rtg-border-toast-action-color-border{
  border-color: hsl(var(--sb-toast-action-color-border));
}

.rtg-border-toast-viewport-default-color-border{
  border-color: hsl(var(--sb-toast-viewport-default-color-border));
}

.rtg-border-toggle-group-item-outline-color-border{
  border-color: hsl(var(--sb-toggle-group-item-outline-color-border));
}

.rtg-border-toggle-outline-color-border{
  border-color: hsl(var(--sb-toggle-outline-color-border));
}

.rtg-border-b-accordion-item-color-border{
  border-bottom-color: hsl(var(--sb-accordion-item-color-border));
}

.rtg-border-b-command-input-wrapper-color-border{
  border-bottom-color: hsl(var(--sb-command-input-wrapper-color-border));
}

.rtg-border-t-drawer-content-color-border{
  border-top-color: hsl(var(--sb-drawer-content-color-border));
}

.rtg-bg-background{
  background-color: hsl(var(--background));
}

.rtg-bg-button-default-color-bg{
  background-color: var(--rtg-button-default-color-bg);
}

.rtg-bg-button-destructive-color-bg{
  background-color: var(--rtg-button-destructive-color-bg);
}

.rtg-bg-button-outline-color-bg{
  background-color: var(--rtg-button-outline-color-bg);
}

.rtg-bg-button-secondary-color-bg{
  background-color: var(--rtg-button-secondary-color-bg);
}

.rtg-bg-calendar-color-bg{
  background-color: hsl(var(--sb-calendar-color-bg));
}

.rtg-bg-calendar-day-button-today-color-bg{
  background-color: hsl(var(--sb-calendar-day-button-today-color-bg));
}

.rtg-bg-calendar-day-color-bg-selected{
  background-color: hsl(var(--sb-calendar-day-color-bg-selected));
}

.rtg-bg-calendar-day-today-color-bg{
  background-color: hsl(var(--sb-calendar-day-today-color-bg));
}

.rtg-bg-carousel-button-color-bg{
  background-color: hsl(var(--sb-carousel-button-color-bg));
}

.rtg-bg-combo-box-group-color-bg{
  background-color: hsl(var(--sb-combo-box-group-color-bg));
}

.rtg-bg-combo-box-input-color-bg{
  background-color: hsl(var(--sb-combo-box-input-color-bg));
}

.rtg-bg-combo-box-trigger-color-bg{
  background-color: hsl(var(--sb-combo-box-trigger-color-bg));
}

.rtg-bg-command-color-bg{
  background-color: hsl(var(--sb-command-color-bg));
}

.rtg-bg-command-input-color-bg{
  background-color: hsl(var(--sb-command-input-color-bg));
}

.rtg-bg-command-separator-color-bg{
  background-color: hsl(var(--sb-command-separator-color-bg));
}

.rtg-bg-context-menu-content-color-bg{
  background-color: hsl(var(--sb-context-menu-content-color-bg));
}

.rtg-bg-context-menu-separator-color-bg{
  background-color: hsl(var(--sb-context-menu-separator-color-bg));
}

.rtg-bg-dialog-content-color-bg{
  background-color: hsl(var(--sb-dialog-content-color-bg));
}

.rtg-bg-dialog-overlay-color-bg{
  background-color: hsl(var(--sb-dialog-overlay-color-bg));
}

.rtg-bg-drawer-content-color-bg{
  background-color: hsl(var(--sb-drawer-content-color-bg));
}

.rtg-bg-drawer-overlay-color-bg{
  background-color: hsl(var(--sb-drawer-overlay-color-bg));
}

.rtg-bg-drawer-thumb-color-bg{
  background-color: hsl(var(--sb-drawer-thumb-color-bg));
}

.rtg-bg-dropdown-menu-content-color-bg{
  background-color: hsl(var(--sb-dropdown-menu-content-color-bg));
}

.rtg-bg-dropdown-menu-separator-color-bg{
  background-color: hsl(var(--sb-dropdown-menu-separator-color-bg));
}

.rtg-bg-hover-card-content-color-bg{
  background-color: hsl(var(--sb-hover-card-content-color-bg));
}

.rtg-bg-menubar-color-bg{
  background-color: hsl(var(--sb-menubar-color-bg));
}

.rtg-bg-menubar-content-color-bg{
  background-color: hsl(var(--sb-menubar-content-color-bg));
}

.rtg-bg-menubar-separator-color-bg{
  background-color: hsl(var(--sb-menubar-separator-color-bg));
}

.rtg-bg-muted{
  background-color: hsl(var(--muted));
}

.rtg-bg-navigation-menu-content-container-color-bg{
  background-color: hsl(var(--sb-navigation-menu-content-container-color-bg));
}

.rtg-bg-navigation-menu-item-color-bg{
  background-color: hsl(var(--sb-navigation-menu-item-color-bg));
}

.rtg-bg-navigation-menu-link-color-bg{
  background-color: hsl(var(--sb-navigation-menu-link-color-bg));
}

.rtg-bg-popover-content-color-bg{
  background-color: hsl(var(--sb-popover-content-color-bg));
}

.rtg-bg-primary{
  background-color: hsl(var(--primary));
}

.rtg-bg-progress-color-bg{
  background-color: hsl(var(--sb-progress-color-bg));
}

.rtg-bg-progress-indicator-color-bg{
  background-color: hsl(var(--sb-progress-indicator-color-bg));
}

.rtg-bg-radio-group-item-color-bg{
  background-color: hsl(var(--sb-radio-group-item-color-bg));
}

.rtg-bg-scrollarea-color-bg{
  background-color: hsl(var(--sb-scrollarea-color-bg));
}

.rtg-bg-select-content-color-bg{
  background-color: hsl(var(--sb-select-content-color-bg));
}

.rtg-bg-select-separator-color-bg{
  background-color: hsl(var(--sb-select-separator-color-bg));
}

.rtg-bg-select-trigger-color-bg{
  background-color: hsl(var(--sb-select-trigger-color-bg));
}

.rtg-bg-skeleton-color-bg{
  background-color: hsl(var(--sb-skeleton-color-bg));
}

.rtg-bg-switch-color-bg-checked{
  background-color: hsl(var(--sb-switch-color-bg-checked));
}

.rtg-bg-switch-color-bg-unchecked{
  background-color: hsl(var(--sb-switch-color-bg-unchecked));
}

.rtg-bg-switch-thumb-color-bg-checked{
  background-color: hsl(var(--sb-switch-thumb-color-bg-checked));
}

.rtg-bg-switch-thumb-color-bg-unchecked{
  background-color: hsl(var(--sb-switch-thumb-color-bg-unchecked));
}

.rtg-bg-table-footer-color-bg{
  background-color: hsl(var(--sb-table-footer-color-bg));
}

.rtg-bg-table-preview-color-bg{
  background-color: hsl(var(--sb-table-preview-color-bg));
}

.rtg-bg-toast-action-default-color-bg{
  background-color: hsl(var(--sb-toast-action-default-color-bg));
}

.rtg-bg-toast-action-destructive-color-bg{
  background-color: hsl(var(--sb-toast-action-destructive-color-bg));
}

.rtg-bg-toast-viewport-default-color-bg{
  background-color: hsl(var(--sb-toast-viewport-default-color-bg));
}

.rtg-bg-toast-viewport-destructive-color-bg{
  background-color: hsl(var(--sb-toast-viewport-destructive-color-bg));
}

.rtg-bg-transparent{
  background-color: transparent;
}

.rtg-fill-current{
  fill: currentColor;
}

.rtg-fill-primary{
  fill: hsl(var(--primary));
}

.rtg-fill-radio-group-indicator-color-fill{
  fill: hsl(var(--sb-radio-group-indicator-color-fill));
}

.rtg-object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.rtg-p-0{
  padding: 0;
}

.rtg-p-1{
  padding: 0.25rem;
}

.rtg-p-10{
  padding: 2.5rem;
}

.rtg-p-2{
  padding: 0.5rem;
}

.rtg-p-4{
  padding: 1rem;
}

.rtg-p-6{
  padding: 1.5rem;
}

.rtg-p-calendar-day-space-p{
  padding: var(--sb-calendar-day-space-p);
}

.rtg-p-calendar-space-p{
  padding: var(--sb-calendar-space-p);
}

.rtg-p-command-group-space-p{
  padding: var(--sb-command-group-space-p);
}

.rtg-p-context-menu-content-space-p{
  padding: var(--sb-context-menu-content-space-p);
}

.rtg-p-date-picker-content-space-p{
  padding: var(--sb-date-picker-content-space-p);
}

.rtg-p-dialog-content-space-p{
  padding: var(--sb-dialog-content-space-p);
}

.rtg-p-drawer-footer-space-p{
  padding: var(--sb-drawer-footer-space-p);
}

.rtg-p-drawer-header-space-p{
  padding: var(--sb-drawer-header-space-p);
}

.rtg-p-dropdown-menu-content-space-p{
  padding: var(--sb-dropdown-menu-content-space-p);
}

.rtg-p-hover-card-content-space-p{
  padding: var(--sb-hover-card-content-space-p);
}

.rtg-p-menubar-content-space-p{
  padding: var(--sb-menubar-content-space-p);
}

.rtg-p-menubar-space-p{
  padding: var(--sb-menubar-space-p);
}

.rtg-p-popover-content-space-p{
  padding: var(--sb-popover-content-space-p);
}

.rtg-p-select-content-viewport-space-p{
  padding: var(--sb-select-content-viewport-space-p);
}

.rtg-px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.rtg-px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.rtg-px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.rtg-px-button-space-px-default{
  padding-left: var(--rtg-button-space-px-default);
  padding-right: var(--rtg-button-space-px-default);
}

.rtg-px-button-space-px-lg{
  padding-left: var(--rtg-button-space-px-lg);
  padding-right: var(--rtg-button-space-px-lg);
}

.rtg-px-button-space-px-sm{
  padding-left: var(--rtg-button-space-px-sm);
  padding-right: var(--rtg-button-space-px-sm);
}

.rtg-px-calendar-month-caption-space-px{
  padding-left: var(--sb-calendar-month-caption-space-px);
  padding-right: var(--sb-calendar-month-caption-space-px);
}

.rtg-px-carousel-button-space-px{
  padding-left: var(--sb-carousel-button-space-px);
  padding-right: var(--sb-carousel-button-space-px);
}

.rtg-px-carousel-slide-space-px{
  padding-left: var(--sb-carousel-slide-space-px);
  padding-right: var(--sb-carousel-slide-space-px);
}

.rtg-px-combo-box-group-space-px{
  padding-left: var(--sb-combo-box-group-space-px);
  padding-right: var(--sb-combo-box-group-space-px);
}

.rtg-px-combo-box-input-space-px{
  padding-left: var(--sb-combo-box-input-space-px);
  padding-right: var(--sb-combo-box-input-space-px);
}

.rtg-px-combo-box-item-space-px{
  padding-left: var(--sb-combo-box-item-space-px);
  padding-right: var(--sb-combo-box-item-space-px);
}

.rtg-px-combo-box-trigger-space-px{
  padding-left: var(--sb-combo-box-trigger-space-px);
  padding-right: var(--sb-combo-box-trigger-space-px);
}

.rtg-px-command-heading-space-px{
  padding-left: var(--sb-command-heading-space-px);
  padding-right: var(--sb-command-heading-space-px);
}

.rtg-px-command-input-wrapper-space-px{
  padding-left: var(--sb-command-input-wrapper-space-px);
  padding-right: var(--sb-command-input-wrapper-space-px);
}

.rtg-px-command-item-space-px{
  padding-left: var(--sb-command-item-space-px);
  padding-right: var(--sb-command-item-space-px);
}

.rtg-px-context-menu-item-space-px{
  padding-left: var(--sb-context-menu-item-space-px);
  padding-right: var(--sb-context-menu-item-space-px);
}

.rtg-px-context-menu-label-space-px{
  padding-left: var(--sb-context-menu-label-space-px);
  padding-right: var(--sb-context-menu-label-space-px);
}

.rtg-px-dropdown-menu-item-space-px{
  padding-left: var(--sb-dropdown-menu-item-space-px);
  padding-right: var(--sb-dropdown-menu-item-space-px);
}

.rtg-px-dropdown-menu-label-space-px{
  padding-left: var(--sb-dropdown-menu-label-space-px);
  padding-right: var(--sb-dropdown-menu-label-space-px);
}

.rtg-px-menubar-item-space-px{
  padding-left: var(--sb-menubar-item-space-px);
  padding-right: var(--sb-menubar-item-space-px);
}

.rtg-px-menubar-label-space-px{
  padding-left: var(--sb-menubar-label-space-px);
  padding-right: var(--sb-menubar-label-space-px);
}

.rtg-px-menubar-trigger-space-px{
  padding-left: var(--sb-menubar-trigger-space-px);
  padding-right: var(--sb-menubar-trigger-space-px);
}

.rtg-px-navigation-menu-link-space-px{
  padding-left: var(--sb-navigation-menu-link-space-px);
  padding-right: var(--sb-navigation-menu-link-space-px);
}

.rtg-px-navigation-menu-list-space-px{
  padding-left: var(--sb-navigation-menu-list-space-px);
  padding-right: var(--sb-navigation-menu-list-space-px);
}

.rtg-px-pagination-next-space-px{
  padding-left: var(--sb-pagination-next-space-px);
  padding-right: var(--sb-pagination-next-space-px);
}

.rtg-px-pagination-previous-space-px{
  padding-left: var(--sb-pagination-previous-space-px);
  padding-right: var(--sb-pagination-previous-space-px);
}

.rtg-px-select-label-space-px{
  padding-left: var(--sb-select-label-space-px);
  padding-right: var(--sb-select-label-space-px);
}

.rtg-px-select-trigger-space-px{
  padding-left: var(--sb-select-trigger-space-px);
  padding-right: var(--sb-select-trigger-space-px);
}

.rtg-px-table-body-cell-space-px{
  padding-left: var(--sb-table-body-cell-space-px);
  padding-right: var(--sb-table-body-cell-space-px);
}

.rtg-px-table-footer-cell-space-px{
  padding-left: var(--sb-table-footer-cell-space-px);
  padding-right: var(--sb-table-footer-cell-space-px);
}

.rtg-px-table-head-cell-space-px{
  padding-left: var(--sb-table-head-cell-space-px);
  padding-right: var(--sb-table-head-cell-space-px);
}

.rtg-px-table-preview-space-px{
  padding-left: var(--sb-table-preview-space-px);
  padding-right: var(--sb-table-preview-space-px);
}

.rtg-px-toast-action-space-px{
  padding-left: var(--sb-toast-action-space-px);
  padding-right: var(--sb-toast-action-space-px);
}

.rtg-px-toast-viewport-item-space-px{
  padding-left: var(--sb-toast-viewport-item-space-px);
  padding-right: var(--sb-toast-viewport-item-space-px);
}

.rtg-px-toast-viewport-root-space-px{
  padding-left: var(--sb-toast-viewport-root-space-px);
  padding-right: var(--sb-toast-viewport-root-space-px);
}

.rtg-px-toggle-group-item-space-px-lg{
  padding-left: var(--sb-toggle-group-item-space-px-lg);
  padding-right: var(--sb-toggle-group-item-space-px-lg);
}

.rtg-px-toggle-group-item-space-px-md{
  padding-left: var(--sb-toggle-group-item-space-px-md);
  padding-right: var(--sb-toggle-group-item-space-px-md);
}

.rtg-px-toggle-group-item-space-px-sm{
  padding-left: var(--sb-toggle-group-item-space-px-sm);
  padding-right: var(--sb-toggle-group-item-space-px-sm);
}

.rtg-px-toggle-space-px-lg{
  padding-left: var(--sb-toggle-space-px-lg);
  padding-right: var(--sb-toggle-space-px-lg);
}

.rtg-px-toggle-space-px-md{
  padding-left: var(--sb-toggle-space-px-md);
  padding-right: var(--sb-toggle-space-px-md);
}

.rtg-px-toggle-space-px-sm{
  padding-left: var(--sb-toggle-space-px-sm);
  padding-right: var(--sb-toggle-space-px-sm);
}

.rtg-py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.rtg-py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.rtg-py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.rtg-py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.rtg-py-accordion-trigger-space-py{
  padding-top: var(--sb-accordion-trigger-space-py);
  padding-bottom: var(--sb-accordion-trigger-space-py);
}

.rtg-py-button-space-py-default{
  padding-top: var(--sb-ref-space-2);
  padding-bottom: var(--sb-ref-space-2);
}

.rtg-py-carousel-button-space-py{
  padding-top: var(--sb-carousel-button-space-py);
  padding-bottom: var(--sb-carousel-button-space-py);
}

.rtg-py-carousel-slide-space-py{
  padding-top: var(--sb-carousel-slide-space-py);
  padding-bottom: var(--sb-carousel-slide-space-py);
}

.rtg-py-combo-box-empty-space-py{
  padding-top: var(--sb-combo-box-empty-space-py);
  padding-bottom: var(--sb-combo-box-empty-space-py);
}

.rtg-py-combo-box-group-space-py{
  padding-top: var(--sb-combo-box-group-space-py);
  padding-bottom: var(--sb-combo-box-group-space-py);
}

.rtg-py-combo-box-input-space-py{
  padding-top: var(--sb-combo-box-input-space-py);
  padding-bottom: var(--sb-combo-box-input-space-py);
}

.rtg-py-combo-box-item-space-py{
  padding-top: var(--sb-combo-box-item-space-py);
  padding-bottom: var(--sb-combo-box-item-space-py);
}

.rtg-py-combo-box-trigger-space-py{
  padding-top: var(--sb-combo-box-trigger-space-py);
  padding-bottom: var(--sb-combo-box-trigger-space-py);
}

.rtg-py-command-empty-space-py{
  padding-top: var(--sb-command-empty-space-py);
  padding-bottom: var(--sb-command-empty-space-py);
}

.rtg-py-command-heading-space-py{
  padding-top: var(--sb-command-heading-space-py);
  padding-bottom: var(--sb-command-heading-space-py);
}

.rtg-py-command-input-space-py{
  padding-top: var(--sb-command-input-space-py);
  padding-bottom: var(--sb-command-input-space-py);
}

.rtg-py-command-item-space-py{
  padding-top: var(--sb-command-item-space-py);
  padding-bottom: var(--sb-command-item-space-py);
}

.rtg-py-context-menu-checkbox-item-space-py{
  padding-top: var(--sb-context-menu-checkbox-item-space-py);
  padding-bottom: var(--sb-context-menu-checkbox-item-space-py);
}

.rtg-py-context-menu-item-space-py{
  padding-top: var(--sb-context-menu-item-space-py);
  padding-bottom: var(--sb-context-menu-item-space-py);
}

.rtg-py-context-menu-label-space-py{
  padding-top: var(--sb-context-menu-label-space-py);
  padding-bottom: var(--sb-context-menu-label-space-py);
}

.rtg-py-context-menu-radio-item-space-py{
  padding-top: var(--sb-context-menu-radio-item-space-py);
  padding-bottom: var(--sb-context-menu-radio-item-space-py);
}

.rtg-py-dropdown-menu-checkbox-item-space-py{
  padding-top: var(--sb-dropdown-menu-checkbox-item-space-py);
  padding-bottom: var(--sb-dropdown-menu-checkbox-item-space-py);
}

.rtg-py-dropdown-menu-item-space-py{
  padding-top: var(--sb-dropdown-menu-item-space-py);
  padding-bottom: var(--sb-dropdown-menu-item-space-py);
}

.rtg-py-dropdown-menu-label-space-py{
  padding-top: var(--sb-dropdown-menu-label-space-py);
  padding-bottom: var(--sb-dropdown-menu-label-space-py);
}

.rtg-py-dropdown-menu-radio-item-space-py{
  padding-top: var(--sb-dropdown-menu-radio-item-space-py);
  padding-bottom: var(--sb-dropdown-menu-radio-item-space-py);
}

.rtg-py-menubar-checkbox-item-space-py{
  padding-top: var(--sb-menubar-checkbox-item-space-py);
  padding-bottom: var(--sb-menubar-checkbox-item-space-py);
}

.rtg-py-menubar-item-space-py{
  padding-top: var(--sb-menubar-item-space-py);
  padding-bottom: var(--sb-menubar-item-space-py);
}

.rtg-py-menubar-label-space-py{
  padding-top: var(--sb-menubar-label-space-py);
  padding-bottom: var(--sb-menubar-label-space-py);
}

.rtg-py-menubar-radio-item-space-py{
  padding-top: var(--sb-menubar-radio-item-space-py);
  padding-bottom: var(--sb-menubar-radio-item-space-py);
}

.rtg-py-menubar-trigger-space-py{
  padding-top: var(--sb-menubar-trigger-space-py);
  padding-bottom: var(--sb-menubar-trigger-space-py);
}

.rtg-py-navigation-menu-link-space-py{
  padding-top: var(--sb-navigation-menu-link-space-py);
  padding-bottom: var(--sb-navigation-menu-link-space-py);
}

.rtg-py-navigation-menu-list-space-py{
  padding-top: var(--sb-navigation-menu-list-space-py);
  padding-bottom: var(--sb-navigation-menu-list-space-py);
}

.rtg-py-select-item-space-py{
  padding-top: var(--sb-select-item-space-py);
  padding-bottom: var(--sb-select-item-space-py);
}

.rtg-py-select-label-space-py{
  padding-top: var(--sb-select-label-space-py);
  padding-bottom: var(--sb-select-label-space-py);
}

.rtg-py-select-trigger-space-py{
  padding-top: var(--sb-select-trigger-space-py);
  padding-bottom: var(--sb-select-trigger-space-py);
}

.rtg-py-table-body-cell-space-py{
  padding-top: var(--sb-table-body-cell-space-py);
  padding-bottom: var(--sb-table-body-cell-space-py);
}

.rtg-py-table-footer-cell-space-py{
  padding-top: var(--sb-table-footer-cell-space-py);
  padding-bottom: var(--sb-table-footer-cell-space-py);
}

.rtg-py-table-preview-space-py{
  padding-top: var(--sb-table-preview-space-py);
  padding-bottom: var(--sb-table-preview-space-py);
}

.rtg-py-toast-action-space-py{
  padding-top: var(--sb-toast-action-space-py);
  padding-bottom: var(--sb-toast-action-space-py);
}

.rtg-py-toast-viewport-item-space-py{
  padding-top: var(--sb-toast-viewport-item-space-py);
  padding-bottom: var(--sb-toast-viewport-item-space-py);
}

.rtg-py-toast-viewport-root-space-py{
  padding-top: var(--sb-toast-viewport-root-space-py);
  padding-bottom: var(--sb-toast-viewport-root-space-py);
}

.rtg-pb-0{
  padding-bottom: 0;
}

.rtg-pl-6{
  padding-left: 1.5rem;
}

.rtg-pl-8{
  padding-left: 2rem;
}

.rtg-pl-context-menu-checkbox-item-space-pl{
  padding-left: var(--sb-context-menu-checkbox-item-space-pl);
}

.rtg-pl-context-menu-radio-item-space-pl{
  padding-left: var(--sb-context-menu-radio-item-space-pl);
}

.rtg-pl-dropdown-menu-checkbox-item-space-pl{
  padding-left: var(--sb-dropdown-menu-checkbox-item-space-pl);
}

.rtg-pl-dropdown-menu-radio-item-space-pl{
  padding-left: var(--sb-dropdown-menu-radio-item-space-pl);
}

.rtg-pl-menubar-checkbox-item-space-pl{
  padding-left: var(--sb-menubar-checkbox-item-space-pl);
}

.rtg-pl-menubar-radio-item-space-pl{
  padding-left: var(--sb-menubar-radio-item-space-pl);
}

.rtg-pl-select-item-space-pl{
  padding-left: var(--sb-select-item-space-pl);
}

.rtg-pr-context-menu-checkbox-item-space-pr{
  padding-right: var(--sb-context-menu-checkbox-item-space-pr);
}

.rtg-pr-context-menu-radio-item-space-pr{
  padding-right: var(--sb-context-menu-radio-item-space-pr);
}

.rtg-pr-dropdown-menu-checkbox-item-space-pr{
  padding-right: var(--sb-dropdown-menu-checkbox-item-space-pr);
}

.rtg-pr-dropdown-menu-radio-item-space-pr{
  padding-right: var(--sb-dropdown-menu-radio-item-space-pr);
}

.rtg-pr-menubar-checkbox-item-space-pr{
  padding-right: var(--sb-menubar-checkbox-item-space-pr);
}

.rtg-pr-menubar-radio-item-space-pr{
  padding-right: var(--sb-menubar-radio-item-space-pr);
}

.rtg-pr-select-item-space-pr{
  padding-right: var(--sb-select-item-space-pr);
}

.rtg-pt-2{
  padding-top: 0.5rem;
}

.rtg-pt-4{
  padding-top: 1rem;
}

.rtg-text-left{
  text-align: left;
}

.rtg-text-center{
  text-align: center;
}

.rtg-text-right{
  text-align: right;
}

.rtg-align-middle{
  vertical-align: middle;
}

.rtg-font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.rtg-text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.rtg-text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.rtg-text-7xl{
  font-size: 4.5rem;
  line-height: 1;
}

.rtg-text-\[0\.70rem\]{
  font-size: 0.70rem;
}

.rtg-text-accordion-content-font{
  font-size: var(--sb-accordion-content-font-size);
  line-height: var(--sb-accordion-content-font-line-height);
}

.rtg-text-accordion-trigger-font{
  font-size: var(--sb-accordion-trigger-font-size);
  line-height: var(--sb-accordion-trigger-font-line-height);
}

.rtg-text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.rtg-text-breadcrumb-list-font{
  font-size: var(--sb-breadcrumb-list-font-size);
  line-height: var(--breadcrumb-list-font-line-height);
}

.rtg-text-button-font-size{
  font-size: var(--rtg-button-font-size-default);
  line-height: var(--rtg-button-font-line-height-default);
}

.rtg-text-calendar-caption-label-font{
  font-size: var(--sb-calendar-caption-label-font-size);
  line-height: var(--sb-calendar-caption-label-font-line-height);
}

.rtg-text-calendar-day-button-font{
  font-size: var(--sb-calendar-day-button-font-size);
  line-height: var(--sb-calendar-day-button-font-line-height);
}

.rtg-text-calendar-weekday-font{
  font-size: var(--sb-calendar-weekday-font-size);
  line-height: var(--sb-calendar-weekday-font-line-height);
}

.rtg-text-combo-box-empty-font{
  font-size: var(--sb-combo-box-empty-font-size);
}

.rtg-text-combo-box-input-font{
  font-size: var(--sb-combo-box-input-font-size);
}

.rtg-text-combo-box-trigger-font{
  font-size: var(--sb-combo-box-trigger-font-size);
}

.rtg-text-command-empty-font{
  font-size: var(--sb-command-empty-font-size);
  line-height: var(--sb-command-empty-font-line-height);
}

.rtg-text-command-heading-font{
  font-size: var(--sb-command-heading-font-size);
  line-height: var(--sb-command-heading-font-line-height);
}

.rtg-text-command-input-font{
  font-size: var(--sb-command-input-font-size);
  line-height: var(--sb-command-input-font-line-height);
}

.rtg-text-command-item-font{
  font-size: var(--sb-command-item-font-size);
  line-height: var(--sb-command-item-font-line-height);
}

.rtg-text-command-shortcut-font{
  font-size: var(--sb-command-shortcut-font-size);
  line-height: var(--sb-command-shortcut-font-line-height);
  letter-spacing: var(--sb-command-shortcut-font-letter-spacing);
}

.rtg-text-context-menu-checkbox-item-font{
  font-size: var(--sb-context-menu-checkbox-item-font-size);
  line-height: var(--sb-context-menu-checkbox-item-font-line-height);
}

.rtg-text-context-menu-item-font{
  font-size: var(--sb-context-menu-item-font-size);
  line-height: var(--sb-context-menu-item-font-line-height);
}

.rtg-text-context-menu-label-font{
  font-size: var(--sb-context-menu-label-font-size);
  line-height: var(--sb-context-menu-label-font-line-height);
}

.rtg-text-context-menu-radio-item-font{
  font-size: var(--sb-context-menu-radio-item-font-size);
  line-height: var(--sb-context-menu-radio-item-font-line-height);
}

.rtg-text-context-menu-shortcut-font{
  font-size: var(--sb-context-menu-shortcut-font-size);
  line-height: var(--sb-context-menu-shortcut-font-line-height);
  letter-spacing: var(--sb-context-menu-shortcut-font-letter-spacing);
}

.rtg-text-dialog-description-font{
  font-size: var(--sb-dialog-description-font-size);
  line-height: var(--sb-dialog-description-font-line-height);
}

.rtg-text-dialog-title-font{
  font-size: var(--sb-dialog-title-font-size);
  line-height: var(--sb-dialog-title-font-line-height);
}

.rtg-text-drawer-description-font{
  font-size: var(--sb-drawer-description-font-size);
  line-height: var(--sb-drawer-description-font-line-height);
}

.rtg-text-drawer-title-font{
  font-size: var(--sb-drawer-title-font-size);
  line-height: var(--sb-drawer-title-font-line-height);
}

.rtg-text-dropdown-menu-checkbox-item-font{
  font-size: var(--sb-dropdown-menu-checkbox-item-font-size);
  line-height: var(--sb-dropdown-menu-checkbox-item-font-line-height);
}

.rtg-text-dropdown-menu-item-font{
  font-size: var(--sb-dropdown-menu-item-font-size);
  line-height: var(--sb-dropdown-menu-item-font-line-height);
}

.rtg-text-dropdown-menu-label-font{
  font-size: var(--sb-dropdown-menu-label-font-size);
  line-height: var(--sb-dropdown-menu-label-font-line-height);
}

.rtg-text-dropdown-menu-radio-item-font{
  font-size: var(--sb-dropdown-menu-radio-item-font-size);
  line-height: var(--sb-dropdown-menu-radio-item-font-line-height);
}

.rtg-text-dropdown-menu-shortcut-font{
  font-size: var(--sb-dropdown-menu-shortcut-font-size);
  line-height: var(--sb-dropdown-menu-shortcut-font-line-height);
  letter-spacing: var(--sb-dropdown-menu-shortcut-font-letter-spacing);
}

.rtg-text-form-description-font{
  font-size: var(--sb-form-description-font-size);
  line-height: var(--sb-form-description-font-line-height);
  letter-spacing: var(--sb-form-description-font-letter-spacing);
}

.rtg-text-form-label-font{
  font-size: var(--sb-form-label-font-size);
  line-height: var(--sb-table-caption-font-line-height);
}

.rtg-text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.rtg-text-menubar-checkbox-item-font{
  font-size: var(--sb-menubar-checkbox-item-font-size);
  line-height: var(--sb-menubar-checkbox-item-font-line-height);
}

.rtg-text-menubar-item-font{
  font-size: var(--sb-menubar-item-font-size);
  line-height: var(--sb-menubar-item-font-line-height);
}

.rtg-text-menubar-label-font{
  font-size: var(--sb-menubar-label-font-size);
  line-height: var(--sb-menubar-label-font-line-height);
}

.rtg-text-menubar-radio-item-font{
  font-size: var(--sb-menubar-radio-item-font-size);
  line-height: var(--sb-menubar-radio-item-font-line-height);
}

.rtg-text-menubar-shortcut-font{
  font-size: var(--sb-menubar-shortcut-font-size);
  line-height: var(--sb-menubar-shortcut-font-line-height);
  letter-spacing: var(--sb-menubar-shortcut-font-letter-spacing);
}

.rtg-text-menubar-trigger-font{
  font-size: var(--sb-menubar-trigger-font-size);
  line-height: var(--sb-menubar-trigger-font-line-height);
}

.rtg-text-select-item-font{
  font-size: var(--sb-select-item-font-size);
  line-height: var(--sb-select-item-font-line-height);
}

.rtg-text-select-label-font{
  font-size: var(--sb-select-label-font-size);
  line-height: var(--sb-select-label-font-line-height);
}

.rtg-text-select-trigger-font{
  font-size: var(--sb-select-trigger-font-size);
  line-height: var(--sb-select-trigger-font-line-height);
}

.rtg-text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.rtg-text-table-caption-font{
  font-size: var(--sb-table-caption-font-size);
  line-height: var(--sb-table-caption-font-line-height);
}

.rtg-text-table-font{
  font-size: var(--sb-table-font-size);
  line-height: var(--sb-table-font-line-height);
  letter-spacing: var(--sb-table-font-letter-spacing);
}

.rtg-text-toast-action-font{
  font-size: var(--sb-toast-action-font-size);
  line-height: var(--sb-toast-action-font-line-height);
  letter-spacing: var(--sb-toast-action-font-letter-spacing);
}

.rtg-text-toast-description-font{
  font-size: var(--sb-toast-description-font-size);
  line-height: var(--sb-toast-description-font-line-height);
  letter-spacing: var(--sb-toast-description-font-letter-spacing);
}

.rtg-text-toast-title-font{
  font-size: var(--sb-toast-title-font-size);
  line-height: var(--sb-toast-title-font-line-height);
  letter-spacing: var(--sb-toast-title-font-letter-spacing);
}

.rtg-text-toggle-font{
  font-size: var(--sb-toggle-font-size);
  line-height: var(--sb-toggle-font-line-height);
  letter-spacing: var(--sb-toggle-font-letter-spacing);
}

.rtg-text-toggle-group-item-font{
  font-size: var(--sb-toggle-group-item-font-size);
  line-height: var(--sb-toggle-group-item-font-line-height);
  letter-spacing: var(--sb-toggle-group-item-font-letter-spacing);
}

.rtg-text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.rtg-font-accordion-content-font-weight{
  font-weight: var(--sb-accordion-content-font-weight);
}

.rtg-font-accordion-trigger-font-weight{
  font-weight: var(--sb-accordion-trigger-font-weight);
}

.rtg-font-bold{
  font-weight: 700;
}

.rtg-font-breadcrumb-list-font-weight{
  font-weight: var(--sb-breadcrumb-list-font-weight);
}

.rtg-font-breadcrumb-page-font-weight{
  font-weight: var(--sb-breadcrumb-page-font-weight);
}

.rtg-font-button-font-weight{
  font-weight: var(--rtg-button-font-weight);
}

.rtg-font-calendar-caption-label-font-weight{
  font-weight: var(--sb-calendar-caption-label-font-weight);
}

.rtg-font-calendar-day-button-font-weight{
  font-weight: var(--sb-calendar-day-button-font-weight);
}

.rtg-font-calendar-weekday-font-weight{
  font-weight: var(--sb-calendar-weekday-font-weight);
}

.rtg-font-command-heading-font-weight{
  font-weight: var(--sb-command-heading-font-weight);
}

.rtg-font-context-menu-label-font-weight{
  font-weight: var(--sb-context-menu-label-font-weight);
}

.rtg-font-date-picker-trigger-button-font-weight{
  font-weight: var(--sb-date-picker-trigger-button-font-weight);
}

.rtg-font-dialog-description-font-weight{
  font-weight: var(--sb-dialog-description-font-weight);
}

.rtg-font-dialog-title-font-weight{
  font-weight: var(--sb-dialog-title-font-weight);
}

.rtg-font-drawer-description-font-weight{
  font-weight: var(--sb-drawer-description-font-weight);
}

.rtg-font-drawer-title-font-weight{
  font-weight: var(--sb-drawer-title-font-weight);
}

.rtg-font-dropdown-menu-label-font-weight{
  font-weight: var(--sb-dropdown-menu-label-font-weight);
}

.rtg-font-form-label-font-weight{
  font-weight: var(--sb-form-label-font-weight);
}

.rtg-font-medium{
  font-weight: 500;
}

.rtg-font-menubar-label-font-weight{
  font-weight: var(--sb-menubar-label-font-weight);
}

.rtg-font-menubar-trigger-font-weight{
  font-weight: var(--sb-menubar-trigger-font-weight);
}

.rtg-font-normal{
  font-weight: 400;
}

.rtg-font-semibold{
  font-weight: 600;
}

.rtg-font-table-footer-font-weight{
  font-weight: var(--sb-table-footer-font-weight);
}

.rtg-font-table-head-cell-font-weight{
  font-weight: var(--sb-table-head-cell-font-weight);
}

.rtg-font-toast-action-font-weight{
  font-weight: var(--sb-toast-action-font-weight);
}

.rtg-font-toast-title-font-weight{
  font-weight: var(--sb-toast-title-font-weight);
}

.rtg-font-toggle-font-weight{
  font-weight: var(--sb-toggle-font-weight);
}

.rtg-font-toggle-group-item-font-weight{
  font-weight: var(--sb-toggle-group-item-font-weight);
}

.rtg-uppercase{
  text-transform: uppercase;
}

.rtg-leading-none{
  line-height: 1;
}

.rtg-leading-snug{
  line-height: 1.375;
}

.rtg-leading-tight{
  line-height: 1.25;
}

.rtg-tracking-tight{
  letter-spacing: -0.025em;
}

.rtg-tracking-tighter{
  letter-spacing: -0.05em;
}

.rtg-text-accordion-trigger-icon-color-text{
  color: hsl(var(--sb-accordion-trigger-icon-color-text));
}

.rtg-text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.rtg-text-breadcrumb-list-color-text{
  color: hsl(var(--sb-breadcrumb-list-color-text));
}

.rtg-text-breadcrumb-page-color-text{
  color: hsl(var(--sb-breadcrumb-page-color-text));
}

.rtg-text-button-default-color-text{
  color: var(--rtg-button-default-color-text);
}

.rtg-text-button-destructive-color-text{
  color: var(--rtg-button-destructive-color-text);
}

.rtg-text-button-link-color-text{
  color: var(--rtg-button-link-color-text);
}

.rtg-text-button-secondary-color-text{
  color: var(--rtg-button-secondary-color-text);
}

.rtg-text-calendar-day-button-outside-color-text{
  color: hsl(var(--sb-calendar-day-button-outside-color-text));
}

.rtg-text-calendar-day-button-today-color-text{
  color: hsl(var(--sb-calendar-day-button-today-color-text));
}

.rtg-text-calendar-weekday-color-text{
  color: hsl(var(--sb-calendar-weekday-color-text));
}

.rtg-text-carousel-button-color-text{
  color: hsl(var(--sb-carousel-button-color-text));
}

.rtg-text-combo-box-input-color-text{
  color: hsl(var(--sb-combo-boxinput-color-text));
}

.rtg-text-command-color-text{
  color: hsl(var(--sb-command-color-text));
}

.rtg-text-command-group-color-text{
  color: hsl(var(--sb-command-group-color-text));
}

.rtg-text-command-heading-color-text{
  color: hsl(var(--sb-command-heading-color-text));
}

.rtg-text-command-item-icon-color-text{
  color: hsl(var(--sb-command-item-icon-color-text));
}

.rtg-text-command-shortcut-color-text{
  color: hsl(var(--sb-command-shortcut-color-text));
}

.rtg-text-context-menu-content-color-text{
  color: hsl(var(--sb-context-menu-content-color-text));
}

.rtg-text-context-menu-item-icon-color-text{
  color: hsl(var(--sb-context-menu-item-icon-color-text));
}

.rtg-text-context-menu-shortcut-color-text{
  color: hsl(var(--sb-context-menu-shortcut-color-text));
}

.rtg-text-destructive{
  color: hsl(var(--destructive));
}

.rtg-text-dialog-description-color-text{
  color: hsl(var(--sb-dialog-description-color-text));
}

.rtg-text-drawer-description-color-text{
  color: hsl(var(--sb-drawer-description-color-text));
}

.rtg-text-drawer-title-color-text{
  color: hsl(var(--sb-drawer-title-color-text));
}

.rtg-text-dropdown-menu-content-color-text{
  color: hsl(var(--sb-dropdown-menu-content-color-text));
}

.rtg-text-dropdown-menu-item-icon-color-text{
  color: hsl(var(--sb-dropdown-menu-item-icon-color-text));
}

.rtg-text-dropdown-menu-shortcut-color-text{
  color: hsl(var(--sb-dropdown-menu-shortcut-color-text));
}

.rtg-text-form-description-color-text{
  color: hsl(var(--sb-form-description-color-text));
}

.rtg-text-form-label-color-text-error{
  color: hsl(var(--sb-form-label-color-text-error));
}

.rtg-text-form-message-color-text{
  color: hsl(var(--sb-form-message-color-text));
}

.rtg-text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.rtg-text-hover-card-content-color-text{
  color: hsl(var(--sb-hover-card-content-color-text));
}

.rtg-text-menubar-content-color-text{
  color: hsl(var(--sb-menubar-content-color-text));
}

.rtg-text-menubar-item-icon-color-text{
  color: hsl(var(--sb-menubar-item-icon-color-text));
}

.rtg-text-menubar-shortcut-color-text{
  color: hsl(var(--sb-menubar-shortcut-color-text));
}

.rtg-text-muted-foreground{
  color: hsl(var(--muted-foreground));
}

.rtg-text-popover-content-color-text{
  color: hsl(var(--sb-popover-content-color-text));
}

.rtg-text-primary{
  color: hsl(var(--primary));
}

.rtg-text-primary-foreground{
  color: hsl(var(--primary-foreground));
}

.rtg-text-purple-600{
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.rtg-text-select-content-color-text{
  color: hsl(var(--sb-select-content-color-text));
}

.rtg-text-select-item-icon-color-text{
  color: hsl(var(--sb-select-item-icon-color-text));
}

.rtg-text-select-label-color-text{
  color: hsl(var(--sb-select-label-color-text));
}

.rtg-text-select-trigger-icon-color-text{
  color: hsl(var(--sb-select-trigger-icon-color-text));
}

.rtg-text-table-caption-color-text{
  color: hsl(var(--sb-table-caption-color-text));
}

.rtg-text-table-head-cell-color-text{
  color: hsl(var(--sb-table-head-cell-color-text));
}

.rtg-text-toast-action-color-text{
  color: hsl(var(--sb-toast-action-color-text));
}

.rtg-text-toast-action-destructive-color-text{
  color: hsl(var(--sb-toast-action-destructive-color-text));
}

.rtg-text-toast-viewport-default-color-text{
  color: hsl(var(--sb-toast-viewport-default-color-text));
}

.rtg-text-toast-viewport-destructive-color-text{
  color: hsl(var(--sb-toast-viewport-destructive-color-text));
}

.rtg-no-underline{
  text-decoration-line: none;
}

.rtg-underline-offset-4{
  text-underline-offset: 4px;
}

.rtg-opacity-0{
  opacity: 0;
}

.rtg-opacity-100{
  opacity: 1;
}

.rtg-opacity-40{
  opacity: 0.4;
}

.rtg-opacity-70{
  opacity: 0.7;
}

.rtg-opacity-command-input-icon-opacity{
  opacity: var(--sb-command-input-icon-opacity);
}

.rtg-opacity-command-item-opacity-disabled{
  opacity: var(--sb-command-item-opacity-disabled);
}

.rtg-opacity-menubar-item-opacity-disabled{
  opacity: var(--sb-menubar-item-opacity-disabled);
}

.rtg-opacity-select-trigger-icon-opacity{
  opacity: var(--sb-select-trigger-icon-opacity);
}

.rtg-opacity-select-trigger-opacity-disabled{
  opacity: var(--sb-select-trigger-opacity-disabled);
}

.rtg-opacity-switch-opacity-disabled{
  opacity: var(--sb-switch-opacity-disabled);
}

.rtg-opacity-toast-description-opacity{
  opacity: var(--sb-toast-description-opacity);
}

.rtg-shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-combo-box-group-shadow{
  --tw-shadow: var(--sb-combo-box-group-shadow);
  --tw-shadow-colored: var(--sb-combo-box-group-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-context-menu-content-shadow{
  --tw-shadow: var(--sb-context-menu-content-shadow);
  --tw-shadow-colored: var(--sb-context-menu-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-dialog-content-shadow{
  --tw-shadow: var(--sb-dialog-content-shadow);
  --tw-shadow-colored: var(--sb-dialog-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-dropdown-menu-content-shadow{
  --tw-shadow: var(--sb-dropdown-menu-content-shadow);
  --tw-shadow-colored: var(--sb-dropdown-menu-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-hover-card-content-shadow{
  --tw-shadow: var(--sb-hover-card-content-shadow);
  --tw-shadow-colored: var(--sb-hover-card-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-menubar-content-shadow{
  --tw-shadow: var(--sb-menubar-content-shadow);
  --tw-shadow-colored: var(--sb-menubar-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-popover-content-shadow{
  --tw-shadow: var(--sb-popover-content-shadow);
  --tw-shadow-colored: var(--sb-popover-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-select-content-shadow{
  --tw-shadow: var(--sb-select-content-shadow);
  --tw-shadow-colored: var(--sb-select-content-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-shadow-toast-viewport-item-shadow{
  --tw-shadow: var(--sb-toast-viewport-item-shadow);
  --tw-shadow-colored: var(--sb-toast-viewport-item-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rtg-outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.rtg-ring-0{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.rtg-ring-offset-background{
  --tw-ring-offset-color: hsl(var(--background));
}

.rtg-ring-offset-dialog-close-color-ring-offset{
  --tw-ring-offset-color: hsl(var(--sb-dialog-close-color-ring-offset));
}

.rtg-grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.rtg-transition-\[color\,box-shadow\]{
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rtg-transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rtg-transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rtg-transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rtg-transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rtg-duration-200{
  transition-duration: 200ms;
}

.rtg-duration-carousel-motion-duration{
  transition-duration: var(--sb-carousel-motion-duration);
}

.rtg-duration-combo-box-group-motion-duration{
  transition-duration: var(--sb-combo-box-group-motion-duration);
}

.rtg-duration-navigation-menu-item-icon-motion-duration{
  transition-duration: var(--sb-navigation-menu-item-icon-motion-duration);
}

.rtg-ease-carousel-motion-fn{
  transition-timing-function: var(--sb-carousel-motion-fn);
}

.rtg-ease-combo-box-group-motion-fn{
  transition-timing-function: var(--sb-combo-box-group-motion-fn);
}

@keyframes enter{
  from{
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit{
  to{
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

.rtg-animate-in{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.rtg-animate-out{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.rtg-fade-in-0{
  --tw-enter-opacity: 0;
}

.rtg-fade-out-0{
  --tw-exit-opacity: 0;
}

.rtg-zoom-in-95{
  --tw-enter-scale: .95;
}

.rtg-zoom-out-95{
  --tw-exit-scale: .95;
}

.rtg-slide-in-from-top-2{
  --tw-enter-translate-y: -0.5rem;
}

.rtg-duration-200{
  animation-duration: 200ms;
}

.rtg-duration-carousel-motion-duration{
  animation-duration: var(--sb-carousel-motion-duration);
}

.rtg-duration-combo-box-group-motion-duration{
  animation-duration: var(--sb-combo-box-group-motion-duration);
}

.rtg-duration-navigation-menu-item-icon-motion-duration{
  animation-duration: var(--sb-navigation-menu-item-icon-motion-duration);
}

.rtg-ease-carousel-motion-fn{
  animation-timing-function: var(--sb-carousel-motion-fn);
}

.rtg-ease-combo-box-group-motion-fn{
  animation-timing-function: var(--sb-combo-box-group-motion-fn);
}

.step {
    counter-increment: step;
  }

.step:before{
  position: absolute;
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 4px;
  border-color: hsl(var(--background));
  background-color: hsl(var(--muted));
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  margin-left: -50px;
  margin-top: -4px;
    content: counter(step);
    text-indent: -1px;
}

[data-theme='light'] {
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 9%;
  --background: 0 0% 100%;
  --border: 0 0% 90%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 4%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 85% 97%;
  --foreground: 0 0% 4%;
  --input: 0 0% 90%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 4%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --ring: 0 0% 64%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;
  --chart-1: 24 91% 48%;
  --chart-2: 173 82% 31%;
  --chart-3: 192 62% 24%;
  --chart-4: 45 97% 60%;
  --chart-5: 39 94% 53%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 4%;
  --sidebar-primary: 0 0% 9%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 96%;
  --sidebar-accent-foreground: 0 0% 9%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 0 0% 64%;
  --radius: 0.5rem;
  --custom-outline: 0 0% 64% / 50%;
  --success: 137 82% 30%;
  --divider: 0 0% 85%;
  --base-background: 0 0% 98%;
}

[data-theme='dark'] {
  --accent: 0 0% 25%;
  --accent-foreground: 0 0% 98%;
  --background: 0 0% 4%;
  --border: 0 0% 100% / 10%;
  --card: 0 0% 9%;
  --card-foreground: 0 0% 98%;
  --destructive: 0 91% 71%;
  --destructive-foreground: 0 85% 97%;
  --foreground: 0 0% 98%;
  --input: 0 0% 100% / 15%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 64%;
  --popover: 0 0% 15%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 90%;
  --primary-foreground: 0 0% 9%;
  --ring: 0 0% 45%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 98%;
  --chart-1: 226 72% 47%;
  --chart-2: 160 82% 41%;
  --chart-3: 39 94% 53%;
  --chart-4: 270 91% 66%;
  --chart-5: 351 93% 64%;
  --sidebar-background: 0 0% 9%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-primary: 226 72% 47%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 15%;
  --sidebar-accent-foreground: 0 0% 98%;
  --sidebar-border: 0 0% 100% / 10%;
  --sidebar-ring: 0 0% 32%;
  --radius: 0.5rem;
  --custom-outline: 0 0% 45% / 50%;
  --success: 133 33% 57%;
  --divider: 0 0% 42%;
  --base-background: 0 0% 4%
}

[data-theme='light'] .rtg-no-autofill-bg:-webkit-autofill {
  -webkit-text-fill-color: hsl(0 0% 4%) !important; /* light foreground */
}

[data-theme='dark'] .rtg-no-autofill-bg:-webkit-autofill {
  -webkit-text-fill-color: hsl(0 0% 98%) !important; /* dark foreground */
}

.rtg-no-autofill-bg:-webkit-autofill,
.rtg-no-autofill-bg:-webkit-autofill:hover,
.rtg-no-autofill-bg:-webkit-autofill:focus,
.rtg-no-autofill-bg:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out;
  transition: background-color 5000s ease-in-out;
}

@media (max-width: 640px) {
  .container{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* @layer components {
  input:-internal-autofill-selected,
  textarea:-internal-autofill-selected,
  select:-internal-autofill-selected {
    @apply text-inherit;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
  }
} */

.file\:rtg-border-0::file-selector-button{
  border-width: 0px;
}

.file\:rtg-bg-transparent::file-selector-button{
  background-color: transparent;
}

.file\:rtg-text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:rtg-font-medium::file-selector-button{
  font-weight: 500;
}

.file\:rtg-text-foreground::file-selector-button{
  color: hsl(var(--foreground));
}

.placeholder\:rtg-text-combo-box-input-color-text-placeholder::-moz-placeholder{
  color: hsl(var(--sb-combo-box-input-color-text-placeholder));
}

.placeholder\:rtg-text-combo-box-input-color-text-placeholder::placeholder{
  color: hsl(var(--sb-combo-box-input-color-text-placeholder));
}

.placeholder\:rtg-text-command-input-placeholder-color-text::-moz-placeholder{
  color: hsl(var(--sb-command-input-placeholder-color-text));
}

.placeholder\:rtg-text-command-input-placeholder-color-text::placeholder{
  color: hsl(var(--sb-command-input-placeholder-color-text));
}

.placeholder\:rtg-text-muted-foreground::-moz-placeholder{
  color: hsl(var(--muted-foreground));
}

.placeholder\:rtg-text-muted-foreground::placeholder{
  color: hsl(var(--muted-foreground));
}

.last\:rtg-border-b-0:last-child{
  border-bottom-width: 0px;
}

.hover\:rtg-bg-accent:hover{
  background-color: hsl(var(--accent));
}

.hover\:rtg-bg-button-default-color-bg-hover:hover{
  background-color: var(--rtg-button-default-color-bg-hover);
}

.hover\:rtg-bg-button-destructive-color-bg-hover:hover{
  background-color: var(--rtg-button-destructive-color-bg-hover);
}

.hover\:rtg-bg-button-ghost-color-bg-hover:hover{
  background-color: var(--rtg-button-ghost-color-bg-hover);
}

.hover\:rtg-bg-button-outline-color-bg-hover:hover{
  background-color: var(--rtg-button-outline-color-bg-hover);
}

.hover\:rtg-bg-button-secondary-color-bg-hover:hover{
  background-color: var(--rtg-button-secondary-color-bg-hover);
}

.hover\:rtg-bg-carousel-button-color-bg-hover:hover{
  background-color: hsl(var(--sb-carousel-button-color-bg-hover));
}

.hover\:rtg-bg-command-item-color-bg-hover:hover{
  background-color: hsl(var(--sb-command-item-color-bg-hover));
}

.hover\:rtg-bg-context-menu-item-color-bg-hover:hover{
  background-color: hsl(var(--sb-context-menu-item-color-bg-hover));
}

.hover\:rtg-bg-dropdown-menu-item-color-bg-hover:hover{
  background-color: hsl(var(--sb-dropdown-menu-item-color-bg-hover));
}

.hover\:rtg-bg-menubar-trigger-color-bg-active:hover{
  background-color: hsl(var(--sb-menubar-trigger-color-bg-active));
}

.hover\:rtg-bg-muted\/50:hover{
  background-color: hsl(var(--muted) / 0.5);
}

.hover\:rtg-bg-navigation-menu-item-color-bg-hover:hover{
  background-color: hsl(var(--sb-navigation-menu-item-color-bg-hover));
}

.hover\:rtg-bg-navigation-menu-link-color-bg-hover:hover{
  background-color: hsl(var(--sb-navigation-menu-link-color-bg-hover));
}

.hover\:rtg-bg-primary\/90:hover{
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:rtg-bg-select-item-color-bg-hover:hover{
  background-color: hsl(var(--sb-select-item-color-bg-hover));
}

.hover\:rtg-bg-select-trigger-color-bg-hover:hover{
  background-color: hsl(var(--sb-select-trigger-color-bg-hover));
}

.hover\:rtg-bg-table-body-row-color-bg-hover:hover{
  background-color: hsl(var(--sb-table-body-row-color-bg-hover));
}

.hover\:rtg-bg-table-footer-row-color-bg-hover:hover{
  background-color: hsl(var(--sb-table-footer-row-color-bg-hover));
}

.hover\:rtg-bg-table-head-row-color-bg-hover:hover{
  background-color: hsl(var(--sb-table-head-row-color-bg-hover));
}

.hover\:rtg-bg-toast-action-default-color-bg-hover:hover{
  background-color: hsl(var(--sb-toast-action-default-color-bg-hover));
}

.hover\:rtg-bg-toast-action-destructive-color-bg-hover:hover{
  background-color: hsl(var(--sb-toast-action-destructive-color-bg-hover));
}

.hover\:rtg-bg-toggle-default-color-bg-hover:hover{
  background-color: hsl(var(--sb-toggle-default-color-bg-hover));
}

.hover\:rtg-bg-toggle-group-item-default-color-bg-hover:hover{
  background-color: hsl(var(--sb-toggle-group-item-default-color-bg-hover));
}

.hover\:rtg-bg-toggle-group-item-outline-color-bg-hover:hover{
  background-color: hsl(var(--sb-toggle-group-item-outline-color-bg-hover));
}

.hover\:rtg-bg-toggle-outline-color-bg-hover:hover{
  background-color: hsl(var(--sb-toggle-outline-color-bg-hover));
}

.hover\:rtg-text-accent-foreground:hover{
  color: hsl(var(--accent-foreground));
}

.hover\:rtg-text-breadcrumb-link-color-text-hover:hover{
  color: hsl(var(--sb-breadcrumb-link-color-text-hover));
}

.hover\:rtg-text-button-ghost-color-text-hover:hover{
  color: var(--rtg-button-ghost-color-text-hover);
}

.hover\:rtg-text-button-outline-color-text-hover:hover{
  color: var(--rtg-button-outline-color-text-hover);
}

.hover\:rtg-text-command-item-color-text-hover:hover{
  color: hsl(var(--sb-command-item-color-text-hover));
}

.hover\:rtg-text-context-menu-item-color-text-hover:hover{
  color: hsl(var(--sb-context-menu-item-color-text-hover));
}

.hover\:rtg-text-dropdown-menu-item-color-text-hover:hover{
  color: hsl(var(--sb-dropdown-menu-item-color-text-hover));
}

.hover\:rtg-text-menubar-trigger-color-text-active:hover{
  color: hsl(var(--sb-menubar-trigger-color-text-active));
}

.hover\:rtg-text-select-item-color-text-hover:hover{
  color: hsl(var(--sb-select-item-color-text-hover));
}

.hover\:rtg-text-toggle-default-color-text-hover:hover{
  color: hsl(var(--sb-toggle-default-color-text-hover));
}

.hover\:rtg-text-toggle-group-item-default-color-text-hover:hover{
  color: hsl(var(--sb-toggle-group-item-default-color-text-hover));
}

.hover\:rtg-text-toggle-group-item-outline-color-text-hover:hover{
  color: hsl(var(--sb-toggle-group-item-outline-color-text-hover));
}

.hover\:rtg-text-toggle-outline-color-text-hover:hover{
  color: hsl(var(--sb-toggle-outline-color-text-hover));
}

.hover\:rtg-underline:hover{
  text-decoration-line: underline;
}

.focus\:rtg-bg-combo-box-item-color-bg-hover:focus{
  background-color: hsl(var(--sb-combo-box-item-color-bg-hover));
}

.focus\:rtg-bg-context-menu-item-color-bg-focus:focus{
  background-color: hsl(var(--sb-context-menu-item-color-bg-focus));
}

.focus\:rtg-bg-dropdown-menu-item-color-bg-focus:focus{
  background-color: hsl(var(--sb-dropdown-menu-item-color-bg-focus));
}

.focus\:rtg-bg-menubar-trigger-color-bg-focus:focus{
  background-color: hsl(var(--sb-menubar-trigger-color-bg-focus));
}

.focus\:rtg-bg-select-item-color-bg-focus:focus{
  background-color: hsl(var(--sb-select-item-color-bg-focus));
}

.focus\:rtg-text-context-menu-item-color-text-focus:focus{
  color: hsl(var(--sb-context-menu-item-color-text-focus));
}

.focus\:rtg-text-dropdown-menu-item-color-text-focus:focus{
  color: hsl(var(--sb-dropdown-menu-item-color-text-focus));
}

.focus\:rtg-text-menubar-trigger-color-text-focus:focus{
  color: hsl(var(--sb-menubar-trigger-color-text-focus));
}

.focus\:rtg-text-select-item-color-text-focus:focus{
  color: hsl(var(--sb-select-item-color-text-focus));
}

.focus\:rtg-outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:rtg-ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:rtg-ring-combo-box-trigger-width-ring-focus:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-combo-box-trigger-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:rtg-ring-dialog-close-width-ring-focus:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-dialog-close-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:rtg-ring-toast-action-width-ring-focus:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-toast-action-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:rtg-ring-combo-box-trigger-color-ring-focus:focus{
  --tw-ring-color: hsl(var(--sb-combo-box-trigger-color-ring-focus));
}

.focus\:rtg-ring-dialog-close-color-ring-focus:focus{
  --tw-ring-color: hsl(var(--sb-dialog-close-color-ring-focus));
}

.focus\:rtg-ring-ring:focus{
  --tw-ring-color: hsl(var(--ring));
}

.focus\:rtg-ring-toast-action-color-ring-focus:focus{
  --tw-ring-color: hsl(var(--sb-toast-action-color-ring-focus));
}

.focus\:rtg-ring-toast-action-destructive-color-ring-focus:focus{
  --tw-ring-color: hsl(var(--sb-toast-action-destructive-color-ring-focus));
}

.focus\:rtg-ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}

.focus\:rtg-ring-offset-combo-box-trigger-width-ring-offset-focus:focus{
  --tw-ring-offset-width: var(--sb-combo-box-trigger-width-ring-offset-focus);
}

.focus\:rtg-ring-offset-dialog-close-width-ring-offset:focus{
  --tw-ring-offset-width: var(--sb-dialog-close-width-ring-offset);
}

.focus-visible\:rtg-border-accordion-trigger-width-border-focus:focus-visible{
  border-width: var(--sb-accordion-trigger-width-border-focus);
}

.focus-visible\:rtg-border-button-width-border-focus:focus-visible{
  border-width: var(--rtg-button-width-border);
}

.focus-visible\:rtg-border-accordion-trigger-color-border-focus:focus-visible{
  border-color: hsl(var(--sb-accordion-trigger-color-border-focus));
}

.focus-visible\:rtg-border-button-color-border-focus:focus-visible{
  border-color: var(--rtg-button-color-border-focus);
}

.focus-visible\:rtg-border-radio-group-item-color-border-focus:focus-visible{
  border-color: hsl(var(--sb-radio-group-item-color-border-focus));
}

.focus-visible\:rtg-border-ring:focus-visible{
  border-color: hsl(var(--ring));
}

.focus-visible\:rtg-border-select-trigger-color-border-focus:focus-visible{
  border-color: hsl(var(--sb-select-trigger-color-border-focus));
}

.focus-visible\:rtg-border-switch-color-border-focus:focus-visible{
  border-color: hsl(var(--sb-switch-color-border-focus));
}

.focus-visible\:rtg-outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:rtg-ring-0:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-1:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-2:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-\[3px\]:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-accordion-trigger-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-accordion-trigger-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-button-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--rtg-button-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-radio-group-item-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-radio-group-item-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-select-trigger-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-select-trigger-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-switch-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-switch-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-toggle-group-item-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-toggle-group-item-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-toggle-width-ring-focus:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-toggle-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:rtg-ring-accordion-trigger-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-accordion-trigger-color-ring-focus));
}

.focus-visible\:rtg-ring-button-default-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-color-ring-focus);
}

.focus-visible\:rtg-ring-button-destructive-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-destructive-color-ring-focus);
}

.focus-visible\:rtg-ring-button-ghost-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-color-ring-focus);
}

.focus-visible\:rtg-ring-button-link-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-color-ring-focus);
}

.focus-visible\:rtg-ring-button-outline-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-color-ring-focus);
}

.focus-visible\:rtg-ring-button-secondary-color-ring-focus:focus-visible{
  --tw-ring-color: var(--rtg-button-color-ring-focus);
}

.focus-visible\:rtg-ring-radio-group-item-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-radio-group-item-color-ring-focus));
}

.focus-visible\:rtg-ring-ring:focus-visible{
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:rtg-ring-ring\/50:focus-visible{
  --tw-ring-color: hsl(var(--ring) / 0.5);
}

.focus-visible\:rtg-ring-select-trigger-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-select-trigger-color-ring-focus));
}

.focus-visible\:rtg-ring-switch-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-switch-color-ring-focus));
}

.focus-visible\:rtg-ring-toggle-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-toggle-color-ring-focus));
}

.focus-visible\:rtg-ring-toggle-group-item-color-ring-focus:focus-visible{
  --tw-ring-color: hsl(var(--sb-toggle-group-item-color-ring-focus));
}

.focus-visible\:rtg-ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}

.focus-visible\:rtg-ring-offset-toggle-group-item-width-ring-offset-focus:focus-visible{
  --tw-ring-offset-width: var(--sb-toggle-group-item-width-ring-offset-focus);
}

.focus-visible\:rtg-ring-offset-toggle-width-ring-offset-focus:focus-visible{
  --tw-ring-offset-width: var(--sb-toggle-width-ring-offset-focus);
}

.disabled\:rtg-pointer-events-none:disabled{
  pointer-events: none;
}

.disabled\:rtg-cursor-not-allowed:disabled{
  cursor: not-allowed;
}

.disabled\:rtg-text-calendar-day-button-color-text-disabled:disabled{
  color: hsl(var(--sb-calendar-day-button-color-text-disabled));
}

.disabled\:rtg-opacity-50:disabled{
  opacity: 0.5;
}

.disabled\:rtg-opacity-button-opacity-disabled:disabled{
  opacity: var(--rtg-button-opacity-disabled);
}

.disabled\:rtg-opacity-calendar-day-button-opacity-disabled:disabled{
  opacity: var(--sb-calendar-day-button-opacity-disabled);
}

.disabled\:rtg-opacity-carousel-button-opacity-disabled:disabled{
  opacity: var(--sb-carousel-button-opacity-disabled);
}

.disabled\:rtg-opacity-combo-box-trigger-opacity-disabled:disabled{
  opacity: var(--sb-combo-box-trigger-opacity-disabled);
}

.disabled\:rtg-opacity-command-input-opacity-disabled:disabled{
  opacity: var(--sb-command-input-opacity-disabled);
}

.disabled\:rtg-opacity-radio-group-item-opacity-disabled:disabled{
  opacity: var(--sb-radio-group-item-opacity-disabled);
}

.disabled\:rtg-opacity-select-trigger-opacity-disabled:disabled{
  opacity: var(--sb-select-trigger-opacity-disabled);
}

.disabled\:rtg-opacity-toast-action-opacity-disabled:disabled{
  opacity: var(--sb-toast-action-opacity-disabled);
}

.disabled\:rtg-opacity-toggle-group-item-opacity-disabled:disabled{
  opacity: var(--sb-toggle-group-item-opacity-disabled);
}

.disabled\:rtg-opacity-toggle-opacity-disabled:disabled{
  opacity: var(--sb-toggle-opacity-disabled);
}

.rtg-peer:disabled ~ .peer-disabled\:rtg-cursor-not-allowed{
  cursor: not-allowed;
}

.rtg-peer:disabled ~ .peer-disabled\:rtg-opacity-70{
  opacity: 0.7;
}

.rtg-peer:disabled ~ .peer-disabled\:rtg-opacity-form-label-opacity-peer-disabled{
  opacity: var(--sb-form-label-opacity-peer-disabled);
}

.has-\[\>svg\]\:rtg-px-3:has(>svg){
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.has-\[\>svg\]\:rtg-px-button-space-px-default-has-icon:has(>svg){
  padding-left: var(--rtg-button-space-px-default-has-icon);
  padding-right: var(--rtg-button-space-px-default-has-icon);
}

.has-\[\>svg\]\:rtg-px-button-space-px-lg-has-icon:has(>svg){
  padding-left: var(--rtg-button-space-px-lg-has-icon);
  padding-right: var(--rtg-button-space-px-lg-has-icon);
}

.has-\[\>svg\]\:rtg-px-button-space-px-sm-has-icon:has(>svg){
  padding-left: var(--rtg-button-space-px-sm-has-icon);
  padding-right: var(--rtg-button-space-px-sm-has-icon);
}

.aria-disabled\:rtg-opacity-calendar-button-next-opacity-disabled[aria-disabled="true"]{
  opacity: var(--sb-calendar-button-next-opacity-disabled);
}

.aria-disabled\:rtg-opacity-calendar-button-previous-opacity-disabled[aria-disabled="true"]{
  opacity: var(--sb-calendar-button-previous-opacity-disabled);
}

.aria-selected\:rtg-bg-command-item-color-bg-selected[aria-selected="true"]{
  background-color: hsl(var(--sb-command-item-color-bg-selected));
}

.aria-selected\:rtg-bg-context-menu-checkbox-item-color-bg-focus[aria-selected="true"]{
  background-color: hsl(var(--sb-context-menu-checkbox-item-color-bg-focus));
}

.aria-selected\:rtg-bg-context-menu-radio-item-color-bg-focus[aria-selected="true"]{
  background-color: hsl(var(--sb-context-menu-radio-item-color-bg-focus));
}

.aria-selected\:rtg-bg-dropdown-menu-checkbox-item-color-bg-focus[aria-selected="true"]{
  background-color: hsl(var(--sb-dropdown-menu-checkbox-item-color-bg-focus));
}

.aria-selected\:rtg-bg-dropdown-menu-radio-item-color-bg-focus[aria-selected="true"]{
  background-color: hsl(var(--sb-dropdown-menu-radio-item-color-bg-focus));
}

.aria-selected\:rtg-bg-menubar-checkbox-item-color-bg-active[aria-selected="true"]{
  background-color: hsl(var(--sb-menubar-checkbox-item-color-bg-active));
}

.aria-selected\:rtg-bg-menubar-item-color-bg-active[aria-selected="true"]{
  background-color: hsl(var(--sb-menubar-item-color-bg-active));
}

.aria-selected\:rtg-bg-menubar-radio-item-color-bg-active[aria-selected="true"]{
  background-color: hsl(var(--sb-menubar-radio-item-color-bg-active));
}

.aria-selected\:rtg-text-command-item-color-text-selected[aria-selected="true"]{
  color: hsl(var(--sb-command-item-color-text-selected));
}

.aria-selected\:rtg-text-context-menu-checkbox-item-color-text-focus[aria-selected="true"]{
  color: hsl(var(--sb-context-menu-checkbox-item-color-text-focus));
}

.aria-selected\:rtg-text-context-menu-radio-item-color-text-focus[aria-selected="true"]{
  color: hsl(var(--sb-context-menu-radio-item-color-text-focus));
}

.aria-selected\:rtg-text-dropdown-menu-checkbox-item-color-text-focus[aria-selected="true"]{
  color: hsl(var(--sb-dropdown-menu-checkbox-item-color-text-focus));
}

.aria-selected\:rtg-text-dropdown-menu-radio-item-color-text-focus[aria-selected="true"]{
  color: hsl(var(--sb-dropdown-menu-radio-item-color-text-focus));
}

.aria-selected\:rtg-text-menubar-checkbox-item-color-text-active[aria-selected="true"]{
  color: hsl(var(--sb-menubar-checkbox-item-color-text-active));
}

.aria-selected\:rtg-text-menubar-item-color-text-active[aria-selected="true"]{
  color: hsl(var(--sb-menubar-item-color-text-active));
}

.aria-selected\:rtg-text-menubar-radio-item-color-text-active[aria-selected="true"]{
  color: hsl(var(--sb-menubar-radio-item-color-text-active));
}

.data-\[disabled\=\"true\"\]\:rtg-pointer-events-none[data-disabled="true"]{
  pointer-events: none;
}

.data-\[disabled\]\:rtg-pointer-events-none[data-disabled]{
  pointer-events: none;
}

.data-\[state\=\"open\"\]\:rtg-block[data-state="open"]{
  display: block;
}

.data-\[state\=\"closed\"\]\:rtg-hidden[data-state="closed"]{
  display: none;
}

.data-\[state\=closed\]\:rtg-h-accordion-content-space-h-closed[data-state="closed"]{
  height: var(--sb-accordion-content-space-h-closed);
}

.data-\[state\=open\]\:rtg-h-fit[data-state="open"]{
  height: -moz-fit-content;
  height: fit-content;
}

.data-\[state\=\"checked\"\]\:rtg-translate-x-\[calc\(100\%-2px\)\][data-state="checked"]{
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=\"unchecked\"\]\:rtg-translate-x-0[data-state="unchecked"]{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=closed\]\:rtg-translate-x-toast-viewport-item-translate-x-exit[data-state="closed"]{
  --tw-translate-x: var(--sb-toast-viewport-item-translate-x-exit);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=open\]\:rtg-translate-y-toast-viewport-item-translate-y-enter-desktop[data-state="open"]{
  --tw-translate-y: var(--sb-toast-viewport-item-translate-y-enter-desktop);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=cancel\]\:rtg-translate-x-0[data-swipe="cancel"]{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=end\]\:rtg-translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"]{
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=move\]\:rtg-translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"]{
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes rtg-accordion-content-animate-closed{
  from{
    height: var(--sb-accordion-content-space-h-open);
  }
  to{
    height: var(--sb-accordion-content-space-h-closed);
  }
}

.data-\[state\=closed\]\:rtg-animate-accordion-content-animate-closed[data-state="closed"]{
  animation: rtg-accordion-content-animate-closed var(--sb-accordion-content-motion-duration-closed) var(--sb-accordion-content-motion-fn-closed);
}

@keyframes rtg-accordion-content-animate-open{
  from{
    height: var(--sb-accordion-content-space-h-closed);
  }
  to{
    height: var(--sb-accordion-content-space-h-open);
  }
}

.data-\[state\=open\]\:rtg-animate-accordion-content-animate-open[data-state="open"]{
  animation: rtg-accordion-content-animate-open var(--sb-accordion-content-motion-duration-open) var(--sb-accordion-content-motion-fn-open);
}

.data-\[disabled\=\"true\"\]\:rtg-cursor-not-allowed[data-disabled="true"]{
  cursor: not-allowed;
}

.data-\[range-end\=true\]\:rtg-bg-calendar-day-button-color-bg-range-end[data-range-end="true"]{
  background-color: hsl(var(--sb-calendar-day-button-color-bg-range-end));
}

.data-\[range-middle\=true\]\:rtg-bg-calendar-day-button-color-bg-range-middle[data-range-middle="true"]{
  background-color: hsl(var(--sb-calendar-day-button-color-bg-range-middle));
}

.data-\[range-start\=true\]\:rtg-bg-calendar-day-button-color-bg-range-start[data-range-start="true"]{
  background-color: hsl(var(--sb-calendar-day-button-color-bg-range-start));
}

.data-\[selected-single\=true\]\:rtg-bg-calendar-day-button-color-bg-single-selected[data-selected-single="true"]{
  background-color: hsl(var(--sb-calendar-day-button-color-bg-single-selected));
}

.data-\[state\=\"checked\"\]\:rtg-bg-switch-color-bg-checked[data-state="checked"]{
  background-color: hsl(var(--sb-switch-color-bg-checked));
}

.data-\[state\=\"checked\"\]\:rtg-bg-switch-thumb-color-bg-checked[data-state="checked"]{
  background-color: hsl(var(--sb-switch-thumb-color-bg-checked));
}

.data-\[state\=\"unchecked\"\]\:rtg-bg-switch-color-bg-unchecked[data-state="unchecked"]{
  background-color: hsl(var(--sb-switch-color-bg-unchecked));
}

.data-\[state\=\"unchecked\"\]\:rtg-bg-switch-thumb-color-bg-unchecked[data-state="unchecked"]{
  background-color: hsl(var(--sb-switch-thumb-color-bg-unchecked));
}

.data-\[state\=on\]\:rtg-bg-toggle-color-bg-on[data-state="on"]{
  background-color: hsl(var(--sb-toggle-color-bg-on));
}

.data-\[state\=on\]\:rtg-bg-toggle-group-item-color-bg-on[data-state="on"]{
  background-color: hsl(var(--sb-toggle-group-item-color-bg-on));
}

.data-\[state\=open\]\:rtg-bg-dialog-close-color-bg[data-state="open"]{
  background-color: hsl(var(--sb-dialog-close-color-bg));
}

.data-\[state\=open\]\:rtg-bg-menubar-trigger-color-bg-active[data-state="open"]{
  background-color: hsl(var(--sb-menubar-trigger-color-bg-active));
}

.data-\[state\=selected\]\:rtg-bg-muted[data-state="selected"]{
  background-color: hsl(var(--muted));
}

.data-\[empty\=true\]\:rtg-text-date-picker-trigger-button-color-text-empty[data-empty="true"]{
  color: hsl(var(--sb-date-picker-trigger-button-color-text-empty));
}

.data-\[placeholder\]\:rtg-text-select-trigger-placeholder-color-text[data-placeholder]{
  color: hsl(var(--sb-select-trigger-placeholder-color-text));
}

.data-\[range-end\=true\]\:rtg-text-calendar-day-button-color-text-range-end[data-range-end="true"]{
  color: hsl(var(--sb-calendar-day-button-color-text-range-end));
}

.data-\[range-middle\=true\]\:rtg-text-calendar-day-button-color-text-range-middle[data-range-middle="true"]{
  color: hsl(var(--sb-calendar-day-button-color-text-range-middle));
}

.data-\[range-start\=true\]\:rtg-text-calendar-day-button-color-text-range-start[data-range-start="true"]{
  color: hsl(var(--sb-calendar-day-button-color-text-range-start));
}

.data-\[selected-single\=true\]\:rtg-text-calendar-day-button-color-text-single-selected[data-selected-single="true"]{
  color: hsl(var(--sb-calendar-day-button-color-text-single-selected));
}

.data-\[state\=on\]\:rtg-text-toggle-color-text-on[data-state="on"]{
  color: hsl(var(--sb-toggle-color-text-on));
}

.data-\[state\=on\]\:rtg-text-toggle-group-item-color-text-on[data-state="on"]{
  color: hsl(var(--sb-toggle-group-item-color-text-on));
}

.data-\[state\=open\]\:rtg-text-dialog-close-color-text[data-state="open"]{
  color: hsl(var(--sb-dialog-close-color-text));
}

.data-\[state\=open\]\:rtg-text-menubar-trigger-color-text-active[data-state="open"]{
  color: hsl(var(--sb-menubar-trigger-color-text-active));
}

.data-\[disabled\=\"true\"\]\:rtg-opacity-command-item-opacity-disabled[data-disabled="true"]{
  opacity: var(--sb-command-item-opacity-disabled);
}

.data-\[disabled\=\"true\"\]\:rtg-opacity-switch-opacity-disabled[data-disabled="true"]{
  opacity: var(--sb-switch-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-context-menu-checkbox-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-context-menu-checkbox-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-context-menu-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-context-menu-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-context-menu-radio-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-context-menu-radio-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-dropdown-menu-checkbox-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-dropdown-menu-checkbox-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-dropdown-menu-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-dropdown-menu-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-dropdown-menu-radio-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-dropdown-menu-radio-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-menubar-checkbox-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-menubar-checkbox-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-menubar-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-menubar-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-menubar-radio-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-menubar-radio-item-opacity-disabled);
}

.data-\[disabled\]\:rtg-opacity-select-item-opacity-disabled[data-disabled]{
  opacity: var(--sb-select-item-opacity-disabled);
}

.data-\[state\=closed\]\:rtg-opacity-80[data-state="closed"]{
  opacity: 0.8;
}

.data-\[swipe\=move\]\:rtg-transition-none[data-swipe="move"]{
  transition-property: none;
}

.data-\[state\=\"open\"\]\:rtg-animate-in[data-state="open"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:rtg-animate-in[data-state="open"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=\"closed\"\]\:rtg-animate-out[data-state="closed"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:rtg-animate-out[data-state="closed"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=\"closed\"\]\:rtg-fade-out-0[data-state="closed"]{
  --tw-exit-opacity: 0;
}

.data-\[state\=\"open\"\]\:rtg-fade-in-0[data-state="open"]{
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:rtg-fade-out-0[data-state="closed"]{
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:rtg-fade-in-0[data-state="open"]{
  --tw-enter-opacity: 0;
}

.data-\[state\=\"closed\"\]\:rtg-zoom-out-95[data-state="closed"]{
  --tw-exit-scale: .95;
}

.data-\[state\=\"open\"\]\:rtg-zoom-in-95[data-state="open"]{
  --tw-enter-scale: .95;
}

.data-\[state\=closed\]\:rtg-zoom-out-95[data-state="closed"]{
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:rtg-zoom-in-95[data-state="open"]{
  --tw-enter-scale: .95;
}

.data-\[side\=bottom\]\:rtg-slide-in-from-top-2[data-side="bottom"]{
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:rtg-slide-in-from-right-2[data-side="left"]{
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:rtg-slide-in-from-left-2[data-side="right"]{
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:rtg-slide-in-from-bottom-2[data-side="top"]{
  --tw-enter-translate-y: 0.5rem;
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-relative{
  position: relative;
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-z-10{
  z-index: 10;
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-border-calendar-day-width-border-focus{
  border-width: var(--sb-calendar-day-width-border-focus);
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-border-calendar-day-color-border-focus{
  border-color: hsl(var(--sb-calendar-day-color-border-focus));
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-ring-calendar-day-width-ring-focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--sb-calendar-day-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.rtg-group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:rtg-ring-calendar-day-color-ring-focus{
  --tw-ring-color: hsl(var(--sb-calendar-day-color-ring-focus));
}

.dark\:hover\:rtg-bg-accent\/50:hover:is(.rtg-dark *){
  background-color: hsl(var(--accent) / 0.5);
}

@media (min-width: 640px){
  .sm\:rtg-bottom-0{
    bottom: 0px;
  }
  .sm\:rtg-right-0{
    right: 0px;
  }
  .sm\:rtg-top-auto{
    top: auto;
  }
  .sm\:rtg-block{
    display: block;
  }
  .sm\:rtg-w-3\/4{
    width: 75%;
  }
  .sm\:rtg-max-w-\[425px\]{
    max-width: 425px;
  }
  .sm\:rtg-max-w-dialog-content-space-max-w{
    max-width: var(--sb-dialog-content-space-max-w);
  }
  .sm\:rtg-flex-row{
    flex-direction: row;
  }
  .sm\:rtg-flex-col{
    flex-direction: column;
  }
  .sm\:rtg-justify-end{
    justify-content: flex-end;
  }
  .sm\:rtg-gap-breadcrumb-list-space-gap{
    gap: var(--sb-breadcrumb-list-space-gap);
  }
  .sm\:rtg-pl-pagination-previous-space-px{
    padding-left: var(--sb-pagination-previous-space-px);
  }
  .sm\:rtg-pr-pagination-next-space-px{
    padding-right: var(--sb-pagination-next-space-px);
  }
  .sm\:rtg-text-left{
    text-align: left;
  }
  .data-\[state\=open\]\:sm\:rtg-translate-y-toast-viewport-item-translate-y-enter-mobile[data-state="open"]{
    --tw-translate-y: var(--sb-toast-viewport-item-translate-y-enter-mobile);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 768px){
  .md\:rtg-h-1\/2{
    height: 50%;
  }
  .md\:rtg-w-\[500px\]{
    width: 500px;
  }
  .md\:rtg-max-w-toast-viewport-root-space-w-md{
    max-width: var(--sb-toast-viewport-root-space-w-md);
  }
  .md\:rtg-basis-1\/2{
    flex-basis: 50%;
  }
  .md\:rtg-flex-row{
    flex-direction: row;
  }
  .md\:rtg-gap-12{
    gap: 3rem;
  }
  .md\:rtg-gap-4{
    gap: 1rem;
  }
  .md\:rtg-gap-drawer-header-space-gap{
    gap: var(--sb-drawer-header-space-gap);
  }
  .md\:rtg-text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 1024px){
  .lg\:rtg-h-1\/2{
    height: 50%;
  }
  .lg\:rtg-w-\[600px\]{
    width: 600px;
  }
  .lg\:rtg-basis-1\/3{
    flex-basis: 33.333333%;
  }
  .lg\:rtg-grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.\[\&\+div\]\:rtg-text-toast-title-font+div{
  font-size: var(--sb-toast-title-font-size);
  line-height: var(--sb-toast-title-font-line-height);
  letter-spacing: var(--sb-toast-title-font-letter-spacing);
}

.\[\&\:\:-webkit-scrollbar-thumb\]\:rtg-rounded-full::-webkit-scrollbar-thumb{
  border-radius: 9999px;
}

.\[\&\:\:-webkit-scrollbar-thumb\]\:rtg-bg-accent::-webkit-scrollbar-thumb{
  background-color: hsl(var(--accent));
}

.\[\&\:\:-webkit-scrollbar-track\]\:rtg-bg-gray-100::-webkit-scrollbar-track{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.\[\&\:\:-webkit-scrollbar\]\:rtg-w-0::-webkit-scrollbar{
  width: 0px;
}

.\[\&\:\:-webkit-scrollbar\]\:rtg-w-2::-webkit-scrollbar{
  width: 0.5rem;
}

.\[\&\>div\]\:rtg-pb-accordion-content-div-space-pb>div{
  padding-bottom: var(--sb-accordion-content-div-space-pb);
}

.\[\&\>div\]\:rtg-pt-accordion-content-div-space-pt>div{
  padding-top: var(--sb-accordion-content-div-space-pt);
}

.\[\&\>span\]\:rtg-text-calendar-day-button-span-font>span{
  font-size: var(--sb-calendar-day-button-span-font-size);
  line-height: var(--sb-calendar-day-button-span-font-line-height);
}

.\[\&\>span\]\:rtg-opacity-calendar-day-button-span-opacity>span{
  opacity: var(--sb-calendar-day-button-span-opacity);
}

.\[\&\>svg\]\:rtg-size-breadcrumb-ellipsis-icon-space-size>svg{
  width: var(--sb-breadcrumb-ellipsis-icon-space-size);
  height: var(--sb-breadcrumb-ellipsis-icon-space-size);
}

.\[\&\>svg\]\:rtg-size-breadcrumb-separator-icon-space-size>svg{
  width: var(--sb-breadcrumb-separator-icon-space-size);
  height: var(--sb-breadcrumb-separator-icon-space-size);
}

.\[\&\[data-state\=open\]\>svg\]\:rtg-rotate-180[data-state=open]>svg{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\[rtg-command-input-wrapper\]_svg\]\:rtg-h-5 [rtg-command-input-wrapper] svg{
  height: 1.25rem;
}

.\[\&_\[rtg-command-input-wrapper\]_svg\]\:rtg-w-5 [rtg-command-input-wrapper] svg{
  width: 1.25rem;
}

.\[\&_\[rtgcmd-group-heading\]\]\:rtg-px-2 [rtgcmd-group-heading]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[rtgcmd-group-heading\]\]\:rtg-font-medium [rtgcmd-group-heading]{
  font-weight: 500;
}

.\[\&_\[rtgcmd-group-heading\]\]\:rtg-text-muted-foreground [rtgcmd-group-heading]{
  color: hsl(var(--muted-foreground));
}

.\[\&_\[rtgcmd-group\]\:not\(\[hidden\]\)_\~\[rtgcmd-group\]\]\:rtg-pt-0 [rtgcmd-group]:not([hidden]) ~[rtgcmd-group]{
  padding-top: 0;
}

.\[\&_\[rtgcmd-group\]\]\:rtg-px-2 [rtgcmd-group]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[rtgcmd-input\]\]\:rtg-h-12 [rtgcmd-input]{
  height: 3rem;
}

.\[\&_\[rtgcmd-item\]\]\:rtg-px-2 [rtgcmd-item]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[rtgcmd-item\]\]\:rtg-py-3 [rtgcmd-item]{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[rtgcmd-item\]_svg\]\:rtg-h-5 [rtgcmd-item] svg{
  height: 1.25rem;
}

.\[\&_\[rtgcmd-item\]_svg\]\:rtg-w-5 [rtgcmd-item] svg{
  width: 1.25rem;
}

.\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-button-icon-space-size svg:not([class*="rtg-size-"]){
  width: var(--rtg-button-icon-space-size-default);
  height: var(--rtg-button-icon-space-size-default);
}

.\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-command-item-icon-space-size svg:not([class*="rtg-size-"]){
  width: var(--sb-command-item-icon-space-size);
  height: var(--sb-command-item-icon-space-size);
}

.\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-context-menu-item-icon-space-size svg:not([class*="rtg-size-"]){
  width: var(--sb-context-menu-item-icon-space-size);
  height: var(--sb-context-menu-item-icon-space-size);
}

.\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-dropdown-menu-item-icon-space-size svg:not([class*="rtg-size-"]){
  width: var(--sb-dropdown-menu-item-icon-space-size);
  height: var(--sb-dropdown-menu-item-icon-space-size);
}

.\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-menubar-item-icon-space-size svg:not([class*="rtg-size-"]){
  width: var(--sb-menubar-item-icon-space-size);
  height: var(--sb-menubar-item-icon-space-size);
}

.\[\&_svg\:not\(\[class\*\=\"rtg-text-\"\]\)\]\:rtg-text-command-item-icon-color-text svg:not([class*="rtg-text-"]){
  color: hsl(var(--sb-command-item-icon-color-text));
}

.\[\&_svg\:not\(\[class\*\=\"rtg-text-\"\]\)\]\:rtg-text-context-menu-item-icon-color-text svg:not([class*="rtg-text-"]){
  color: hsl(var(--sb-context-menu-item-icon-color-text));
}

.\[\&_svg\:not\(\[class\*\=\"rtg-text-\"\]\)\]\:rtg-text-dropdown-menu-item-icon-color-text svg:not([class*="rtg-text-"]){
  color: hsl(var(--sb-dropdown-menu-item-icon-color-text));
}

.\[\&_svg\:not\(\[class\*\=\"rtg-text-\"\]\)\]\:rtg-text-menubar-item-icon-color-text svg:not([class*="rtg-text-"]){
  color: hsl(var(--sb-menubar-item-icon-color-text));
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:rtg-size-4 svg:not([class*='size-']){
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:rtg-pointer-events-none svg{
  pointer-events: none;
}

.\[\&_svg\]\:rtg-shrink-0 svg{
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:rtg-border-0 tr:last-child{
  border-width: 0px;
}

.\[\&_tr\]\:rtg-border-b tr{
  border-bottom-width: 1px;
}

.\[\&_tr\]\:rtg-border-b-table-head-width-border tr{
  border-bottom-width: var(--sb-table-head-width-border);
}

.\[\&_tr\]\:rtg-border-table-head-color-border tr{
  border-color: hsl(var(--sb-table-head-color-border));
}