@layer legacy, reset, tokens, typography, components, utilities;

@layer tokens {
  /* 1_Brand */
  :root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-white-90: #ffffffe5;
    --color-blue-100: #e5f1f7;
    --color-blue-200: #99c7df;
    --color-blue-300: #4d9dc6;
    --color-blue-400: #0073ae;
    --color-blue-400-90: #0073aee5;
    --color-blue-500: #00517a;
    --color-blue-600: #002e46;
    --color-blue-700: #00161f;
    --color-digital-blue-100: #f1f9fe;
    --color-digital-blue-200: #d9effb;
    --color-digital-blue-300: #bce4f8;
    --color-digital-blue-400: #a0d8f5;
    --color-digital-blue-500: #7fadc4;
    --color-digital-blue-600: #506c7b;
    --color-digital-blue-700: #304149;
    --color-fuchsia-100: #f6e6f1;
    --color-fuchsia-200: #db9bc8;
    --color-fuchsia-300: #c0509e;
    --color-fuchsia-400: #a50575;
    --color-fuchsia-500: #740452;
    --color-fuchsia-600: #42022f;
    --color-fuchsia-700: #1d0214;
    --color-gray-100: #f9f9f9;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d8d8d8;
    --color-gray-400: #a1a1a1;
    --color-gray-500: #666666;
    --color-gray-600: #333333;
    --color-gray-700: #1c1c1c;
    --color-green-100: #e9f7e3;
    --color-green-200: #afe090;
    --color-green-300: #6cb33f;
    --color-green-400: #589433;
    --color-green-500: #3a631f;
    --color-green-600: #233f11;
    --color-green-700: #0e1e05;
    --color-navy-100: #eff2f5;
    --color-navy-200: #adbbcd;
    --color-navy-300: #6587ae;
    --color-navy-400: #2b5382;
    --color-navy-500: #002a5c;
    --color-navy-500-50: #002a5c80;
    --color-navy-600: #001d40;
    --color-navy-700: #000d1c;
    --color-orange-100: #fdf3e9;
    --color-orange-200: #f9cfa6;
    --color-orange-300: #f5ac64;
    --color-orange-400: #e07810;
    --color-orange-500: #995715;
    --color-orange-600: #6d3600;
    --color-orange-700: #180e03;
    --color-purple-100: #f0eaf0;
    --color-purple-200: #c1adc4;
    --color-purple-300: #936f98;
    --color-purple-400: #65316c;
    --color-purple-500: #47224c;
    --color-purple-600: #28142b;
    --color-purple-700: #130a15;
    --color-red-100: #f8e7ea;
    --color-red-200: #e79caa;
    --color-red-300: #d6516b;
    --color-red-400: #b41635;
    --color-red-500: #7e0f25;
    --color-red-600: #480915;
    --color-red-700: #1c0308;
    --color-seagreen-100: #e5f4f5;
    --color-seagreen-200: #a6d9dd;
    --color-seagreen-300: #7abfc7;
    --color-seagreen-400: #00909e;
    --color-seagreen-500: #00656f;
    --color-seagreen-600: #003a3f;
    --color-seagreen-700: #001b1f;
    --color-yellow-100: #fff8e6;
    --color-yellow-200: #ffdd85;
    --color-yellow-300: #f5bd2b;
    --color-yellow-400: #c28b00;
    --color-yellow-500: #946b00;
    --color-yellow-600: #5c4200;
    --color-yellow-700: #1f1600;

    --breakpoint-min-width-xl: 1041px;
    --breakpoint-min-width-lg: 769px;
    --breakpoint-min-width-md: 491px;
    --breakpoint-min-width-sm: 0px;
    --breakpoint-max-width-xl: 1400px;
    --breakpoint-max-width-lg: 1040px;
    --breakpoint-max-width-md: 768px;
    --breakpoint-max-width-sm: 490px;

    --opacity-transparent: 0;
    --opacity-xs: 10;
    --opacity-sm: 25;
    --opacity-md: 50;
    --opacity-lg: 60;
    --opacity-xl: 80;
    --opacity-2xl: 90;
    --opacity-opaque: 100;

    --scale-0: 0px;
    --scale-25: 1px;
    --scale-50: 2px;
    --scale-100: 4px;
    --scale-200: 8px;
    --scale-300: 12px;
    --scale-400: 16px;
    --scale-500: 20px;
    --scale-600: 24px;
    --scale-700: 28px;
    --scale-800: 32px;
    --scale-900: 36px;
    --scale-1000: 40px;
    --scale-1100: 44px;
    --scale-1200: 48px;
    --scale-1600: 64px;
    
    --type-font-size-body-sm: 0.875rem;
    --type-font-size-body-md: 1rem;
    --type-font-size-body-lg: 1.25rem;
    --type-font-size-caps-sm: 0.875rem;
    --type-font-size-caps-md: 1rem;
    --type-font-size-caps-lg: 1.25rem;
    --type-font-size-display-sm: 2.5rem;
    --type-font-size-display-md: 3rem;
    --type-font-size-display-lg: 3.75rem;
    --type-font-size-display-xl: 5rem;
    --type-font-size-heading-sm: 1rem;
    --type-font-size-heading-md: 1.25rem;
    --type-font-size-heading-lg: 1.5rem;
    --type-font-size-heading-xl: 2rem;
    --type-font-size-label-md: 0.75rem;
    --type-letter-spacing-body-sm: 0.0094rem;
    --type-letter-spacing-body-md: 0.01rem;
    --type-letter-spacing-body-lg: 0.0113rem;
    --type-letter-spacing-caps-lg: 0.0137rem;
    --type-letter-spacing-caps-md: 0.02rem;
    --type-letter-spacing-caps-sm: 0.0262rem;
    --type-letter-spacing-display-lg: -0.075rem;
    --type-letter-spacing-display-xl: -0.075rem;
    --type-letter-spacing-display-md: -0.0594rem;
    --type-letter-spacing-display-sm: -0.025rem;
    --type-letter-spacing-heading-xl: -0.02rem;
    --type-letter-spacing-heading-lg: 0rem;
    --type-letter-spacing-heading-md: 0rem;
    --type-letter-spacing-heading-sm: 0rem;
    --type-letter-spacing-label-md: 0.0162rem;
    --type-letter-spacing-label-caps: 0.0325rem;
    --type-line-height-body-sm: 1.25rem;
    --type-line-height-body-md: 1.5rem;
    --type-line-height-body-lg: 1.75rem;
    --type-line-height-caps-sm: 1.25rem;
    --type-line-height-caps-md: 1.5rem;
    --type-line-height-caps-lg: 1.75rem;
    --type-line-height-display-sm: 2.75rem;
    --type-line-height-display-md: 3.5rem;
    --type-line-height-display-lg: 4.5rem;
    --type-line-height-display-xl: 5.5rem;
    --type-line-height-heading-sm: 1.25rem;
    --type-line-height-heading-md: 1.5rem;
    --type-line-height-heading-lg: 1.75rem;
    --type-line-height-heading-xl: 2.25rem;
    --type-line-height-label-md: 1rem;
    --type-paragraph-spacing-body-sm: 0.625rem;
    --type-paragraph-spacing-body-md: 0.75rem;
    --type-paragraph-spacing-body-lg: 1rem;
    --type-paragraph-spacing-caps-sm: 0.625rem;
    --type-paragraph-spacing-caps-md: 0.75rem;
    --type-paragraph-spacing-heading-sm: 0.625rem;
    --type-paragraph-spacing-heading-md: 0.75rem;
    --type-paragraph-spacing-heading-lg: 0.875rem;
    --type-paragraph-spacing-heading-xl: 1rem;
    --type-paragraph-spacing-label-md: 0.5rem;
    --type-font-family-sans: "TheSans";
    --type-font-family-sans-bold: "TheSans Bold";
    --type-font-family-sans-italic: "TheSans Italic";
    --type-font-family-serif: "TheSerif";
    --type-font-family-serif-semibold: "TheSerif SemiBold";
  }
}

@layer tokens {
  /* 2_Alias */
  :root {
    --theme-primary-700: var(--color-blue-700);
    --theme-primary-600: var(--color-blue-600);
    --theme-primary-500: var(--color-blue-500);
    --theme-primary-default: var(--color-blue-400);
    --theme-primary-default-90: var(--color-blue-400-90);
    --theme-primary-300: var(--color-blue-300);
    --theme-primary-200: var(--color-blue-200);
    --theme-primary-100: var(--color-blue-100);
    --theme-secondary-700: var(--color-navy-700);
    --theme-tertiary-700: var(--color-digital-blue-700);
    --theme-tertiary-600: var(--color-digital-blue-600);
    --theme-tertiary-500: var(--color-digital-blue-500);
    --theme-tertiary-default: var(--color-digital-blue-400);
    --theme-tertiary-300: var(--color-digital-blue-300);
    --theme-tertiary-200: var(--color-digital-blue-200);
    --theme-tertiary-100: var(--color-digital-blue-100);
    --theme-secondary-600: var(--color-navy-600);
    --theme-neutral-black: var(--color-black);
    --theme-information-blue-700: var(--color-blue-700);
    --theme-information-blue-600: var(--color-blue-600);
    --theme-information-blue-500: var(--color-blue-500);
    --theme-information-blue-default: var(--color-blue-400);
    --theme-information-blue-300: var(--color-blue-300);
    --theme-information-blue-200: var(--color-blue-200);
    --theme-neutral-700: var(--color-gray-700);
    --theme-neutral-600: var(--color-gray-600);
    --theme-neutral-500: var(--color-gray-500);
    --theme-neutral-400: var(--color-gray-400);
    --theme-neutral-300: var(--color-gray-300);
    --theme-neutral-200: var(--color-gray-200);
    --theme-neutral-100: var(--color-gray-100);
    --theme-neutral-white: var(--color-white);
    --theme-neutral-white-90: var(--color-white-90);
    --theme-secondary-default: var(--color-navy-500);
    --theme-secondary-default-50: var(--color-navy-500-50);
    --theme-secondary-400: var(--color-navy-400);
    --theme-secondary-300: var(--color-navy-300);
    --theme-secondary-200: var(--color-navy-200);
    --theme-information-navy-700: var(--color-navy-700);
    --theme-secondary-100: var(--color-navy-100);
    --theme-information-blue-100: var(--color-blue-100);
    --theme-information-purple-700: var(--color-purple-700);
    --theme-information-seagreen-700: var(--color-seagreen-700);
    --theme-information-green-700: var(--color-green-700);
    --theme-information-fuchsia-700: var(--color-fuchsia-700);
    --theme-information-navy-600: var(--color-navy-600);
    --theme-information-yellow-700: var(--color-yellow-700);
    --theme-information-orange-700: var(--color-orange-700);
    --theme-information-purple-600: var(--color-purple-600);
    --theme-information-yellow-600: var(--color-yellow-600);
    --theme-information-fuchsia-600: var(--color-fuchsia-600);
    --theme-information-orange-600: var(--color-orange-600);
    --theme-information-green-600: var(--color-green-600);
    --theme-information-yellow-500: var(--color-yellow-500);
    --theme-information-green-500: var(--color-green-500);
    --theme-information-fuchsia-500: var(--color-fuchsia-500);
    --theme-information-yellow-400: var(--color-yellow-400);
    --theme-information-orange-500: var(--color-orange-500);
    --theme-information-purple-500: var(--color-purple-500);
    --theme-information-green-400: var(--color-green-400);
    --theme-information-purple-default: var(--color-purple-400);
    --theme-information-orange-default: var(--color-orange-400);
    --theme-information-yellow-default: var(--color-yellow-300);
    --theme-information-fuchsia-default: var(--color-fuchsia-400);
    --theme-information-green-default: var(--color-green-300);
    --theme-information-yellow-200: var(--color-yellow-200);
    --theme-information-orange-300: var(--color-orange-300);
    --theme-information-green-200: var(--color-green-200);
    --theme-information-purple-300: var(--color-purple-300);
    --theme-information-fuchsia-300: var(--color-fuchsia-300);
    --theme-information-orange-200: var(--color-orange-200);
    --theme-information-purple-200: var(--color-purple-200);
    --theme-information-fuchsia-200: var(--color-fuchsia-200);
    --theme-information-yellow-100: var(--color-yellow-100);
    --theme-information-orange-100: var(--color-orange-100);
    --theme-information-fuchsia-100: var(--color-fuchsia-100);
    --theme-information-purple-100: var(--color-purple-100);
    --theme-information-green-100: var(--color-green-100);
    --theme-success-700: var(--color-green-700);
    --theme-success-600: var(--color-green-600);
    --theme-warning-700: var(--color-yellow-700);
    --theme-warning-600: var(--color-yellow-600);
    --theme-warning-500: var(--color-yellow-500);
    --theme-warning-400: var(--color-yellow-400);
    --theme-warning-default: var(--color-yellow-300);
    --theme-warning-200: var(--color-yellow-200);
    --theme-warning-100: var(--color-yellow-100);
    --theme-success-500: var(--color-green-500);
    --theme-success-400: var(--color-green-400);
    --theme-success-default: var(--color-green-300);
    --theme-information-seagreen-600: var(--color-seagreen-600);
    --theme-success-200: var(--color-green-200);
    --theme-error-700: var(--color-red-700);
    --theme-error-600: var(--color-red-600);
    --theme-error-500: var(--color-red-500);
    --theme-error-default: var(--color-red-400);
    --theme-error-300: var(--color-red-300);
    --theme-error-200: var(--color-red-200);
    --theme-error-100: var(--color-red-100);
    --theme-success-100: var(--color-green-100);
    --theme-information-seagreen-500: var(--color-seagreen-500);
    --theme-information-seagreen-default: var(--color-seagreen-400);
    --theme-information-seagreen-300: var(--color-seagreen-300);
    --theme-information-seagreen-200: var(--color-seagreen-200);
    --theme-information-seagreen-100: var(--color-seagreen-100);
    --theme-information-navy-default: var(--color-navy-500);
    --theme-information-navy-400: var(--color-navy-400);
    --theme-information-navy-300: var(--color-navy-300);
    --theme-information-navy-200: var(--color-navy-200);
    --theme-information-navy-100: var(--color-navy-100);
    --border-width-none: var(--scale-0);
    --border-width-sm: var(--scale-25);
    --border-width-md: var(--scale-50);
    --border-width-lg: var(--scale-100);
    --border-width-xl: var(--scale-200);
    --border-radius-none: var(--scale-0);
    --border-radius-sm: var(--scale-50);
    --border-radius-md: var(--scale-100);
    --border-radius-lg: var(--scale-200);
    --border-radius-round: var(--scale-1600);
    --spacing-3xs: var(--scale-50);
    --spacing-2xs: var(--scale-100);
    --spacing-xs: var(--scale-200);
    --spacing-sm: var(--scale-300);
    --spacing-md: var(--scale-400);
    --spacing-lg: var(--scale-600);
    --spacing-xl: var(--scale-800);
    --spacing-2xl: var(--scale-1200);
    --spacing-3xl: var(--scale-1600);
  }
}

@layer tokens {
  /* 3_Mapped */
  :root {
    --colors-text-display: var(--theme-primary-default);
    --colors-text-heading: var(--theme-secondary-default);
    --colors-text-body: var(--theme-neutral-600);
    --colors-text-label: var(--theme-neutral-500);
    --colors-text-action: var(--theme-primary-default);
    --colors-text-action-hover: var(--theme-primary-500);
    --colors-text-warning: var(--theme-warning-600);
    --colors-text-error: var(--theme-error-default);
    --colors-text-success: var(--theme-success-500);
    --colors-text-disabled: var(--theme-neutral-400);
    --colors-text-on-action: var(--theme-neutral-white);
    --colors-text-on-disabled: var(--theme-neutral-500);
    --colors-text-tag-blue: var(--theme-information-blue-default);
    --colors-text-tag-orange: var(--theme-information-orange-default);
    --colors-text-tag-purple: var(--theme-information-purple-default);
    --colors-text-tag-green: var(--theme-information-green-500);
    --colors-text-tag-yellow: var(--theme-information-yellow-400);
    --colors-text-tag-seagreen: var(--theme-information-seagreen-default);
    --colors-text-tag-navy: var(--theme-information-navy-default);
    --colors-text-tag-fuchsia: var(--theme-information-fuchsia-default);
    --colors-text-tag-dark-blue: var(--theme-information-navy-600);
    --colors-text-placeholder: var(--theme-neutral-400);
    --colors-surface-page: var(--theme-neutral-white);
    --colors-surface-primary: var(--theme-neutral-white);
    --colors-surface-primary-90: var(--theme-neutral-white-90);
    --colors-surface-secondary: var(--theme-neutral-100);
    --colors-surface-tertiary: var(--theme-secondary-default);
    --colors-surface-tertiary-50: var(--theme-secondary-default-50);
    --colors-surface-highlight: var(--theme-tertiary-100);
    --colors-surface-success: var(--theme-success-100);
    --colors-surface-warning: var(--theme-warning-default);
    --colors-surface-emergency: var(--theme-error-default);
    --colors-surface-emergency-hover: var(--theme-error-500);
    --colors-surface-error: var(--theme-error-100);
    --colors-surface-action: var(--theme-primary-default);
    --colors-surface-action-90: var(--theme-primary-default-90);
    --colors-surface-action-hover: var(--theme-primary-500);
    --colors-surface-action-hover-2: var(--theme-primary-100);
    --colors-surface-action-hover-3: var(--theme-tertiary-200);
    --colors-surface-disabled: var(--theme-neutral-200);
    --colors-surface-disabled-2: var(--theme-neutral-100);
    --colors-surface-disabled-selected: var(--theme-neutral-500);
    --colors-surface-status-exploration: #FFFFFFFF;
    --colors-surface-tag-blue: var(--theme-information-blue-100);
    --colors-surface-status-design-done: #FFFFFFFF;
    --colors-surface-status-production: #FFFFFFFF;
    --colors-surface-status-deprecated: var(--theme-error-200);
    --colors-surface-tag-orange: var(--theme-information-orange-100);
    --colors-surface-tag-purple: var(--theme-information-purple-100);
    --colors-surface-tag-green: var(--theme-information-green-100);
    --colors-surface-tag-yellow: var(--theme-information-yellow-100);
    --colors-surface-tag-seagreen: var(--theme-information-seagreen-100);
    --colors-surface-tag-navy: var(--theme-information-navy-100);
    --colors-surface-tag-fuchsia: var(--theme-information-fuchsia-100);
    --colors-surface-tag-dark-blue: var(--theme-information-blue-100);
    --colors-icon-primary: var(--theme-neutral-500);
    --colors-icon-tag-blue: var(--theme-information-blue-default);
    --colors-icon-success: var(--theme-success-400);
    --colors-icon-tag-orange: var(--theme-information-orange-default);
    --colors-icon-tag-purple: var(--theme-information-purple-default);
    --colors-icon-warning: var(--theme-warning-500);
    --colors-icon-error: var(--theme-error-default);
    --colors-icon-error-hover: var(--theme-error-500);
    --colors-icon-tag-green: var(--theme-information-green-500);
    --colors-icon-disabled: var(--theme-neutral-400);
    --colors-icon-action: var(--theme-primary-default);
    --colors-icon-action-hover: var(--theme-primary-500);
    --colors-icon-on-action: var(--theme-neutral-white);
    --colors-icon-on-disabled: var(--theme-neutral-500);
    --colors-icon-on-error: var(--theme-error-300);
    --colors-icon-on-success: var(--theme-success-default);
    --colors-icon-rating: var(--theme-information-yellow-default);
    --colors-icon-tag-yellow: var(--theme-information-yellow-400);
    --colors-icon-tag-seagreen: var(--theme-information-seagreen-default);
    --colors-icon-tag-navy: var(--theme-information-navy-default);
    --colors-icon-tag-fuchsia: var(--theme-information-fuchsia-default);
    --colors-icon-tag-dark-blue: var(--theme-information-blue-600);
    --colors-border-primary: var(--theme-neutral-400);
    --colors-border-on-primary: var(--theme-neutral-white);
    --colors-border-secondary: var(--theme-neutral-200);
    --colors-border-highlight: var(--theme-tertiary-500);
    --colors-border-success: var(--theme-success-400);
    --colors-border-warning: var(--theme-warning-500);
    --colors-border-error: var(--theme-error-default);
    --colors-border-error-hover: var(--theme-error-500);
    --colors-border-disabled: var(--theme-neutral-400);
    --colors-border-action: var(--theme-primary-default);
    --colors-border-action-hover: var(--theme-primary-500);
    --colors-border-focus: var(--theme-primary-default);
    --colors-border-information: var(--theme-information-blue-default);
  }
}

@layer tokens {
    :root {
    --gradient-blue-navy-linear: linear-gradient(90deg, var(--color-blue-400, #0073AE) 0%, var(--color-blue-400, #0073AE) 33%, var(--color-navy-500, #002A5C) 100%);
    --gradient-blue-seafoam: linear-gradient(90deg, var(--color-blue-400, #0073AE) 0%, var(--color-blue-400, #0073AE) 33%, var(--color-seagreen-300, #7ABFC7) 100%);
    --gradient-blue-seagreen: linear-gradient(90deg, var(--color-blue-400, #0073AE) 0%, var(--color-blue-400, #0073AE) 33%, var(--color-seagreen-400, #00909E) 100%);
    --gradient-blue-purple: linear-gradient(90deg, var(--color-blue-400, #0073AE) 0%, var(--color-blue-400, #0073AE) 33%, var(--color-purple-400, #65316C) 100%);
    --gradient-blue-digital-blue: linear-gradient(90deg, var(--color-blue-400, #0073AE) 0%, var(--color-blue-400, #0073AE) 33%, var(--color-digital-blue-400, #A0D8F5) 100%);
    }
}

@layer typography {
  @font-face {
    font-family: "TheSans";
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-display: swap;
    src: url('assets/95b202dd.woff2') format('woff2'), url('assets/6c20abef.woff') format('woff');
  }

  @font-face {
    font-family: "TheSans Italic";
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
    font-display: swap;
    src: url('assets/da02c619.woff2') format('woff2'), url('assets/3d531a5a.woff') format('woff');
  }


  @font-face {
    font-family: "TheSans Bold";
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
    font-display: swap;
    src: url('assets/44dcd1e.woff2') format('woff2'), url('assets/19a12a8c.woff') format('woff');
  }

  @font-face {
    font-family: "TheSerif";
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-display: swap;
    src: url('assets/348f55a9.woff2') format('woff2'), url('assets/b1efed1d.woff') format('woff');
  }


  @font-face {
    font-family: "TheSerif SemiBold";
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
    font-display: swap;
    src: url('assets/58e04093.woff2') format('woff2'), url('assets/5ed0886b.woff') format('woff');
  }
}

@layer typography {
  /* Display xl/serif semibold */
  .display-xl-serif-semibold {
    font-family: var(--type-font-family-serif-semibold, "TheSerif SemiBold") !important;
    font-size: var(--type-font-size-display-xl, 5rem) !important;
    line-height: var(--type-line-height-display-xl, 5.5rem) !important;
    letter-spacing: var(--type-letter-spacing-display-xl, -0.075rem) !important;
  }

  /* Display xl/sans bold */
  .display-xl-sans-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-display-xl, 5rem) !important;
    line-height: var(--type-line-height-display-xl, 5.5rem) !important;
    letter-spacing: var(--type-letter-spacing-display-xl, -0.075rem) !important;
  }

  /* Display lg/serif semibold */
  .display-lg-serif-semibold {
    font-family: var(--type-font-family-serif-semibold, "TheSerif SemiBold") !important;
    font-size: var(--type-font-size-display-lg, 3.75rem) !important;
    line-height: var(--type-line-height-display-lg, 4.5rem) !important;
    letter-spacing: var(--type-letter-spacing-display-lg, -0.075rem) !important;
  }

  .display-lg-sans-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-display-lg, 3.75rem) !important;
    line-height: var(--type-line-height-display-lg, 4.5rem) !important;
    letter-spacing: var(--type-letter-spacing-display-lg, -0.075rem) !important;
  }

  /* Display md/serif semibold */
  .display-md-serif-semibold {
    font-family: var(--type-font-family-serif-semibold, "TheSerif SemiBold") !important;
    font-size: var(--type-font-size-display-md, 3rem) !important;
    line-height: var(--type-line-height-display-md, 3.5rem) !important;
    letter-spacing: var(--type-letter-spacing-display-md, -0.05938rem) !important;
  }

  /* Display md/sans bold */
  .display-md-sans-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-display-md, 3rem) !important;
    line-height: var(--type-line-height-display-md, 3.5rem) !important;
    letter-spacing: var(--type-letter-spacing-display-md, -0.05938rem) !important;
  }

  /* Display sm/serif semibold */
  .display-sm-serif-semibold {
    font-family: var(--type-font-family-serif-semibold, "TheSerif SemiBold") !important;
    font-size: var(--type-font-size-display-sm, 2.5rem) !important;
    line-height: var(--type-line-height-display-sm, 2.75rem) !important;
    letter-spacing: var(--type-letter-spacing-display-sm, -0.025rem) !important;
  }

  /* Display sm/sans bold */
  .display-sm-sans-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-display-sm, 2.5rem) !important;
    line-height: var(--type-line-height-display-sm, 2.75rem) !important;
    letter-spacing: var(--type-letter-spacing-display-sm, -0.025rem) !important;
  }

  /* Heading xl/serif semibold */
  .heading-xl-serif-semibold {
    font-family: var(--type-font-family-serif-semibold, "TheSerif SemiBold") !important;
    font-size: var(--type-font-size-heading-xl, 2rem) !important;
    line-height: var(--type-line-height-heading-xl, 2.25rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-xl, -0.02rem) !important;
  }

  /* Heading xl/serif plain */
  .heading-xl-serif-plain {
    font-family: var(--type-font-family-serif, "TheSerif") !important;
    font-size: var(--type-font-size-heading-xl, 2rem) !important;
    line-height: var(--type-line-height-heading-xl, 2.25rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-xl, -0.02rem) !important;
  }

  /* Heading xl/sans bold */
  .heading-xl-sans-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-heading-xl, 2rem) !important;
    line-height: var(--type-line-height-heading-xl, 2.25rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-xl, -0.02rem) !important;
  }

  /* Heading xl/sans plain */
  .heading-xl-sans-plain {
    font-family: var(--type-font-family-sans, "TheSans") !important;
    font-size: var(--type-font-size-heading-xl, 2rem) !important;
    line-height: var(--type-line-height-heading-xl, 2.25rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-xl, -0.02rem) !important;
  }

  /* Heading lg/serif semibold */
  .heading-lg-serif-semibold {
    font-family: var(--type-font-family-serif-semibold, "TheSerif SemiBold") !important;
    font-size: var(--type-font-size-heading-lg, 1.5rem) !important;
    line-height: var(--type-line-height-heading-lg, 1.75rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-lg, 0) !important;
  }

  /* Heading lg/serif plain */
  .heading-lg-serif-plain {
    font-family: var(--type-font-family-serif, "TheSerif") !important;
    font-size: var(--type-font-size-heading-lg, 1.5rem) !important;
    line-height: var(--type-line-height-heading-lg, 1.75rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-lg, 0) !important;
  }

  /* Heading lg/sans bold */
  .heading-lg-sans-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-heading-lg, 1.5rem) !important;
    line-height: var(--type-line-height-heading-lg, 1.75rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-lg, 0) !important;
  }

  /* Heading lg/sans plain */
  .heading-lg-sans-plain {
    font-family: var(--type-font-family-sans, "TheSans") !important;
    font-size: var(--type-font-size-heading-lg, 1.5rem) !important;
    line-height: var(--type-line-height-heading-lg, 1.75rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-lg, 0) !important;
  }

  /* Heading md/serif semibold */
  .heading-md-serif-semibold {
    font-family: var(--type-font-family-serif-semibold, "TheSerif SemiBold") !important;
    font-size: var(--type-font-size-heading-md, 1.25rem) !important;
    line-height: var(--type-line-height-heading-md, 1.5rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-md, 0) !important;
  }

  /* Heading md/serif plain */
  .heading-md-serif-plain {
    font-family: var(--type-font-family-serif, "TheSerif") !important;
    font-size: var(--type-font-size-heading-md, 1.25rem) !important;
    line-height: var(--type-line-height-heading-md, 1.5rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-md, 0) !important;
  }

  /* Heading md/sans bold */
  .heading-md-sans-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-heading-md, 1.25rem) !important;
    line-height: var(--type-line-height-heading-md, 1.5rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-md, 0) !important;
  }

  /* Heading md/sans plain */
  .heading-md-sans-plain {
    font-family: var(--type-font-family-sans, "TheSans") !important;
    font-size: var(--type-font-size-heading-md, 1.25rem) !important;
    line-height: var(--type-line-height-heading-md, 1.5rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-md, 0) !important;
  }

  /* Heading sm/serif semibold */
  .heading-sm-serif-semibold {
    font-family: var(--type-font-family-serif-semibold, "TheSerif SemiBold") !important;
    font-size: var(--type-font-size-heading-sm, 1rem) !important;
    line-height: var(--type-line-height-heading-sm, 1.25rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-sm, 0) !important;
  }

  /* Heading sm/serif plain */
  .heading-sm-serif-plain {
    font-family: var(--type-font-family-serif, "TheSerif") !important;
    font-size: var(--type-font-size-heading-sm, 1rem) !important;
    line-height: var(--type-line-height-heading-sm, 1.25rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-sm, 0) !important;
  }

  /* Heading sm/sans bold */
  .heading-sm-sans-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-heading-sm, 1rem) !important;
    line-height: var(--type-line-height-heading-sm, 1.25rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-sm, 0) !important;
  }

  /* Heading sm/sans plain */
  .heading-sm-sans-plain {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-heading-sm, 1rem) !important;
    line-height: var(--type-line-height-heading-sm, 1.25rem) !important;
    letter-spacing: var(--type-letter-spacing-heading-sm, 0) !important;
  }

  /* Body md/bold */
  .body-md-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-body-md, 1rem) !important;
    line-height: var(--type-line-height-body-md, 1.5rem) !important;
    letter-spacing: var(--type-letter-spacing-body-md, 0.01rem) !important;
  }

  /* Body md/plain */
  .body-md-plain {
    font-family: var(--type-font-family-sans, "TheSans") !important;
    font-size: var(--type-font-size-body-md, 1rem) !important;
    line-height: var(--type-line-height-body-md, 1.5rem) !important;
    letter-spacing: var(--type-letter-spacing-body-md, 0.01rem) !important;
  }

  /* Body md/plain link */
  .body-md-plain-link {
    font-family: var(--type-font-family-sans, "TheSans") !important;
    font-size: var(--type-font-size-body-md, 1rem) !important;
    line-height: var(--type-line-height-body-md, 1.5rem) !important;
    letter-spacing: var(--type-letter-spacing-body-md, 0.01rem) !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    -webkit-text-decoration-skip-ink: none !important;
            text-decoration-skip-ink: none !important;
    text-decoration-thickness: auto !important;
    text-underline-offset: auto !important;
    text-underline-position: from-font !important;
  }

  /* Body md/bold caps */
  .body-md-bold-caps {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-caps-md, 1rem) !important;
    line-height: var(--type-line-height-caps-md, 1.5rem) !important;
    letter-spacing: var(--type-letter-spacing-caps-md, 0.02rem) !important;
    text-transform: uppercase !important;
  }

  /* Body md/bold caps link */
  .body-md-bold-caps-link {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-caps-md, 1rem) !important;
    line-height: var(--type-line-height-caps-md, 1.5rem) !important;
    letter-spacing: var(--type-letter-spacing-caps-md, 0.02rem) !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    -webkit-text-decoration-skip-ink: none !important;
            text-decoration-skip-ink: none !important;
    text-decoration-thickness: auto !important;
    text-underline-offset: auto !important;
    text-underline-position: from-font !important;
    text-transform: uppercase !important;
  }

  /* Body sm/bold */
  .body-sm-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-body-sm, 0.875rem) !important;
    line-height: var(--type-line-height-body-sm, 1.25rem) !important;
    letter-spacing: var(--type-letter-spacing-body-sm, 0.00938rem) !important;
  }

  /* Body sm/plain */
  .body-sm-plain {
    font-family: var(--type-font-family-sans, "TheSans") !important;
    font-size: var(--type-font-size-body-sm, 0.875rem) !important;
    line-height: var(--type-line-height-body-sm, 1.25rem) !important;
    letter-spacing: var(--type-letter-spacing-body-sm, 0.00938rem) !important;
  }

  /* Body sm/plain link */
  .body-sm-plain-link {
    font-family: var(--type-font-family-sans, "TheSans") !important;
    font-size: var(--type-font-size-body-sm, 0.875rem) !important;
    line-height: var(--type-line-height-body-sm, 1.25rem) !important;
    letter-spacing: var(--type-letter-spacing-body-sm, 0.00938rem) !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    -webkit-text-decoration-skip-ink: none !important;
            text-decoration-skip-ink: none !important;
    text-decoration-thickness: auto !important;
    text-underline-offset: auto !important;
    text-underline-position: from-font !important;
  }

  /* Body sm/bold caps */
  .body-sm-bold-caps {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-caps-sm, 0.875rem) !important;
    line-height: var(--type-line-height-caps-sm, 1.25rem) !important;
    letter-spacing: var(--type-letter-spacing-caps-sm, 0.02625rem) !important;
    text-transform: uppercase !important;
  }

  /* Body sm/bold caps link */
  .body-sm-bold-caps-link {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-caps-sm, 0.875rem) !important;
    line-height: var(--type-line-height-caps-sm, 1.25rem) !important;
    letter-spacing: var(--type-letter-spacing-caps-sm, 0.02625rem) !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    -webkit-text-decoration-skip-ink: none !important;
            text-decoration-skip-ink: none !important;
    text-decoration-thickness: auto !important;
    text-underline-offset: auto !important;
    text-underline-position: from-font !important;
    text-transform: uppercase !important;
  }

  /* Label/bold */
  .label-bold {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-label-md, 0.75rem) !important;
    line-height: var(--type-line-height-label-md, 1rem) !important;
    letter-spacing: var(--type-letter-spacing-label-md, 0.01625rem) !important;
  }

  /* Label/plain */
  .label-plain {
    font-family: var(--type-font-family-sans, "TheSans") !important;
    font-size: var(--type-font-size-label-md, 0.75rem) !important;
    line-height: var(--type-line-height-label-md, 1rem) !important;
    letter-spacing: var(--type-letter-spacing-label-md, 0.01625rem) !important;
  }

  /* Label/plain link */
  .label-plain-link {
    font-family: var(--type-font-family-sans, "TheSans") !important;
    font-size: var(--type-font-size-label-md, 0.75rem) !important;
    line-height: var(--type-line-height-label-md, 1rem) !important;
    letter-spacing: var(--type-letter-spacing-label-md, 0.01625rem) !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    -webkit-text-decoration-skip-ink: none !important;
            text-decoration-skip-ink: none !important;
    text-decoration-thickness: auto !important;
    text-underline-offset: auto !important;
    text-underline-position: from-font !important;
  }

  /* Label/bold caps */
  .label-bold-caps {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-label-md, 0.75rem) !important;
    line-height: var(--type-line-height-label-md, 1rem) !important;
    letter-spacing: var(--type-letter-spacing-label-caps, 0.0325rem) !important;
    text-transform: uppercase !important;
  }

  /* Label/bold caps link */
  .label-bold-caps-link {
    font-family: var(--type-font-family-sans-bold, "TheSans Bold") !important;
    font-size: var(--type-font-size-label-md, 0.75rem) !important;
    line-height: var(--type-line-height-label-md, 1rem) !important;
    letter-spacing: var(--type-letter-spacing-label-caps, 0.0325rem) !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    -webkit-text-decoration-skip-ink: none !important;
            text-decoration-skip-ink: none !important;
    text-decoration-thickness: auto !important;
    text-underline-offset: auto !important;
    text-underline-position: from-font !important;
    text-transform: uppercase !important;
  }
}

.oh-arrow {
    all: unset;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: var(--border-radius-round, 4rem);

    &[data-direction="left"] {
        padding: var(--spacing-3xs, 0.125rem) 0.1875rem var(--spacing-3xs, 0.125rem) 0.0625rem;
    }

    &[data-direction="right"] {
        padding: var(--spacing-3xs, 0.125rem) 0.0625rem var(--spacing-3xs, 0.125rem) 0.1875rem;
    }

    &[data-variant="solid"] {
        background-color: var(--colors-surface-action);

        &::before {
            content: "";
            height: 1.5rem;
            width: 1.5rem;
            background-color: var(--colors-icon-on-action);
        }

        &[data-direction="left"]::before {
            -webkit-mask: url('assets/2cc59489.svg') no-repeat center / contain;
                    mask: url('assets/2cc59489.svg') no-repeat center / contain;
        }

        &[data-direction="right"]::before {
            -webkit-mask: url('assets/43fcc7d3.svg') no-repeat center / contain;
                    mask: url('assets/43fcc7d3.svg') no-repeat center / contain;
        }

        &:hover {
            background-color: var(--colors-surface-action-hover);
        }

        &:focus-visible {
            outline: var(--border-width-md, 0.125rem) solid var(--colors-border-focus, #0073AE);
            outline-offset: 0.125rem;
        }

        &.oh-invalid {
            background-color: var(--colors-surface-emergency);

            &:hover {
                background-color: var(--colors-surface-emergency-hover);
            }
        }

        &:disabled {
            background-color: var(--colors-surface-disabled);
            pointer-events: none;

            &::before {
                background-color: var(--colors-icon-on-disabled);
            }
        }
    }

    &[data-variant="transparent"] {
        background: transparent;

        &::before {
            content: "";
            height: 1.5rem;
            width: 1.5rem;
            background-color: var(--colors-icon-action);
        }

        &[data-direction="left"]::before {
            -webkit-mask: url('assets/2cc59489.svg') no-repeat center / contain;
                    mask: url('assets/2cc59489.svg') no-repeat center / contain;
        }

        &[data-direction="right"]::before {
            -webkit-mask: url('assets/43fcc7d3.svg') no-repeat center / contain;
                    mask: url('assets/43fcc7d3.svg') no-repeat center / contain;
        }

        &:hover {
            background: var(--colors-surface-action-hover-2);

            &::before {
                background: var(--colors-icon-action-hover);
            }
        }

        &:focus-visible {
            outline: var(--border-width-md, 0.125rem) solid var(--colors-border-focus, #0073AE);
            outline-offset: 0.125rem;
        }

        &.oh-invalid {
            &::before {
                background: var(--colors-icon-error);
            }

            &:hover {
                background: var(--colors-surface-error);

                &::before {
                    background: var(--colors-icon-error-hover);
                }
            }
        }

        &:disabled {
            background: transparent;
            pointer-events: none;

            &::before {
                background-color: var(--colors-icon-disabled);
            }
        }
    }
}

.oh-button-icon,
.oh-button-icon:hover,
.oh-button-icon:focus,
.oh-button-icon:focus-visible {
    all: unset;
    background: transparent;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-md);
    cursor: pointer;
}

.oh-button-icon {
    svg {
        height: 1.5rem;
        width: 1.5rem;
    }

    &&[data-variant="primary"][data-surface="light"] {
        color: var(--colors-icon-on-action);
        background: var(--colors-surface-action);

        &&:hover {
            background: var(--colors-surface-action-hover);
        }

        &&:focus-visible {
            outline: var(--border-width-md) solid var(--colors-border-focus);
            outline-offset: 0.125rem;
        }

        &&:disabled {
            pointer-events: none;
            background-color: var(--colors-surface-disabled);
            color: var(--colors-icon-on-disabled);
        }
    }

    &&[data-variant="transparent"][data-surface="light"] {
        color: var(--colors-icon-action);
        background: transparent;

        &&:hover {
            color: var(--colors-icon-action-hover);
            background: var(--colors-surface-action-hover-2);
        }

        &&:focus-visible {
            outline: var(--border-width-md) solid var(--colors-border-focus);
            outline-offset: 0.125rem;
        }

        &&:disabled {
            background: transparent;
            pointer-events: none;
            color: var(--colors-icon-disabled);
        }
    }

    &&[data-variant="outline"][data-surface="light"] {
        color: var(--colors-icon-action);
        background: transparent;
        border: var(--border-width-sm, 1px) solid var(--colors-border-action, #0073AE);

        &&:hover {
            color: var(--colors-icon-action-hover);
            background: var(--colors-surface-action-hover-2);
            border-color: var(--colors-border-action-hover);
        }

        &&:focus-visible {
            outline: var(--border-width-md) solid var(--colors-border-focus);
            outline-offset: 0.125rem;
        }

        &&:disabled {
            pointer-events: none;
            color: var(--colors-icon-on-disabled);
            background: var(--colors-surface-disabled);
            border-color: var(--colors-border-disabled);
        }
    }

    &&[data-variant="primary"][data-surface="dark"] {
        color: var(--colors-surface-action);
        background: var(--colors-surface-primary);

        &&:hover {
            background: var(--colors-surface-action-hover-2);
            color: var(--colors-icon-action-hover);
        }

        &&:focus-visible {
            outline: var(--border-width-md) solid var(--colors-border-highlight);
            outline-offset: 0.125rem;
        }

        &&:disabled {
            pointer-events: none;
            background-color: var(--colors-surface-disabled);
            color: var(--colors-icon-on-disabled);
        }
    }

    &&[data-variant="transparent"][data-surface="dark"] {
        color: var(--colors-icon-on-action);
        background: transparent;

        &&:hover {
            color: var(--colors-icon-on-action);
            background: var(--colors-surface-action-hover);
        }

        &&:focus-visible {
            outline: var(--border-width-md) solid var(--colors-border-highlight);
            outline-offset: 0.125rem;
        }

        &&:disabled {
            background: transparent;
            pointer-events: none;
            color: var(--colors-icon-disabled);
        }
    }

    &&[data-variant="outline"][data-surface="dark"] {
        color: var(--colors-icon-on-action);
        background: transparent;
        border: var(--border-width-sm, 1px) solid var(--colors-border-on-primary, #FFF);

        &&:hover {
            color: var(--colors-icon-on-action);
            background: var(--colors-surface-action-hover);
        }

        &&:focus-visible {
            outline: var(--border-width-md) solid var(--colors-border-highlight);
            outline-offset: 0.125rem;
        }

        &&:disabled {
            background: transparent;
            pointer-events: none;
            color: var(--colors-icon-disabled);
            border-color: var(--colors-border-disabled);
        }
    }
}

a.oh-link,
a.oh-link:hover,
a.oh-link:focus,
a.oh-link:focus-visible {
    all: unset;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--border-radius-md, 0.25rem);
    color: var(--colors-text-action);
    font-family: var(--type-font-family-sans, "TheSans");
    font-size: var(--type-font-size-body-md, 1rem);
    line-height: var(--type-line-height-body-md, 1.5rem);
    letter-spacing: var(--type-letter-spacing-body-md, 0.01rem);
    box-sizing: border-box;
    position: relative;
}

a.oh-link {
    &:hover {
        color: var(--colors-text-action-hover, #00517A);
        text-decoration-line: underline;
        text-decoration-style: solid;
        -webkit-text-decoration-skip-ink: none;
                text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

    &:focus-visible {
        outline: var(--border-width-md, 2px) solid var(--colors-border-focus, #0073AE);
        outline-offset: 0.125rem;
    }

    &[data-size="small"] {
        font-size: var(--type-font-size-body-sm, 0.875rem);
        line-height: var(--type-line-height-body-sm, 1.25rem);
        letter-spacing: var(--type-letter-spacing-body-sm, 0.00938rem);
    }

    &[data-size="label"] {
        font-size: var(--type-font-size-label-md, 0.75rem);
        line-height: var(--type-line-height-label-md, 1rem);
        letter-spacing: var(--type-letter-spacing-label-md, 0.01625rem);
    }

    &[data-surface="dark"] {
        color: var(--colors-text-on-action, #FFF);

        &:focus-visible {
            outline-color: var(--colors-border-highlight);
        }
    }

    &[aria-disabled="true"] {
        color: var(--colors-text-disabled);
        pointer-events: none;
    }

    &[data-variant="list-item"] {
        font-family: var(--type-font-family-sans-bold, "TheSans Bold");
        font-size: var(--type-font-size-caps-md, 1rem);
        line-height: var(--type-line-height-caps-md, 1.5rem);
        letter-spacing: var(--type-letter-spacing-caps-md, 0.02rem);
        text-transform: uppercase;

        &[data-size="small"] {
            font-size: var(--type-font-size-caps-sm, 0.875rem);
            line-height: var(--type-line-height-caps-sm, 1.25rem);
            letter-spacing: var(--type-letter-spacing-caps-sm, 0.02625rem);
        }

        &[data-size="label"] {
            font-size: var(--type-font-size-label-md, 0.75rem);
            line-height: var(--type-line-height-label-md, 1rem);
            letter-spacing: var(--type-letter-spacing-label-caps, 0.0325rem);
        }
        
        &::after {
            content: "";
            -webkit-mask: url('assets/43fcc7d3.svg') no-repeat center / contain;
                    mask: url('assets/43fcc7d3.svg') no-repeat center / contain;
            background-color: currentColor;
            height: 1.5em;
            width: 1.5em;
        }
    }
}

a.oh-title-link,
a.oh-title-link:hover,
a.oh-title-link:focus,
a.oh-title-link:focus-visible {
    all: unset;
    border: none;
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    border-radius: var(--border-radius-md, 0.25rem);
    color: var(--colors-text-action);
    box-sizing: border-box;
    font-family: var(--type-font-family-sans-bold, "TheSans Bold");
    font-size: var(--type-font-size-heading-sm, 1rem);
    line-height: var(--type-line-height-heading-sm, 1.25rem);
    letter-spacing: var(--type-letter-spacing-heading-sm, 0);
}

a.oh-title-link {
    &:hover {
        color: var(--colors-text-action-hover, #00517A);
    }

    &:focus-visible {
        outline: var(--border-width-md, 2px) solid var(--colors-border-focus, #0073AE);
        outline-offset: 0.125rem;
    }

    &[data-size="large"] {
        font-family: var(--type-font-family-serif-semibold, "TheSerif SemiBold");
        font-size: var(--type-font-size-heading-lg, 1.5rem);
        line-height: var(--type-line-height-heading-lg, 1.75rem);
        letter-spacing: var(--type-letter-spacing-heading-lg, 0);
    }

    &[aria-disabled="true"] {
        color: var(--colors-text-disabled);
        pointer-events: none;
    }
}

button.oh-button,
button.oh-button:hover,
button.oh-button:focus,
button.oh-button:focus-visible {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: var(--border-radius-md, 0.25rem);
    background: var(--colors-surface-action, #0073AE);
    padding: var(--spacing-md, 1rem) var(--spacing-xl, 2rem);
    min-height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.75rem);
    color: var(--colors-text-on-action, #FFF);
    text-align: center;
    font-family: var(--type-font-family-sans-bold, "TheSans Bold");
    font-size: var(--type-font-size-caps-md, 1rem);
    line-height: var(--type-line-height-caps-md, 1.5rem);
    letter-spacing: var(--type-letter-spacing-caps-md, 0.02rem);
    text-transform: uppercase;
}

button.oh-button {
    svg {
        height: 1.5rem;
        width: 1.5rem;
    }

    &:hover {
        background: var(--colors-surface-action-hover);
    }

    &:disabled {
        color: var(--colors-text-on-disabled);
        background: var(--colors-surface-disabled);
        pointer-events: none;
    }

    &:focus-visible {
        outline: var(--border-width-md) solid var(--colors-border-focus);
        outline-offset: 0.125rem;
    }

    &[data-variant="transparent"] {
        color: var(--colors-text-action);
        background: transparent;

        &:hover {
            background: var(--colors-surface-action-hover-2);
            color: var(--colors-text-action-hover);
        }

        &:disabled {
            color: var(--colors-text-disabled);
            background: transparent;
        }
    }

    &[data-variant="outline"] {
        color: var(--colors-text-action);
        border: var(--border-width-sm, 1px) solid var(--colors-border-action, #0073AE);
        background: var(--colors-surface-primary, #FFF);

        &:hover {
            background: var(--colors-surface-action-hover-2);
            color: var(--colors-text-action-hover);
        }

        &:disabled {
            color: var(--colors-text-on-disabled);
            background: var(--colors-surface-disabled);
            pointer-events: none;
            border-color: var(--colors-border-disabled);
        }
    }

    &[data-surface="dark"] {
        background: var(--colors-surface-primary);
        color: var(--colors-text-action);

        &:hover {
            background: var(--colors-surface-action-hover-2);
            color: var(--colors-text-action-hover);
        }

        &:disabled {
            background: var(--colors-surface-disabled);
            color: var(--colors-text-on-disabled);
        }

        &:focus-visible {
            outline-color: var(--colors-border-highlight);
        }

        &[data-variant="transparent"] {
            background: transparent;
            color: var(--colors-text-on-action);

            &:hover {
                background: var(--colors-surface-action-hover);
            }

            &:disabled {
                color: var(--colors-text-disabled);
            }
        }

        &[data-variant="outline"] {
            background: transparent;
            color: var(--colors-text-on-action);
            border: var(--border-width-sm, 1px) solid var(--colors-border-on-primary, #FFF);

            &:hover {
                background: var(--colors-surface-action-hover);
            }

            &:disabled {
                color: var(--colors-text-disabled);
                border-color: var(--colors-border-disabled);
            }
        }
    }

    &[data-size="medium"] {
        font-size: var(--type-font-size-caps-sm, 0.875rem);
        line-height: var(--type-line-height-caps-sm, 1.25rem);
        letter-spacing: var(--type-letter-spacing-caps-sm, 0.02625rem);
        min-height: 2.5rem;
        padding: var(--spacing-xs, 0.5rem) var(--spacing-xl, 2rem);
        gap: var(--spacing-xs, 0.5rem);
    }

    &[data-size="small"] {
        font-size: var(--type-font-size-label-md, 0.75rem);
        line-height: var(--type-line-height-label-md, 1rem); /* 133.333% */
        letter-spacing: var(--type-letter-spacing-label-caps, 0.0325rem);
        min-height: 1.875rem;
        padding: var(--spacing-2xs, 0.25rem) var(--spacing-xs, 0.5rem);
        gap: var(--spacing-2xs, 0.25rem);

        svg {
            height: 1.25rem;
            width: 1.25rem;
        }
    }
}

.oh-button-group {
    display: inline-flex;
    align-items: center;
    border-radius: var(--border-radius-md, 0.25rem);
    outline: var(--border-width-sm, 1px) solid var(--colors-border-action, #0073AE);

    .oh-button-group-item {
        display: inline-flex;
        padding: var(--spacing-xs, 0.5rem) var(--spacing-md, 1rem);
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs, 0.5rem);
        border-right: var(--border-width-sm, 1px) solid var(--colors-border-action, #0073AE);
        color: var(--colors-text-action, #0073AE);
        font-family: var(--type-font-family-sans, "TheSans");
        font-size: var(--type-font-size-body-md, 1rem);
        line-height: var(--type-line-height-body-md, 1.5rem); /* 150% */
        letter-spacing: var(--type-letter-spacing-body-md, 0.01rem);
        cursor: pointer;

        &:hover {
            background: var(--colors-surface-action-hover-2);
            color: var(--colors-text-action-hover);
            border-right-color: var(--colors-border-action-hover);
        }

        input {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            border: 0;
            padding: 0;
            clip: rect(0 0 0 0);
            overflow: hidden;
        }

        svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    .oh-button-group-item:has(input[type="radio"]:focus-visible) {
        outline: var(--border-width-md) solid var(--colors-border-focus);
        outline-offset: 0.125rem;
    }

    .oh-button-group-item:has(input[type="radio"]:disabled) {
        background: var(--colors-surface-disabled);
        color: var(--colors-text-on-disabled);
        border-right-color: var(--colors-border-disabled);
    }

    .oh-button-group-item:has(input[type="radio"]:checked) {
        background: var(--colors-surface-action);
        color: var(--colors-text-on-action);
        border-right-color: var(--colors-border-action);

        &:hover {
            background: var(--colors-surface-action-hover);
            border-right-color: var(--colors-border-action-hover);
        }
    }

    .oh-button-group-item:has(input[type="radio"]:checked:disabled) {
        background: var(--colors-surface-disabled-selected);
         color: var(--colors-text-on-action);
        border-right-color: var(--colors-border-disabled);
    }

    &:has(input[type="radio"]:disabled) {
        outline-color: var(--colors-border-disabled);
    }

    > :last-child {
        border-right: none;
    }
}

.oh-pill-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    .oh-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--colors-text-action, #0073AE);
        border-radius: var(--border-radius-round, 4rem);
        box-shadow: 0 0 0 var(--border-width-sm, 1px) var(--colors-text-action, #0073AE) inset; 
        background: var(--colors-surface-primary, #FFF);
        font-family: var(--type-font-family-sans, "TheSans");
        font-size: var(--type-font-size-label-md, 0.75rem);
        line-height: var(--type-line-height-label-md, 1rem);
        letter-spacing: var(--type-letter-spacing-label-md, 0.01625rem);
        padding: 0 var(--spacing-2xs, 0.25rem) 0 var(--spacing-sm, 0.75rem);
        text-align: center;
        cursor: pointer;

        &:hover {
            background: var(--colors-surface-action-hover-2);
            color: var(--colors-text-action-hover);
            border-color: var(--colors-border-action-hover);
            box-shadow: 0 0 0 var(--border-width-sm, 1px) var(--colors-border-action-hover) inset;
        }

        input {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            border: 0;
            padding: 0;
            clip: rect(0 0 0 0);
            overflow: hidden;
        }

        svg {
            width: 1.25rem;
            height: 1.25rem;
        }

        span {
            display: flex;
            padding: 0.375rem var(--spacing-xs, 0.5rem) 0.375rem 0;
            justify-content: center;
            align-items: center;
        }

        &:has(input:focus-visible) {
            outline: var(--border-width-md) solid var(--colors-border-focus);
            outline-offset: 0.125rem;
        }

        &:has(input:disabled) {
            background: var(--colors-surface-disabled);
            color: var(--colors-text-on-disabled);
            box-shadow: 0 0 0 var(--border-width-sm, 1px) var(--colors-border-disabled, #0073AE) inset;
        }

        &:has(input:checked) {
            background: var(--colors-surface-action);
            color: var(--colors-text-on-action);

            &:hover {
                background: var(--colors-surface-action-hover);
            }
        }

        &:has(input:checked:disabled) {
            background: var(--colors-surface-disabled-selected);
            color: var(--colors-text-on-action);
            box-shadow: 0 0 0 var(--border-width-sm, 1px) var(--colors-surface-disabled-selected) inset;
        }

        &[data-size="medium"] {
            padding: 0 var(--spacing-xs, 0.5rem) 0 var(--spacing-md, 1rem);
            font-size: var(--type-font-size-body-sm, 0.875rem);
            line-height: var(--type-line-height-body-sm, 1.25rem);
            letter-spacing: var(--type-letter-spacing-body-sm, 0.00938rem);

            svg {
                height: 1.5rem;
                width: 1.5rem;
            }

            span {
                padding: var(--spacing-xs, 0.5rem) var(--spacing-xs, 0.5rem) var(--spacing-xs, 0.5rem) 0;
            }
        }
    }
}

input[type="checkbox"].oh-checkbox {
    all: unset;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    border-radius: var(--border-radius-md, 0.25rem);
    border: var(--border-width-md, 2px) solid var(--colors-border-primary, #A1A1A1);
    background: var(--colors-surface-primary, #FFF);

    &:hover {
        border-color: var(--colors-border-action-hover, #00517A);
        background: var(--colors-surface-action-hover-2, #E5F1F7);
    }

    &:focus-visible {
        outline: var(--border-width-md, 2px) solid var(--colors-border-focus, #0073AE);
        outline-offset: 0.125rem;
    }

    &:invalid {
        border-color: var(--colors-border-error, #B41635);
        background: var(--colors-surface-primary, #FFF);

        &:hover {
            background: var(--colors-surface-error, #F8E7EA);
            border-color: var(--colors-border-error-hover, #7E0F25);

            &::before {
                background: var(--colors-icon-error-hover);
            }
        }
    }

    &:disabled {
        border-color: var(--colors-border-disabled, #A1A1A1);
        background: var(--colors-surface-disabled, #E5E5E5);
        pointer-events: none;
    }

    &:checked {
        border-color: var(--colors-border-action, #0073AE);
        background: var(--colors-surface-action, #0073AE);

        &::before {
            content: "";
            height: 1.25rem;
            width: 1.25rem;
            -webkit-mask: url('assets/6c05ceb2.svg') no-repeat center / contain;
                    mask: url('assets/6c05ceb2.svg') no-repeat center / contain;
            background: var(--colors-icon-on-action);
        }

        &:hover {
            border-color: var(--colors-border-action-hover);
            background: var(--colors-surface-action-hover);
        }

        &:invalid {
            border-color: var(--colors-border-error);
            background: var(--colors-surface-primary);

            &::before {
                background: var(--colors-icon-error);
            }

            &:hover {
                background: var(--colors-surface-error, #F8E7EA);
                border-color: var(--colors-border-error-hover, #7E0F25);

                &::before {
                    background: var(--colors-icon-error-hover);
                }
            }
        }

        &:disabled {
            border-color: var(--colors-border-disabled, #A1A1A1);
            background: var(--colors-surface-disabled, #E5E5E5);

            &::before {
                background: var(--colors-icon-on-disabled);
            }
        }
    }

    &:indeterminate {
        border-color: var(--colors-border-action, #0073AE);
        background: var(--colors-surface-action, #0073AE);

        &::before {
            content: "";
            height: 1.25rem;
            width: 1.25rem;
            -webkit-mask: url('assets/4555e3a7.svg') no-repeat center / contain;
                    mask: url('assets/4555e3a7.svg') no-repeat center / contain;
            background: var(--colors-icon-on-action);
        }

        &:hover {
            border-color: var(--colors-border-action-hover);
            background: var(--colors-surface-action-hover);
        }

        &:invalid {
            border-color: var(--colors-border-error);
            background: var(--colors-surface-primary);

            &::before {
                background: var(--colors-icon-error);
            }

            &:hover {
                background: var(--colors-surface-error, #F8E7EA);
                border-color: var(--colors-border-error-hover, #7E0F25);

                &::before {
                    background: var(--colors-icon-error-hover);
                }
            }
        }

        &:disabled {
            border-color: var(--colors-border-disabled, #A1A1A1);
            background: var(--colors-surface-disabled, #E5E5E5);

            &::before {
                background: var(--colors-icon-on-disabled);
            }
        }
    }
}

input[type="radio"].oh-radio {
    all: unset;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    border-radius: var(--border-radius-round, 4rem);
    border: var(--border-width-md, 2px) solid var(--colors-border-primary, #A1A1A1);
    background: var(--colors-surface-primary, #FFF);

    &:checked {
        border-color: var(--colors-border-action, #0073AE);
        background: var(--colors-surface-primary);

        &::before {
            content: "";
            height: 0.625rem;
            width: 0.625rem;
            background: var(--colors-surface-action);
            border-radius: 50%;
        }
    }

    &:hover {
        border-color: var(--colors-border-action-hover);
        background: var(--colors-surface-action-hover-2);

        &::before {
            background: var(--colors-surface-action-hover);
        }
    }

    &:focus-visible {
        outline: var(--border-width-md, 2px) solid var(--colors-border-focus, #0073AE);
        outline-offset: 0.125rem;
    }

    &:invalid {
        border-color: var(--colors-border-error, #B41635);
        background: var(--colors-surface-primary, #FFF);

        &::before {
            background: var(--colors-icon-error);
        }

        &:hover {
            background: var(--colors-surface-error, #F8E7EA);
            border-color: var(--colors-border-error-hover, #7E0F25);

            &::before {
                background: var(--colors-icon-error-hover);
            }
        }
    }

    &:disabled {
        border-color: var(--colors-border-disabled, #A1A1A1);
        background: var(--colors-surface-disabled, #E5E5E5);
        pointer-events: none;

        &::before {
            background: var(--colors-surface-disabled-selected);
        }
    }
}

.oh-input,
fieldset.oh-input {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;

    > label {
        all: unset;
        color: var(--colors-text-heading, #002A5C);
        font-family: var(--type-font-family-sans, "TheSans");
        font-size: var(--type-font-size-body-sm, 0.875rem);
        line-height: var(--type-line-height-body-sm, 1.25rem);
        letter-spacing: var(--type-letter-spacing-body-sm, 0.00938rem);
        text-align: left;
    }

    > .oh-input-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;

        > label,
        > span,
        > .oh-input-label {
            all: unset;
            color: var(--colors-text-heading, #002A5C);
            font-family: var(--type-font-family-sans, "TheSans");
            font-size: var(--type-font-size-body-sm, 0.875rem);
            line-height: var(--type-line-height-body-sm, 1.25rem);
            letter-spacing: var(--type-letter-spacing-body-sm, 0.00938rem);
            text-align: left;

            &[data-variant="required"] {
                &::after {
                    content: '*';
                    color: var(--colors-text-display);
                }
            }

            &[data-variant="optional"] {
                &::after {
                    content: ' (optional)';
                    color: var(--colors-text-label);
                }
            }
        }

        > .oh-input-tooltip {
            background-color: var(--color-white);
            width: var(--spacing-md);
            height: var(--spacing-md);
            border-radius: 50%;
            position: relative;
            margin-left: auto;

            svg {
                width: 100%;
                height: 100%;
                color: var(--colors-icon-tag-blue);
            }

            &::before {
                display: none;
                content: attr(data-text);
                max-width: 200px;
                padding: var(--spacing-2xs, 4px) var(--spacing-xs, 8px);
                justify-content: center;
                align-items: center;
                position: absolute;
                right: 24px;
                top: 50%;
                transform: translateY(-50%);
                border-radius: var(--border-radius-lg, 8px);
                background: var(--colors-surface-action-90, rgba(0, 115, 174, 0.90));
                color: var(--colors-text-on-action, #FFF);
                font-family: var(--type-font-family-sans, "TheSans");
                font-size: var(--type-font-size-label-md, 0.75rem);
                line-height: var(--type-line-height-label-md, 1rem);
                letter-spacing: var(--type-letter-spacing-label-md, 0.01625rem);
                z-index: 1;
                width: -moz-max-content;
                width: max-content;
            }

            &::after {
                display: none;
                content: '';
                height: var(--spacing-sm);
                width: var(--spacing-xs);
                -webkit-mask: url('assets/37fa2861.svg') no-repeat center / contain;
                        mask: url('assets/37fa2861.svg') no-repeat center / contain;
                background-color: var(--colors-surface-action-90);
                position: absolute;
                right: 17px;
                top: 3px;
            }

            &:hover {
                &::before,
                &::after {
                    display: flex;
                }
            }
        }
    }

    > legend.oh-input-header {
        margin-bottom: 0.375rem;
    }

    > .oh-input-control {
        display: flex;
        position: relative;
        width: 100%;

        > svg {
            position: absolute;
            width: 1.5rem;
            height: 1.5rem;
            left: 9px;
            top: 8px;
            color: var(--colors-icon-action);
        }

        > input,
        > textarea {
            margin: 0;
            box-shadow: none;
            height: auto;
            width: 100%;
            transition: none;
            padding: var(--spacing-xs, 0.5rem) var(--spacing-sm, 0.75rem);
            border-radius: var(--spacing-2xs, 0.25rem);
            border: var(--border-width-sm, 1px) solid var(--colors-border-primary, #A1A1A1);
            background: var(--colors-surface-primary, #FFF);
            overflow: hidden;
            color: var(--colors-text-body, #333);
            text-overflow: ellipsis;
            font-family: var(--type-font-family-sans, "TheSans");
            font-size: var(--type-font-size-body-md, 1rem);
            line-height: var(--type-line-height-body-md, 1.5rem);
            letter-spacing: var(--type-letter-spacing-body-md, 0.01rem);
            caret-color: var(--colors-icon-action);

            &::-moz-placeholder {
                color: var(--colors-text-placeholder);
                overflow: hidden;
                text-overflow: ellipsis;
                font-family: var(--type-font-family-sans, "TheSans");
                font-size: var(--type-font-size-body-md, 1rem);
                line-height: var(--type-line-height-body-md, 1.5rem);
                letter-spacing: var(--type-letter-spacing-body-md, 0.01rem);
            }

            &::placeholder {
                color: var(--colors-text-placeholder);
                overflow: hidden;
                text-overflow: ellipsis;
                font-family: var(--type-font-family-sans, "TheSans");
                font-size: var(--type-font-size-body-md, 1rem);
                line-height: var(--type-line-height-body-md, 1.5rem);
                letter-spacing: var(--type-letter-spacing-body-md, 0.01rem);
            }

            &:hover {
                border-color: var(--colors-border-action-hover);
                background: var(--colors-surface-action-hover-2);

                &:-moz-placeholder {
                    background: var(--colors-surface-primary, #FFF);
                }

                &:placeholder-shown {
                    background: var(--colors-surface-primary, #FFF);
                }
            }

            &:focus {
                outline: none;
                border-color: var(--colors-border-action);
            }

            &:focus-visible {
                border-color: var(--colors-border-primary, #A1A1A1);
                outline: var(--border-width-md, 2px) solid var(--colors-border-focus, #0073AE);
                outline-offset: 0.125rem;
            }

            &:user-invalid {
                border-color: var(--colors-border-error);
                background: var(--colors-surface-error);

                &:-moz-placeholder {
                    background: var(--colors-surface-primary, #FFF);
                }

                &:placeholder-shown {
                    background: var(--colors-surface-primary, #FFF);
                }

                &:hover {
                    border-color: var(--colors-border-error-hover);
                }
            }

            &:disabled {
                pointer-events: none;
                border-color: var(--colors-border-primary);
                background: var(--colors-surface-disabled);
                color: var(--colors-text-on-disabled);

                &::-moz-placeholder {
                    color: var(--colors-text-on-disabled);
                }

                &::placeholder {
                    color: var(--colors-text-on-disabled);
                }
            }
        }

        > textarea {
            min-width: 0;
            min-height: 0;
            height: auto;
            width: auto;
        }

        &:has(svg) input {
            padding-left: 36px;
        }

        &:has(input:hover) svg {
            color: var(--colors-icon-action-hover);
        }

        &:has(input:user-invalid) svg {
            color: var(--colors-icon-error);
        }

        &:has(input:user-invalid:hover) svg {
            color: var(--colors-icon-error-hover);
        }

        &:has(input:disabled) svg {
            color: var(--colors-icon-on-disabled);
        }
    }

    > span {
        color: var(--colors-text-label, #666);
        font-family: var(--type-font-family-sans, "TheSans");
        font-size: var(--type-font-size-label-md, 0.75rem);
        line-height: var(--type-line-height-label-md, 1rem);
        letter-spacing: var(--type-letter-spacing-label-md, 0.01625rem);
    }

    > .oh-input-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        > span {
            color: var(--colors-text-label, #666);
            font-family: var(--type-font-family-sans, "TheSans");
            font-size: var(--type-font-size-label-md, 0.75rem);
            line-height: var(--type-line-height-label-md, 1rem);
            letter-spacing: var(--type-letter-spacing-label-md, 0.01625rem);
        }

        > .oh-textarea-limit {
            margin-left: auto;
        }
    }

    &:has(.oh-input-control > input:user-invalid) > span,
    &:has(.oh-input-control > textarea:user-invalid) > span {
        color: var(--colors-text-error);
    }

    > .oh-input-defined {
        > input:nth-child(1) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
            width: 5rem;
            flex-grow: 0;
            flex-shrink: 0;
        }

        > input:nth-child(2) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: auto;
        }

        &:has(input:hover) {
            border-radius: var(--spacing-2xs, 0.25rem);
            border: var(--border-width-sm, 1px) solid var(--colors-border-action-hover);

            input {
                border: none;

                &:nth-child(1) {
                    border-right: var(--border-width-sm, 1px) solid var(--colors-border-primary, #A1A1A1);
                }
            }
        }

        &:has(input:focus-visible) {
            border-radius: var(--spacing-2xs, 0.25rem);
            outline: var(--border-width-md, 2px) solid var(--colors-border-focus, #0073AE);
            outline-offset: 0.125rem;

            input:focus,
            input:focus-visible {
                outline: none;
            }
        }

        &:has(input:user-invalid) {
            border-radius: var(--spacing-2xs, 0.25rem);
            border: var(--border-width-sm, 1px) solid var(--colors-border-error, #A1A1A1);

            input {
                border: none;

                &:nth-child(1) {
                    border-right: var(--border-width-sm, 1px) solid var(--colors-border-primary, #A1A1A1);
                }
            }
        }
    }

    > .oh-input-sectioned {
        display: flex;
        gap: 0.375rem;

        > input {
            width: auto;
        }

        &:has(input:user-invalid) > input {
            border-color: var(--colors-border-error);
            background: var(--colors-surface-error);

            &:-moz-placeholder {
                background: var(--colors-surface-primary, #FFF);
            }

            &:placeholder-shown {
                background: var(--colors-surface-primary, #FFF);
            }
        }
    }

    > .oh-input-slider {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);

        > input[type="number"] {
            width: 5.6875rem;
            -webkit-appearance: textfield;
                    appearance: textfield;
            -moz-appearance: textfield;

            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                        appearance: none;
                margin: 0;
            }

            &::-webkit-outer-spin-button {
                -webkit-appearance: none;
                        appearance: none;
                margin: 0;
            }
        }

        > input[type="range"] {
            --track-active: var(--colors-surface-action-hover-2);
            --track-inactive: var(--colors-surface-primary);

            all: unset;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;
            cursor: pointer;
            width: 20rem;
            border-radius: var(--border-radius-round, 4rem);
            background: linear-gradient(
                to right,
                var(--track-active) 0%,
                var(--track-active) var(--track-progress),
                var(--track-inactive) var(--track-progress),
                var(--track-inactive) 100%
            );

            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                        appearance: none;
                height: 1.25rem;
                width: 1.25rem;
                background: var(--colors-surface-action);
                border-radius: 50%;
                margin-top: -0.45rem;
            }

            &::-moz-range-thumb {
                -moz-appearance: none;
                     appearance: none;
                height: 1.25rem;
                width: 1.25rem;
                background: var(--colors-surface-action);
                border-radius: 50%;
            }

            &::-webkit-slider-runnable-track {
                height: var(--spacing-xs);
                border-radius: var(--border-radius-round, 4rem);
                border: var(--border-width-sm, 1px) solid var(--colors-border-action, #0073AE);
                background: transparent;
            }

            &::-moz-range-track {
                height: var(--spacing-xs);
                border-radius: var(--border-radius-round, 4rem);
                border: var(--border-width-sm, 1px) solid var(--colors-border-action, #0073AE);
                background: var(--track-inactive);
            }

            &::-moz-range-progress {
                height: var(--spacing-xs);
                border-radius: var(--border-radius-round, 4rem);
                border: var(--border-width-sm, 1px) solid var(--colors-border-action, #0073AE);
                background: var(--track-active);
            }

            &:hover {
                --track-active: var(--colors-surface-action-hover-3);

                &::-webkit-slider-thumb {
                    background: var(--colors-surface-action-hover);
                }

                &::-moz-range-thumb {
                    background: var(--colors-surface-action-hover);
                }

                &::-webkit-slider-runnable-track {
                    border-color: var(--colors-border-action-hover);
                }

                &::-moz-range-track {
                    border-color: var(--colors-border-action-hover);
                }

                &::-moz-range-progress {
                    border-color: var(--colors-border-action-hover);
                }
            }

            &:focus-visible {
                &::-webkit-slider-thumb {
                    outline: var(--border-width-md, 2px) solid var(--colors-border-focus, #0073AE);
                    outline-offset: 0.125rem;
                }

                &::-moz-range-thumb {
                    outline: var(--border-width-md, 2px) solid var(--colors-border-focus, #0073AE);
                    outline-offset: 0.125rem;
                }
            }

            &:user-invalid {
                --track-active: var(--colors-surface-error);

                &::-webkit-slider-thumb {
                    background: var(--colors-icon-error);
                }

                &::-moz-range-thumb {
                    background: var(--colors-icon-error);
                }

                &::-webkit-slider-runnable-track {
                    border-color: var(--colors-border-error);
                }

                &::-moz-range-track {
                    border-color: var(--colors-border-error);
                }

                &::-moz-range-progress {
                    border-color: var(--colors-border-error);
                }
            }

            &:disabled {
                --track-active: var(--colors-surface-disabled);
                pointer-events: none;

                &::-webkit-slider-thumb {
                    background: var(--colors-icon-on-disabled);
                }

                &::-moz-range-thumb {
                    background: var(--colors-icon-on-disabled);
                }

                &::-webkit-slider-runnable-track {
                    border-color: var(--colors-border-disabled);
                }

                &::-moz-range-track {
                    border-color: var(--colors-border-disabled);
                }

                &::-moz-range-progress {
                    border-color: var(--colors-border-disabled);
                }
            }
        }

        &:has(input:user-invalid) {
            > input[type="number"] {
                border-color: var(--colors-border-error);
                background: var(--colors-surface-error);

                &:-moz-placeholder {
                    background: var(--colors-surface-primary, #FFF);
                }

                &:placeholder-shown {
                    background: var(--colors-surface-primary, #FFF);
                }

                &:hover {
                    border-color: var(--colors-border-error-hover);
                }
            }

            > input[type="range"] {
                --track-active: var(--colors-surface-error);
                
                &::-webkit-slider-thumb {
                    background: var(--colors-icon-error);
                }

                &::-moz-range-thumb {
                    background: var(--colors-icon-error);
                }

                &::-webkit-slider-runnable-track {
                    border-color: var(--colors-border-error);
                }

                &::-moz-range-track {
                    border-color: var(--colors-border-error);
                }

                &::-moz-range-progress {
                    border-color: var(--colors-border-error);
                }

                &:hover {
                    &::-webkit-slider-thumb {
                        background: var(--colors-icon-error-hover);
                    }

                    &::-moz-range-thumb {
                        background: var(--colors-icon-error-hover);
                    }

                    &::-webkit-slider-runnable-track {
                        border-color: var(--colors-border-error-hover);
                    }

                    &::-moz-range-track {
                        border-color: var(--colors-border-error-hover);
                    }

                    &::-moz-range-progress {
                        border-color: var(--colors-border-error-hover);
                    }
                }
            }
        }
    }

    > .oh-input-stepper {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);

        > span {
            color: var(--colors-text-body, #333);
            font-family: var(--type-font-family-sans, "TheSans");
            font-size: var(--type-font-size-body-md, 1rem);
            line-height: var(--type-line-height-body-md, 1.5rem); 
            letter-spacing: var(--type-letter-spacing-body-md, 0.01rem);
            min-width: 3ch;
            text-align: center;
        }

        > input[type="number"] {
            color: var(--colors-text-body, #333);
            font-family: var(--type-font-family-sans, "TheSans");
            font-size: var(--type-font-size-body-md, 1rem);
            line-height: var(--type-line-height-body-md, 1.5rem); 
            letter-spacing: var(--type-letter-spacing-body-md, 0.01rem);
            -webkit-appearance: textfield;
               -moz-appearance: textfield;
                    appearance: textfield;
            border: none;
            background: transparent;
            width: 5ch;
            text-align: center;
        }
    }

    &.oh-invalid {
        > span {
            color: var(--colors-text-error);
        }

        > .oh-input-stepper .oh-arrow {
            &[data-variant="solid"] {
                background-color: var(--colors-surface-emergency);

                &:hover {
                    background-color: var(--colors-surface-emergency-hover);
                }

                &:disabled {
                    background-color: var(--colors-surface-disabled);
                    pointer-events: none;

                    &::before {
                        background-color: var(--colors-icon-on-disabled);
                    }
                }
            }

            &[data-variant="transparent"] {
                &::before {
                    background: var(--colors-icon-error);
                }

                &:hover {
                    background: var(--colors-surface-error);

                    &::before {
                        background: var(--colors-icon-error-hover);
                    }
                }

                &:disabled {
                    background: transparent;
                    pointer-events: none;

                    &::before {
                        background-color: var(--colors-icon-disabled);
                    }
                }
            }
        }
    }
}

.oh-labeled-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);

    > label {
        margin: 0;
        padding: 0;
        color: var(--colors-text-body, #333);
        font-family: var(--type-font-family-sans, "TheSans");
        font-size: var(--type-font-size-body-md, 1rem);
        line-height: var(--type-line-height-body-md, 1.5rem);
        letter-spacing: var(--type-letter-spacing-body-md, 0.01rem);
        cursor: pointer;
    }

    &:has(input:disabled) {
        > label {
            pointer-events: none;
        }
    }
}
/*# sourceMappingURL=ohcom.css.map */