sc-button-group:not([separate]) > sc-button:first-child::part(base),
sc-button-group:not([separate]) > sc-dropdown:first-child > sc-button[slot='trigger']::part(base),
sc-button-group:not([separate]) > sc-tooltip:first-child > sc-button::part(base) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

sc-button-group:not([separate]) > sc-button:last-child::part(base),
sc-button-group:not([separate]) > sc-dropdown:last-child > sc-button[slot='trigger']::part(base),
sc-button-group:not([separate]) > sc-tooltip:last-child > sc-button::part(base) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

sc-button-group:not([separate]) > sc-button:not(:first-child):not(:last-child)::part(base),
sc-button-group:not([separate]) > sc-dropdown:not(:first-child):not(:last-child) > sc-button[slot='trigger']::part(base),
sc-button-group:not([separate]) > sc-tooltip:not(:first-child):not(:last-child) > sc-button::part(base) {
  border-radius: 0;
}

sc-button-group:not([separate]) > sc-button:not(:first-child),
sc-button-group:not([separate]) > sc-dropdown:not(:first-child) > sc-button[slot='trigger'],
sc-button-group:not([separate]) > sc-tooltip:not(:first-child) > sc-button {
  margin-left: calc(-1 * var(--sc-input-border-width));
}

sc-button-group > sc-button:not(:first-child):not([type='default'])::part(base):not(:hover):not(:active):not(:focus):after,
sc-button-group > sc-dropdown:not(:first-child) > sc-button[slot='trigger']:not([type='default'])::part(base):not(:hover):not(:active):not(:focus):after,
sc-button-group > sc-tooltip:not(:first-child) > sc-button:not([type='default'])::part(base):not(:hover):not(:active):not(:focus):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-left: solid 1px #ffffff40;
}

sc-button-group > sc-button:hover,
sc-button-group > sc-dropdown:hover > sc-button[slot='trigger'],
sc-button-group > sc-tooltip:hover > sc-button {
  z-index: 1;
}

sc-button-group > sc-button.sc-focus,
sc-button-group > sc-dropdown > sc-button[slot='trigger'].sc-focus,
sc-button-group > sc-tooltip > sc-button.sc-focus {
  z-index: 2;
}

:root {
  /** Brand */
  --sc-color-brand-primary: #01824C;
  --sc-color-brand-secondary: #2CC965;
  --sc-color-brand-heading: #002E33;
  --sc-color-brand-body: #45505F;
  --sc-color-brand-main-background: #F2FAFC;
  --sc-color-brand-content-background: #FFFFFF;
  --sc-color-brand-stroke: #E7ECEE;
  --sc-color-brand-subheading: #9CA7AB;
  --sc-color-brand-pastel-pink: #FCF2F7;
  --sc-color-brand-pastel-orange: #FEF9F6;
  --sc-color-brand-pastel-purple: #F7F6FE;
  --sc-color-brand-pastel-green: #E6F9EE;

  /** Colors */
  --sc-color-black: #000;
  --sc-color-white: #fff;
  --sc-color-gray-50: #f9fafb;
  --sc-color-gray-100: #f3f4f6;
  --sc-color-gray-200: #e5e7eb;
  --sc-color-gray-300: #dce0e6;
  --sc-color-gray-400: #9ca3af;
  --sc-color-gray-500: #6b7280;
  --sc-color-gray-600: #4b5563;
  --sc-color-gray-700: #374151;
  --sc-color-gray-800: #1f2937;
  --sc-color-gray-900: #111827;
  --sc-color-gray-950: #0d131e;

  --sc-color-neutral-50: #fafafa;
  --sc-color-neutral-100: whitesmoke;
  --sc-color-neutral-200: #e5e5e5;
  --sc-color-neutral-300: #d4d4d4;
  --sc-color-neutral-400: #a3a3a3;
  --sc-color-neutral-500: #737373;
  --sc-color-neutral-600: #525252;
  --sc-color-neutral-700: #404040;
  --sc-color-neutral-800: #262626;
  --sc-color-neutral-900: #171717;
  --sc-color-neutral-950: #0f0f0f;

  --sc-color-primary: 217;
  --sc-color-primary-luminance: 60%;
  --sc-color-primary-saturation: 91%;
  --sc-color-primary-50: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), min(calc(var(--sc-color-primary-luminance) * 1.55), 100%));
  --sc-color-primary-100: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), min(calc(var(--sc-color-primary-luminance) * 1.45), 100%));
  --sc-color-primary-200: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), min(calc(var(--sc-color-primary-luminance) * 1.35), 100%));
  --sc-color-primary-300: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), min(calc(var(--sc-color-primary-luminance) * 1.25), 100%));
  --sc-color-primary-400: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), min(calc(var(--sc-color-primary-luminance) * 1.15), 100%));
  --sc-color-primary-500: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), var(--sc-color-primary-luminance));
  --sc-color-primary-600: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), max(calc(var(--sc-color-primary-luminance) * 0.9), 0%));
  --sc-color-primary-700: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), max(calc(var(--sc-color-primary-luminance) * 0.75), 0%));
  --sc-color-primary-800: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), max(calc(var(--sc-color-primary-luminance) * 0.6), 0%));
  --sc-color-primary-900: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), max(calc(var(--sc-color-primary-luminance) * 0.35), 0%));
  --sc-color-primary-950: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), max(calc(var(--sc-color-primary-luminance) * 0.2), 0%));
  --sc-color-primary-text: var(--sc-color-white);
  --sc-color-success-50: #f0fdf4;
  --sc-color-success-100: #dcfce7;
  --sc-color-success-200: #bbf7d0;
  --sc-color-success-300: #86efac;
  --sc-color-success-400: #4ade80;
  --sc-color-success-500: #22c55e;
  --sc-color-success-600: #16a34a;
  --sc-color-success-700: #15803d;
  --sc-color-success-800: #166534;
  --sc-color-success-900: #14532d;
  --sc-color-success-950: #0d381e;
  --sc-color-success-text: var(--sc-color-white);
  --sc-color-info-50: #eff6ff;
  --sc-color-info-100: #dbeafe;
  --sc-color-info-200: #bfdbfe;
  --sc-color-info-300: #93c5fd;
  --sc-color-info-400: #60a5fa;
  --sc-color-info-500: #3b82f6;
  --sc-color-info-600: #2563eb;
  --sc-color-info-700: #1d4ed8;
  --sc-color-info-800: #1e40af;
  --sc-color-info-900: #1e3a8a;
  --sc-color-info-text: var(--sc-color-white);
  --sc-color-warning-50: #fffbeb;
  --sc-color-warning-100: #fef3c7;
  --sc-color-warning-200: #fde68a;
  --sc-color-warning-300: #fcd34d;
  --sc-color-warning-400: #fbbf24;
  --sc-color-warning-500: #f59e0b;
  --sc-color-warning-600: #d97706;
  --sc-color-warning-700: #b45309;
  --sc-color-warning-800: #92400e;
  --sc-color-warning-900: #78350f;
  --sc-color-warning-950: #4d220a;
  --sc-color-warning-text: var(--sc-color-white);
  --sc-color-danger-50: #fef2f2;
  --sc-color-danger-100: #fee2e2;
  --sc-color-danger-200: #fecaca;
  --sc-color-danger-300: #fca5a5;
  --sc-color-danger-400: #f87171;
  --sc-color-danger-500: #ef4444;
  --sc-color-danger-600: #dc2626;
  --sc-color-danger-700: #b91c1c;
  --sc-color-danger-800: #991b1b;
  --sc-color-danger-900: #7f1d1d;
  --sc-color-danger-950: #481111;
  --sc-color-danger-text: var(--sc-color-white);
  --sc-border-radius-small: 0.15em;
  --sc-border-radius-medium: 0.25em;
  --sc-border-radius-large: 0.5em;
  --sc-border-radius-x-large: 0.75em;
  --sc-border-radius-circle: 50%;
  --sc-border-radius-pill: 9999px;
  --sc-shadow-x-small: 0 1px 0 #0d131e0d;
  --sc-shadow-small: 0 1px 2px #0d131e1a;
  --sc-shadow-medium: 0 0 #000,0 0 #000,0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --sc-shadow-large: 0 2px 8px #0d131e1a;
  --sc-shadow-x-large: 0 4px 16px #0d131e1a;
  --sc-spacing-xxx-small: 0.125em;
  --sc-spacing-xx-small: 0.25em;
  --sc-spacing-x-small: 0.5em;
  --sc-spacing-small: 0.75em;
  --sc-spacing-medium: 1em;
  --sc-spacing-large: 1.25em;
  --sc-spacing-x-large: 1.75em;
  --sc-spacing-xx-large: 2.25em;
  --sc-spacing-xxx-large: 3em;
  --sc-spacing-xxxx-large: 4.5em;
  --sc-transition-x-slow: 1000ms;
  --sc-transition-slow: 500ms;
  --sc-transition-medium: 350ms;
  --sc-transition-fast: 150ms;
  --sc-transition-x-fast: 50ms;
  --sc-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --sc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --sc-font-serif: Georgia, 'Times New Roman', serif;
  --sc-font-size-xx-small: 0.625em;
  --sc-font-size-x-small: 0.75em;
  --sc-font-size-small: 0.875em;
  --sc-font-size-medium: 1em;
  --sc-font-size-large: 1.15em;
  --sc-font-size-x-large: 1.25em;
  --sc-font-size-xx-large: 1.45em;
  --sc-font-size-xxx-large: 3em;
  --sc-font-size-xxxx-large: 4.5em;
  --sc-font-weight-light: 300;
  --sc-font-weight-normal: 400;
  --sc-font-weight-semibold: 500;
  --sc-font-weight-bold: 600;
  --sc-letter-spacing-dense: -0.015em;
  --sc-letter-spacing-normal: normal;
  --sc-letter-spacing-loose: 0.075em;
  --sc-line-height-dense: 1.4;
  --sc-line-height-normal: 1.8;
  --sc-line-height-loose: 2.2;
  --sc-focus-ring-color-primary: var(--sc-color-primary-500);
  --sc-focus-ring-color-success: #22c55e54;
  --sc-focus-ring-color-info: #6b728054;
  --sc-focus-ring-color-warning: #f59e0b54;
  --sc-focus-ring-color-danger: #ef444454;
  --sc-focus-ring-width: 1px;
  --sc-button-font-size-small: var(--sc-font-size-x-small);
  --sc-button-font-size-medium: var(--sc-font-size-medium);
  --sc-button-font-size-large: var(--sc-font-size-large);
  --sc-column-spacing: var(--sc-spacing-xx-large);
  --sc-form-row-spacing: var(--sc-spacing-small);
  --sc-form-row-spacing-large: var(--sc-spacing-xx-large);
  --sc-form-title-font-weight: var(--sc-font-weight-semibold);
  --sc-form-title-font-size: var(--sc-font-size-x-large);
  --sc-form-title-description-color: var(--sc-color-gray-500);
  --sc-form-title-description-size: var(--sc-font-size-medium);
  --sc-choice-background-color: var(--sc-color-white);
  --sc-card-border: solid 1px var(--sc-input-border-color);
  --sc-choice-border: solid var(--sc-input-border-width) var(--sc-input-border-color);
  --sc-choice-box-shadow: var(--sc-input-box-shadow);
  --sc-drawer-border: solid var(--sc-input-border-width) var(--sc-input-border-color);
  --sc-drawer-header-spacing: var(--sc-spacing-large);
  --sc-drawer-body-spacing: var(--sc-spacing-large);
  --sc-drawer-footer-spacing: var(--sc-spacing-large);
  --sc-input-transition: var(--sc-transition-medium);
  --sc-input-box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --sc-input-height-small: 2.25em;
  --sc-input-height-medium: 2.8em;
  --sc-input-height-large: 3.0em;
  --sc-input-background-color: var(--sc-color-white);
  --sc-input-background-color-hover: var(--sc-color-white);
  --sc-input-background-color-focus: var(--sc-color-white);
  --sc-input-background-color-disabled: var(--sc-color-gray-100);
  --sc-input-border: solid var(--sc-input-border-width) var(--sc-input-border-color);
  --sc-input-border-color: var(--sc-color-gray-300);
  --sc-input-border-color-hover: var(--sc-color-gray-400);
  --sc-input-border-color-focus: var(--sc-color-primary-500);
  --sc-input-border-color-disabled: var(--sc-color-gray-300);
  --sc-input-border-color-invalid: var(--sc-color-danger-500);
  --sc-input-border-width: 1px;
  --sc-input-border-radius-small: var(--sc-border-radius-small);
  --sc-input-border-radius-medium: var(--sc-border-radius-medium);
  --sc-input-border-radius-large: var(--sc-border-radius-medium);
  --sc-input-font-family: var(--sc-font-sans);
  --sc-input-font-weight: var(--sc-font-weight-normal);
  --sc-input-font-size-small: var(--sc-font-size-small);
  --sc-input-font-size-medium: var(--sc-font-size-medium);
  --sc-input-font-size-large: var(--sc-font-size-large);
  --sc-input-label-font-weight: var(--sc-font-weight-semibold);
  --sc-input-label-margin: var(--sc-spacing-xx-small);
  --sc-input-letter-spacing: var(--sc-letter-spacing-normal);
  --sc-input-color: var(--sc-color-gray-700);
  --sc-input-color-hover: var(--sc-color-gray-700);
  --sc-input-color-focus: var(--sc-color-gray-700);
  --sc-input-color-disabled: var(--sc-color-gray-900);
  --sc-input-icon-color: var(--sc-color-gray-400);
  --sc-input-icon-color-hover: var(--sc-color-gray-600);
  --sc-input-icon-color-focus: var(--sc-color-gray-600);
  --sc-input-placeholder-color: var(--sc-color-gray-400);
  --sc-input-placeholder-color-disabled: var(--sc-color-gray-600);
  --sc-input-spacing-small: var(--sc-spacing-small);
  --sc-input-spacing-medium: var(--sc-spacing-medium);
  --sc-input-spacing-large: var(--sc-spacing-large);
  --sc-input-label-font-size-small: var(--sc-font-size-small);
  --sc-input-label-font-size-medium: var(--sc-font-size-medium);
  --sc-input-label-font-size-large: var(--sc-font-size-large);
  --sc-input-label-color: var(--sc-color-gray-600);
  --sc-input-help-text-font-size-small: var(--sc-font-size-x-small);
  --sc-input-help-text-font-size-medium: var(--sc-font-size-small);
  --sc-input-help-text-font-size-large: var(--sc-font-size-medium);
  --sc-input-help-text-color: var(--sc-color-gray-500);
  --sc-input-error-text-font-size-small: var(--sc-input-help-text-font-size-small);
  --sc-input-error-text-font-size-medium: var(--sc-input-help-text-font-size-small);
  --sc-input-error-text-font-size-large: var(--sc-input-help-text-font-size-small);
  --sc-input-error-text-color: var(--sc-color-danger-500);
  --sc-toggle-size: 1em;
  --sc-toggle-shady-color: var(--sc-color-gray-50);
  --sc-radio-size: 1em;
  --sc-checkbox-size: 1em;
  --sc-overlay-background-color: #37415180;
  --sc-panel-background-color: var(--sc-color-white);
  --sc-panel-border-color: var(--sc-color-gray-200);
  --sc-tooltip-border-radius: var(--sc-border-radius-medium);
  --sc-tooltip-background-color: var(--sc-color-gray-900);
  --sc-tooltip-color: var(--sc-color-white);
  --sc-tooltip-font-family: var(--sc-font-sans);
  --sc-tooltip-font-weight: var(--sc-font-weight-normal);
  --sc-tooltip-font-size: var(--sc-font-size-small);
  --sc-tooltip-line-height: var(--sc-line-height-dense);
  --sc-tooltip-padding: var(--sc-spacing-xx-small) var(--sc-spacing-x-small);
  --sc-tooltip-arrow-size: 5px;
  --sc-tooltip-arrow-start-end-offset: 8px;
  --sc-quantity-control-height: 2em;
  --sc-z-index-drawer: 99999;
  --sc-z-index-dialog: 100000;
  --sc-z-index-dropdown: 900;
  --sc-z-index-toast: 950;
  --sc-z-index-tooltip: 1000;
  --sc-checkout-columns: 1;
  --sc-dashboard-module-spacing: var(--sc-spacing-x-small);
  --sc-border-width-zero: 0px;
}

sc-checkout [hidden] {
  display: none !important;
}

.sc-scroll-lock {
  overflow: hidden !important;
}

.surecart-theme-dark {
  /** Let's make these less blue for basic dark mode **/
  --sc-color-gray-50: var(--sc-color-neutral-50);
  --sc-color-gray-100: var(--sc-color-neutral-100);
  --sc-color-gray-200: var(--sc-color-neutral-200);
  --sc-color-gray-300: var(--sc-color-neutral-300);
  --sc-color-gray-400: var(--sc-color-neutral-400);
  --sc-color-gray-500: var(--sc-color-neutral-500);
  --sc-color-gray-600: var(--sc-color-neutral-600);
  --sc-color-gray-700: var(--sc-color-neutral-700);
  --sc-color-gray-800: var(--sc-color-neutral-800);
  --sc-color-gray-900: var(--sc-color-neutral-900);
  --sc-color-gray-950: var(--sc-color-neutral-950);

  /* Inputs */
  --sc-input-label-color: var(--sc-color-gray-300);
  --sc-input-background-color-hover: var(--sc-color-gray-900);
  --sc-input-background-color-focus: var(--sc-color-gray-900);
  --sc-input-background-color-disabled: var(--sc-color-gray-800);
  --sc-input-border-color-focus: var(--sc-color-gray-500);
  --sc-input-border-color-disabled: var(--sc-color-gray-200);
  --sc-input-font-family: var(--sc-font-sans);
  --sc-input-font-weight: var(--sc-font-weight-normal);
  --sc-input-font-size-small: var(--sc-font-size-small);
  --sc-input-font-size-medium: var(--sc-font-size-medium);
  --sc-input-font-size-large: var(--sc-font-size-large);
  --sc-input-letter-spacing: var(--sc-letter-spacing-normal);
  --sc-input-border-color: var(--sc-color-gray-700);
  --sc-input-border-color-hover: var(--sc-color-gray-600);
  --sc-input-border-color-focus: var(--sc-color-primary-500);
  --sc-input-border-color-disabled: var(--sc-color-gray-700);
  --sc-input-border-color-invalid: var(--sc-color-danger-500);
  --sc-input-border: solid var(--sc-input-border-width) var(--sc-input-border-color);
  --sc-input-color: var(--sc-color-gray-200);
  --sc-input-color-hover: var(--sc-color-gray-200);
  --sc-input-color-focus: var(--sc-color-gray-200);
  --sc-input-color-disabled: var(--sc-color-gray-100);
  --sc-input-color-invalid: var(--sc-color-danger-600);
  --sc-input-icon-color: var(--sc-color-gray-500);
  --sc-input-icon-color-hover: var(--sc-color-gray-300);
  --sc-input-icon-color-focus: var(--sc-color-gray-300);
  --sc-input-placeholder-color: var(--sc-color-gray-500);
  --sc-input-placeholder-color-disabled: var(--sc-color-gray-400);
  --sc-input-help-text-color: var(--sc-color-gray-400);
  --sc-list-row-background-color: var(--sc-color-gray-950);
  --sc-badge-notice-background-color: var(--sc-color-gray-950);
  --sc-divider-text-background-color: var(--sc-color-gray-900);
  --sc-badge-notice-text-color: var(--sc-color-gray-300);
  --sc-list-row-color: var(--sc-color-gray-300);
  --sc-empty-color: var(--sc-color-gray-300);
  --sc-empty-icon-color: var(--sc-color-gray-300);
  --sc-tab-active-background: var(--sc-color-gray-800);
  --sc-menu-item-color: var(--sc-color-gray-300);
  --sc-line-item-title-color: var(--sc-color-gray-300);
  --sc-order-summary-color: var(--sc-color-gray-300);
  --sc-order-collapse-link-icon-color: var(--sc-color-gray-300);
  --sc-input-control-background-color: var(--sc-color-gray-900);
  --sc-block-ui-background-color: var(--sc-color-gray-800);
  --sc-select-background-color: var(--sc-color-gray-900);
  --sc-input-background-color: var(--sc-color-gray-900);
  --sc-button-default-background-color: var(--sc-color-gray-900);
  --sc-button-default-hover-background-color: var(--sc-color-gray-900);
  --sc-button-default-active-background-color: var(--sc-button-default-hover-background-color);
  --sc-button-default-focus-background-color: var(--sc-button-default-hover-background-color);
  --sc-button-default-active-border-color: var(--sc-color-gray-600);
  --sc-button-default-focus-border-color: var(--sc-color-gray-600);
  --sc-toggle-background-color: var(--sc-color-gray-950);
  --sc-card-background-color: var(--sc-color-gray-950);
  --sc-table-cell-background-color: var(--sc-color-gray-800);
  --sc-alert-background-color: var(--sc-color-gray-800);
  --sc-alert-title-color: var(--sc-color-white);
  --sc-input-control-color: var(--sc-color-gray-300);
  --sc-alert-primary-color: var(--sc-color-gray-300);
  --sc-alert-info-color: var(--sc-color-gray-300);
  --sc-alert-danger-color: var(--sc-color-gray-300);
  --sc-alert-warning-color: var(--sc-color-gray-300);
  --sc-alert-success-color: var(--sc-color-gray-300);
  --sc-alert-primary-title-color: var(--sc-color-gray-300);
  --sc-alert-info-title-color: var(--sc-color-gray-300);
  --sc-alert-danger-title-color: var(--sc-color-gray-300);
  --sc-alert-warning-title-color: var(--sc-color-gray-300);
  --sc-alert-success-title-color: var(--sc-color-gray-300);
  --sc-breadcrumb-item-label-color: var(--sc-color-gray-300);
  --sc-breadcrumb-item-label-active-color: var(--sc-color-gray-200);
  --sc-button-default-color: var(--sc-color-gray-300);
  --sc-breadcrumb-color: var(--sc-color-gray-300);
  --sc-stacked-list-row-text-color: var(--sc-color-gray-300);
  --sc-order-confirmation-color: var(--sc-color-gray-300);
  --sc-card-border-color: var(--sc-color-gray-600);
  --sc-select-border-color: var(--sc-color-gray-600);
  --sc-button-default-border-color: var(--sc-color-gray-600);
  --sc-stacked-list-border-color: var(--sc-color-gray-600);
  --sc-divider-border-top-color: var(--sc-color-gray-600);
  --sc-input-border-color: var(--sc-color-gray-600);
  --sc-table-border-bottom-color: var(--sc-color-gray-600);
  --sc-toggle-border-color: var(--sc-color-gray-600);
  --sc-toggle-shady-color: var(--sc-color-gray-800);
  --sc-table-row-border-bottom-color: var(--sc-color-gray-600);
  --sc-badge-notice-border-color: var(--sc-color-gray-600);
  --sc-stacked-list-row-hover-color: var(--sc-color-gray-800);
  --sc-skeleton-color: var(--sc-color-gray-800);
  --sc-skeleton-sheen-color: var(--sc-color-gray-700);
  --sc-switch-background-thumb-color: var(--sc-color-gray-900);
  --sc-switch-background-thumb-hover-color: var(--sc-color-gray-900);
  --sc-swith-label-color: var(--sc-color-gray-300);
  --sc-switch-description-color: var(--sc-color-gray-400);
  --sc-switch-control-background-color: var(--sc-color-gray-700);
  --sc-switch-border-color: var(--sc-color-gray-700);
  --sc-switch-control-hover-background-color: var(--sc-color-gray-600);
  --sc-switch-control-hover-border-color: var(--sc-color-gray-600);
  --sc-switch-checked-control-background-color: var(--sc-color-primary-600);
  --sc-switch-checked-control-border-color: var(--sc-color-primary-600);

  /* Overlays */
  --sc-overlay-background-color: #d1d5db22;

  /*  Panels */
  --sc-panel-background-color: var(--sc-color-gray-900);
  --sc-panel-border-color: var(--sc-color-gray-800);

  /* Tooltips */
  --sc-tooltip-background-color: var(--sc-color-gray-200);
  --sc-tooltip-color: var(--sc-color-black);

  /* Choice */
  --sc-choice-background-color: var(--sc-color-gray-900);
  --sc-choice-border: solid var(--sc-input-border-width) var(--sc-input-border-color);

  /** Stripe */
  --sc-stripe-color-logo: 'dark';
  --sc-stripe-color-tag: 'dark';
  --sc-stripe-color-logo-tab-selected: 'dark';
  --sc-stripe-color-tab-selected: 'dark';

  /** Drawer **/
  --sc-drawer-border: solid var(--sc-input-border-width) var(--sc-input-border-color);

  /** Cart **/
  --sc-cart-counter-background: var(--sc-color-gray-50);
  --sc-cart-counter-color: var(--sc-color-gray-950);
}

/* Avatar */
.surecart-theme-dark sc-table {
  color: var(--sc-color-gray-300);
}

/* Avatar */
.surecart-theme-dark sc-avatar::part(base) {
  background-color: var(--sc-color-gray-700);
  color: var(--sc-color-gray-300);
}

/* Button */
.surecart-theme-dark sc-button[type='default']::part(base) {
  background-color: var(--sc-color-gray-900);
  border-color: var(--sc-color-gray-700);
  color: var(--sc-color-gray-400);
}

.surecart-theme-dark sc-button[type='default']:not([disabled])::part(base):hover {
  background-color: var(--sc-color-primary-950);
  border-color: var(--sc-color-primary-800);
  color: var(--sc-color-primary-500);
}

.surecart-theme-dark sc-button[type='default']:not([disabled])::part(base):focus {
  background-color: var(--sc-color-primary-950);
  border-color: var(--sc-color-primary-800);
  color: var(--sc-color-primary-500);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) hsla(var(--sc-color-primary-hue), var(--sc-color-primary-saturation), 50%, var(--sc-focus-ring-alpha));
}

.surecart-theme-dark sc-button[type='default']:not([disabled])::part(base):active {
  background-color: var(--sc-color-primary-900);
  border-color: var(--sc-color-primary-700);
  color: var(--sc-color-primary-300);
}

.surecart-theme-dark sc-button[type='text']::part(base) {
  color: var(--sc-color-gray-400);
}

.surecart-theme-dark sc-button[type='text']:not([disabled])::part(base):active,
.surecart-theme-dark sc-button[type='text']:not([disabled])::part(base):hover,
.surecart-theme-dark sc-button[type='text']:not([disabled])::part(base):focus {
  color: var(--sc-color-gray-300);
}

/* Card */
.surecart-theme-dark sc-card::part(base) {
  background-color: var(--sc-color-gray-900);
  --border-color: var(--sc-color-gray-800);
}

/* Color picker */
.surecart-theme-dark sc-color-picker::part(format-button) {
  background-color: var(--sc-color-gray-900);
  border-color: var(--sc-color-gray-700);
  color: var(--sc-color-gray-400);
}

.surecart-theme-dark sc-color-picker::part(format-button):hover {
  background-color: var(--sc-color-primary-950);
  border-color: var(--sc-color-primary-800);
  color: var(--sc-color-primary-500);
}

.surecart-theme-dark sc-color-picker::part(format-button):focus {
  background-color: var(--sc-color-primary-950);
  border-color: var(--sc-color-primary-800);
  color: var(--sc-color-primary-500);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) hsla(var(--sc-color-primary-hue), var(--sc-color-primary-saturation), 50%, var(--sc-focus-ring-alpha));
}

.surecart-theme-dark sc-color-picker::part(format-button):active {
  background-color: var(--sc-color-primary-900);
  border-color: var(--sc-color-primary-700);
  color: var(--sc-color-primary-300);
}

.surecart-theme-dark sc-color-picker::part(panel) {
  background-color: var(--sc-color-gray-900);
  border-color: var(--sc-color-gray-800);
}

.surecart-theme-dark sc-color-picker::part(slider-handle) {
  background-color: var(--sc-color-gray-800);
  box-shadow: 0 0 0 1px var(--sc-color-gray-600);
}

.surecart-theme-dark sc-color-picker::part(slider-handle):focus {
  box-shadow: 0 0 0 1px var(--sc-color-primary-500), 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);
}

.surecart-theme-dark sc-color-picker::part(grid-handle) {
  border-color: var(--sc-color-gray-900);
}

.surecart-theme-dark sc-color-picker::part(preview),
.surecart-theme-dark sc-color-picker::part(opacity-slider),
.surecart-theme-dark sc-color-picker::part(trigger) {
  background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(45deg, transparent 75%, #333 75%),
    linear-gradient(45deg, #333 25%, transparent 25%);
}

.surecart-theme-dark sc-color-picker::part(swatches) {
  border-top-color: var(--sc-color-gray-800);
}

/* Details */
.surecart-theme-dark sc-details::part(base) {
  border-color: var(--sc-color-gray-800);
}

/* Icon button */
.surecart-theme-dark sc-icon-button::part(base) {
  color: var(--sc-color-gray-400);
}

.surecart-theme-dark sc-icon-button:not([disabled])::part(base):hover,
.surecart-theme-dark sc-icon-button:not([disabled])::part(base):focus {
  color: var(--sc-color-primary-500);
}

.surecart-theme-dark sc-icon-button:not([disabled])::part(base):active {
  color: var(--sc-color-primary-500);
}

/* Image comparer */
.surecart-theme-dark sc-image-comparer::part(divider),
.surecart-theme-dark sc-image-comparer::part(handle) {
  background-color: var(--sc-color-gray-900);
  color: var(--sc-color-gray-400);
}

/* Menu item */
.surecart-theme-dark sc-menu-item::part(base) {
  color: var(--sc-color-gray-200);
}

.surecart-theme-dark sc-menu-item::part(base):focus {
  background-color: var(--sc-color-primary-600);
  color: var(--sc-color-white);
}

.surecart-theme-dark sc-menu-item[disabled]::part(base) {
  color: var(--sc-color-gray-600);
}

/* Menu label */
.surecart-theme-dark sc-menu-label::part(base) {
  color: var(--sc-color-gray-600);
}

/* Progress bar */
.surecart-theme-dark sc-progress-bar::part(base) {
  background-color: var(--sc-color-gray-800);
}

.surecart-theme-dark sc-progress-bar::part(indicator) {
  color: var(--sc-color-gray-900);
}

/* Progress ring */
.surecart-theme-dark sc-progress-ring::part(base) {
  --track-color: var(--sc-color-gray-800);
}

/* Range */
.surecart-theme-dark sc-range {
  --track-color: var(--sc-color-gray-800);
}

/* Rating */
.surecart-theme-dark sc-rating {
  --symbol-color: var(--sc-color-gray-700);
}

/* Select */
.surecart-theme-dark sc-select::part(tag) {
  background-color: var(--sc-color-info-800);
  border-color: var(--sc-color-info-700);
  color: var(--sc-color-info-300);
}

/* Spinner */
.surecart-theme-dark sc-spinner {
  --track-color: #f9fafb20;
}

/* Secure notice */
.surecart-theme-dark sc-secure-notice::part(icon) {
  color: var(--sc-color-gray-700);
}

.surecart-theme-dark sc-secure-notice::part(text) {
  color: var(--sc-color-gray-400);
}

/* Tab group */
.surecart-theme-dark sc-tab-group::part(tabs) {
  --tabs-border-color: var(--sc-color-gray-800);
}

/* Tab */
.surecart-theme-dark sc-tab::part(base) {
  color: var(--sc-color-gray-400);
}

.surecart-theme-dark sc-tab:not([disabled])::part(base):hover,
.surecart-theme-dark sc-tab[active]::part(base) {
  color: var(--sc-color-primary-500);
}

/* Tag */
.surecart-theme-dark sc-tag[type='primary']::part(base) {
  background-color: var(--sc-color-primary-950);
  border-color: var(--sc-color-primary-900);
  color: var(--sc-color-primary-300);
}

.surecart-theme-dark sc-tag[type='success']::part(base) {
  background-color: var(--sc-color-success-950);
  border-color: var(--sc-color-success-900);
  color: var(--sc-color-success-300);
}

.surecart-theme-dark sc-tag[type='info']::part(base) {
  background-color: var(--sc-color-info-800);
  border-color: var(--sc-color-info-700);
  color: var(--sc-color-info-300);
}

.surecart-theme-dark sc-tag[type='warning']::part(base) {
  background-color: var(--sc-color-warning-950);
  border-color: var(--sc-color-warning-900);
  color: var(--sc-color-warning-300);
}

.surecart-theme-dark sc-tag[type='danger']::part(base) {
  background-color: var(--sc-color-danger-950);
  border-color: var(--sc-color-danger-900);
  color: var(--sc-color-danger-300);
}

.surecart-theme-dark sc-form-section::part(title) {
  color: var(--sc-color-white);
}

.surecart-theme-dark sc-form-section::part(description) {
  color: var(--sc-color-gray-400);
}

.surecart-theme-dark sc-heading,
.surecart-theme-dark sc-form-row,
.surecart-theme-dark sc-form-control,
.surecart-theme-dark sc-menu-label,
.surecart-theme-dark sc-customer-details,
.surecart-theme-dark .menu-item,
.surecart-theme-dark sc-column,
.surecart-theme-dark paypal-buttons,
.surecart-theme-dark sc-stacked-list,
.surecart-theme-dark sc-stripe-element,
.surecart-theme-dark sc-stripe-payment-element,
.surecart-theme-dark sc-stripe-payment-request,
.surecart-theme-dark sc-text,
.surecart-theme-dark sc-card,
.surecart-theme-dark sc-tooltip,
.surecart-theme-dark sc-tag-panel,
.surecart-theme-dark sc-toggles,
.surecart-theme-dark sc-dashboard-module,
.surecart-theme-dark entry-title,
.surecart-theme-dark sc-toggle,
.surecart-theme-dark sc-tab-group,
.surecart-theme-dark sc-login-form
{
  color: var(--sc-color-gray-300);
}

