:root {
  /* ------------------------------------------------------------
  NCC GROUP BRAND
  ------------------------------------------------------------ */

  /*Neon Blue*/
  --color-nccgroup-neonblue: var(--color-nccgroup-neonblue-100);
  --color-nccgroup-neonblue-180: #0a0033;
  --color-nccgroup-neonblue-160: #0e0066;
  --color-nccgroup-neonblue-140: #0a0099;
  --color-nccgroup-neonblue-120: #0000cc;
  --color-nccgroup-neonblue-100: #000fff;
  --color-nccgroup-neonblue-90: #1b31fe;
  --color-nccgroup-neonblue-80: #3550fd;
  --color-nccgroup-neonblue-70: #4f6cfc;
  --color-nccgroup-neonblue-60: #6986fc;
  --color-nccgroup-neonblue-50: #839ffc;
  --color-nccgroup-neonblue-40: #9cb4fc;
  --color-nccgroup-neonblue-30: #b5c8fc;
  --color-nccgroup-neonblue-20: #cedbfd;
  --color-nccgroup-neonblue-10: #e7eefe;

  /*Tourmaline Black*/
  --color-nccgroup-tourmalineblack: var(--color-nccgroup-tourmalineblack-100);
  --color-nccgroup-tourmalineblack-100: #0b0820;
  --color-nccgroup-tourmalineblack-90: #181727;
  --color-nccgroup-tourmalineblack-80: #1f1e33;
  --color-nccgroup-tourmalineblack-70: #28293e;
  --color-nccgroup-tourmalineblack-60: #2f314c;
  --color-nccgroup-tourmalineblack-50: #383c57;
  --color-nccgroup-tourmalineblack-40: #404664;
  --color-nccgroup-tourmalineblack-30: #49516e;
  --color-nccgroup-tourmalineblack-20: #525c7a;
  --color-nccgroup-tourmalineblack-10: #5c6984;

  /*Raspberry*/
  --color-nccgroup-raspberry: var(--color-nccgroup-raspberry-100);
  --color-nccgroup-raspberry-140: #e50063;
  --color-nccgroup-raspberry-120: #ff147a;
  --color-nccgroup-raspberry-100: #ff4495;
  --color-nccgroup-raspberry-80: #ff66a8;
  --color-nccgroup-raspberry-60: #ff8abd;
  --color-nccgroup-raspberry-40: #ffadd1;
  --color-nccgroup-raspberry-20: #ffd1e5;
  --color-nccgroup-raspberry-10: #ffe5f1;

  /*Dark Lavender*/
  --color-nccgroup-darklavender: var(--color-nccgroup-darklavender-100);
  --color-nccgroup-darklavender-200: #221664;
  --color-nccgroup-darklavender-140: #3825a7;
  --color-nccgroup-darklavender-120: #442cc9;
  --color-nccgroup-darklavender-100: #5d47d7;
  --color-nccgroup-darklavender-80: #7a68de;
  --color-nccgroup-darklavender-60: #988ae5;
  --color-nccgroup-darklavender-40: #b5abed;
  --color-nccgroup-darklavender-20: #d3cdf4;
  --color-nccgroup-darklavender-10: #e9e6f9;

  /*Blue Calico*/
  --color-nccgroup-bluecalico: var(--color-nccgroup-bluecalico-100);
  --color-nccgroup-bluecalico-140: #4ab1e8;
  --color-nccgroup-bluecalico-120: #68bfed;
  --color-nccgroup-bluecalico-100: #86cdf2;
  --color-nccgroup-bluecalico-80: #9dd7f6;
  --color-nccgroup-bluecalico-60: #b4e1f9;
  --color-nccgroup-bluecalico-40: #cbeafb;
  --color-nccgroup-bluecalico-20: #e2f4fd;
  --color-nccgroup-bluecalico-10: #f0f9fe;

  /*Gradient*/
  --color-nccgroup-gradient-color: #ffffffff;
  --color-nccgroup-gradient-neonblue: #000fffff;

  /* ------------------------------------------------------------
  FOX-IT BRAND
  ------------------------------------------------------------ */

  /*Neon Blue*/
  --color-foxit-neonblue-180: #0a0033;
  --color-foxit-neonblue-160: #0e0066;
  --color-foxit-neonblue-140: #0a0099;
  --color-foxit-neonblue-120: #0000cc;
  --color-foxit-neonblue: #000fff;
  --color-foxit-neonblue-90: #1b31fe;
  --color-foxit-neonblue-80: #3550fd;
  --color-foxit-neonblue-70: #4f6cfc;
  --color-foxit-neonblue-60: #6986fc;
  --color-foxit-neonblue-50: #839ffc;
  --color-foxit-neonblue-40: #9cb4fc;
  --color-foxit-neonblue-30: #b5c8fc;
  --color-foxit-neonblue-20: #cedbfd;
  --color-foxit-neonblue-10: #e7eefe;

  /*Tourmaline Black*/
  --color-foxit-tourmalineblack: #0b0820;
  --color-foxit-tourmalineblack-90: #181727;
  --color-foxit-tourmalineblack-80: #1f1e33;
  --color-foxit-tourmalineblack-70: #28293e;
  --color-foxit-tourmalineblack-60: #2f314c;
  --color-foxit-tourmalineblack-50: #383c57;
  --color-foxit-tourmalineblack-40: #404664;
  --color-foxit-tourmalineblack-30: #49516e;
  --color-foxit-tourmalineblack-20: #525c7a;
  --color-foxit-tourmalineblack-10: #5c6984;

  /*Raspberry*/
  --color-foxit-raspberry-140: #e50063;
  --color-foxit-raspberry-120: #ff147a;
  --color-foxit-raspberry: #ff4495;
  --color-foxit-raspberry-80: #ff66a8;
  --color-foxit-raspberry-60: #ff8abd;
  --color-foxit-raspberry-40: #ffadd1;
  --color-foxit-raspberry-20: #ffd1e5;
  --color-foxit-raspberry-10: #ffe5f1;

  /*Dark Lavender*/
  --color-foxit-darklavender-200: #221664;
  --color-foxit-darklavender-140: #3825a7;
  --color-foxit-darklavender-120: #442cc9;
  --color-foxit-darklavender: #5d47d7;
  --color-foxit-darklavender-80: #7a68de;
  --color-foxit-darklavender-60: #988ae5;
  --color-foxit-darklavender-40: #b5abed;
  --color-foxit-darklavender-20: #d3cdf4;
  --color-foxit-darklavender-10: #e9e6f9;

  /*Blue Calico*/
  --color-foxit-bluecalico-140: #4ab1e8;
  --color-foxit-bluecalico-120: #68bfed;
  --color-foxit-bluecalico: #86cdf2;
  --color-foxit-bluecalico-80: #9dd7f6;
  --color-foxit-bluecalico-60: #b4e1f9;
  --color-foxit-bluecalico-40: #cbeafb;
  --color-foxit-bluecalico-20: #e2f4fd;
  --color-foxit-bluecalico-10: #f0f9fe;

  /* ------------------------------------------------------------
  GENERAL COLOURS
  ------------------------------------------------------------ */
  /*Dark*/
  --color-dark: var(--color-dark-100);
  --color-dark-100: #161e31;
  --color-dark-90: #161e31;
  --color-dark-80: #1c253b;
  --color-dark-70: #222c44;
  --color-dark-60: #28334d;
  --color-dark-50: #2e3a56;
  --color-dark-40: #35425f;
  --color-dark-30: #3c4967;
  --color-dark-20: #44516f;
  --color-dark-10: #4c5876;
  --color-dark-opacity-08: #0f1729cc;
  --color-dark-opacity-03: #0f172951;
  --color-dark-opacity-01: #0f172919;

  /*White*/
  --color-white: #ffffff;

  /*Grey*/
  --color-grey: var(--color-grey-100);
  --color-grey-100: #2b343c;
  --color-grey-90: #334252;
  --color-grey-80: #505b6d;
  --color-grey-70: #6b7386;
  --color-grey-60: #898f9e;
  --color-grey-50: #a1a5b1;
  --color-grey-40: #c4c7cf;
  --color-grey-30: #d9dce1;
  --color-grey-20: #e9ecf2;
  --color-grey-10: #f3f4f8;

  /*Blue*/
  --color-blue: var(--color-blue-100);
  --color-blue-200: #143156;
  --color-blue-140: #104d93;
  --color-blue-120: #005cb7;
  --color-blue-100: #0073e5;
  --color-blue-80: #338fea;
  --color-blue-60: #66abef;
  --color-blue-40: #99c7f5;
  --color-blue-20: #cce3fa;
  --color-blue-10: #e5f1fc;

  /*Green*/
  --color-green: var(--color-green-100);
  --color-green-200: #153539;
  --color-green-120: #026d44;
  --color-green-100: #038855;
  --color-green-80: #35a077;
  --color-green-60: #68b899;
  --color-green-40: #9acfbb;
  --color-green-20: #cde7dd;
  --color-green-10: #e6f3ee;

  /*Orange*/
  --color-orange: var(--color-orange-100);
  --color-orange-200: #432c28;
  --color-orange-120: #be4900;
  --color-orange-100: #ed5b00;
  --color-orange-80: #f17c33;
  --color-orange-60: #f49d66;
  --color-orange-40: #f8bd99;
  --color-orange-20: #fbdecc;
  --color-orange-10: #fdefe5;

  /*Red*/
  --color-red: var(--color-red-100);
  --color-red-200: #3e1a34;
  --color-red-120: #a6002f;
  --color-red-100: #d0003b;
  --color-red-80: #d93362;
  --color-red-60: #e36689;
  --color-red-40: #ec99b1;
  --color-red-20: #f6ccd8;
  --color-red-10: #fae5eb;

  /*Transparent*/
  --color-transparent: #ffffff00;
}

/* ============================================================
TYPOGRAPHY TOKENS — MULTI-BRAND (NCC + FOX-IT)
Scoped using: <html data-brand="ncc"> or <html data-brand="foxit">
============================================================ */

/* ============================================================
   GENERAL
   ============================================================ */

:root {
  --font-family-base: 'Inter', system-ui, sans-serif;

  /* ================= SIZES ================ */
  --font-size-s: 12px;
  --font-size-m: 13px;
  --font-size-l: 14px;
  --font-size-xl: 15px;
  --font-size-caption: 10px;

  /* ================= WEIGHTS ================ */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ================= HEADINGS ================ */
  --text-heading: var(--color-dark);

  /* ================= PARAGRAPH ================ */
  --text-paragraph: var(--color-grey);

  /* ================= CAPTION ================ */
  --text-caption: var(--color-grey-80);

  /* ================= NOTIFICATION ================ */
  /* default */
  --text-notification-default: var(--color-grey-90);
  /* success */
  --text-notification-success: var(--color-green);
  /* warning */
  --text-notification-warning: var(--color-orange);
  /* danger */
  --text-notification-danger: var(--color-red);

  /* ================= VARIOUS ================ */
  /* highlight */
  --text-highlight: var(--color-dark);

  /* disabled */
  --text-disabled: var(--color-grey-60);

  /* label */
  --text-label: var(--color-grey);
}

/* ------------------------------------------------------------
NCC GROUP THEME
------------------------------------------------------------ */

:root:not([data-brand]),
:root[data-brand='ncc'] {
  /* ================= VARIOUS ================ */
  /* brand */
  --text-brand: var(--color-nccgroup-tourmalineblack-30);
}

/* ------------------------------------------------------------
FOX-IT THEME
------------------------------------------------------------ */

:root[data-brand='foxit'] {
  /* ================= VARIOUS ================ */
  /* brand */
  --text-brand: var(--color-foxit-tourmalineblack-30);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

/* Paragraph */

p {
  color: var(--text-paragraph);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
}

/* Caption */

.caption {
  color: var(--text-caption);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-caption);
  text-transform: uppercase;
}

/* Notifications */

.text-notification {
  color: var(--text-notification-default);
}

.text-notification-success {
  color: var(--text-notification-success);
}

.text-notification-warning {
  color: var(--text-notification-warning);
}

.text-notification-danger {
  color: var(--text-notification-danger);
}

/* Various */

.text-highlight {
  color: var(--text-highlight);
}

.text-disabled {
  color: var(--text-disabled);
}

.text-label {
  color: var(--text-label);
}

.text-brand {
  color: var(--text-brand);
}

/* Headings */

h1 {
  color: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 22px;
  line-height: 30px;
}

h2 {
  color: var(--text-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
}

h3 {
  color: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 16px;
  line-height: 22px;
}

h4 {
  color: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 16px;
  line-height: 22px;
}

h5 {
  color: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 15px;
  line-height: 22px;
}

h6 {
  color: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 15px;
  line-height: 22px;
}

/* Additional titles */

/* xxxl */

.title-xxxl {
  color: var(--text-brand);
  font-weight: var(--font-weight-semibold);
  font-size: 30px;
}

/* xxl */

.title-xxl {
  color: var(--text-brand);
  font-weight: var(--font-weight-semibold);
  font-size: 22px;
}

/* Code */

.code {
  font-family: 'IBM Plex Mono', monospace;
}

/* === PARAGRAPH SIZES === */

/* small */

p[data-size='s'] {
  font-size: var(--font-size-s);
}

/* medium */

p[data-size='m'] {
  font-size: var(--font-size-m);
}

/* large */

p[data-size='l'] {
  font-size: var(--font-size-l);
}

/* extra large */

p[data-size='xl'] {
  font-size: var(--font-size-xl);
}

/* === PARAGRAPH WEIGHTS === */

/* regular */

[data-weight='regular'] {
  font-weight: var(--font-weight-regular);
}

/* medium */

[data-weight='medium'] {
  font-weight: var(--font-weight-medium);
}

/* semibold */

[data-weight='semibold'] {
  font-weight: var(--font-weight-semibold);
}

/* bold */

[data-weight='bold'] {
  font-weight: var(--font-weight-bold);
}

body {
  font-family: var(--font-family-base);
}

/* ============================================================
SELECT TOKENS
============================================================ */

/* shared styles between brands */

:root[data-brand='ncc'] {
  /* primary */
  --form-badge-primary-default-text: var(--color-white);
  --form-badge-primary-default-border: var(--color-white);
  --form-badge-primary-default-background: var(--color-nccgroup-neonblue-80);
  /* secondary */
  --form-badge-secondary-default-text: var(--color-grey);
  --form-badge-secondary-default-border: var(--color-grey-20);
  --form-badge-secondary-default-background: var(--color-grey-20);
  /* tertiary */
  --form-badge-tertiary-default-text: var(--color-grey-20);
  --form-badge-tertiary-default-border: var(--color-dark);
  --form-badge-tertiary-default-background: var(--color-dark);
}

/*******************/

/* BADGE          */

/*******************/

.badge-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ds-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 999px;
  padding: 2px 4px 2px 4px;
  min-width: 16px;
  height: 16px;
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  font-family: 'Inter';
  letter-spacing: 0;
  white-space: nowrap;
}

/* Primary */

.ds-badge[data-variant='primary'] {
  border: 1px solid var(--form-badge-primary-default-border);
  background: var(--form-badge-primary-default-background);
  color: var(--form-badge-primary-default-text);
}

.ds-badge[data-variant='secondary'] {
  border: 1px solid var(--form-badge-secondary-default-border);
  background: var(--form-badge-secondary-default-background);
  color: var(--form-badge-secondary-default-text);
}

.ds-badge[data-variant='tertiary'] {
  border: 1px solid var(--form-badge-tertiary-default-border);
  background: var(--form-badge-tertiary-default-background);
  color: var(--form-badge-tertiary-default-text);
}

/* ============================================================
BANNER TOKENS — MULTI-BRAND (NCC + FOX-IT)
Scoped using: <html data-brand="ncc"> or <html data-brand="foxit">
============================================================ */

/* ------------------------------------------------------------
NCC GROUP THEME
------------------------------------------------------------ */

:root:not([data-brand]),
:root[data-brand='ncc'] {
  /* ================= SYSTEM ================ */
  --component-banner-system-icon: var(--color-nccgroup-darklavender);
  --component-banner-system-text: var(--color-nccgroup-darklavender);
  --component-banner-system-link: var(--color-nccgroup-darklavender);
  --component-banner-system-background: var(--color-nccgroup-darklavender-10);

  /* ================= INFORMATIVE ================ */
  --component-banner-informative-icon: var(--color-nccgroup-neonblue-80);
  --component-banner-informative-text: var(--color-nccgroup-neonblue-80);
  --component-banner-informative-link: var(--color-nccgroup-neonblue-80);
  --component-banner-informative-background: var(--color-nccgroup-neonblue-10);

  /* ================= ERROR ================ */
  --component-banner-error-icon: var(--color-red);
  --component-banner-error-text: var(--color-red);
  --component-banner-error-link: var(--color-red);
  --component-banner-error-background: var(--color-red-10);

  /* ================= WARNING ================ */
  --component-banner-warning-icon: var(--color-orange-120);
  --component-banner-warning-text: var(--color-orange-120);
  --component-banner-warning-link: var(--color-orange-120);
  --component-banner-warning-background: var(--color-orange-10);

  /* ================= UPDATE ================ */
  --component-banner-update-icon: var(--color-grey-90);
  --component-banner-update-text: var(--color-grey-90);
  --component-banner-update-link: var(--color-grey-90);
  --component-banner-update-background: var(--color-grey-10);

  /* ================= NOTICE ================ */
  --component-banner-notice-icon: var(--color-grey-90);
  --component-banner-notice-text: var(--color-grey-90);
  --component-banner-notice-link: var(--color-grey-90);
  --component-banner-notice-border: var(--color-grey-30);
  --component-banner-notice-background: var(--color-grey-10);
}

/* ------------------------------------------------------------
FOX-IT THEME
------------------------------------------------------------ */

:root[data-brand='foxit'] {
  /* ================= SYSTEM ================ */
  --component-banner-system-icon: var(--color-foxit-darklavender);
  --component-banner-system-text: var(--color-foxit-darklavender);
  --component-banner-system-link: var(--color-foxit-darklavender);
  --component-banner-system-background: var(--color-foxit-darklavender-10);

  /* ================= INFORMATIVE ================ */
  --component-banner-informative-icon: var(--color-foxit-neonblue-80);
  --component-banner-informative-text: var(--color-foxit-neonblue-80);
  --component-banner-informative-link: var(--color-foxit-neonblue-80);
  --component-banner-informative-background: var(--color-foxit-neonblue-10);

  /* ================= ERROR ================ */
  --component-banner-error-icon: var(--color-red);
  --component-banner-error-text: var(--color-red);
  --component-banner-error-link: var(--color-red);
  --component-banner-error-background: var(--color-red-10);

  /* ================= WARNING ================ */
  --component-banner-warning-icon: var(--color-orange-120);
  --component-banner-warning-text: var(--color-orange-120);
  --component-banner-warning-link: var(--color-orange-120);
  --component-banner-warning-background: var(--color-orange-10);

  /* ================= UPDATE ================ */
  --component-banner-update-icon: var(--color-grey-90);
  --component-banner-update-text: var(--color-grey-90);
  --component-banner-update-link: var(--color-grey-90);
  --component-banner-update-background: var(--color-grey-10);

  /* ================= NOTICE ================ */
  --component-banner-notice-icon: var(--color-grey-90);
  --component-banner-notice-text: var(--color-grey-90);
  --component-banner-notice-link: var(--color-grey-90);
  --component-banner-notice-border: var(--color-grey-30);
  --component-banner-notice-background: var(--color-grey-10);
}

/*******************/

/* BANNERS          */

/*******************/

.ds-banner {
  display: flex;
  position: relative;
  align-items: center;
  margin: 20px auto;
  border-radius: 8px;
  padding: 12px;
  max-width: 800px;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
}

.banner-content {
  display: flex;
  position: absolute;
  left: 50%;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ds-banner-notice-content {
  display: flex;

  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  max-width: 800px;
}

.ds-banner-notice-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.close-icon {
  cursor: pointer;
  margin-left: auto;
}

.ds-banner-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-m);
}

.ds-banner a {
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
}

.banner-content span {
  display: inline-block;
}

/* FONTAWESOME ICONS */

.ds-banner i.fa-solid,
.ds-banner i.fa-regular,
.ds-banner i.fa-light,
.ds-banner i.fa-duotone,
.ds-banner i.fa-brands {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  order: var(--_tag-icon-order, initial);
  font-size: 1em;
  line-height: inherit;
}

/* === VARIANTS === */

/* system */

.ds-banner[data-variant='system'] {
  background-color: var(--component-banner-system-background);
  color: var(--component-banner-system-text);
}

.ds-banner[data-variant='system'] i {
  color: var(--component-banner-system-icon);
}

.ds-banner[data-variant='system'] a {
  color: var(--component-banner-system-link);
}

/* informative */

.ds-banner[data-variant='informative'] {
  background-color: var(--component-banner-informative-background);
  color: var(--component-banner-informative-text);
}

.ds-banner[data-variant='informative'] i {
  color: var(--component-banner-informative-icon);
}

.ds-banner[data-variant='informative'] a {
  color: var(--component-banner-informative-link);
}

/* error */

.ds-banner[data-variant='error'] {
  background-color: var(--component-banner-error-background);
  color: var(--component-banner-error-text);
}

.ds-banner[data-variant='error'] i {
  color: var(--component-banner-error-icon);
}

.ds-banner[data-variant='error'] a {
  color: var(--component-banner-error-link);
}

/* warning */

.ds-banner[data-variant='warning'] {
  background-color: var(--component-banner-warning-background);
  color: var(--component-banner-warning-text);
}

.ds-banner[data-variant='warning'] i {
  color: var(--component-banner-warning-icon);
}

.ds-banner[data-variant='warning'] a {
  color: var(--component-banner-warning-link);
}

/* update */

.ds-banner[data-variant='update'] {
  background-color: var(--component-banner-update-background);
  color: var(--component-banner-update-text);
}

.ds-banner[data-variant='update'] i {
  color: var(--component-banner-update-icon);
}

.ds-banner[data-variant='update'] a {
  color: var(--component-banner-update-link);
}

/* notice */

.ds-banner[data-variant='notice'] {
  display: flex;
  position: static;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  background-color: var(--component-banner-notice-background);
  color: var(--component-banner-notice-text);
}

.ds-banner[data-variant='notice'] i {
  color: var(--component-banner-notice-icon);
}

.ds-banner[data-variant='notice'] a {
  color: var(--component-banner-notice-link);
}

/* LEFT SIDE (icon + divider) */

.ds-banner-notice-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ds-banner-notice-divider {
  opacity: 0.2;
  background-color: currentColor;
  width: 1px;
  height: 100%;
}

/* RIGHT SIDE (buttons) */

.ds-banner-notice-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
BUTTON TOKENS — MULTI-BRAND (NCC + FOX-IT)
Scoped using: <html data-brand="ncc"> or <html data-brand="foxit">
============================================================ */

/* ------------------------------------------------------------
NCC GROUP THEME
------------------------------------------------------------ */

:root:not([data-brand]),
:root[data-brand='ncc'] {
  /* ================= PRIMARY ================ */
  /* default */
  --cta-button-primary-default-text: var(--color-white);
  --cta-button-primary-default-icon: var(--color-white);
  --cta-button-primary-default-background: var(--color-nccgroup-neonblue);
  --cta-button-primary-default-border: var(--color-nccgroup-neonblue);

  /* hover */
  --cta-button-primary-hover-text: var(--color-white);
  --cta-button-primary-hover-icon: var(--color-white);
  --cta-button-primary-hover-background: var(--color-nccgroup-neonblue-120);
  --cta-button-primary-hover-border: var(--color-nccgroup-neonblue-120);

  /* focus */
  --cta-button-primary-focus-text: var(--color-white);
  --cta-button-primary-focus-icon: var(--color-white);
  --cta-button-primary-focus-background: var(--color-nccgroup-neonblue-120);
  --cta-button-primary-focus-border: var(--color-nccgroup-neonblue-120);

  /* active */
  --cta-button-primary-active-text: var(--color-white);
  --cta-button-primary-active-icon: var(--color-white);
  --cta-button-primary-active-background: var(--color-nccgroup-neonblue-80);
  --cta-button-primary-active-border: var(--color-nccgroup-neonblue-80);

  /* disabled */
  --cta-button-primary-disabled-text: var(--color-grey-50);
  --cta-button-primary-disabled-icon: var(--color-grey-50);
  --cta-button-primary-disabled-background: var(--color-grey-20);
  --cta-button-primary-disabled-border: var(--color-grey-20);
}

/* ------------------------------------------------------------
FOX-IT THEME
------------------------------------------------------------ */

:root[data-brand='foxit'] {
  /* ================= PRIMARY ================ */
  /* default */
  --cta-button-primary-default-text: var(--color-white);
  --cta-button-primary-default-icon: var(--color-white);
  --cta-button-primary-default-background: var(--color-foxit-neonblue);
  --cta-button-primary-default-border: var(--color-foxit-neonblue);

  /* hover */
  --cta-button-primary-hover-text: var(--color-white);
  --cta-button-primary-hover-icon: var(--color-white);
  --cta-button-primary-hover-background: var(--color-foxit-neonblue-120);
  --cta-button-primary-hover-border: var(--color-foxit-neonblue-120);

  /* focus */
  --cta-button-primary-focus-text: var(--color-white);
  --cta-button-primary-focus-icon: var(--color-white);
  --cta-button-primary-focus-background: var(--color-foxit-neonblue-120);
  --cta-button-primary-focus-border: var(--color-foxit-neonblue-120);

  /* active */
  --cta-button-primary-active-text: var(--color-white);
  --cta-button-primary-active-icon: var(--color-white);
  --cta-button-primary-active-background: var(--color-foxit-neonblue-80);
  --cta-button-primary-active-border: var(--color-foxit-neonblue-80);

  /* disabled */
  --cta-button-primary-disabled-text: var(--color-grey-50);
  --cta-button-primary-disabled-icon: var(--color-grey-50);
  --cta-button-primary-disabled-background: var(--color-grey-20);
  --cta-button-primary-disabled-border: var(--color-grey-20);
}

:root {
  /* shared neutrals for secondary/tertiary */

  /* ================= SECONDARY ================ */
  /* default */
  --cta-button-secondary-default-text: var(--color-grey);
  --cta-button-secondary-default-icon: var(--color-grey);
  --cta-button-secondary-default-background: var(--color-transparent);
  --cta-button-secondary-default-border: var(--color-grey-40);

  /* hover */
  --cta-button-secondary-hover-text: var(--color-dark);
  --cta-button-secondary-hover-icon: var(--color-dark);
  --cta-button-secondary-hover-background: var(--color-transparent);
  --cta-button-secondary-hover-border: var(--color-grey-50);

  /* focus */
  --cta-button-secondary-focus-text: var(--color-dark);
  --cta-button-secondary-focus-icon: var(--color-dark);
  --cta-button-secondary-focus-background: var(--color-transparent);
  --cta-button-secondary-focus-border: var(--color-grey-50);

  /* active */
  --cta-button-secondary-active-text: var(--color-grey-80);
  --cta-button-secondary-active-icon: var(--color-grey-80);
  --cta-button-secondary-active-background: var(--color-transparent);
  --cta-button-secondary-active-border: var(--color-grey-30);

  /* disabled */
  --cta-button-secondary-disabled-text: var(--color-grey-50);
  --cta-button-secondary-disabled-icon: var(--color-grey-50);
  --cta-button-secondary-disabled-background: var(--color-grey-20);
  --cta-button-secondary-disabled-border: var(--color-grey-20);

  /* ================= TERTIARY ================ */

  /* default */
  --cta-button-tertiary-default-text: var(--color-grey);
  --cta-button-tertiary-default-icon: var(--color-grey);
  --cta-button-tertiary-default-background: var(--color-transparent);
  --cta-button-tertiary-default-border: var(--color-transparent);

  /* hover */
  --cta-button-tertiary-hover-text: var(--color-dark);
  --cta-button-tertiary-hover-icon: var(--color-dark);
  --cta-button-tertiary-hover-background: var(--color-grey-10);
  --cta-button-tertiary-hover-border: var(--color-transparent);

  /* focus */
  --cta-button-tertiary-focus-text: var(--color-dark);
  --cta-button-tertiary-focus-icon: var(--color-dark);
  --cta-button-tertiary-focus-background: var(--color-transparent);
  --cta-button-tertiary-focus-border: var(--color-grey-30);

  /* active */
  --cta-button-tertiary-active-text: var(--color-grey-80);
  --cta-button-tertiary-active-icon: var(--color-grey-80);
  --cta-button-tertiary-active-background: var(--color-grey-10);
  --cta-button-tertiary-active-border: var(--color-transparent);

  /* disabled */
  --cta-button-tertiary-disabled-text: var(--color-grey-50);
  --cta-button-tertiary-disabled-icon: var(--color-grey-50);
  --cta-button-tertiary-disabled-background: var(--color-grey-20);
  --cta-button-tertiary-disabled-border: var(--color-grey-20);
}

/* ============================================================
CHECKBOX — MULTI-BRAND (NCC + foxit)
Scoped using: <html data-brand="ncc"> or <html data-brand="foxit">
============================================================ */

/* ------------------------------------------------------------
NCC GROUP THEME
------------------------------------------------------------ */

:root[data-brand='ncc'] {
  /* ================= CHECKED ================ */
  /* default */
  --form-checkbox-checked-default-border: var(--color-nccgroup-neonblue-120);
  --form-checkbox-checked-default-background: var(
    --color-nccgroup-neonblue-120
  );
  --form-checkbox-checked-default-icon: var(--color-white);
  --form-checkbox-checked-default-label-text: var(--color-grey);
  --form-checkbox-checked-default-label-border: var(--color-grey-70);
  --form-checkbox-checked-default-label-background: var(--color-white);

  /* hover */
  --form-checkbox-checked-hover-border: var(--color-nccgroup-neonblue-140);
  --form-checkbox-checked-hover-background: var(--color-nccgroup-neonblue-140);
  --form-checkbox-checked-hover-icon: var(--color-white);
  --form-checkbox-checked-hover-label-text: var(--color-grey);
  --form-checkbox-checked-hover-label-border: var(--color-grey-90);
  --form-checkbox-checked-hover-label-background: var(--color-white);

  /* focus */
  --form-checkbox-checked-focus-border: var(--color-nccgroup-neonblue-140);
  --form-checkbox-checked-focus-background: var(--color-nccgroup-neonblue-140);
  --form-checkbox-checked-focus-icon: var(--color-white);
  --form-checkbox-checked-focus-label-text: var(--color-grey);
  --form-checkbox-checked-focus-label-border: var(--color-grey-90);
  --form-checkbox-checked-focus-label-background: var(--color-white);

  /* disabled */
  --form-checkbox-checked-disabled-border: var(--color-grey-20);
  --form-checkbox-checked-disabled-background: var(--color-grey-20);
  --form-checkbox-checked-disabled-icon: var(--color-grey-60);
  --form-checkbox-checked-disabled-label-text: var(--color-grey-60);
  --form-checkbox-checked-disabled-label-border: var(--color-grey-10);
  --form-checkbox-checked-disabled-label-background: var(--color-grey-10);

  /* ================= UNCHECKED ================ */
  /* default */
  --form-checkbox-unchecked-default-border: var(--color-grey-40);
  --form-checkbox-unchecked-default-background: var(--color-white);
  --form-checkbox-unchecked-default-label-text: var(--color-grey-90);
  --form-checkbox-unchecked-default-label-border: var(--color-grey-40);
  --form-checkbox-unchecked-default-label-background: var(--color-white);

  /* hover */
  --form-checkbox-unchecked-hover-border: var(--color-grey-50);
  --form-checkbox-unchecked-hover-background: var(--color-white);
  --form-checkbox-unchecked-hover-label-text: var(--color-grey-90);
  --form-checkbox-unchecked-hover-label-border: var(--color-grey-50);
  --form-checkbox-unchecked-hover-label-background: var(--color-white);

  /* focus */
  --form-checkbox-unchecked-focus-border: var(--color-grey-50);
  --form-checkbox-unchecked-focus-background: var(--color-white);
  --form-checkbox-unchecked-focus-label-text: var(--color-grey-90);
  --form-checkbox-unchecked-focus-label-border: var(--color-grey-50);
  --form-checkbox-unchecked-focus-label-background: var(--color-white);

  /* disabled */
  --form-checkbox-unchecked-disabled-border: var(--color-grey-20);
  --form-checkbox-unchecked-disabled-background: var(--color-grey-20);
  --form-checkbox-unchecked-disabled-label-text: var(--color-grey-60);
  --form-checkbox-unchecked-disabled-label-border: var(--color-grey-10);
  --form-checkbox-unchecked-disabled-label-background: var(--color-grey-10);
}

/* ------------------------------------------------------------
foxit THEME
------------------------------------------------------------ */

:root[data-brand='foxit'] {
  /* ================= CHECKED ================ */
  /* default */
  --form-checkbox-checked-default-border: var(--color-foxit-neonblue-120);
  --form-checkbox-checked-default-background: var(--color-foxit-neonblue-120);
  --form-checkbox-checked-default-icon: var(--color-white);
  --form-checkbox-checked-default-label-text: var(--color-grey);
  --form-checkbox-checked-default-label-border: var(--color-grey-70);
  --form-checkbox-checked-default-label-background: var(--color-white);

  /* hover */
  --form-checkbox-checked-hover-border: var(--color-foxit-neonblue-140);
  --form-checkbox-checked-hover-background: var(--color-foxit-neonblue-140);
  --form-checkbox-checked-hover-icon: var(--color-white);
  --form-checkbox-checked-hover-label-text: var(--color-grey);
  --form-checkbox-checked-hover-label-border: var(--color-grey-90);
  --form-checkbox-checked-hover-label-background: var(--color-white);

  /* focus */
  --form-checkbox-checked-focus-border: var(--color-foxit-neonblue-140);
  --form-checkbox-checked-focus-background: var(--color-foxit-neonblue-140);
  --form-checkbox-checked-focus-icon: var(--color-white);
  --form-checkbox-checked-focus-label-text: var(--color-grey);
  --form-checkbox-checked-focus-label-border: var(--color-grey-90);
  --form-checkbox-checked-focus-label-background: var(--color-white);

  /* disabled */
  --form-checkbox-checked-disabled-border: var(--color-grey-20);
  --form-checkbox-checked-disabled-background: var(--color-grey-20);
  --form-checkbox-checked-disabled-icon: var(--color-grey-60);
  --form-checkbox-checked-disabled-label-text: var(--color-grey-60);
  --form-checkbox-checked-disabled-label-border: var(--color-grey-10);
  --form-checkbox-checked-disabled-label-background: var(--color-grey-10);

  /* ================= UNCHECKED ================ */
  /* default */
  --form-checkbox-unchecked-default-border: var(--color-grey-40);
  --form-checkbox-unchecked-default-background: var(--color-white);
  --form-checkbox-unchecked-default-label-text: var(--color-grey-90);
  --form-checkbox-unchecked-default-label-border: var(--color-grey-40);
  --form-checkbox-unchecked-default-label-background: var(--color-white);

  /* hover */
  --form-checkbox-unchecked-hover-border: var(--color-grey-50);
  --form-checkbox-unchecked-hover-background: var(--color-white);
  --form-checkbox-unchecked-hover-label-text: var(--color-grey-90);
  --form-checkbox-unchecked-hover-label-border: var(--color-grey-50);
  --form-checkbox-unchecked-hover-label-background: var(--color-white);

  /* focus */
  --form-checkbox-unchecked-focus-border: var(--color-grey-50);
  --form-checkbox-unchecked-focus-background: var(--color-white);
  --form-checkbox-unchecked-focus-label-text: var(--color-grey-90);
  --form-checkbox-unchecked-focus-label-border: var(--color-grey-50);
  --form-checkbox-unchecked-focus-label-background: var(--color-white);

  /* disabled */
  --form-checkbox-unchecked-disabled-border: var(--color-grey-20);
  --form-checkbox-unchecked-disabled-background: var(--color-grey-20);
  --form-checkbox-unchecked-disabled-label-text: var(--color-grey-60);
  --form-checkbox-unchecked-disabled-label-border: var(--color-grey-10);
  --form-checkbox-unchecked-disabled-label-background: var(--color-grey-10);
}

/*******************/

/* CHECKBOX        */

/*******************/

/* Layout container */

.ds-checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

/* Hide native checkbox but keep it accessible */

.ds-checkbox {
  position: absolute;
  opacity: 0;
  margin: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Label layout + typography */

.ds-checkbox + .ds-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--form-checkbox-unchecked-default-label-text);

  /* Unchecked → regular */
  font-weight: var(--font-weight-regular);

  /* Size M by default (14px) */
  font-size: var(--font-size-l);
}

/* Size S (13px) */

.ds-checkbox-container[data-size='s'] .ds-checkbox + .ds-checkbox-label {
  font-size: var(--font-size-m);
}

/* Checkbox box */

.ds-checkbox + .ds-checkbox-label::before {
  display: inline-flex;
  flex: 0 0 16px;
  justify-content: center;
  align-items: center;

  border: 1px solid var(--form-checkbox-unchecked-default-border);
  border-radius: 4px;
  background: var(--form-checkbox-unchecked-default-background);
  width: 16px;
  height: 16px;
  content: '';

  font: var(--fa-font-solid);
  font-size: 12px;
  line-height: 1;
}

/* ========================= */

/* Checked State             */

/* ========================= */

.ds-checkbox:checked + .ds-checkbox-label {
  color: var(--form-checkbox-checked-default-label-text);

  /* Checked → bold */
  font-weight: var(--font-weight-bold);
}

.ds-checkbox:checked + .ds-checkbox-label::before {
  border-color: var(--form-checkbox-checked-default-border);
  background: var(--form-checkbox-checked-default-background);
  content: '\f00c'; /* FontAwesome check */
  color: var(--form-checkbox-checked-default-icon);
}

/* ========================= */

/* Indeterminate State       */

/* ========================= */

.ds-checkbox:indeterminate + .ds-checkbox-label {
  color: var(--form-checkbox-checked-default-label-text);
  font-weight: var(--font-weight-regular);
}

.ds-checkbox:indeterminate + .ds-checkbox-label::before {
  border-color: var(--form-checkbox-checked-default-border);
  background: var(--form-checkbox-checked-default-background);
  content: '\f068';
  color: var(--form-checkbox-checked-default-icon);
}

/* ========================= */

/* Hover States              */

/* ========================= */

/* Hover - unchecked: box */

.ds-checkbox:not(:disabled):not(:checked) + .ds-checkbox-label:hover::before {
  border-color: var(--form-checkbox-unchecked-hover-border);
  background: var(--form-checkbox-unchecked-hover-background);
}

/* Hover - unchecked: label text */

.ds-checkbox:not(:disabled):not(:checked) + .ds-checkbox-label:hover {
  color: var(--form-checkbox-unchecked-hover-label-text);
}

/* Hover - checked: box */

.ds-checkbox:not(:disabled):checked + .ds-checkbox-label:hover::before {
  border-color: var(--form-checkbox-checked-hover-border);
  background: var(--form-checkbox-checked-hover-background);
  color: var(--form-checkbox-checked-hover-icon);
}

/* Hover - checked: label text */

.ds-checkbox:not(:disabled):checked + .ds-checkbox-label:hover {
  color: var(--form-checkbox-checked-hover-label-text);
}

/* Hover - indeterminate: box */

.ds-checkbox:not(:disabled):indeterminate + .ds-checkbox-label:hover::before {
  border-color: var(--form-checkbox-checked-hover-border);
  background: var(--form-checkbox-checked-hover-background);
  color: var(--form-checkbox-checked-hover-icon);
}

/* Hover - indeterminate: label text */

.ds-checkbox:not(:disabled):indeterminate + .ds-checkbox-label:hover {
  color: var(--form-checkbox-checked-hover-label-text);
}

/* ========================= */

/* Focus State               */

/* ========================= */

/* Underline text on focus */

.ds-checkbox:focus + .ds-checkbox-label .ds-checkbox-text {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ========================= */

/* Disabled States           */

/* ========================= */

.ds-checkbox:disabled + .ds-checkbox-label {
  opacity: 0.6;
  cursor: not-allowed;
  color: var(--form-checkbox-unchecked-disabled-label-text);
}

/* Disabled box - unchecked */

.ds-checkbox:disabled + .ds-checkbox-label::before {
  border-color: var(--form-checkbox-unchecked-disabled-border);
  background: var(--form-checkbox-unchecked-disabled-background);
}

/* Disabled box - checked */

.ds-checkbox:disabled:checked + .ds-checkbox-label {
  color: var(--form-checkbox-checked-disabled-label-text);
}

.ds-checkbox:disabled:checked + .ds-checkbox-label::before {
  border-color: var(--form-checkbox-checked-disabled-border);
  background: var(--form-checkbox-checked-disabled-background);
  color: var(--form-checkbox-checked-disabled-icon);
}

/* Disabled - indeterminate */

.ds-checkbox:disabled:indeterminate + .ds-checkbox-label::before {
  border-color: var(--form-checkbox-unchecked-disabled-border);
  background: var(--form-checkbox-unchecked-disabled-background);
  color: var(--form-checkbox-unchecked-disabled-label-text);
}

/* ============================================================
INPUT TOKENS
============================================================ */

/* shared styles between brands */

:root {
  /* ================= PRIMARY ================ */
  /* default */
  --form-input-primary-default-text: var(--color-grey);
  --form-input-primary-default-placeholder-text: var(--color-grey-70);
  --form-input-primary-default-background: var(--color-white);
  --form-input-primary-default-border: var(--color-grey-30);

  --form-input-primary-hover-text: var(--color-grey);
  --form-input-primary-hover-border: var(--color-grey-50);
  --form-input-primary-hover-background: var(--color-white);

  --form-input-primary-focus-text: var(--color-grey);
  --form-input-primary-focus-border: var(--color-grey-50);
  --form-input-primary-focus-background: var(--color-white);

  --form-input-primary-active-text: var(--color-grey);
  --form-input-primary-active-border: var(--color-grey-50);
  --form-input-primary-active-background: var(--color-white);
}

/********************************************
 * INPUT
 ********************************************/

/* =========================
   FORM
========================= */

.ds-input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
  font-family: var(--font-family-base);
}

.ds-input-label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: 1.2;
}

.ds-input-label[data-variant='primary'] {
  color: var(--form-input-primary-default-label-text);
}

.ds-input-label[data-variant='secondary'] {
  color: var(--form-input-secondary-default-label-text);
}

/* =========================
   INPUT WRAPPER
========================= */

.ds-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid;
  border-radius: 8px;
  padding: 10px 16px;
  width: 240px;
  height: 40px;
}

/* neutral input */

.ds-input {
  flex: 1;
  margin: 0;
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
  min-width: 0;
  color: inherit;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: 1;
}

/* =========================
   ICONS / ACTIONS
========================= */

.ds-input-icon {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  color: inherit;
  font-size: 16px;
  line-height: 1;
}

.ds-input-action {
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: 1;
  text-decoration: underline;
  white-space: nowrap;
}

.ds-input-action-icon {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0;
  border: none;
  background: none;
  padding: 0;
  width: 20px;
  height: 20px;
  color: inherit;
  font-size: 16px;
  line-height: 1;
}

/* =========================
   ICON POSITION
========================= */

.ds-input {
  order: 2;
}

.ds-input-icon-left {
  order: 1;
}

.ds-input-icon-right,
.ds-input-action,
.ds-input-action-icon {
  order: 3;
}

/* none */

.ds-input-wrapper[data-icon='none'] {
  gap: 0;
}

.ds-input-wrapper[data-icon='none'] .ds-input-icon-left,
.ds-input-wrapper[data-icon='none'] .ds-input-icon-right,
.ds-input-wrapper[data-icon='none'] .ds-input-action,
.ds-input-wrapper[data-icon='none'] .ds-input-action-icon {
  display: none;
}

/* left */

.ds-input-wrapper[data-icon='left'] .ds-input-icon-right,
.ds-input-wrapper[data-icon='left'] .ds-input-action,
.ds-input-wrapper[data-icon='left'] .ds-input-action-icon {
  display: none;
}

/* right */

.ds-input-wrapper[data-icon='right'] .ds-input-icon-left {
  display: none;
}

/* both */

.ds-input-wrapper[data-icon='both'] .ds-input-icon-left,
.ds-input-wrapper[data-icon='both'] .ds-input-icon-right,
.ds-input-wrapper[data-icon='both'] .ds-input-action-icon {
  display: inline-flex;
  color: var(--form-input-primary-active-icon-close);
}

/* =========================
   ACTION / ICON COLORS
========================= */

/* Action colors — PRIMARY */

.ds-input-wrapper:not([data-variant]) .ds-input-action,
.ds-input-wrapper[data-variant='primary'] .ds-input-action {
  color: var(--form-input-primary-default-action);
}

.ds-input-wrapper:not([data-variant]):hover .ds-input-action,
.ds-input-wrapper[data-variant='primary']:hover .ds-input-action {
  color: var(--form-input-primary-hover-action);
}

.ds-input-wrapper:not([data-variant]):focus-within .ds-input-action,
.ds-input-wrapper[data-variant='primary']:focus-within .ds-input-action {
  color: var(--form-input-primary-focus-action);
}

/* Action colors — SECONDARY */

.ds-input-wrapper[data-variant='secondary'] .ds-input-action {
  color: var(--form-input-secondary-default-text);
}

.ds-input-wrapper[data-variant='secondary']:hover .ds-input-action {
  color: var(--form-input-secondary-hover-text);
}

.ds-input-wrapper[data-variant='secondary']:focus-within .ds-input-action {
  color: var(--form-input-secondary-focus-text);
}

/* =========================
   PRIMARY (default / hover / focus)
========================= */

.ds-input-wrapper:not([data-variant]),
.ds-input-wrapper[data-variant='primary'] {
  border-color: var(--form-input-primary-default-border);
  background: var(--form-input-primary-default-background);
  color: var(--form-input-primary-default-text);
}

.ds-input-wrapper:not([data-variant]):hover,
.ds-input-wrapper[data-variant='primary']:hover {
  border-color: var(--form-input-primary-hover-border);
  background: var(--form-input-primary-hover-background);
  color: var(--form-input-primary-hover-text);
}

.ds-input-wrapper:not([data-variant]):focus-within,
.ds-input-wrapper[data-variant='primary']:focus-within {
  border-color: var(--form-input-primary-focus-border);
  background: var(--form-input-primary-focus-background);
  color: var(--form-input-primary-focus-text);
}

.ds-input:not([data-variant]):active,
.ds-input-wrapper[data-variant='primary']:active {
  border-color: var(--form-input-primary-active-border);
  background: var(--form-input-primary-active-background);
  color: var(--form-input-primary-active-text);
}

/* =========================
   PRIMARY — FILLED
========================= */

.ds-input-wrapper:not([data-variant])[data-state='filled'],
.ds-input-wrapper[data-variant='primary'][data-state='filled'] {
  border-color: var(--form-input-primary-filled-border);
  background: var(--form-input-primary-filled-background);
  color: var(--form-input-primary-filled-text);
}

.ds-input-wrapper:not([data-variant])[data-state='filled']:hover,
.ds-input-wrapper[data-variant='primary'][data-state='filled']:hover {
  border-color: var(--form-input-primary-filled-hover-border);
  background: var(--form-input-primary-filled-hover-background);
  color: var(--form-input-primary-filled-hover-text);
}

.ds-input-wrapper:not([data-variant])[data-state='filled']:focus-within,
.ds-input-wrapper[data-variant='primary'][data-state='filled']:focus-within {
  border-color: var(--form-input-primary-filled-focus-border);
  background: var(--form-input-primary-filled-focus-background);
  color: var(--form-input-primary-filled-focus-text);
}

.ds-input-wrapper:not([data-variant])[data-state='filled'],
.ds-input-wrapper[data-variant='primary'][data-state='filled']
  .ds-input-action {
  color: var(--form-input-primary-filled-action);
}

.ds-input-wrapper:not([data-variant])[data-state='filled']:hover,
.ds-input-wrapper[data-variant='primary'][data-state='filled']:hover
  .ds-input-action {
  color: var(--form-input-primary-filled-hover-action);
}

.ds-input-wrapper:not([data-variant])[data-state='filled']:focus-within,
.ds-input-wrapper[data-variant='primary'][data-state='filled']:focus-within
  .ds-input-action {
  color: var(--form-input-primary-filled-focus-action);
}

.ds-input-wrapper:not([data-variant])[data-state='filled'] .ds-input-icon,
.ds-input-wrapper:not([data-variant])[data-state='filled'],
.ds-input-wrapper[data-variant='primary'][data-state='filled'] .ds-input-icon,
.ds-input-wrapper[data-variant='primary'][data-state='filled']
  .ds-input-action-icon {
  color: var(--form-input-primary-filled-icon);
}

.ds-input-wrapper:not([data-variant])[data-state='filled']:hover .ds-input-icon,
.ds-input-wrapper:not([data-variant])[data-state='filled']:hover
  .ds-input-action-icon,
.ds-input-wrapper[data-variant='primary'][data-state='filled']:hover
  .ds-input-icon,
.ds-input-wrapper[data-variant='primary'][data-state='filled']:hover
  .ds-input-action-icon {
  color: var(--form-input-primary-filled-hover-icon);
}

.ds-input-wrapper:not([data-variant])[data-state='filled']:focus-within
  .ds-input-icon,
.ds-input-wrapper:not([data-variant])[data-state='filled']:focus-within
  .ds-input-action-icon,
.ds-input-wrapper[data-variant='primary'][data-state='filled']:focus-within
  .ds-input-icon,
.ds-input-wrapper[data-variant='primary'][data-state='filled']:focus-within
  .ds-input-action-icon {
  color: var(--form-input-primary-filled-focus-icon);
}

.ds-input:not([data-variant])::placeholder,
.ds-input:not([data-variant='primary'])::placeholder {
  color: var(--form-input-primary-default-placeholder-text);
}

/* =========================
   PRIMARY — ERROR
========================= */

.ds-input-wrapper:not([data-variant])[data-state='error'],
.ds-input-wrapper[data-variant='primary'][data-state='error'] {
  border-color: var(--form-input-primary-error-border);
  background: var(--form-input-primary-error-background);
  color: var(--form-input-primary-error-text);
}

/* =========================
   PRIMARY — DISABLED
========================= */

.ds-input-wrapper:not([data-variant])[data-state='disabled'],
.ds-input-wrapper[data-variant='primary'][data-state='disabled'] {
  border-color: var(--form-input-primary-disabled-border);
  background: var(--form-input-primary-disabled-background);
  pointer-events: none;
  color: var(--form-input-primary-disabled-text);
}

/* =========================
   SECONDARY (default / hover / focus)
========================= */

.ds-input-wrapper[data-variant='secondary'] {
  border-color: var(--form-input-secondary-default-border);
  background: var(--form-input-secondary-default-background);
  color: var(--form-input-secondary-default-text);
}

.ds-input-wrapper[data-variant='secondary']:hover {
  border-color: var(--form-input-secondary-hover-border);
  background: var(--form-input-secondary-hover-background);
  color: var(--form-input-secondary-hover-text);
}

.ds-input-wrapper[data-variant='secondary']:focus-within {
  border-color: var(--form-input-secondary-focus-border);
  background: var(--form-input-secondary-focus-background);
  color: var(--form-input-secondary-focus-text);
}

/* =========================
   SECONDARY — FILLED
========================= */

.ds-input-wrapper[data-variant='secondary'][data-state='filled'] {
  border-color: var(--form-input-secondary-filled-border);
  background: var(--form-input-secondary-filled-background);
  color: var(--form-input-secondary-filled-text);
}

.ds-input-wrapper[data-variant='secondary'][data-state='filled']:hover {
  border-color: var(--form-input-secondary-filled-hover-border);
  background: var(--form-input-secondary-filled-hover-background);
  color: var(--form-input-secondary-filled-hover-text);
}

.ds-input-wrapper[data-variant='secondary'][data-state='filled']:focus-within {
  border-color: var(--form-input-secondary-filled-focus-border);
  background: var(--form-input-secondary-filled-focus-background);
  color: var(--form-input-secondary-filled-focus-text);
}

.ds-input-wrapper[data-variant='secondary'][data-state='filled']
  .ds-input-action {
  color: var(--form-input-secondary-filled-text);
}

.ds-input-wrapper[data-variant='secondary'][data-state='filled']:hover
  .ds-input-action {
  color: var(--form-input-secondary-filled-hover-text);
}

.ds-input-wrapper[data-variant='secondary'][data-state='filled']:focus-within
  .ds-input-action {
  color: var(--form-input-secondary-filled-focus-text);
}

.ds-input-wrapper[data-variant='secondary'][data-state='filled'] .ds-input-icon,
.ds-input-wrapper[data-variant='secondary'][data-state='filled']
  .ds-input-action-icon {
  color: var(--form-input-secondary-filled-icon);
}

.ds-input-wrapper[data-variant='secondary'][data-state='filled']:hover
  .ds-input-icon,
.ds-input-wrapper[data-variant='secondary'][data-state='filled']:hover
  .ds-input-action-icon {
  color: var(--form-input-secondary-filled-hover-icon);
}

.ds-input-wrapper[data-variant='secondary'][data-state='filled']:focus-within
  .ds-input-icon,
.ds-input-wrapper[data-variant='secondary'][data-state='filled']:focus-within
  .ds-input-action-icon {
  color: var(--form-input-secondary-filled-focus-icon);
}

/* =========================
   SECONDARY — ERROR
========================= */

.ds-input-wrapper[data-variant='secondary'][data-state='error'] {
  border-color: var(--form-input-secondary-error-border);
  background: var(--form-input-secondary-error-background);
  color: var(--form-input-secondary-error-text);
}

/* =========================
   SECONDARY — DISABLED
========================= */

.ds-input-wrapper[data-variant='secondary'][data-state='disabled'] {
  border-color: var(--form-input-secondary-disabled-border);
  background: var(--form-input-secondary-disabled-background);
  pointer-events: none;
  color: var(--form-input-secondary-disabled-text);
}

/* ============================================================
RADIO TOKENS — MULTI-BRAND (NCC + FOX-IT)
Scoped using: <html data-brand="ncc"> or <html data-brand="foxit">
============================================================ */

/* ------------------------------------------------------------
NCC GROUP THEME
------------------------------------------------------------ */

:root[data-brand='ncc'] {
  /* ================= CHECKED ================ */
  /* default */
  --form-radio-checked-default-border: var(--color-nccgroup-neonblue-120);
  --form-radio-checked-default-background: var(--color-nccgroup-neonblue-120);
  --form-radio-checked-default-icon: var(--color-white);
  --form-radio-checked-default-label-text: var(--color-grey);
  --form-radio-checked-default-label-border: var(--color-grey-70);
  --form-radio-checked-default-label-background: var(--color-white);

  /* hover */
  --form-radio-checked-hover-border: var(--color-nccgroup-neonblue-140);
  --form-radio-checked-hover-background: var(--color-nccgroup-neonblue-140);
  --form-radio-checked-hover-icon: var(--color-white);
  --form-radio-checked-hover-label-text: var(--color-grey);
  --form-radio-checked-hover-label-border: var(--color-grey-90);
  --form-radio-checked-hover-label-background: var(--color-white);

  /* focus */
  --form-radio-checked-focus-border: var(--color-nccgroup-neonblue-140);
  --form-radio-checked-focus-background: var(--color-nccgroup-neonblue-140);
  --form-radio-checked-focus-icon: var(--color-white);
  --form-radio-checked-focus-label-text: var(--color-grey);
  --form-radio-checked-focus-label-border: var(--color-grey-90);
  --form-radio-checked-focus-label-background: var(--color-white);

  /* disabled */
  --form-radio-checked-disabled-border: var(--color-grey-20);
  --form-radio-checked-disabled-background: var(--color-grey-20);
  --form-radio-checked-disabled-icon: var(--color-grey-60);
  --form-radio-checked-disabled-label-text: var(--color-grey-60);
  --form-radio-checked-disabled-label-border: var(--color-grey-10);
  --form-radio-checked-disabled-label-background: var(--color-grey-10);
}

/* ------------------------------------------------------------
FOX-IT THEME
------------------------------------------------------------ */

:root[data-brand='foxit'] {
  /* ================= CHECKED ================ */
  /* default */
  --form-radio-checked-default-border: var(--color-foxit-neonblue-120);
  --form-radio-checked-default-background: var(--color-foxit-neonblue-120);
  --form-radio-checked-default-icon: var(--color-white);
  --form-radio-checked-default-label-text: var(--color-grey);
  --form-radio-checked-default-label-border: var(--color-grey-70);
  --form-radio-checked-default-label-background: var(--color-white);

  /* hover */
  --form-radio-checked-hover-border: var(--color-foxit-neonblue-140);
  --form-radio-checked-hover-background: var(--color-foxit-neonblue-140);
  --form-radio-checked-hover-icon: var(--color-white);
  --form-radio-checked-hover-label-text: var(--color-grey);
  --form-radio-checked-hover-label-border: var(--color-grey-90);
  --form-radio-checked-hover-label-background: var(--color-white);

  /* focus */
  --form-radio-checked-focus-border: var(--color-foxit-neonblue-140);
  --form-radio-checked-focus-background: var(--color-foxit-neonblue-140);
  --form-radio-checked-focus-icon: var(--color-white);
  --form-radio-checked-focus-label-text: var(--color-grey);
  --form-radio-checked-focus-label-border: var(--color-grey-90);
  --form-radio-checked-focus-label-background: var(--color-white);

  /* disabled */
  --form-radio-checked-disabled-border: var(--color-grey-20);
  --form-radio-checked-disabled-background: var(--color-grey-20);
  --form-radio-checked-disabled-icon: var(--color-grey-60);
  --form-radio-checked-disabled-label-text: var(--color-grey-60);
  --form-radio-checked-disabled-label-border: var(--color-grey-10);
  --form-radio-checked-disabled-label-background: var(--color-grey-10);
}

:root {
  /* shared neutrals for unchecked */

  /* ================= UNCHECKED ================ */

  /* default */
  --form-radio-unchecked-default-border: var(--color-grey-40);
  --form-radio-unchecked-default-background: var(--color-white);
  --form-radio-unchecked-default-label-text: var(--color-grey-90);
  --form-radio-unchecked-default-label-border: var(--color-grey-40);
  --form-radio-unchecked-default-label-background: var(--color-white);

  /* hover */
  --form-radio-unchecked-hover-border: var(--color-grey-50);
  --form-radio-unchecked-hover-background: var(--color-white);
  --form-radio-unchecked-hover-label-text: var(--color-grey-90);
  --form-radio-unchecked-hover-label-border: var(--color-grey-50);
  --form-radio-unchecked-hover-label-background: var(--color-white);

  /* focus */
  --form-radio-unchecked-focus-border: var(--color-grey-50);
  --form-radio-unchecked-focus-background: var(--color-white);
  --form-radio-unchecked-focus-label-text: var(--color-grey-90);
  --form-radio-unchecked-focus-label-border: var(--color-grey-50);
  --form-radio-unchecked-focus-label-background: var(--color-white);

  /* disabled */
  --form-radio-unchecked-disabled-border: var(--color-grey-20);
  --form-radio-unchecked-disabled-background: var(--color-grey-20);
  --form-radio-unchecked-disabled-label-text: var(--color-grey-60);
  --form-radio-unchecked-disabled-label-border: var(--color-grey-10);
  --form-radio-unchecked-disabled-label-background: var(--color-grey-10);
}

/*******************/

/* RADIO BUTTON          */

/*******************/

.ds-radio {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Hide native radio */

.ds-radio input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Outer dot */

.ds-radio .ds-radio-control {
  display: flex;
  justify-content: center;
  align-items: center;

  transition: all 150ms ease;
  box-sizing: border-box;

  border: 2px solid var(--form-radio-unchecked-default-border);
  border-radius: 50%;
  background-color: var(--form-radio-unchecked-default-background);
  width: 16px;
  height: 16px;
}

/* inner dot */

.ds-radio .ds-radio-control::after {
  transform: scale(0);
  transition:
    transform 120ms ease,
    background-color 120ms ease;
  border-radius: 50%;
  background-color: transparent;
  width: 6px;
  height: 6px;
  content: '';
}

/* text option — base color only, size/weight per size modifier */

.ds-radio .ds-radio-label {
  color: var(--form-radio-unchecked-default-label-text);
}

/* === TYPOGRAPHY BY SIZE — unchecked (off) === */

.ds-radio.size-s .ds-radio-label {
  font-weight: var(--font-weight-regular); /* 400  */
  font-size: var(--font-size-m); /* 13px */
}

.ds-radio.size-m .ds-radio-label {
  font-weight: var(--font-weight-regular); /* 400  */
  font-size: var(--font-size-l); /* 14px */
}

/* === TYPOGRAPHY BY SIZE — checked (on) === */

.ds-radio.size-s input[type='radio']:checked ~ .ds-radio-label {
  font-weight: var(--font-weight-medium); /* 500  */
  font-size: var(--font-size-m); /* 13px */
}

.ds-radio.size-m input[type='radio']:checked ~ .ds-radio-label {
  font-weight: var(--font-weight-medium); /* 500  */
  font-size: var(--font-size-l); /* 14px */
}

/* variant radio button with a border */

.ds-radio-boxed {
  transition: all 150ms ease;
  border: 2px solid var(--form-radio-unchecked-default-label-border);
  border-radius: 8px;
  background-color: var(--form-radio-unchecked-default-label-background);
  padding: 8px 10px;
}

fieldset {
  all: unset;
  display: inline-flex;
  flex-direction: row;
  gap: 12px;
}

.ds-radio-legend {
  display: block;
  padding-bottom: 8px;
  font-size: var(--font-size-l); /* 14px */
}

/* === STATES === */

/******** UNCHECKED ********/

/* hover */

.ds-radio:hover .ds-radio-control {
  border-color: var(--form-radio-unchecked-hover-border);
  background-color: var(--form-radio-unchecked-hover-background);
}

.ds-radio:hover .ds-radio-label {
  color: var(--form-radio-unchecked-hover-label-text);
}

.ds-radio-boxed:hover {
  border-color: var(--form-radio-unchecked-hover-label-border);
  background-color: var(--form-radio-unchecked-hover-label-background);
}

/* focus */

.ds-radio input[type='radio']:focus + .ds-radio-control {
  outline: 2px solid
    color-mix(
      in srgb,
      var(--form-radio-unchecked-focus-border),
      transparent 70%
    );
  outline-offset: 2px;
  border-color: var(--form-radio-unchecked-focus-border);
  background-color: var(--form-radio-unchecked-focus-background);
}

.ds-radio input[type='radio']:focus ~ .radio-label {
  color: var(--form-radio-unchecked-focus-label-text);
}

.ds-radio-boxed:has(input[type='radio']:focus-visible) {
  border-color: var(--form-radio-unchecked-focus-label-border);
  background-color: var(--form-radio-unchecked-focus-label-background);
}

/******** CHECKED ********/

.ds-radio input[type='radio']:checked + .ds-radio-control {
  border-color: var(--form-radio-checked-default-border);
  background-color: var(--form-radio-checked-default-background);
}

.ds-radio input[type='radio']:checked + .ds-radio-control::after {
  transform: scale(1);
  background-color: var(--form-radio-checked-default-icon);
}

.ds-radio input[type='radio']:checked ~ .ds-radio-label {
  color: var(--form-radio-checked-default-label-text);
}

.ds-radio-boxed:has(input[type='radio']:checked) {
  border-color: var(--form-radio-checked-default-border);
  background-color: var(--form-radio-checked-default-label-background);
}

/* Hover when checked */

.ds-radio:hover input[type='radio']:checked + .ds-radio-control {
  border-color: var(--form-radio-checked-hover-border);
  background-color: var(--form-radio-checked-hover-background);
}

.ds-radio:hover input[type='radio']:checked + .ds-radio-control::after {
  background-color: var(--form-radio-checked-hover-icon);
}

.ds-radio:hover input[type='radio']:checked ~ .ds-radio-label {
  color: var(--form-radio-checked-hover-label-text);
}

.ds-radio-boxed:has(input[type='radio']:checked):hover {
  border-color: var(--form-radio-checked-hover-border);
  background-color: var(--form-radio-checked-hover-label-background);
}

/* focus when checked */

.ds-radio input[type='radio']:checked:focus + .ds-radio-control {
  border-color: var(--form-radio-checked-focus-border);
  background-color: var(--form-radio-checked-focus-background);
}

.ds-radio input[type='radio']:checked:focus + .ds-radio-control::after {
  background-color: var(--form-radio-checked-focus-icon);
}

.ds-radio input[type='radio']:checked:focus ~ .ds-radio-label {
  color: var(--form-radio-checked-focus-label-text);
}

/******** DISABLED ********/

.ds-radio input[type='radio']:disabled + .ds-radio-control {
  cursor: not-allowed;
  border-color: var(--form-radio-unchecked-disabled-border);
  background-color: var(--form-radio-unchecked-disabled-background);
}

/* option text disabled */

.ds-radio input[type='radio']:disabled ~ .ds-radio-label {
  cursor: not-allowed;
  color: var(--form-radio-unchecked-disabled-label-text);
}

/* boxed disabled */

.ds-radio-boxed:has(input[type='radio']:disabled) {
  border-color: var(--form-radio-unchecked-disabled-label-border);
  background-color: var(--form-radio-unchecked-disabled-label-background);
}

/* Disabled + checked */

.ds-radio input[type='radio']:checked:disabled + .ds-radio-control {
  border-color: var(--form-radio-checked-disabled-border);
  background-color: var(--form-radio-checked-disabled-background);
}

.ds-radio input[type='radio']:checked:disabled + .ds-radio-control::after {
  background-color: var(--form-radio-checked-disabled-icon);
}

/* option text disabled + checked */

.ds-radio input[type='radio']:checked:disabled ~ .ds-radio-label {
  color: var(--form-radio-checked-disabled-label-text);
}

/* boxed disabled + checked */

.ds-radio-boxed:has(input[type='radio']:checked:disabled) {
  border-color: var(--form-radio-checked-disabled-label-border);
  background-color: var(--form-radio-checked-disabled-label-background);
}

/* ============================================================
SELECT TOKENS 
============================================================ */

/* shared styles between brands */

:root {
  /* default */
  --form-select-default-text: var(--color-grey-70);
  --form-select-default-border: var(--color-grey-30);
  --form-select-default-background: var(--color-white);
  --form-select-default-icon: var(--color-grey-70);

  /* hover */
  --form-select-hover-text: var(--color-grey-70);
  --form-select-hover-border: var(--color-grey-50);
  --form-select-hover-background: var(--color-white);
  --form-select-hover-icon: var(--color-grey-70);

  /* focus */
  --form-select-focus-text: var(--color-grey-70);
  --form-select-focus-border: var(--color-grey-50);
  --form-select-focus-background: var(--color-white);
  --form-select-focus-icon: var(--color-grey-70);

  /* active */
  --form-select-active-text: var(--color-grey);
  --form-select-active-border: var(--color-grey-50);
  --form-select-active-background: var(--color-white);
  --form-select-active-icon: var(--color-grey);
  --form-select-active-dropdown-background: var(--color-white);
  --form-select-active-dropdown-border: var(--color-grey-30);

  /* filled */
  --form-select-filled-text: var(--color-grey);
  --form-select-filled-border: var(--color-grey-30);
  --form-select-filled-background: var(--color-white);
  --form-select-filled-icon: var(--color-grey);

  /* filled - hover */
  --form-select-filled-hover-text: var(--color-grey);
  --form-select-filled-hover-border: var(--color-grey-50);
  --form-select-filled-hover-background: var(--color-white);
  --form-select-filled-hover-icon: var(--color-grey);

  /* filled - focus */
  --form-select-filled-focus-text: var(--color-grey);
  --form-select-filled-focus-border: var(--color-grey-50);
  --form-select-filled-focus-background: var(--color-white);
  --form-select-filled-focus-icon: var(--color-grey);

  /* error */
  --form-select-error-text: var(--color-grey);
  --form-select-error-border: var(--color-red);
  --form-select-error-background: var(--color-white);
  --form-select-error-icon: var(--color-grey);

  /* disabled */
  --form-select-disabled-text: var(--color-grey-60);
  --form-select-disabled-border: var(--color-grey-10);
  --form-select-disabled-background: var(--color-grey-10);
  --form-select-disabled-icon: var(--color-grey-60);
}

/*******************/

/* SELECT          */

/*******************/

.ds-select-wrapper {
  display: inline-block;
  position: relative;
}

.ds-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  border: 1px solid var(--form-select-default-border);
  border-radius: 8px;
  background-color: var(--form-select-default-background);
  padding-left: 16px;
  width: 240px;
  height: 40px;
  color: var(--form-select-default-text);
  font-size: 14px;
}

/* Add the Font Awesome caret as an overlay */

.ds-select-wrapper::after {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 300ms ease-out;
  will-change: transform;
  content: '\f0d7';
  color: var(--form-select-default-icon);
  font: var(--fa-font-solid);
  font-size: 16px;
}

/* Rotate the icon when focus*/

.ds-select-wrapper:focus-within::after {
  transform: translateY(-50%) rotate(180deg);
}

/* === STATES === */

/* hover */

.ds-select-wrapper select:hover {
  border-color: var(--form-select-hover-border);
  background-color: var(--form-select-hover-background);
  color: var(--form-select-hover-text);
}

.ds-select-wrapper:hover::after {
  color: var(--form-select-hover-icon);
}

/* focus */

.ds-select-wrapper select:focus {
  border-color: var(--form-select-focus-border);
  background-color: var(--form-select-focus-background);
  color: var(--form-select-focus-text);
}

.ds-select-wrapper:focus-within::after {
  color: var(--form-select-focus-icon);
}

/* active */

.ds-select-wrapper select:active {
  border-color: var(--form-select-active-border);
  background-color: var(--form-select-active-background);
  color: var(--form-select-active-text);
}

.ds-select-wrapper:active::after {
  color: var(--form-select-active-icon);
}

/* filled - value selected */

.ds-select-wrapper:has(select option:checked:not([value=''])) select {
  border-color: var(--form-select-filled-border);
  background-color: var(--form-select-filled-background);
  color: var(--form-select-filled-text);
}

.ds-select-wrapper:has(select option:checked:not([value='']))::after {
  color: var(--form-select-filled-icon);
}

/* filled - hover */

.ds-select-wrapper:has(select option:checked:not([value=''])) select:hover {
  border-color: var(--form-select-filled-hover-border);
  background-color: var(--form-select-filled-hover-background);
  color: var(--form-select-filled-hover-text);
}

.ds-select-wrapper:has(select option:checked:not([value=''])):hover::after {
  color: var(--form-select-filled-hover-icon);
}

/* filled - focus */

.ds-select-wrapper:has(select option:checked:not([value=''])) select:focus {
  border-color: var(--form-select-filled-focus-border);
  background-color: var(--form-select-filled-focus-background);
  color: var(--form-select-filled-focus-text);
}

.ds-select-wrapper:has(
    select option:checked:not([value=''])
  ):focus-within::after {
  color: var(--form-select-filled-focus-icon);
}

/* error - (add .is-error on wrapper)*/

.ds-select-wrapper.is-error select {
  border-color: var(--form-select-error-border);
  background-color: var(--form-select-error-background);
  color: var(--form-select-error-text);
}

.ds-select-wrapper.is-error::after {
  color: var(--form-select-error-icon);
}

/* disabled */

.ds-select-wrapper select:disabled {
  cursor: not-allowed;
  border-color: var(--form-select-disabled-border);
  background-color: var(--form-select-disabled-background);
  color: var(--form-select-disabled-text);
}

.ds-select-wrapper select:disabled + .select-wrapper::after,
.ds-select-wrapper:has(select:disabled)::after {
  color: var(--form-select-disabled-icon);
}

/* ============================================================
textarea TOKENS
============================================================ */

/* shared styles between brands */

:root[data-brand='ncc'] {
  /* ================= default ================ */
  --form-textarea-primary-default-text: var(--color-grey-70);
  --form-textarea-primary-default-border: var(--color-grey-30);
  --form-textarea-primary-default-background: var(--color-white);
  --form-textarea-primary-default-resize: var(--color-grey-70);

  /* ================= hover ================ */
  --form-textarea-primary-hover-border: var(--color-grey-50);

  /* ================= focus ================ */
  --form-textarea-primary-focus-border: var(--color-grey-50);

  /* ================= active ================ */
  --form-textarea-primary-active-text: var(--color-grey);
  --form-textarea-primary-active-border: var(--color-grey-50);

  /* ================= filled ================ */
  --form-textarea-primary-filled-text: var(--color-grey);
  --form-textarea-primary-filled-border: var(--color-grey-30);

  /* ================= filled-hover ================ */
  --form-textarea-primary-filled-text: var(--color-grey);
  --form-textarea-primary-filled-border: var(--color-grey-50);

  /* ================= filled-focus ================ */
  --form-textarea-primary-filled-focus-text: var(--color-grey);
  --form-textarea-primary-filled-focus-border: var(--color-grey-50);

  /* ================= disabled ================ */
  --form-textarea-primary-disabled-text: var(--color-grey-60);
  --form-textarea-primary-disabled-border: var(--color-grey-10);
  --form-textarea-primary-disabled-background: var(--color-grey-10);
  --form-textarea-primary-disabled-resize: var(--color-grey-60);
}

/* =========================
Text Area
========================= */

.ds-textarea-field {
  position: relative;
}

.ds-textarea {
  display: block;
  box-sizing: border-box;
  outline: none;

  border: 1px solid var(--form-textarea-primary-default-border);
  border-radius: 10px;

  /* diagonal 1-2-3 dot gripper */
  background-image:
    radial-gradient(
      circle,
      var(--form-textarea-primary-default-resize) 0 3px,
      transparent 3.2px
    ),
    radial-gradient(
      circle,
      var(--form-textarea-primary-default-resize) 0 3px,
      transparent 3.2px
    ),
    radial-gradient(
      circle,
      var(--form-textarea-primary-default-resize) 0 3px,
      transparent 3.2px
    ),
    radial-gradient(
      circle,
      var(--form-textarea-primary-default-resize) 0 3px,
      transparent 3.2px
    ),
    radial-gradient(
      circle,
      var(--form-textarea-primary-default-resize) 0 3px,
      transparent 3.2px
    ),
    radial-gradient(
      circle,
      var(--form-textarea-primary-default-resize) 0 3px,
      transparent 3.2px
    );
  background-position: right 18px bottom 18px;
  background-position:
    calc(100% - 11px) calc(100% - 17px),
    calc(100% - 14px) calc(100% - 14px),
    calc(100% - 11px) calc(100% - 14px),
    calc(100% - 17px) calc(100% - 11px),
    calc(100% - 14px) calc(100% - 11px),
    calc(100% - 11px) calc(100% - 11px);
  background-size: 28px 28px;
  background-size:
    2px 2px,
    2px 2px,
    2px 2px,
    2px 2px,
    2px 2px,
    2px 2px;
  background-repeat: no-repeat;

  background-color: var(--form-textarea-primary-default-background);
  padding: 14px 16px 14px 16px;
  min-width: 320px;
  min-height: 120px;
  resize: both;
  color: var(--form-textarea-primary-default-text);
  font-style: normal;
  font-weight: 400;

  font-size: var(--font-size-m);
  line-height: 20px;
}

.ds-textarea::-webkit-resizer {
  opacity: 0;
}

.spacer {
  width: 4px;
}

.ds-textarea-toolbar {
  display: none;
  position: absolute;
  bottom: 12px;
  left: 14px;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.ds-textarea-field[data-toolbar='true'] .ds-textarea-toolbar {
  display: flex;
}

.ds-toolbar-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  appearance: none;
  cursor: pointer;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;

  color: var(--form-textarea-primary-default-text);
  font-size: var(--font-size-l);
  line-height: 1;
}

.ds-toolbar-btn:hover {
  color: var(--form-textarea-primary-hover-text);
}

/* Placeholder */

.ds-textarea::placeholder {
  color: var(--form-textarea-primary-default-text);
  font-family: 'Inter', sans-serif;
}

/* hover */

.ds-textarea:hover {
  border-color: var(--form-textarea-primary-hover-border);
}

/* focus */

.ds-textarea:focus {
  border-color: var(--form-textarea-primary-focus-border);
}

/* active */

.ds-textarea:active {
  border-color: var(--form-textarea-primary-active-border);
  color: var(--form-textarea-primary-active-text);
}

/* filled */

.ds-textarea:not(:placeholder-shown) {
  border-color: var(--form-textarea-primary-filled-border);
  color: var(--form-textarea-primary-filled-text);
  font-family: 'Inter', sans-serif;
}

/* filled-hover */

.ds-textarea:not(:placeholder-shown):hover {
  border-color: var(--form-textarea-primary-filled-hover-border);
  color: var(--form-textarea-primary-filled-hover-text);
  font-family: 'Inter', sans-serif;
}

/* filled-focus */

.ds-textarea:not(:placeholder-shown):focus {
  border-color: var(--form-textarea-primary-filled-focus-border);
  color: var(--form-textarea-primary-filled-hover-text);
  font-family: 'Inter', sans-serif;
}

/* disabled */

.ds-textarea:disabled {
  border-color: var(--form-textarea-primary-disabled-border);
  /* diagonal 1-2-3 dot gripper */
  background-image:
    radial-gradient(
      circle,
      var(--form-textarea-primary-disabled-resize) 0 3px,
      transparent 3.2px
    ),
    radial-gradient(
      circle,
      var(--form-textarea-primary-disabled-resize) 0 3px,
      transparent 3.2px
    ),
    radial-gradient(
      circle,
      var(--form-textarea-primary-disabled-resize) 0 3px,
      transparent 3.2px
    ),
    radial-gradient(
      circle,
      var(--form-textarea-primary-disabled-resize) 0 3px,
      transparent 3.2px
    ),
    radial-gradient(
      circle,
      var(--form-textarea-primary-disabled-resize) 0 3px,
      transparent 3.2px
    ),
    radial-gradient(
      circle,
      var(--form-textarea-primary-disabled-resize) 0 3px,
      transparent 3.2px
    );
  background-color: var(--form-textarea-primary-disabled-background);
  color: var(--form-textarea-primary-disabled-text);
}

.ds-textarea:disabled::placeholder {
  color: var(--form-textarea-primary-default-text);
  font-family: 'Inter', sans-serif;
}

/* ============================================================
TOGGLE — MULTI-BRAND (NCC + foxit)
Scoped using: <html data-brand="ncc"> or <html data-brand="foxit">
============================================================ */

/* ------------------------------------------------------------
General THEME
------------------------------------------------------------ */

:root {
  /* ================= OFF ================ */
  /* default */
  --form-toggle-off-default-text: var(--color-grey-90);
  --form-toggle-off-default-background: var(--color-grey-40);
  --form-toggle-off-default-icon: var(--color-white);

  /* hover */
  --form-toggle-off-hover-text: var(--color-grey-90);
  --form-toggle-off-hover-background: var(--color-grey-50);
  --form-toggle-off-hover-icon: var(--color-white);

  /* focus */
  --form-toggle-off-focus-text: var(--color-grey-90);
  --form-toggle-off-focus-background: var(--color-grey-50);
  --form-toggle-off-focus-icon: var(--color-white);

  /* disabled */
  --form-toggle-off-disabled-text: var(--color-grey-60);
  --form-toggle-off-disabled-background: var(--color-grey-20);
  --form-toggle-off-disabled-icon: var(--color-grey-60);
}

/* ------------------------------------------------------------
NCC GROUP THEME
------------------------------------------------------------ */

:root[data-brand='ncc'] {
  /* ================= ON ================ */
  /* default */
  --form-toggle-on-default-text: var(--color-grey);
  --form-toggle-on-default-background: var(--color-nccgroup-neonblue-120);
  --form-toggle-on-default-icon: var(--color-white);

  /* hover */
  --form-toggle-on-hover-text: var(--color-grey);
  --form-toggle-on-hover-background: var(--color-nccgroup-neonblue-140);
  --form-toggle-on-hover-icon: var(--color-white);

  /* focus */
  --form-toggle-on-focus-text: var(--color-grey);
  --form-toggle-on-focus-background: var(--color-nccgroup-neonblue-140);
  --form-toggle-on-focus-icon: var(--color-white);

  /* disabled */
  --form-toggle-on-disabled-text: var(--color-grey-60);
  --form-toggle-on-disabled-background: var(--color-nccgroup-neonblue-120);
  --form-toggle-on-disabled-icon: var(--color-white);
}

/* ------------------------------------------------------------
foxit THEME
------------------------------------------------------------ */

:root[data-brand='foxit'] {
  /* ================= ON ================ */
  /* default */
  --form-toggle-on-default-text: var(--color-grey);
  --form-toggle-on-default-background: var(--color-foxit-neonblue-120);
  --form-toggle-on-default-icon: var(--color-white);

  /* hover */
  --form-toggle-on-hover-text: var(--color-grey);
  --form-toggle-on-hover-background: var(--color-foxit-neonblue-140);
  --form-toggle-on-hover-icon: var(--color-white);

  /* focus */
  --form-toggle-on-focus-text: var(--color-grey);
  --form-toggle-on-focus-background: var(--color-foxit-neonblue-140);
  --form-toggle-on-focus-icon: var(--color-white);

  /* disabled */
  --form-toggle-on-disabled-text: var(--color-grey-60);
  --form-toggle-on-disabled-background: var(--color-foxit-neonblue-120);
  --form-toggle-on-disabled-icon: var(--color-white);
}

/*******************/

/* TOGGLE        */

/*******************/

.ds-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    color 0.25s ease,
    text-decoration-color 0.25s ease;
  cursor: pointer;
  color: var(--form-toggle-off-default-text);
}

.ds-toggle {
  display: flex;
  align-items: center;
  transition: background-color 0.25s ease;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: var(--form-toggle-off-default-background);
  padding: 2px;
  width: 28px;
  height: 16px;
  overflow: hidden;
}

.ds-toggle-state {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.indicator {
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.25s ease;
  border-radius: 6px;
  background-color: var(--form-toggle-off-default-icon);
  width: 12px;
  height: 12px;
}

.ds-toggle-state:checked ~ .indicator {
  transform: translateX(12px);
  background-color: var(--form-toggle-on-default-icon);
}

/* ========================= */

/* ON STATES         */

/* ========================= */

/* ON state — toggle background */

.ds-toggle:has(.ds-toggle-state:checked) {
  background-color: var(--form-toggle-on-default-background);
}

/* ON state — indicator color */

.ds-toggle-state:checked ~ .indicator {
  background-color: var(--form-toggle-on-default-icon);
}

/* ON state — text color */

.ds-toggle-label:has(.ds-toggle-state:checked) .label-text {
  color: var(--form-toggle-on-default-text);
}

/* ========================= */

/* HOVER STATES */

/* ========================= */

/* OFF hover */

.label:hover .ds-toggle {
  background-color: var(--form-toggle-off-hover-background);
}

.ds-toggle-label:hover .label-text {
  color: var(--form-toggle-off-hover-text);
}

/* ON hover */

.label:hover .ds-toggle:has(.ds-toggle-state:checked) {
  background-color: var(--form-toggle-on-hover-background);
}

.ds-toggle-label:hover:has(.ds-toggle-state:checked) .label-text {
  color: var(--form-toggle-on-hover-text);
}

/* ========================= */

/* FOCUS STATES */

/* ========================= */

/* OFF focus */

.ds-toggle:has(.ds-toggle-state:focus-visible) {
  background-color: var(--form-toggle-off-focus-background);
}

.ds-toggle-label:has(.ds-toggle-state:focus-visible) .label-text {
  color: var(--form-toggle-off-focus-text);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.ds-toggle-state:focus-visible ~ .indicator {
  background-color: var(--form-toggle-off-focus-icon);
}

/* ON focus */

.ds-toggle:has(.ds-toggle-state:checked:focus-visible) {
  background-color: var(--form-toggle-on-focus-background);
}

.ds-toggle-label:has(.ds-toggle-state:checked:focus-visible) .label-text {
  color: var(--form-toggle-on-focus-text);
}

.ds-toggle-state:checked:focus-visible ~ .indicator {
  background-color: var(--form-toggle-on-focus-icon);
}

/* ========================= */

/* PREVENT HOVER / FOCUS TEXT WHEN DISABLED */

/* ========================= */

.label:has(.ds-toggle-state:disabled) .label-text {
  color: var(--form-toggle-off-disabled-text);
}

/* ========================= */

/* DISABLED STATES */

/* ========================= */

/* Common disabled toggle */

.ds-toggle:has(.ds-toggle-state:disabled) {
  cursor: not-allowed;
}

/* OFF disabled */

.ds-toggle:has(.ds-toggle-state:disabled):not(:has(.ds-toggle-state:checked)) {
  background-color: var(--form-toggle-off-disabled-background);
}

.ds-toggle-label:has(.ds-toggle-state:disabled):not(
    :has(.ds-toggle-state:checked)
  )
  .label-text {
  color: var(--form-toggle-off-disabled-text);
  text-decoration: none;
}

.ds-toggle-state:disabled ~ .indicator {
  transform: translateX(0);
  border: 1px dashed var(--form-toggle-off-disabled-icon);
  background-color: transparent;
}

/* ON disabled */

.ds-toggle:has(.ds-toggle-state:checked:disabled) {
  background-color: var(--form-toggle-on-disabled-background);
}

.ds-toggle-label:has(.ds-toggle-state:checked:disabled) .label-text {
  color: var(--form-toggle-on-disabled-text);
  text-decoration: none;
}

.ds-toggle-state:checked:disabled ~ .indicator {
  transform: translateX(12px);
  border: 1px dashed var(--form-toggle-on-disabled-icon);
  background-color: transparent;
}

/* ========================= */

/* SIZE — LARGE (L)          */

/* ========================= */

.ds-toggle[data-size='l'] {
  border-radius: 10px;
  padding: 2px;
  width: 36px;
  height: 20px;
}

.ds-toggle[data-size='l'] .indicator {
  border-radius: 8px;
  width: 16px;
  height: 16px;
}

.ds-toggle[data-size='l'] .ds-toggle-state:checked ~ .indicator {
  transform: translateX(16px);
}

.ds-toggle[data-size='l'] .ds-toggle-state:checked:disabled ~ .indicator {
  transform: translateX(16px);
}

.ds-toggle-label[data-size='l'] .label-text {
  font-size: var(--font-size-m);
}

/* ============================================================
LINK TOKENS — MULTI-BRAND (NCC + FOX-IT)
Scoped using: <html data-brand="ncc"> or <html data-brand="foxit">
============================================================ */

/* ------------------------------------------------------------
NCC GROUP THEME
------------------------------------------------------------ */

:root[data-brand='ncc'] {
  /* ================= PRIMARY ================ */
  /* default */
  --cta-link-primary-default-text: var(--color-nccgroup-neonblue-90);
  --cta-link-primary-default-icon: var(--color-nccgroup-neonblue-90);
  --cta-link-primary-default-border: var(--color-nccgroup-neonblue-90);

  /* hover */
  --cta-link-primary-hover-text: var(--color-nccgroup-neonblue-90);
  --cta-link-primary-hover-icon: var(--color-nccgroup-neonblue-90);
  --cta-link-primary-hover-border: var(--color-nccgroup-neonblue-90);

  /* focus */
  --cta-link-primary-focus-text: var(--color-nccgroup-neonblue-90);
  --cta-link-primary-focus-icon: var(--color-nccgroup-neonblue-90);
  --cta-link-primary-focus-border: var(--color-nccgroup-neonblue-90);

  /* active */
  --cta-link-primary-active-text: var(--color-nccgroup-neonblue-160);
  --cta-link-primary-active-icon: var(--color-nccgroup-neonblue-160);
  --cta-link-primary-active-border: var(--color-nccgroup-neonblue-160);

  /* visited */
  --cta-link-primary-visited-text: var(--color-nccgroup-neonblue-160);
  --cta-link-primary-visited-icon: var(--color-nccgroup-neonblue-160);
  --cta-link-primary-visited-border: var(--color-nccgroup-neonblue-160);
}

/* ------------------------------------------------------------
FOX-IT THEME
------------------------------------------------------------ */

:root[data-brand='foxit'] {
  /* ================= PRIMARY ================ */
  /* default */
  --cta-link-primary-default-text: var(--color-foxit-neonblue-90);
  --cta-link-primary-default-icon: var(--color-foxit-neonblue-90);
  --cta-link-primary-default-border: var(--color-foxit-neonblue-90);

  /* hover */
  --cta-link-primary-hover-text: var(--color-foxit-neonblue-90);
  --cta-link-primary-hover-icon: var(--color-foxit-neonblue-90);
  --cta-link-primary-hover-border: var(--color-foxit-neonblue-90);

  /* focus */
  --cta-link-primary-focus-text: var(--color-foxit-neonblue-90);
  --cta-link-primary-focus-icon: var(--color-foxit-neonblue-90);
  --cta-link-primary-focus-border: var(--color-foxit-neonblue-90);

  /* active */
  --cta-link-primary-active-text: var(--color-foxit-neonblue-160);
  --cta-link-primary-active-icon: var(--color-foxit-neonblue-160);
  --cta-link-primary-active-border: var(--color-foxit-neonblue-160);

  /* visited */
  --cta-link-primary-visited-text: var(--color-foxit-neonblue-160);
  --cta-link-primary-visited-icon: var(--color-foxit-neonblue-160);
  --cta-link-primary-visited-border: var(--color-foxit-neonblue-160);
}

:root {
  /* shared neutrals for secondary */

  /* ================= SECONDARY ================ */

  /* default */
  --cta-link-secondary-default-text: var(--color-dark);
  --cta-link-secondary-default-icon: var(--color-dark);
  --cta-link-secondary-default-border: var(--color-dark);

  /* hover */
  --cta-link-secondary-hover-text: var(--color-dark-30);
  --cta-link-secondary-hover-icon: var(--color-dark-30);
  --cta-link-secondary-hover-border: var(--color-dark-30);

  /* focus */
  --cta-link-secondary-focus-text: var(--color-dark-10);
  --cta-link-secondary-focus-icon: var(--color-dark-10);
  --cta-link-secondary-focus-border: var(--color-dark-10);

  /* active */
  --cta-link-secondary-active-text: var(--color-dark-10);
  --cta-link-secondary-active-icon: var(--color-dark-10);
  --cta-link-secondary-active-border: var(--color-dark-10);

  /* visited */
  --cta-link-secondary-visited-text: var(--color-dark);
  --cta-link-secondary-visited-icon: var(--color-dark);
  --cta-link-secondary-visited-border: var(--color-dark);
}

/*******************/

/* LINK          */

/*******************/

.ds-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

/* FONTAWESOME ICONS */

.ds-link i.fa-solid,
.ds-link i.fa-regular,
.ds-link i.fa-light,
.ds-link i.fa-duotone,
.ds-link i.fa-brands {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

/* === ICON POSITION === */

/* Icon on the left */

.ds-input-wrapper:not([data-variant])[data-state='disabled'],
.ds-link:not([data-icon]) i.fa-solid,
.ds-link:not([data-icon]) i.fa-regular,
.ds-link:not([data-icon]) i.fa-light,
.ds-link:not([data-icon]) i.fa-duotone,
.ds-link:not([data-icon]) i.fa-brands,
.ds-link[data-icon='left'] i.fa-solid,
.ds-link[data-icon='left'] i.fa-regular,
.ds-link[data-icon='left'] i.fa-light,
.ds-link[data-icon='left'] i.fa-duotone,
.ds-link[data-icon='left'] i.fa-brands {
  order: 0;
}

/* Icon on the right */

.ds-link[data-icon='right'] i.fa-solid,
.ds-link[data-icon='right'] i.fa-regular,
.ds-link[data-icon='right'] i.fa-light,
.ds-link[data-icon='right'] i.fa-duotone,
.ds-link[data-icon='right'] i.fa-brands {
  order: 2;
}

/* === VARIANTS === */

/* Primary */

.ds-link[data-variant='primary'] {
  border-bottom: 1px solid var(--cta-link-primary-default-border);
  padding-bottom: 2px;
  color: var(--cta-link-primary-default-text);
}

.ds-link[data-variant='primary'] i {
  color: var(--cta-link-primary-default-icon);
}

.ds-link[data-variant='primary']:hover {
  border: none;
  color: var(--cta-link-primary-hover-text);
}

.ds-link[data-variant='primary']:hover i {
  color: var(--cta-link-primary-hover-icon);
}

.ds-link[data-variant='primary']:focus {
  border-bottom: 1px dotted var(--cta-link-primary-focus-border);
  padding-bottom: 2px;
  color: var(--cta-link-primary-focus-text);
}

.ds-link[data-variant='primary']:focus i {
  color: var(--cta-link-primary-focus-icon);
}

.ds-link[data-variant='primary']:active {
  border: none;
  color: var(--cta-link-primary-active-text);
}

.ds-link[data-variant='primary']:active i {
  color: var(--cta-link-primary-active-icon);
}

.ds-link[data-variant='primary']:visited {
  border-bottom: 1px solid var(--cta-link-primary-visited-border);
  padding-bottom: 2px;
  color: var(--cta-link-primary-visited-text);
}

.ds-link[data-variant='primary']:visited i {
  color: var(--cta-link-primary-visited-icon);
}

/* Secondary */

.ds-link[data-variant='secondary'] {
  border-bottom: 1px solid var(--cta-link-secondary-default-border);
  padding-bottom: 2px;
  color: var(--cta-link-secondary-default-text);
}

.ds-link[data-variant='secondary'] i {
  color: var(--cta-link-secondary-default-icon);
}

.ds-link[data-variant='secondary']:hover {
  border: none;
  color: var(--cta-link-secondary-hover-text);
}

.ds-link[data-variant='secondary']:hover i {
  color: var(--cta-link-secondary-hover-icon);
}

.ds-link[data-variant='secondary']:focus {
  border-bottom: 1px dotted var(--cta-link-secondary-focus-border);
  padding-bottom: 2px;
  color: var(--cta-link-secondary-focus-text);
}

.ds-link[data-variant='secondary']:focus i {
  color: var(--cta-link-secondary-focus-icon);
}

.ds-link[data-variant='secondary']:active {
  border: none;
  color: var(--cta-link-secondary-hover-text);
}

.ds-link[data-variant='secondary']:active i {
  color: var(--cta-link-secondary-active-icon);
}

.ds-link[data-variant='secondary']:visited {
  border-bottom: 1px solid var(--cta-link-secondary-visited-border);
  padding-bottom: 2px;
  color: var(--cta-link-secondary-visited-text);
}

.ds-link[data-variant='secondary']:visited i {
  color: var(--cta-link-secondary-visited-icon);
}

/* ================================================
   LINKS WITH ICONS: override border behavior
   Applies to any variant when data-icon is left/right
   ================================================ */

/* Primary */

.ds-link[data-variant='primary'][data-icon='left'],
.ds-link[data-variant='primary'][data-icon='right'] {
  border-bottom: none;
}

.ds-link[data-variant='primary'][data-icon='left']:hover,
.ds-link[data-variant='primary'][data-icon='right']:hover {
  border-bottom: 1px solid var(--cta-link-primary-hover-border);
  padding-bottom: 2px;
}

.ds-link[data-variant='primary'][data-icon='left']:focus,
.ds-link[data-variant='primary'][data-icon='right']:focus {
  border-bottom: 1px dotted var(--cta-link-primary-focus-border);
  padding-bottom: 2px;
}

.ds-link[data-variant='primary'][data-icon='left']:active,
.ds-link[data-variant='primary'][data-icon='right']:active {
  border-bottom: 1px solid var(--cta-link-primary-active-border);
  padding-bottom: 2px;
}

.ds-link[data-variant='primary'][data-icon='left']:visited,
.ds-link[data-variant='primary'][data-icon='right']:visited {
  border-bottom: none;
}

/* Secondary */

.ds-link[data-variant='secondary'][data-icon='left'],
.ds-link[data-variant='secondary'][data-icon='right'] {
  border-bottom: none;
}

.ds-link[data-variant='secondary'][data-icon='left']:hover,
.ds-link[data-variant='secondary'][data-icon='right']:hover {
  border-bottom: 1px solid var(--cta-link-secondary-hover-border);
  padding-bottom: 2px;
}

.ds-link[data-variant='secondary'][data-icon='left']:focus,
.ds-link[data-variant='secondary'][data-icon='right']:focus {
  border-bottom: 1px dotted var(--cta-link-secondary-focus-border);
  padding-bottom: 2px;
}

.ds-link[data-variant='secondary'][data-icon='left']:active,
.ds-link[data-variant='secondary'][data-icon='right']:active {
  border-bottom: 1px solid var(--cta-link-secondary-active-border);
  padding-bottom: 2px;
}

.ds-link[data-variant='secondary'][data-icon='left']:visited,
.ds-link[data-variant='secondary'][data-icon='right']:visited {
  border-bottom: none;
}

/* === SIZES === */

/* small */

.ds-link[data-size='small'] {
  font-size: 12px;
}

.ds-link[data-size='small'] i.fa-solid,
.ds-link[data-size='small'] i.fa-regular,
.ds-link[data-size='small'] i.fa-light,
.ds-link[data-size='small'] i.fa-duotone,
.ds-link[data-size='small'] i.fa-brands {
  font-size: 12px;
}

/* medium */

.ds-link[data-size='medium'] {
  font-size: 13px;
}

.ds-link[data-size='medium'] i.fa-solid,
.ds-link[data-size='medium'] i.fa-regular,
.ds-link[data-size='medium'] i.fa-light,
.ds-link[data-size='medium'] i.fa-duotone,
.ds-link[data-size='medium'] i.fa-brands {
  font-size: 13px;
}

/* large */

.ds-link[data-size='large'] {
  font-size: 14px;
}

.ds-link[data-size='large'] i.fa-solid,
.ds-link[data-size='large'] i.fa-regular,
.ds-link[data-size='large'] i.fa-light,
.ds-link[data-size='large'] i.fa-duotone,
.ds-link[data-size='large'] i.fa-brands {
  font-size: 14px;
}

/* ============================================================
TABLE TOKENS (Color & Style System)
============================================================ */

/* Shared styles between brands */

:root[data-brand='ncc'] {
  /* TABLE HEADER - DEFAULT STATE */
  --table-row-th-default-text: var(--color-grey-80);
  --table-row-th-default-icon: var(--color-grey-80);
  --table-row-th-default-background: var(--various-background-primary);
  --table-row-th-default-border: var(--color-grey-20);
  --table-row-th-default-line: var(--color-general-transparent-transparent);

  /* TABLE HEADER - HOVER STATE */
  --table-row-th-hover-text: var(--color-grey-80);
  --table-row-th-hover-icon: var(--color-grey-80);
  --table-row-th-hover-background: var(--various-background-primary);
  --table-row-th-hover-border: var(--color-grey-20);
  --table-row-th-hover-line: var(--color-grey-20);

  /* TABLE CELLS - DEFAULT STATE */
  --table-row-td-default-text-primary: var(--color-general-dark-dark);
  --table-row-td-default-text-secondary: var(--color-general-grey-grey);
  --table-row-td-default-text-tertiary: var(--color-grey-80);
  --table-row-td-default-text-quaternary: var(--color-general-grey-grey-60);
  --table-row-td-default-icon-primary: var(--color-general-grey-grey);
  --table-row-td-default-icon-secondary: var(--color-grey-80);
  --table-row-td-default-background: var(--various-background-primary);
  --table-row-td-default-border: var(--color-grey-20);

  /* TABLE CELLS - HOVER STATE */
  --table-row-td-hover-text-primary: var(--color-general-dark-dark);
  --table-row-td-hover-text-secondary: var(--color-general-grey-grey);
  --table-row-td-hover-text-tertiary: var(--color-grey-80);
  --table-row-td-hover-text-quaternary: var(--color-general-grey-grey-60);
  --table-row-td-hover-icon-primary: var(--color-general-grey-grey);
  --table-row-td-hover-icon-secondary: var(--color-grey-80);
  --table-row-td-hover-background: var(--various-background-secondary);
  --table-row-td-hover-border: var(--color-grey-20);

  /* TABLE CELLS - FOCUS STATE */
  --table-row-td-focus-text-primary: var(--color-general-dark-dark);
  --table-row-td-focus-text-secondary: var(--color-general-grey-grey);
  --table-row-td-focus-text-tertiary: var(--color-grey-80);
  --table-row-td-focus-text-quaternary: var(--color-general-grey-grey-60);
  --table-row-td-focus-icon-primary: var(--color-general-grey-grey);
  --table-row-td-focus-icon-secondary: var(--color-grey-80);
  --table-row-td-focus-background: var(--various-background-secondary);
  --table-row-td-focus-border: var(--color-grey-20);

  /* TABLE CELLS - ACTIVE STATE */
  --table-row-td-active-text-primary: var(--color-general-dark-dark);
  --table-row-td-active-text-secondary: var(--color-general-grey-grey);
  --table-row-td-active-text-tertiary: var(--color-grey-80);
  --table-row-td-active-text-quaternary: var(--color-general-grey-grey-60);
  --table-row-td-active-icon-primary: var(--color-general-grey-grey);
  --table-row-td-active-icon-secondary: var(--color-grey-80);
  --table-row-td-active-background: var(--various-background-secondary);
  --table-row-td-active-border: var(--color-grey-20);
}

/* ============================================================
   BASE
============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  padding: 32px;
  color: var(--table-row-th-default-text);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
}

h2 {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 14px;
}

/* ============================================================
   TABLE WRAPPER
============================================================ */

.table-wrap {
  margin-bottom: 40px;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

/* ============================================================
   TABLE BASE
============================================================ */

.ds-table {
  border-collapse: collapse;
  background: var(--table-row-td-default-background);
  width: 100%;
  color: var(--table-row-th-default-text);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
}

/* ============================================================
   HEADER
============================================================ */

.ds-table-head {
  background: var(--table-row-th-default-background);
}

/* FIX: th needs position:relative for the ::after resize handle */

.ds-table-head th {
  position: relative;
  /* FIX: border-bottom uses --table-row-th-default-border (outer border).
     The "line" token is the sort-indicator underline, handled separately. */
  border: none;
  border-bottom: 1px solid var(--table-row-th-default-border);
  background: var(--table-row-th-default-background);
  padding: 0 12px 0 12px;
  height: 42px;
  color: var(--table-row-th-default-text);
  font-weight: 400;
  font-size: 13px;
  user-select: none;
  text-align: left;
  white-space: nowrap;
}

.ds-table-head th[data-align='right'] {
  text-align: right;
}

.ds-table-head th[data-variant='checkbox'] {
  padding: 0;
  width: 42px;
  min-width: 42px;
  text-align: center;
}

/* Sort icon */

.ds-table-head th .sort-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  color: var(--table-row-th-default-icon);

  font-size: 12px;
  line-height: 1;
}

/* FIX: sort icon becomes fully opaque on header hover */

.ds-table-head th:hover .sort-icon {
  color: var(--table-row-th-hover-icon);
}

/* Sort state arrows — reflect actual column sort direction */

/* Sortable cursor */

.ds-table-head th[data-sortable='true'] {
  cursor: pointer;
}

/* Header hover */

.ds-table-head th:hover {
  border-bottom-color: var(--table-row-th-hover-border);
  background: var(--table-row-th-hover-background);
  color: var(--table-row-th-hover-text);
}

/* "line" token is transparent for both default and hover in the NCC/Fox-IT
   brand — no accent strip should appear. The ::after is kept for potential
   future brand overrides but remains invisible. */

.ds-table-head th::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  height: 2px;
  pointer-events: none;
  content: '';
}

/* ============================================================
   BODY & CELLS
============================================================ */

.ds-table-body {
  background: var(--table-row-td-default-background);
}

.ds-table-body tr {
  transition: background-color 0.2s ease;
  background: var(--table-row-td-default-background);
}

.ds-table-body td {
  vertical-align: middle;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  border: none;
  border-bottom: 1px solid var(--table-row-td-default-border);
  padding: 0 12px;
  height: 42px;
  overflow: hidden;
  color: var(--table-row-td-default-text-primary);
  font-weight: 400;
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-table-body td[data-align='right'] {
  text-align: right;
}

.ds-table-body td[data-variant='checkbox'] {
  padding: 0;
  width: 42px;
  min-width: 42px;
  text-align: center;
}

/* Text colour variants */

.ds-table-body td[data-text='primary'] {
  color: var(--table-row-td-default-text-primary);
}

.ds-table-body td[data-text='secondary'] {
  color: var(--table-row-td-default-text-secondary);
}

.ds-table-body td[data-text='tertiary'] {
  color: var(--table-row-td-default-text-tertiary);
}

.ds-table-body td[data-text='quaternary'] {
  color: var(--table-row-td-default-text-quaternary);
}

/* ============================================================
   DENSITY VARIANT — relaxed (60px rows)
============================================================ */

.ds-table.relaxed .ds-table-body td {
  height: 60px;
}

/* Header stays 42px per spec — density only affects body rows */

/* ============================================================
   ROW STATES
============================================================ */

/* — HOVER — */

.ds-table-body tr:hover {
  background: var(--table-row-td-hover-background);
}

.ds-table-body tr:hover td {
  border-bottom-color: var(--table-row-td-hover-border);
  background: var(--table-row-td-hover-background);
  color: var(--table-row-td-hover-text-primary);
}

.ds-table-body tr:hover td[data-text='secondary'] {
  color: var(--table-row-td-hover-text-secondary);
}

.ds-table-body tr:hover td[data-text='tertiary'] {
  color: var(--table-row-td-hover-text-tertiary);
}

.ds-table-body tr:hover td[data-text='quaternary'] {
  color: var(--table-row-td-hover-text-quaternary);
}

/* — FOCUS (keyboard nav; requires tabindex on tr) — */

.ds-table-body tr:focus-within {
  background: var(--table-row-td-focus-background);
}

.ds-table-body tr:focus-within td {
  border-bottom-color: var(--table-row-td-focus-border);
  background: var(--table-row-td-focus-background);
  color: var(--table-row-td-focus-text-primary);
}

.ds-table-body tr:focus-within td[data-text='secondary'] {
  color: var(--table-row-td-focus-text-secondary);
}

.ds-table-body tr:focus-within td[data-text='tertiary'] {
  color: var(--table-row-td-focus-text-tertiary);
}

.ds-table-body tr:focus-within td[data-text='quaternary'] {
  color: var(--table-row-td-focus-text-quaternary);
}

/* — ACTIVE (selected row) — */

.ds-table-body tr.active {
  background: var(--table-row-td-active-background);
}

.ds-table-body tr.active td {
  /* FIX: active uses --various-border-primary (stronger) per token spec */
  border-bottom-color: var(--table-row-td-active-border);
  background: var(--table-row-td-active-background);
  color: var(--table-row-td-active-text-primary);
}

.ds-table-body tr.active td[data-text='secondary'] {
  color: var(--table-row-td-active-text-secondary);
}

.ds-table-body tr.active td[data-text='tertiary'] {
  color: var(--table-row-td-active-text-tertiary);
}

.ds-table-body tr.active td[data-text='quaternary'] {
  color: var(--table-row-td-active-text-quaternary);
}

/* ============================================================
   INTERACTIVE ELEMENTS
============================================================ */

/* Sticky header */

.ds-table-head th {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Links */

.ds-table-body td a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.ds-table-body td a:hover {
  text-decoration: underline;
}

/* Clickable rows */

.ds-table-body tr[role='button'] {
  cursor: pointer;
}

/* Cell focus ring */

.ds-table-body td:focus {
  outline: 2px solid var(--table-row-th-default-border);
  outline-offset: -2px;
}

/* ============================================================
   COMPONENT STYLES
============================================================ */

/* Indicator dot */

.ds-indicator-dot {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  border-radius: 50%;
  background: currentColor;
  width: 6px;
  height: 6px;
}

/* Avatar */

.ds-avatar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ds-avatar-circle {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
}

/* Severity */

.ds-severity {
  font-weight: 600;
}

.ds-severity[data-level='1'] {
  color: #d32f2f;
}

.ds-severity[data-level='2'] {
  color: #f57c00;
}

.ds-severity[data-level='3'] {
  color: #f57c00;
}

.ds-severity[data-level='4'] {
  color: #2196f3;
}

.ds-severity[data-level='unspecified'] {
  color: var(--table-row-td-default-text-quaternary);
}

/* Filter chip */

.ds-filter-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  background: var(--various-background-secondary);
  padding: 6px 8px;
  color: var(--table-row-td-default-text-tertiary);
  font-size: 13px;
}

/* ============================================================
   SORT DEMO SCRIPT styles
============================================================ */

.sort-icon svg {
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================
   PRINT
============================================================ */

@media print {
  .ds-table {
    border-collapse: collapse;
  }
  .ds-table-body tr:hover {
    background: inherit;
  }
}

/* ============================================================
TAG TOKENS — MULTI-BRAND (NCC + FOX-IT)
Scoped using: <html data-brand="ncc"> or <html data-brand="foxit">
============================================================ */

:root {
  /* ================= DISPLAY ================ */
  /* default */
  --component-tag-display-default-text: var(--color-grey-90);
  --component-tag-display-default-background: var(--color-white);
  --component-tag-display-default-border: var(--color-grey-40);
  --component-tag-display-default-icon: var(--color-grey-90);

  /* grey */
  --component-tag-display-grey-text: var(--color-grey-80);
  --component-tag-display-grey-background: var(--color-grey-20);
  --component-tag-display-grey-icon: var(--color-grey-80);

  /* red */
  --component-tag-display-red-text: var(--color-red);
  --component-tag-display-red-background: var(--color-red-10);
  --component-tag-display-red-border: var(--color-transparent);

  /* green */
  --component-tag-display-green-text: var(--color-green-120);
  --component-tag-display-green-background: var(--color-green-10);
  --component-tag-display-green-border: var(--color-transparent);

  /* orange */
  --component-tag-display-orange-text: var(--color-orange-120);
  --component-tag-display-orange-background: var(--color-orange-10);
  --component-tag-display-orange-border: var(--color-transparent);

  /* dark */
  --component-tag-display-dark-text: var(--color-grey-20);
  --component-tag-display-dark-background: var(--color-dark-40);
  --component-tag-display-dark-icon: var(--color-grey-20);

  /* ================= TOGGLE ================ */
  /* default */
  --component-tag-toggle-default-text: var(--color-grey-90);
  --component-tag-toggle-default-background: var(--color-white);
  --component-tag-toggle-default-border: var(--color-grey-40);

  /* hover */
  --component-tag-toggle-hover-text: var(--color-grey);
  --component-tag-toggle-hover-background: var(--color-grey-10);
  --component-tag-toggle-hover-border: var(--color-grey-60);

  /* focus */
  --component-tag-toggle-focus-text: var(--color-grey);
  --component-tag-toggle-focus-background: var(--color-white);
  --component-tag-toggle-focus-border: var(--color-grey-90);

  /* active */
  --component-tag-toggle-active-text: var(--color-grey-90);
  --component-tag-toggle-active-background: var(--color-grey-10);
  --component-tag-toggle-active-border: var(--color-grey-60);

  /* ================= FILTER ================ */
  /*PRIMARY*/
  /* default */
  --component-tag-filter-primary-default-text: var(--color-grey);
  --component-tag-filter-primary-default-icon: var(--color-grey);
  --component-tag-filter-primary-default-background: var(--color-grey-20);
  --component-tag-filter-primary-default-border: var(--color-grey-20);

  /* hover */
  --component-tag-filter-primary-hover-text: var(--color-dark);
  --component-tag-filter-primary-hover-icon: var(--color-dark);
  --component-tag-filter-primary-hover-background: var(--color-grey-30);
  --component-tag-filter-primary-hover-border: var(--color-grey-30);

  /* focus */
  --component-tag-filter-primary-focus-text: var(--color-dark);
  --component-tag-filter-primary-focus-icon: var(--color-dark);
  --component-tag-filter-primary-focus-background: var(--color-grey-40);
  --component-tag-filter-primary-focus-border: var(--color-grey-40);

  /* active */
  --component-tag-filter-primary-active-text: var(--color-dark);
  --component-tag-filter-primary-active-icon: var(--color-dark);
  --component-tag-filter-primary-active-background: var(--color-grey-20);
  --component-tag-filter-primary-active-border: var(--color-grey-20);

  /*SECONDARY*/
  /* default */
  --component-tag-filter-secondary-default-text: var(--color-white);
  --component-tag-filter-secondary-default-icon: var(--color-white);
  --component-tag-filter-secondary-default-background: var(--color-dark);
  --component-tag-filter-secondary-default-border: var(--color-dark);

  /* hover */
  --component-tag-filter-secondary-hover-text: var(--color-white);
  --component-tag-filter-secondary-hover-icon: var(--color-white);
  --component-tag-filter-secondary-hover-background: var(--color-grey-90);
  --component-tag-filter-secondary-hover-border: var(--color-grey-90);

  /* focus */
  --component-tag-filter-secondary-focus-text: var(--color-white);
  --component-tag-filter-secondary-focus-icon: var(--color-white);
  --component-tag-filter-secondary-focus-background: var(--color-grey-80);
  --component-tag-filter-secondary-focus-border: var(--color-grey-80);

  /* active */
  --component-tag-filter-secondary-active-text: var(--color-white);
  --component-tag-filter-secondary-active-icon: var(--color-white);
  --component-tag-filter-secondary-active-background: var(--color-dark);
  --component-tag-filter-secondary-active-border: var(--color-dark);

  /* ================= SECURITY ================ */
  /* grade A */
  --component-tag-security-a-text: var(--color-white);
  --component-tag-security-a-background: var(--color-green);

  /* grade B */
  --component-tag-security-b-text: var(--color-white);
  --component-tag-security-b-background: var(--color-green-60);

  /* grade C */
  --component-tag-security-c-text: var(--color-white);
  --component-tag-security-c-background: var(--color-orange-80);

  /* grade D */
  --component-tag-security-d-text: var(--color-white);
  --component-tag-security-d-background: var(--color-orange-120);

  /* grade F */
  --component-tag-security-f-text: var(--color-white);
  --component-tag-security-f-background: var(--color-red);
}

/* ------------------------------------------------------------
NCC GROUP THEME
------------------------------------------------------------ */

:root:not([data-brand]),
:root[data-brand='ncc'] {
  /* ================= DISPLAY ================ */
  /* brand */
  --component-tag-display-brand-text: var(--color-white);
  --component-tag-display-brand-background: var(--color-nccgroup-neonblue-80);
  --component-tag-display-brand-icon: var(--color-white);

  /* blue */
  --component-tag-display-blue-text: var(--color-nccgroup-neonblue-80);
  --component-tag-display-blue-background: var(--color-nccgroup-neonblue-10);
  --component-tag-display-blue-border: var(--color-transparent);

  /* raspberry */
  --component-tag-display-raspberry-text: var(--color-nccgroup-raspberry-120);
  --component-tag-display-raspberry-background: var(
    --color-nccgroup-raspberry-10
  );
  --component-tag-display-raspberry-border: var(--color-transparent);

  /* lavender */
  --component-tag-display-lavender-text: var(--color-nccgroup-darklavender);
  --component-tag-display-lavender-background: var(
    --color-nccgroup-darklavender-10
  );
  --component-tag-display-lavender-border: var(--color-transparent);

  /* ================= TOGGLE ================ */
  /* selected */
  --component-tag-toggle-selected-text: var(--color-white);
  --component-tag-toggle-selected-background: var(--color-nccgroup-neonblue-80);
  --component-tag-toggle-selected-border: var(--color-nccgroup-neonblue-80);
  --component-tag-toggle-selected-icon: var(--color-white);

  /* ================= FILTER ================ */
  /*BRAND*/
  /* default */
  --component-tag-filter-brand-default-text: var(--color-nccgroup-neonblue-10);
  --component-tag-filter-brand-default-icon: var(--color-nccgroup-neonblue-10);
  --component-tag-filter-brand-default-background: var(
    --color-nccgroup-neonblue-80
  );
  --component-tag-filter-brand-default-border: var(
    --color-nccgroup-neonblue-80
  );

  /* hover */
  --component-tag-filter-brand-hover-text: var(--color-nccgroup-neonblue-10);
  --component-tag-filter-brand-hover-icon: var(--color-nccgroup-neonblue-10);
  --component-tag-filter-brand-hover-background: var(
    --color-nccgroup-neonblue-120
  );
  --component-tag-filter-brand-hover-border: var(--color-nccgroup-neonblue-120);

  /* focus */
  --component-tag-filter-brand-focus-text: var(--color-white);
  --component-tag-filter-brand-focus-icon: var(--color-white);
  --component-tag-filter-brand-focus-background: var(
    --color-nccgroup-neonblue-160
  );
  --component-tag-filter-brand-focus-border: var(--color-nccgroup-neonblue-160);

  /* active */
  --component-tag-filter-brand-active-text: var(--color-white);
  --component-tag-filter-brand-active-icon: var(--color-white);
  --component-tag-filter-brand-active-background: var(
    --color-nccgroup-neonblue-80
  );
  --component-tag-filter-brand-active-border: var(--color-nccgroup-neonblue-80);
}

/* ------------------------------------------------------------
FOX-IT THEME
------------------------------------------------------------ */

:root[data-brand='foxit'] {
  /* ================= DISPLAY ================ */
  /* brand */
  --component-tag-display-brand-text: var(--color-white);
  --component-tag-display-brand-background: var(--color-foxit-neonblue-80);
  --component-tag-display-brand-icon: var(--color-white);

  /* blue */
  --component-tag-display-blue-text: var(--color-foxit-neonblue-80);
  --component-tag-display-blue-background: var(--color-foxit-neonblue-10);
  --component-tag-display-blue-border: var(--color-transparent);

  /* purple */
  --component-tag-display-purple-text: var(--color-foxit-purple);
  --component-tag-display-purple-background: var(--color-foxit-purple-10);
  --component-tag-display-purple-border: var(--color-transparent);

  /* raspberry */
  --component-tag-display-raspberry-text: var(--color-foxit-raspberry-120);
  --component-tag-display-raspberry-background: var(--color-foxit-raspberry-10);
  --component-tag-display-raspberry-border: var(--color-transparent);

  /* lavender */
  --component-tag-display-lavender-text: var(--color-foxit-darklavender);
  --component-tag-display-lavender-background: var(
    --color-foxit-darklavender-10
  );
  --component-tag-display-lavender-border: var(--color-transparent);

  /* ================= TOGGLE ================ */
  /* selected */
  --component-tag-toggle-selected-text: var(--color-white);
  --component-tag-toggle-selected-background: var(--color-foxit-neonblue-80);
  --component-tag-toggle-selected-border: var(--color-foxit-neonblue-80);
  --component-tag-toggle-selected-icon: var(--color-white);

  /* ================= FILTER ================ */
  /*BRAND*/
  /* default */
  --component-tag-filter-brand-default-text: var(--color-foxit-neonblue-10);
  --component-tag-filter-brand-default-icon: var(--color-foxit-neonblue-10);
  --component-tag-filter-brand-default-background: var(
    --color-foxit-neonblue-80
  );
  --component-tag-filter-brand-default-border: var(--color-foxit-neonblue-80);

  /* hover */
  --component-tag-filter-brand-hover-text: var(--color-foxit-neonblue-10);
  --component-tag-filter-brand-hover-icon: var(--color-foxit-neonblue-10);
  --component-tag-filter-brand-hover-background: var(
    --color-foxit-neonblue-120
  );
  --component-tag-filter-brand-hover-border: var(--color-foxit-neonblue-120);

  /* focus */
  --component-tag-filter-brand-focus-text: var(--color-white);
  --component-tag-filter-brand-focus-icon: var(--color-white);
  --component-tag-filter-brand-focus-background: var(
    --color-foxit-neonblue-160
  );
  --component-tag-filter-brand-focus-border: var(--color-foxit-neonblue-160);

  /* active */
  --component-tag-filter-brand-active-text: var(--color-white);
  --component-tag-filter-brand-active-icon: var(--color-white);
  --component-tag-filter-brand-active-background: var(
    --color-foxit-neonblue-80
  );
  --component-tag-filter-brand-active-border: var(--color-foxit-neonblue-80);
}

/*******************/

/* TAGS          */

/*******************/

.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 0px 9px 1px 9px;
  height: 28px;
  font-weight: var(--font-weight-regular);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* FONTAWESOME ICONS */

.ds-tag i.fa-solid,
.ds-tag i.fa-regular,
.ds-tag i.fa-light,
.ds-tag i.fa-duotone,
.ds-tag i.fa-brands {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  order: var(--_tag-icon-order, initial);
  font-size: 1em;
  line-height: inherit;
}

/* Icon on the left */

.ds-tag[data-icon='left'] i.fa-solid,
.ds-tag[data-icon='left'] i.fa-regular,
.ds-tag[data-icon='left'] i.fa-light,
.ds-tag[data-icon='left'] i.fa-duotone,
.ds-tag[data-icon='left'] i.fa-brands {
  order: 0;
}

/* Icon on the right */

.ds-tag[data-icon='right'] i.fa-solid,
.ds-tag[data-icon='right'] i.fa-regular,
.ds-tag[data-icon='right'] i.fa-light,
.ds-tag[data-icon='right'] i.fa-duotone,
.ds-tag[data-icon='right'] i.fa-brands {
  order: 2;
}

/* Icon none */

.ds-tag[data-icon='none'] i.fa-solid,
.ds-tag[data-icon='none'] i.fa-regular,
.ds-tag[data-icon='none'] i.fa-light,
.ds-tag[data-icon='none'] i.fa-duotone,
.ds-tag[data-icon='none'] i.fa-brands {
  display: none;
}

/* === VARIANTS === */

/* ---------------- DISPLAY VARIANT---------------- */

/* default */

.ds-tag:not([data-variant]),
.ds-tag[data-variant='display'] {
  border: 1px solid var(--component-tag-display-default-border);
  background-color: var(--component-tag-display-default-background);
  color: var(--component-tag-display-default-text);
}

/* grey */

.ds-tag[data-variant='display'][data-color='grey'] {
  border: 1px solid var(--component-tag-display-grey-border);
  background-color: var(--component-tag-display-grey-background);
  color: var(--component-tag-display-grey-text);
}

/* red */

.ds-tag[data-variant='display'][data-color='red'] {
  border: 1px solid var(--component-tag-display-red-border);
  background-color: var(--component-tag-display-red-background);
  color: var(--component-tag-display-red-text);
}

/* green */

.ds-tag[data-variant='display'][data-color='green'] {
  border: 1px solid var(--component-tag-display-green-border);
  background-color: var(--component-tag-display-green-background);
  color: var(--component-tag-display-green-text);
}

/* orange */

.ds-tag[data-variant='display'][data-color='orange'] {
  border: 1px solid var(--component-tag-display-orange-border);
  background-color: var(--component-tag-display-orange-background);
  color: var(--component-tag-display-orange-text);
}

/* raspberry */

.ds-tag[data-variant='display'][data-color='raspberry'] {
  border: 1px solid var(--component-tag-display-raspberry-border);
  background-color: var(--component-tag-display-raspberry-background);
  color: var(--component-tag-display-raspberry-text);
}

/* lavender */

.ds-tag[data-variant='display'][data-color='lavender'] {
  border: 1px solid var(--component-tag-display-lavender-border);
  background-color: var(--component-tag-display-lavender-background);
  color: var(--component-tag-display-lavender-text);
}

/* dark */

.ds-tag[data-variant='display'][data-color='dark'] {
  border: 1px solid var(--component-tag-display-dark-border);
  background-color: var(--component-tag-display-dark-background);
  color: var(--component-tag-display-dark-text);
}

/* brand */

.ds-tag[data-variant='display'][data-color='brand'] {
  border: 1px solid var(--component-tag-display-brand-border);
  background-color: var(--component-tag-display-brand-background);
  color: var(--component-tag-display-brand-text);
}

/* blue */

.ds-tag[data-variant='display'][data-color='blue'] {
  border: 1px solid var(--component-tag-display-blue-border);
  background-color: var(--component-tag-display-blue-background);
  color: var(--component-tag-display-blue-text);
}

/* ---------------- TOGGLE VARIANT ---------------- */

/* defautl */

.ds-tag[data-variant='toggle'] {
  cursor: pointer;
  border: 1px solid
    var(--_tag-border, var(--component-tag-toggle-default-border));
  background-color: var(
    --_tag-bg,
    var(--component-tag-toggle-default-background)
  );
  color: var(--_tag-text, var(--component-tag-toggle-default-text));
}

.ds-tag[data-variant='toggle'] i {
  display: none;
}

/* hover */

.ds-tag[data-variant='toggle']:hover:not([aria-pressed='true']) {
  --_tag-text: var(--component-tag-toggle-hover-text);
  --_tag-bg: var(--component-tag-toggle-hover-background);
  --_tag-border: var(--component-tag-toggle-hover-border);
}

/* focus */

.ds-tag[data-variant='toggle']:focus-visible {
  --_tag-text: var(--component-tag-toggle-focus-text);
  --_tag-bg: var(--component-tag-toggle-focus-background);
  --_tag-border: var(--component-tag-toggle-focus-border);
}

/* active */

.ds-tag[data-variant='toggle']:active {
  --_tag-text: var(--component-tag-toggle-active-text);
  --_tag-bg: var(--component-tag-toggle-active-background);
  --_tag-border: var(--component-tag-toggle-active-border);
}

/* selected */

.ds-tag[data-variant='toggle'][aria-pressed='true'] {
  --_tag-text: var(--component-tag-toggle-selected-text);
  --_tag-bg: var(--component-tag-toggle-selected-background);
  --_tag-border: var(--component-tag-toggle-selected-border);
  outline: none;
  --_tag-icon-order: 0;
  padding: 0px 9px 1px 7px;
}

.ds-tag[data-variant='toggle'][aria-pressed='true'] i {
  display: inline-flex;
  color: var(--component-tag-toggle-selected-icon);
}

/* ---------------- FILTER VARIANT ---------------- */

.ds-tag[data-variant='filter'] i {
  display: inline-flex;
  position: relative;
  top: 1px;
  flex-shrink: 0;
  align-items: center;

  align-self: center;

  color: var(--_tag-icon-color);
}

/* primary */

.ds-tag[data-variant='filter'][data-style='primary'] {
  cursor: pointer;
  border: 1px solid var(--component-tag-filter-primary-default-border);
  background-color: var(--component-tag-filter-primary-default-background);
  color: var(--component-tag-filter-primary-default-text);
  --_tag-icon-color: var(--component-tag-filter-primary-default-icon);
}

.ds-tag[data-variant='filter'][data-style='primary']:hover {
  border: 1px solid var(--component-tag-filter-primary-hover-border);
  background-color: var(--component-tag-filter-primary-hover-background);
  color: var(--component-tag-filter-primary-hover-text);
  --_tag-icon-color: var(--component-tag-filter-primary-hover-icon);
}

.ds-tag[data-variant='filter'][data-style='primary']:focus-visible {
  border: 1px solid var(--component-tag-filter-primary-focus-border);
  background-color: var(--component-tag-filter-primary-focus-background);
  color: var(--component-tag-filter-primary-focus-text);
  --_tag-icon-color: var(--component-tag-filter-primary-focus-icon);
}

.ds-tag[data-variant='filter'][data-style='primary']:active {
  border: 1px solid var(--component-tag-filter-primary-active-border);
  background-color: var(--component-tag-filter-primary-active-background);
  color: var(--component-tag-filter-primary-active-text);
  --_tag-icon-color: var(--component-tag-filter-primary-active-icon);
}

/* secondary */

.ds-tag[data-variant='filter'][data-style='secondary'] {
  cursor: pointer;
  border: 1px solid var(--component-tag-filter-secondary-default-border);
  background-color: var(--component-tag-filter-secondary-default-background);
  color: var(--component-tag-filter-secondary-default-text);
  --_tag-icon-color: var(--component-tag-filter-secondary-default-icon);
}

.ds-tag[data-variant='filter'][data-style='secondary']:hover {
  border: 1px solid var(--component-tag-filter-secondary-hover-border);
  background-color: var(--component-tag-filter-secondary-hover-background);
  color: var(--component-tag-filter-secondary-hover-text);
  --_tag-icon-color: var(--component-tag-filter-secondary-hover-icon);
}

.ds-tag[data-variant='filter'][data-style='secondary']:focus-visible {
  border: 1px solid var(--component-tag-filter-secondary-focus-border);
  background-color: var(--component-tag-filter-secondary-focus-background);
  color: var(--component-tag-filter-secondary-focus-text);
  --_tag-icon-color: var(--component-tag-filter-secondary-focus-icon);
}

.ds-tag[data-variant='filter'][data-style='secondary']:active {
  border: 1px solid var(--component-tag-filter-secondary-active-border);
  background-color: var(--component-tag-filter-secondary-active-background);
  color: var(--component-tag-filter-secondary-active-text);
  --_tag-icon-color: var(--component-tag-filter-secondary-active-icon);
}

/* brand */

.ds-tag[data-variant='filter'][data-style='brand'] {
  cursor: pointer;
  border: 1px solid var(--component-tag-filter-brand-default-border);
  background-color: var(--component-tag-filter-brand-default-background);
  color: var(--component-tag-filter-brand-default-text);
  --_tag-icon-color: var(--component-tag-filter-brand-default-icon);
}

.ds-tag[data-variant='filter'][data-style='brand']:hover {
  border: 1px solid var(--component-tag-filter-brand-hover-border);
  background-color: var(--component-tag-filter-brand-hover-background);
  color: var(--component-tag-filter-brand-hover-text);
  --_tag-icon-color: var(--component-tag-filter-brand-hover-icon);
}

.ds-tag[data-variant='filter'][data-style='brand']:focus-visible {
  border: 1px solid var(--component-tag-filter-brand-focus-border);
  background-color: var(--component-tag-filter-brand-focus-background);
  color: var(--component-tag-filter-brand-focus-text);
  --_tag-icon-color: var(--component-tag-filter-brand-focus-icon);
}

.ds-tag[data-variant='filter'][data-style='brand']:active {
  border: 1px solid var(--component-tag-filter-brand-active-border);
  background-color: var(--component-tag-filter-brand-active-background);
  color: var(--component-tag-filter-brand-active-text);
  --_tag-icon-color: var(--component-tag-filter-brand-active-icon);
}

/* ---------------- SECURITY VARIANT ---------------- */

.ds-tag[data-variant='security'] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  font-weight: 600;
  line-height: 1;
}

/* grade A */

.ds-tag[data-variant='security'][data-grade='a'] {
  background-color: var(--component-tag-security-a-background);
  color: var(--component-tag-security-a-text);
}

/* grade B */

.ds-tag[data-variant='security'][data-grade='b'] {
  background-color: var(--component-tag-security-b-background);
  color: var(--component-tag-security-b-text);
}

/* grade C */

.ds-tag[data-variant='security'][data-grade='c'] {
  background-color: var(--component-tag-security-c-background);
  color: var(--component-tag-security-c-text);
}

/* grade D */

.ds-tag[data-variant='security'][data-grade='d'] {
  background-color: var(--component-tag-security-d-background);
  color: var(--component-tag-security-d-text);
}

/* grade F */

.ds-tag[data-variant='security'][data-grade='f'] {
  background-color: var(--component-tag-security-f-background);
  color: var(--component-tag-security-f-text);
}

/* ============================================================
  DISPLAY SIZES
   ============================================================ */

/* Size L */

.ds-tag[data-variant='display'][data-size='large'] {
  padding: 0px 11px 1px 11px;
  height: 32px;
  font-size: 14px;
}

/* ============================================================
  TOGGLE SIZES 
  Toggle uses fixed height to avoid layout shift when icon appears
   ============================================================ */

/* Size L */

.ds-tag[data-variant='toggle'][data-size='large'] {
  padding: 0px 11px 1px 11px;
  height: 32px;
  font-size: 14px;
}

/* ============================================================
  FILTER SIZES
   ============================================================ */

/* Size L */

.ds-tag[data-variant='filter'][data-size='large'] {
  gap: 4px;
  padding: 0px 7px 1px 10px;
  height: 32px;
  font-size: 14px;
}

/* ============================================================
   ICON-AWARE PADDING OVERRIDES
   Applies ONLY when an icon is present in display and toggle variant
   ============================================================ */

/* ================= DISPLAY ================= */

/* L */

.ds-tag[data-variant='display'][data-size='large'][data-icon='left'],
.ds-tag[data-variant='display'][data-size='large'][data-icon='right'] {
  padding: 0px 10px 1px 8px;
}

/* M (default size) */

.ds-tag[data-variant='toggle'][data-size='medium'][data-icon='left'],
.ds-tag[data-variant='toggle'][data-size='medium'][data-icon='right'],
.ds-tag[data-variant='display']:not([data-size])[data-icon='left'],
.ds-tag[data-variant='display']:not([data-size])[data-icon='right'] {
  padding: 0px 9px 1px 7px;
}

* {
  box-sizing: border-box;
}

/*******************/

/* BUTTON          */

/*******************/

.ds-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: 8px;
  font-weight: 500;
  line-height: 1;
}

/* FONTAWESOME ICONS */

.ds-button i.fa-solid,
.ds-button i.fa-regular,
.ds-button i.fa-light,
.ds-button i.fa-duotone,
.ds-button i.fa-brands {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  line-height: 1;
}

/* === ICON POSITION === */

/* Icon on the left */

.ds-button[data-icon='left'] i.fa-solid,
.ds-button[data-icon='left'] i.fa-regular,
.ds-button[data-icon='left'] i.fa-light,
.ds-button[data-icon='left'] i.fa-duotone,
.ds-button[data-icon='left'] i.fa-brands,
.ds-button.icon-left i.fa-solid,
.ds-button.icon-left i.fa-regular,
.ds-button.icon-left i.fa-light,
.ds-button.icon-left i.fa-duotone,
.ds-button.icon-left i.fa-brands {
  order: 0;
}

/* Icon on the right */

.ds-button[data-icon='right'] i.fa-solid,
.ds-button[data-icon='right'] i.fa-regular,
.ds-button[data-icon='right'] i.fa-light,
.ds-button[data-icon='right'] i.fa-duotone,
.ds-button[data-icon='right'] i.fa-brands,
.ds-button.icon-right i.fa-solid,
.ds-button.icon-right i.fa-regular,
.ds-button.icon-right i.fa-light,
.ds-button.icon-right i.fa-duotone,
.ds-button.icon-right i.fa-brands {
  order: 2;
}

/* Icon none */

.ds-button[data-icon='none'] i.fa-solid,
.ds-button[data-icon='none'] i.fa-regular,
.ds-button[data-icon='none'] i.fa-light,
.ds-button[data-icon='none'] i.fa-duotone,
.ds-button[data-icon='none'] i.fa-brands {
  display: none;
}

/* === VARIANTS === */

/* Primary */

.ds-button:not([data-variant]),
.ds-button[data-variant='primary'],
.ds-button.ds-button-primary {
  border: 1px solid var(--cta-button-primary-default-border);
  background: var(--cta-button-primary-default-background);
  color: var(--cta-button-primary-default-text);
}

.ds-button:not([data-variant]) i,
.ds-button[data-variant='primary'] i,
.ds-button.ds-button-primary i {
  color: var(--cta-button-primary-default-icon);
}

.ds-button:not([data-variant]):hover,
.ds-button[data-variant='primary']:hover,
.ds-button.ds-button-primary:hover {
  border: 1px solid var(--cta-button-primary-hover-border);
  background: var(--cta-button-primary-hover-background);
}

.ds-button:not([data-variant]):hover i,
.ds-button[data-variant='primary']:hover i,
.ds-button.ds-button-primary:hover i {
  color: var(--cta-button-primary-hover-icon);
}

.ds-button:not([data-variant]):focus,
.ds-button[data-variant='primary']:focus,
.ds-button.ds-button-primary:focus {
  border: 1px solid var(--cta-button-primary-focus-border);
  background: var(--cta-button-primary-focus-background);
}

.ds-button:not([data-variant]):focus i,
.ds-button[data-variant='primary']:focus i,
.ds-button.ds-button-primary:focus i {
  color: var(--cta-button-primary-focus-icon);
}

.ds-button:not([data-variant]):active,
.ds-button[data-variant='primary']:active,
.ds-button.ds-button-primary:active {
  border: 1px solid var(--cta-button-primary-active-border);
  background: var(--cta-button-primary-active-background);
}

.ds-button:not([data-variant]):active i,
.ds-button[data-variant='primary']:active i,
.ds-button.ds-button-primary:active i {
  color: var(--cta-button-primary-active-icon);
}

.ds-button:not([data-variant]):disabled,
.ds-button[data-variant='primary']:disabled,
.ds-button.ds-button-primary:disabled {
  border: 1px solid var(--cta-button-primary-disabled-border);
  background: var(--cta-button-primary-disabled-background);
  color: var(--cta-button-primary-disabled-text);
}

.ds-button:not([data-variant]):disabled i,
.ds-button[data-variant='primary']:disabled i,
.ds-button.ds-button-primary:disabled i {
  color: var(--cta-button-primary-disabled-icon);
}

/* Secondary */

.ds-button[data-variant='secondary'],
.ds-button.ds-button-secondary {
  border: 1px solid var(--cta-button-secondary-default-border);
  background: var(--cta-button-secondary-default-background);
  color: var(--cta-button-secondary-default-text);
}

.ds-button[data-variant='secondary'] i,
.ds-button.ds-button-secondary i {
  color: var(--cta-button-secondary-default-icon);
}

.ds-button[data-variant='secondary']:hover,
.ds-button.ds-button-secondary:hover {
  border: 1px solid var(--cta-button-secondary-hover-border);
  background: var(--cta-button-secondary-hover-background);
}

.ds-button[data-variant='secondary']:hover i,
.ds-button.ds-button-secondary:hover i {
  color: var(--cta-button-secondary-hover-icon);
}

.ds-button[data-variant='secondary']:focus,
.ds-button.ds-button-secondary:focus {
  border: 1px solid var(--cta-button-secondary-focus-border);
  background: var(--cta-button-secondary-focus-background);
}

.ds-button[data-variant='secondary']:focus i,
.ds-button.ds-button-secondary:focus i {
  color: var(--cta-button-secondary-focus-icon);
}

.ds-button[data-variant='secondary']:active,
.ds-button.ds-button-secondary:active {
  border: 1px solid var(--cta-button-secondary-active-border);
  background: var(--cta-button-secondary-active-background);
}

.ds-button[data-variant='secondary']:active i,
.ds-button.ds-button-secondary:active i {
  color: var(--cta-button-secondary-active-icon);
}

.ds-button[data-variant='secondary']:disabled,
.ds-button.ds-button-secondary:disabled {
  border: 1px solid var(--cta-button-secondary-disabled-border);
  background: var(--cta-button-secondary-disabled-background);
  color: var(--cta-button-secondary-disabled-text);
}

.ds-button[data-variant='secondary']:disabled i,
.ds-button.ds-button-secondary:disabled i {
  color: var(--cta-button-secondary-disabled-icon);
}

/* Tertiary */

.ds-button[data-variant='tertiary'],
.ds-button.ds-button-tertiary {
  border: 1px solid var(--cta-button-tertiary-default-border);
  background: var(--cta-button-tertiary-default-background);
  color: var(--cta-button-tertiary-default-text);
}

.ds-button[data-variant='tertiary'] i,
.ds-button.ds-button-tertiary i {
  color: var(--cta-button-tertiary-default-icon);
}

.ds-button[data-variant='tertiary']:hover,
.ds-button.ds-button-tertiary:hover {
  border: 1px solid var(--cta-button-tertiary-hover-border);
  background: var(--cta-button-tertiary-hover-background);
}

.ds-button[data-variant='tertiary']:hover i,
.ds-button.ds-button-tertiary:hover i {
  color: var(--cta-button-tertiary-hover-icon);
}

.ds-button[data-variant='tertiary']:focus,
.ds-button.ds-button-tertiary:focus {
  border: 1px solid var(--cta-button-tertiary-focus-border);
  background: var(--cta-button-tertiary-focus-background);
}

.ds-button[data-variant='tertiary']:focus i,
.ds-button.ds-button-tertiary:focus i {
  color: var(--cta-button-tertiary-focus-icon);
}

.ds-button[data-variant='tertiary']:active,
.ds-button.ds-button-tertiary:active {
  border: 1px solid var(--cta-button-tertiary-active-border);
  background: var(--cta-button-tertiary-active-background);
}

.ds-button[data-variant='tertiary']:active i,
.ds-button.ds-button-tertiary:active i {
  color: var(--cta-button-tertiary-active-icon);
}

.ds-button[data-variant='tertiary']:disabled,
.ds-button.ds-button-tertiary:disabled {
  border: 1px solid var(--cta-button-tertiary-disabled-border);
  background: var(--cta-button-tertiary-disabled-background);
  color: var(--cta-button-tertiary-disabled-text);
}

.ds-button[data-variant='tertiary']:disabled i,
.ds-button.ds-button-tertiary:disabled i {
  color: var(--cta-button-tertiary-disabled-icon);
}

/* === SIZES === */

/* small */

.ds-button[data-size='small'],
.ds-button.ds-button-small {
  padding: 8px 12px 8px 12px;
  font-size: 13px;
}

.ds-button[data-size='small'][data-icon='right'],
.ds-button.ds-button-small[data-icon='right'] {
  padding: 8px 10px 8px 12px;
}

.ds-button[data-size='small'][data-icon='left'],
.ds-button.ds-button-small[data-icon='left'] {
  padding: 8px 12px 8px 10px;
}

.ds-button[data-size='small'][data-icon='only'],
.ds-button.ds-button-small[data-icon='only'] {
  padding: 8px 7px 8px 7px;
}

.ds-button[data-size='small'] i.fa-solid,
.ds-button[data-size='small'] i.fa-regular,
.ds-button[data-size='small'] i.fa-light,
.ds-button[data-size='small'] i.fa-duotone,
.ds-button[data-size='small'] i.fa-brands,
.ds-button.ds-button-small i.fa-solid,
.ds-button.ds-button-small i.fa-regular,
.ds-button.ds-button-small i.fa-light,
.ds-button.ds-button-small i.fa-duotone,
.ds-button.ds-button-small i.fa-brands {
  font-size: 13px;
}

/* medium */

.ds-button[data-size='medium'],
.ds-button.ds-button-medium {
  padding: 10px 16px 10px 16px;
  font-size: 14px;
}

.ds-button[data-size='medium'][data-icon='right'],
.ds-button.ds-button-medium[data-icon='right'] {
  padding: 10px 14px 10px 16px;
}

.ds-button[data-size='medium'][data-icon='left'],
.ds-button.ds-button-medium[data-icon='left'] {
  padding: 10px 16px 10px 14px;
}

.ds-button[data-size='medium'][data-icon='only'],
.ds-button.ds-button-medium[data-icon='only'] {
  padding: 10px;
}

.ds-button[data-size='medium'] i.fa-solid,
.ds-button[data-size='medium'] i.fa-regular,
.ds-button[data-size='medium'] i.fa-light,
.ds-button[data-size='medium'] i.fa-duotone,
.ds-button[data-size='medium'] i.fa-brands,
.ds-button.ds-button-medium i.fa-solid,
.ds-button.ds-button-medium i.fa-regular,
.ds-button.ds-button-medium i.fa-light,
.ds-button.ds-button-medium i.fa-duotone,
.ds-button.ds-button-medium i.fa-brands {
  font-size: 14px;
}

/* large */

.ds-button[data-size='large'],
.ds-button.ds-button-large {
  padding: 10px 18px 12px 18px;
  font-size: 16px;
}

.ds-button[data-size='large'][data-icon='right'],
.ds-button.ds-button-large[data-icon='right'] {
  padding: 10px 14px 12px 18px;
}

.ds-button[data-size='large'][data-icon='left'],
.ds-button.ds-button-large[data-icon='left'] {
  padding: 10px 18px 12px 14px;
}

.ds-button[data-size='large'][data-icon='only'],
.ds-button.ds-button-large[data-icon='only'] {
  padding: 12px;
}

.ds-button[data-size='large'] i.fa-solid,
.ds-button[data-size='large'] i.fa-regular,
.ds-button[data-size='large'] i.fa-light,
.ds-button[data-size='large'] i.fa-duotone,
.ds-button[data-size='large'] i.fa-brands,
.ds-button.ds-button-large i.fa-solid,
.ds-button.ds-button-large i.fa-regular,
.ds-button.ds-button-large i.fa-light,
.ds-button.ds-button-large i.fa-duotone,
.ds-button.ds-button-large i.fa-brands {
  font-size: 16px;
}

* {
  box-sizing: border-box;
}