/*
 * variable naming convention:
 * --{component name (if applicable)}-{style property}-{...modifiers (if applicable, hyphen separated)}
 * example: --foo-background-color-light
 */

:root {
  /* color palette */
  --white: #ffffff;
  --dark-workspace-color: #53636e;
  --stroke-light: #b3bfc6;
  --stroke-dark: #5d676f;
  --gray-10: #fdfdfe;
  --gray-20: #f2f2f2;
  --gray-30: #e0e0e0;
  --gray-40: #cccccc;
  --gray-50: #757575;
  --gray-60: #666666;
  --gray-80: #4d4d4d;
  --gray-90: #333333;
  --accent-dark: #02101a;
  --accent-medium: #283640;
  --accent-light: #d4dde0;
  --accent-success: #a5db75;
  --accent-success-high-contrast: #4fa630;
  --accent-success-light: #d1ffa4;
  --accent-success-dark: #57a711;
  --accent-error: #d93251;
  --accent-error-active: #c92e40;
  --accent-danger-active: #fea7a6;
  --accent-danger: #fe6d6b;
  --accent-danger-light: #f7846c;
  --accent-warning: #ffdd75;
  --accent-warning-light: #ffa1a1;
  --accent-caution: #ffe69f;
  --accent-warning-dark: #b88a00;
  --accent-info: #6cdaf2;
  --accent-info-light: #83e4fa;
  --accent-info-active: #a7e9f7;
  --accent-primary: #3c7aae;
  --accent-primary-active: #316091;
  --accent-error-disabled: #db6379;
  --accent-primary-disabled: #78a6d8;
  --accent-secondary: var(--gray-20);
  --accent-secondary-active: var(--gray-30);
  --light-workspace-color: #f7f7f7;
  --focus-light: #b51ad1;
  --focus-dark: #f5a4ff;
  --issue-critical: var(--accent-danger-active);
  --issue-serious: var(--accent-caution);
  --issue-moderate: #f0c4f8;
  --issue-minor: var(--gray-20);

  /* radius */
  --radius-0: 0;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-9999: 9999px;

  /* text colours */
  --text-color-base: var(--gray-60);
  --text-color-light: var(--white);
  --text-color-light-disabled: rgba(255, 255, 255, 0.5);
  --header-text-color: var(--gray-80);
  --header-text-color-dark: var(--gray-90);

  /* background colours */
  --background-light: #f0f2f5;

  /* accents */
  --error: var(--accent-error);
  --disabled: var(--gray-40);
  --focus: var(--focus-light);
  --warning: var(--accent-caution);
  --error-alt: var(--accent-warning-light);
  --info: var(--accent-info-light);
  --success: var(--accent-success-light);
  --focus-active: rgba(215, 30, 247, 0.25);
  --focus-glow: rgba(181, 26, 209, 0.75);
  --metric-accent-low: var(--accent-danger-light);
  --metric-accent-mid: #8ba6c5;
  --metric-accent-full: var(--accent-success);

  /* spacing (padding/margin) */
  --space-quarter: 2px;
  --space-half: 4px;
  --space-three-quarters: 6px;
  --space-smallest: 8px;
  --space-smaller: 12px;
  --space-small: 16px;
  --space-medium: 18px;
  --space-large: 24px;
  --space-largest: 32px;
  --space-large-with-underborder: 18px 24px;
  --space-gutter: 40px;

  /* text size */
  --text-size-largest: 112px;
  --text-size-larger: 56px;
  --text-size-large: 45px;
  --text-size-large-medium: 34px;
  --text-size-medium-large: 32px;
  --text-size-medium: 24px;
  --text-small-medium: 20px;
  --text-size-normal: 18px;
  --text-size-small: 15px;
  --text-size-smaller: 13px;
  --text-size-smallest: 12px;

  /* fonts */
  --base-font-family: 'Roboto', Helvetica, Arial, sans-serif;

  /* icon sizes */
  --icon-size: 24px;

  /* dimensions */
  --border-width: 6px;
  --layout-padding: 9px;
  --content-max-width: 1000px;

  /* z-index */
  --z-index-tooltip: 22;
  --z-index-loader: 8;
  --z-index-scrim: 7;
  --z-index-dialog: 21;
  --z-index-dialog-scrim: 20;
  --z-index-scrim-action-needed: 23;
  --z-index-top-nav: 9;
  --z-index-side-bar: 9;
  --z-index-toast: 8;
  --z-index-toast-action-needed: 24;
  /* ensure this is a higher value than the rest (above)! */
  --z-index-top-bar: 25;
  /* ensure these are 1 higher than the top bar z-index */
  --z-index-skip-container: calc(var(--z-index-top-bar) + 1);
  --z-index-drawer: calc(var(--z-index-top-bar) + 1);
  --z-index-listbox: calc(var(--z-index-top-bar) + 1);

  /* radio card */
  --radio-card-width: 255px;
  --radio-card-height: 229px;

  /* target size */
  /* Note: target-size is deprecated, use --target-size-enhanced or --target-size-minimum */
  --target-size: 44px;
  --target-size-enhanced: var(--target-size);
  --target-size-minimum: 24px;

  /* drop shadows */
  --drop-shadow-overlay:
    0 8px 8px -4px rgba(0, 0, 0, 0.04), 0 20px 24px -4px rgba(51, 51, 51, 0.08);
  --drop-shadow-raised:
    0 2px 4px -2px rgba(51, 51, 51, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
}

.cauldron--theme-dark {
  --focus: var(--focus-dark);
}

:root {
  --text-size-base: 16px;

  /* headings */
  --text-size-heading-1: 1.875rem; /* 30px */
  --text-size-heading-2: 1.5rem; /* 24px */
  --text-size-heading-3: 1.25rem; /* 20px */
  --text-size-heading-4: 1.125rem; /* 18px */
  --text-size-heading-5: 1rem; /* 16px */
  --text-size-heading-6: 1rem; /* 16px */

  --line-height-heading-1: 1.3;
  --line-height-heading-2: 1.3;
  --line-height-heading-3: 1.3;
  --line-height-heading-4: 1.5;
  --line-height-heading-5: 1.5;
  --line-height-heading-6: 1.5;

  /* weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-ultra-bold: 900;

  /* display */
  --text-size-display-stat: 2.5rem; /* 36px */
  --text-size-display-stat-small: 1.875; /* 30px */

  --line-height-display-stat: 1.3;

  /* buttons */
  --text-size-button: 1rem; /* 16px */

  /* body */
  --text-size-body: 1rem; /* 16px */
  --text-size-body-small: 0.875rem; /* 14px */
  --line-height-body: 1.5;
  --line-height-body-small: 1.7;
}

:root {
  --workspace-background-color: #f0f2f5;
  --heading-text-color: var(--header-text-color-dark);
}

.cauldron--theme-dark {
  --workspace-background-color: var(--dark-workspace-color);
  color-scheme: dark;
}

.cauldron--theme-light {
  color-scheme: light;
}

html {
  box-sizing: border-box;
}

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

body {
  font-family: var(--base-font-family);
  font-style: normal;
  font-weight: 400;
  color: var(--text-color-base);
  margin: 0;
  padding: 0;
  background-color: var(--workspace-background-color);
  font-size: var(--text-size-small);
}

:focus {
  outline: 2px solid var(--focus);
  outline-offset: var(--space-quarter);
}

h1 {
  margin: 0;
  padding: 18px 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
[role='heading'] {
  color: var(--heading-text-color);
}

ul {
  margin: 0;
  padding: 0;
}

button {
  font-family: var(--base-font-family);
  font-weight: 500;
}

button,
[role='button'] {
  display: inline-block;
  zoom: 1;
  line-height: normal;
  vertical-align: middle;
  text-align: center;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-drag: none;
  box-sizing: border-box;
  border: 0;
}

a {
  color: var(--link-text-color);
}

p {
  line-height: var(--line-height-body);
}

.cauldron--theme-dark h1,
.cauldron--theme-dark h2,
.cauldron--theme-dark h3,
.cauldron--theme-dark h4,
.cauldron--theme-dark h5,
.cauldron--theme-dark h6,
.cauldron--theme-dark [role='heading'] {
  --heading-text-color: white;
}

.Layout {
  top: var(--top-bar-height);
  padding: var(--layout-padding) var(--layout-padding) 0 var(--layout-padding);
  position: fixed;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}

.TopBar--thin .Layout {
  top: var(--top-bar-height-thin);
}

.Layout .Main {
  padding: var(--layout-padding) var(--layout-padding) 0 var(--layout-padding);
  border-left: var(--border-width) solid transparent;
}

.Layout .Main:focus {
  outline: 0;
  border-left-color: var(--gray-90);
}

/* the left-bar style focus indication */

.Content--focus-target,
[data-skip-target='true'] {
  position: relative;
}

.Content--focus-target::before,
[data-skip-target='true']::before {
  content: '';
  position: absolute;
  left: -15px;
  background-color: transparent;
  top: 0;
  bottom: 0;
  width: var(--border-width);
}

.Content--focus-target:focus,
[data-skip-target='true']:focus {
  outline: 0;
}

.Content--focus-target:focus::before,
[data-skip-target='true']:focus::before {
  background-color: var(--top-bar-background-color);
}

@media (min-width: 1024px) {
  body .SideBar {
    display: block;
    left: 0;
    transition: left 0.3s;
  }

  body .TopBar .TopBar__menu-trigger {
    display: none;
  }

  body:not(.Page--no-sidebar) .Layout {
    left: var(--menu-width);
  }

  body:not(.Page--no-sidebar) .Toast {
    left: var(--menu-width);
  }
}

@media (max-width: 460px) {
  body .Modal .Modal__inner {
    width: 301px;
  }
}

/* Dark Theme */

.cauldron--theme-dark .Layout {
  background-color: var(--dark-workspace-color);
  color: var(--layout-dark-color, var(--white));
}

.cauldron--theme-dark .Layout .Main:focus {
  border-left-color: var(--white);
}

.text--largest {
  font-size: var(--text-size-largest);
}

.text--larger {
  font-size: var(--text-size-larger);
}

.text--large {
  font-size: var(--text-size-large);
}

.text--large-medium {
  font-size: var(--text-size-large-medium);
}

.text--medium {
  font-size: var(--text-size-medium);
}

.text--normal {
  font-size: var(--text-size-normal);
}

.text--small-medium {
  font-size: var(--text-small-medium);
}

.text--small {
  font-size: var(--text-size-small);
}

.text--smaller {
  font-size: var(--text-size-smaller);
}

.text--smallest {
  font-size: var(--text-size-smallest);
}

.weight--thin {
  font-weight: var(--font-weight-thin);
}

.weight--light {
  font-weight: var(--font-weight-light);
}

.weight--normal {
  font-weight: var(--font-weight-normal);
}

.weight--medium {
  font-weight: var(--font-weight-medium);
}

.weight--bold {
  font-weight: var(--font-weight-bold);
}

.weight--ultra-bold {
  font-weight: var(--font-weight-ultra-bold);
}

.text--align-left {
  text-align: left !important;
  justify-content: left !important;
}

.text--align-center {
  text-align: center !important;
  justify-content: center !important;
}

.text--align-right {
  text-align: right !important;
  justify-content: right !important;
}

body .is--hidden {
  display: none;
}

.is--flex-row {
  display: flex;
  align-items: center;
}

ul.semantic-only {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

:root {
  --field-background-color: var(--white);
  --field-content-color: var(--text-color-base);
  --field-border-color: var(--gray-60);
  --field-border-color-underline: var(--gray-80);
  --field-border-color-hover: var(--gray-90);
  --field-border-color-focus: var(--accent-primary);
  --field-border-color-focus-hover: var(--accent-primary-active);
  --field-border-color-focus-glow: rgba(60, 122, 174, 0.7);
  --field-border-color-error: var(--accent-error);
  --field-border-color-error-hover: #c42f41;
  --field-border-color-error-focus-glow: rgba(217, 50, 81, 0.7);
  --field-border-color-disabled: rgba(204, 204, 204, 0.25);
  --field-border-radius: 4px;
  --field-background-color-disabled: var(--light-workspace-color);
  --field-placeholder-color: var(--gray-50);
  --field-required-text-color: var(--gray-60);
  --field-label-text-color: var(--gray-90);
  --field-label-error-text-color: var(--error);
  --field-label-description-text-color: var(--gray-60);
  --field-icon-inactive-color: var(--gray-90);
  --field-icon-active-color: rgba(60, 122, 174, 0.25);
  --field-icon-error-active-color: rgba(217, 50, 81, 0.25);
  --field-icon-checked-color: var(--accent-primary);
  --field-icon-checked-disabled-color: var(--accent-primary-disabled, #78a6d8);
  --field-icon-unchecked-disabled-color: var(--gray-40);
  --field-icon-focus-color: var(--focus-light);
  --field-error-text-color: var(--error);
  --field-error-border-color: var(--error);
  --field-listbox-selected-background-color: var(--gray-50);
  --field-listbox-selected-text-color: #fff;
  --field-font-size: var(--text-size-small);
  --input-min-width: 250px;
  --checkbox-size: var(--icon-size);
  --radio-size: var(--icon-size);
}

.cauldron--theme-dark {
  --field-background-color: var(--accent-medium);
  --field-content-color: var(--white);
  --field-border-color: #74818b;
  --field-border-color-hover: var(--accent-light);
  --field-border-color-focus: var(--accent-info);
  --field-border-color-focus-hover: var(--accent-info-light);
  --field-border-color-focus-glow: var(--accent-info);
  --field-border-color-error: var(--accent-danger);
  --field-border-color-error-hover: #fea7a6;
  --field-background-color-disabled: #5d676f;
  --field-placeholder-color: #8c9fab;
  --field-required-text-color: var(--white);
  --field-label-text-color: var(--white);
  --field-label-error-text-color: var(--error);
  --field-label-description-text-color: var(--accent-light);
  --field-icon-inactive-color: var(--white);
  --field-icon-active-color: rgba(212, 221, 224, 0.25);
  --field-icon-error-active-color: rgba(254, 109, 107, 0.25);
  --field-icon-checked-color: var(--accent-light);
  --field-icon-checked-disabled-color: var(--stroke-dark);
  --field-icon-unchecked-disabled-color: var(--stroke-dark);
  --field-icon-focus-color: var(--focus-dark);
  --field-error-text-color: var(--error);
  --field-error-border-color: var(--error);
  --field-listbox-selected-background-color: var(--accent-light);
  --field-listbox-selected-text-color: var(--accent-medium);
}

input,
select,
textarea,
[role='textbox'],
[role='listbox'],
[role='spinbutton'] {
  width: 100%;
  border: 1px solid var(--field-border-color);
  margin-bottom: var(--space-half);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: var(--field-background-color);
}

.cauldron--theme-dark input,
select,
textarea,
[role='textbox'],
[role='listbox'],
[role='spinbutton'] {
  border: 1px solid var(--field-border-color);
}

input:focus,
select:focus,
textarea:focus,
[role='textbox']:focus,
[role='listbox']:focus,
[role='spinbutton']:focus {
  outline: 0;
  border: 1px solid var(--field-border-color-focus);
  box-shadow:
    0 0 0 1px var(--field-border-color-focus),
    0 0 5px var(--field-border-color-focus-glow),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

input:hover,
select:hover,
textarea:hover,
[role='textbox']:hover,
[role='listbox']:hover,
[role='spinbutton']:hover {
  border: 1px solid var(--field-border-color-hover);
}

input:focus:hover,
select:focus:hover,
textarea:focus:hover,
[role='menuitemradio']:focus:hover,
[role='textbox']:focus:hover,
[role='listbox']:focus:hover,
[role='spinbutton']:focus:hover {
  border: 1px solid var(--field-border-color-focus-hover);
  box-shadow:
    0 0 0 1px var(--field-border-color-focus-hover),
    0 0 5px var(--field-border-color-focus-glow),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: var(--field-placeholder-color);
  font-style: italic;
}

input::placeholder,
textarea::placeholder {
  color: var(--field-placeholder-color);
  font-style: italic;
}

input.Field--has-error,
select.Field--has-error,
textarea.Field--has-error,
[role='textbox'].Field--has-error,
[role='listbox'].Field--has-error,
[role='spinbutton'].Field--has-error {
  border: 1px solid var(--field-border-color-error);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.Checkbox__overlay.Field--has-error {
  color: var(--field-border-color-error);
}

.Icon--checkbox-unchecked.Checkbox__overlay:active.Field--has-error:not(
    .Checkbox__overlay--disabled
  ) {
  background-color: var(--field-icon-error-active-color);
}

input.Field--has-error:hover,
select.Field--has-error:hover,
textarea.Field--has-error:hover,
[role='textbox'].Field--has-error:hover,
[role='listbox'].Field--has-error:hover,
[role='spinbutton'].Field--has-error:hover {
  border-color: var(--field-border-color-error-hover);
  box-shadow:
    0 0 0 1px var(--field-border-color-error),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

input.Field--has-error:focus,
select.Field--has-error:focus,
textarea.Field--has-error:focus,
[role='textbox'].Field--has-error:focus,
[role='listbox'].Field--has-error:focus,
[role='spinbutton'].Field--has-error:focus {
  border: 1px solid var(--field-border-color-error);
  box-shadow:
    0 0 0 1px var(--field-border-color-error),
    0 0 5px var(--field-border-color-error-focus-glow),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

input.Field--has-error:focus:hover,
select.Field--has-error:focus:hover,
textarea.Field--has-error:focus:hover,
[role='textbox'].Field--has-error:focus:hover,
[role='listbox'].Field--has-error:focus:hover,
[role='spinbutton'].Field--has-error:focus:hover {
  border-color: var(--field-border-color-error-hover);
}

[role='listbox'] > li,
[role='listbox'] > [role='group'] > li {
  list-style-type: none;
}

[role='listbox']:focus-within > li.ListboxOption--active,
[role='listbox']:focus-within > [role='group'] > li.ListboxOption--active {
  box-shadow: 0 0 0 2px var(--field-icon-focus-color);
}

[role='listbox']
  li[role='option']:is([aria-selected='true'], [aria-checked='true']) {
  background-color: var(--field-listbox-selected-background-color);
  color: var(--field-listbox-selected-text-color);
}

.Error,
.Field__error {
  --icon-size: var(--text-size-base);
  color: var(--field-error-text-color);
  display: flex;
  gap: var(--space-half);
  text-align: left;
  font-size: var(--text-size-smallest);
  font-weight: var(--font-weight-normal);
}

.Field__error {
  font-size: var(--text-size-small);
  align-items: center;
  margin-bottom: var(--space-smallest);
  line-height: var(--line-height-body);
}

.Checkbox__wrap .Error {
  margin-top: var(--space-half);
  border-top: 1px solid var(--field-error-border-color);
  margin-left: calc(var(--icon-size) + 2px + var(--space-half));
  padding: var(--space-half) 0;
}

.Field {
  display: block;
  position: relative;
  box-sizing: border-box;
  margin-bottom: var(--space-small);
}

.Field.is--flex-row {
  align-items: center;
}

.Field.is--flex-row .Field__label {
  margin-bottom: 0;
}

.Checkbox__wrap,
.Radio__wrap {
  margin-bottom: var(--space-smallest);
}

.Checkbox__wrap:last-of-type,
.Radio__wrap:last-of-type {
  margin-bottom: 0;
}

.Radio--inline .Radio__wrap {
  margin-bottom: 0;
}

.Checkbox,
.Radio {
  box-sizing: border-box;
  position: relative;
  flex-direction: row-reverse;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.Radio--inline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-small);
}

.Checkbox + .Field__labelDescription,
.Radio + .Field__labelDescription {
  margin-top: var(--space-half);
  margin-bottom: var(--space-small);
}

.Checkbox__wrap:last-of-type .Checkbox + .Field__labelDescription,
.Radio__wrap:last-of-type .Radio + .Field__labelDescription {
  margin-bottom: 0;
}

.Field__label {
  display: flex;
  align-items: center;
  text-align: left;
  color: var(--field-label-text-color);
  margin-bottom: var(--space-smallest);
  font-size: var(--text-size-small);
  font-weight: var(--font-weight-medium);
  cursor: default;
}

.Field__description {
  display: flex;
  align-items: center;
  text-align: left;
  font-size: var(--text-size-small);
  color: var(--field-label-description-text-color);
  margin-bottom: var(--space-smallest);
  line-height: var(--line-height-body);
}

.Field__label + .Checkbox__wrap {
  margin-top: var(--space-half);
}

.Field__label + [role^='radiogroup'] {
  margin-top: var(--space-smallest);
}

.Checkbox__label,
.Radio__label {
  display: flex;
  align-items: center;
  text-align: left;
  font-weight: var(--font-weight-normal);
  cursor: default;
  margin-bottom: unset;
}

.Field__required-text {
  flex: 1;
  text-align: right;
  margin-left: var(--space-large);
  font-weight: var(--font-weight-thin);
  color: var(--field-required-text-color);
  font-size: var(--text-size-smaller);
}

.Field__required-text::before {
  content: ' ';
  color: var(--field-content-color);
}

.Field__label--has-error .Field__required-text {
  color: var(--field-label-error-text-color);
}

.Field__label--inline {
  display: inline-block;
  text-align: left;
  font-size: var(--text-size-smaller);
}

.Field__text-input {
  padding: var(--space-smallest);
  box-sizing: border-box;
  font-size: var(--field-font-size);
  color: var(--field-content-color);
  min-width: min(var(--input-min-width), 100%);
  border-radius: var(--field-border-radius);
}

.Field__text-input[disabled],
.Field__text-input[aria-disabled='true'] {
  border: 1px solid var(--field-border-color-disabled);
  background-color: var(--field-background-color-disabled);
}

.Field__textarea {
  display: block;
  min-height: 56px;
  font-size: var(--field-font-size);
  min-width: min(var(--input-min-width), 100%);
  padding: var(--space-half);
  max-width: 500px;
  color: var(--field-content-color);
  border-radius: var(--field-border-radius);
}

.Field__textarea[disabled],
.Field__textarea[aria-disabled='true'] {
  background: var(--field-background-color-disabled);
  border: 1px solid var(--field-border-color);
}

.Field__labelDescription {
  flex-basis: 100%;
  color: var(--field-label-description-text-color);
  font-size: var(--text-size-small);
  font-weight: var(--font-weight-normal);
  line-height: 1;
  margin-top: var(--space-half);
  cursor: default;
  display: flex;
}

.Checkbox__wrap .Field__labelDescription {
  margin-left: calc(var(--checkbox-size) + 2px + var(--space-half));
}

.Radio__wrap .Field__labelDescription {
  margin-left: calc(var(--radio-size) + 2px + var(--space-half));
}

.Field__labelDescription + .Error {
  margin-top: var(--space-smallest);
}

.Radio__overlay,
.Checkbox__overlay {
  border: 1px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  color: var(--field-icon-inactive-color);
  margin-right: var(--space-half);
  align-self: flex-start;
}

.Checkbox__overlay {
  border-radius: 5px;
}

.Radio__overlay {
  border-radius: 50%;
}

.Radio__overlay svg,
.Checkbox__overlay svg {
  pointer-events: none;
}

.Radio__overlay svg {
  height: var(--radio-size);
  width: var(--radio-size);
}

.Checkbox__overlay svg {
  height: var(--checkbox-size);
  width: var(--checkbox-size);
}

.Radio__overlay:active:not(.Radio__overlay--disabled),
.Checkbox__overlay:active:not(.Checkbox__overlay--disabled) {
  background-color: var(--field-icon-active-color);
}

.Radio input[type='radio'] {
  position: absolute;
  opacity: 0;
  top: 8px;
  left: 8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.Checkbox input[type='checkbox']:indeterminate ~ .Checkbox__overlay.Icon {
  color: var(--field-icon-checked-color);
}

.Checkbox
  input[type='checkbox']:indeterminate
  ~ .Checkbox__overlay--disabled.Icon {
  color: var(--field-icon-checked-disabled-color);
  cursor: default;
}

.Checkbox__overlay.Checkbox__overlay--focused,
.Radio__overlay.Radio__overlay--focused {
  box-shadow: 0 0 0 2px var(--field-icon-focus-color);
}

.Radio__overlay.Icon--radio-checked,
.Checkbox__overlay.Icon--checkbox-checked {
  color: var(--field-icon-checked-color);
}

.Radio__overlay--disabled.Icon--radio-checked,
.Checkbox__overlay--disabled.Icon--checkbox-checked {
  color: var(--field-icon-checked-disabled-color);
  cursor: default;
}

.Checkbox__overlay--disabled.Icon--checkbox-unchecked,
.Radio__overlay--disabled.Icon--radio-unchecked {
  color: var(--field-icon-unchecked-disabled-color);
  cursor: default;
}

.Field__label:hover ~ .Radio__overlay:not(.Radio__overlay--disabled),
.Radio__overlay:hover:not(.Radio__overlay--disabled) {
  border: 1px solid currentColor;
}

.Checkbox input[type='checkbox']:indeterminate ~ .Checkbox__overlay:before {
  content: '';
  display: block;
  position: absolute;
  height: calc(var(--icon-size) - 8px);
  width: calc(var(--icon-size) - 8px);
  background: currentColor;
  transform: translate(4px, 4px);
}

.Checkbox input[type='checkbox']:indeterminate ~ .Checkbox__overlay:after {
  content: '';
  display: block;
  position: absolute;
  height: 3px;
  width: calc(var(--icon-size) / 3);
  background-color: var(--field-background-color);
  transform: translate(
    calc(var(--icon-size) / 3),
    calc(var(--icon-size) / 2 * -1 - 1.5px)
  );
}

.Checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  top: 8px;
  left: 8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.Field__label:hover ~ .Checkbox__overlay:not(.Checkbox__overlay--disabled),
.Checkbox__overlay:hover:not(.Checkbox__overlay--disabled) {
  border: 1px solid currentColor;
}

.TextFieldWrapper {
  --text-field-wrapper-border-color: var(--field-border-color);
  --text-field-wrapper-background-color: var(--field-background-color);
  --text-field-wrapper-border-focus-color: var(--field-border-color-focus);
  --text-field-wrapper-border-hover-color: var(--field-border-color-hover);
  --text-field-wrapper-border-focus-glow-color: var(
    --field-border-color-focus-glow
  );
  --text-field-wrapper-error-border-color: var(--field-border-color-error);
  --text-field-wrapper-error-focus-border-color: var(
    --field-border-color-error-hover
  );
  --text-field-wrapper-error-focus-border-glow-color: var(
    --field-border-color-focus-glow
  );
  --text-field-wrapper-font-size: var(--field-font-size);
  --text-field-wrapper-font-color: var(--field-content-color);
}

.cauldron--theme-dark :where(.TextFieldWrapper) {
  --text-field-wrapper-border-color: var(--field-border-color);
  --text-field-wrapper-background-color: var(--field-background-color);
  --text-field-wrapper-border-focus-color: var(--field-border-color-focus);
  --text-field-wrapper-border-hover-color: var(--field-border-color-hover);
  --text-field-wrapper-border-focus-glow-color: var(
    --field-border-color-focus-glow
  );
  --text-field-wrapper-error-border-color: var(--field-border-color-error);
  --text-field-wrapper-error-focus-border-color: var(
    --field-border-color-error-hover
  );
  --text-field-wrapper-error-focus-border-glow-color: var(
    --field-border-color-focus-glow
  );
  --text-field-wrapper-font-color: var(--field-content-color);
}

.TextFieldWrapper input:is(*, :focus, :hover) {
  border: none;
  box-shadow: none;
  margin: initial;
  padding: var(--space-smallest);
}

.TextFieldWrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--text-field-wrapper-border-color);
  border-radius: var(--field-border-radius);
  margin-bottom: var(--space-half);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: var(--text-field-wrapper-background-color);
  min-width: min(var(--input-min-width), 100%);
}

.cauldron--theme-dark .TextFieldWrapper {
  border: 1px solid var(--text-field-wrapper-border-color);
}

.cauldron--theme-dark .TextFieldWrapper--error {
  border: 1px solid var(--text-field-wrapper-error-border-color);
}

.TextFieldWrapper:hover {
  border-color: var(--text-field-wrapper-border-hover-color);
}

.TextFieldWrapper input {
  border-radius: var(--field-border-radius);
  font-size: var(--text-field-wrapper-font-size);
  color: var(--text-field-wrapper-font-color);
}

.TextFieldWrapper > :not(input) {
  flex-shrink: 0;
}

.TextFieldWrapper:focus-within {
  border: 1px solid var(--text-field-wrapper-border-focus-color);
  box-shadow:
    0 0 0 1px var(--text-field-wrapper-border-focus-color),
    0 0 5px var(--text-field-wrapper-border-focus-glow-color),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.TextFieldWrapper--error {
  border: 1px solid var(--text-field-wrapper-error-border-color);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.TextFieldWrapper--error:focus-within {
  border: 1px solid var(--text-field-wrapper-error-border-color);
  box-shadow:
    0 0 0 1px var(--text-field-wrapper-error-border-color),
    0 0 5px var(--field-border-color-error-focus-glow),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.TextFieldWrapper--error:focus-within:hover {
  border: 1px solid var(--text-field-wrapper-error-border-color);
  box-shadow:
    0 0 0 1px var(--text-field-wrapper-error-border-color),
    0 0 5px var(--field-border-color-error-focus-glow),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.TextFieldWrapper--error:hover {
  border: 1px solid var(--text-field-wrapper-error-border-color);
  box-shadow:
    0 0 0 1px var(--text-field-wrapper-error-border-color),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.TextFieldWrapper:has(input:is([disabled], [aria-disabled='true'])),
.TextFieldWrapper--disabled {
  background-color: var(--field-background-color-disabled);
  border: 1px solid var(--field-border-color);
}

.TextFieldWrapper--diabled:focus-within {
  border: 1px solid var(--field-border-color);
}

.TextFieldWrapper--diabled:focus-within:hover {
  border: 1px solid var(--field-border-color);
}

.TextFieldWrapper--diabled:hover {
  border: 1px solid var(--field-border-color);
}

:root {
  --alert-warning-background-color: #d93251;
  --alert-warning-header-text-color: #fff;

  --alert-border-color: var(--accent-primary);
  --alert-warning-border-color: var(--accent-error);

  --alert-icon-color: var(--accent-primary);
  --alert-warning-icon-color: var(--accent-error);
}

.cauldron--theme-dark {
  --alert-border-color: var(--accent-info);
  --alert-warning-border-color: var(--accent-danger);

  --alert-icon-color: var(--accent-info);
  --alert-warning-icon-color: var(--accent-danger);
}

.Alert .Dialog__header .Icon {
  padding-right: var(--space-smallest);
  color: var(--alert-icon-color);
}

.Alert .Dialog__inner {
  border: 3px solid var(--alert-border-color);
}

.Alert__warning .Dialog__header .Icon {
  color: var(--alert-warning-icon-color);
}

.Alert__warning .Dialog__inner {
  border: 3px solid var(--alert-warning-border-color);
}

.Alert .Dialog__footer {
  border-top: none;
  padding-top: 0;
  display: flex;
  justify-content: center;
  background-color: transparent;
}

.cauldron--theme-dark .Alert .Dialog__footer {
  border-top: none;
  background: transparent;
}

.FadeIn,
.FadeIn--flex.FadeIn {
  opacity: 1;
  transition: opacity 400ms;
}

.FadeIn--flex {
  display: flex;
  opacity: 0;
  transition: opacity 400ms;
}

:root {
  --button-background-color-primary: var(--accent-primary);
  --button-background-color-primary-disabled: #79a7d9;
  --button-outline-color-primary: var(--button-background-color-primary);
  --button-background-color-primary-active: var(--accent-primary-active);

  --button-background-color-secondary: var(--gray-20);
  --button-background-color-secondary-disabled: var(--gray-20);
  --button-outline-color-secondary: var(--gray-90);
  --button-background-color-secondary-active: var(--gray-30);
  --button-border-color-secondary: var(--gray-40);

  --button-background-color-badge-active: var(--gray-20);

  --button-background-color-danger: var(--error);
  --button-background-color-danger-disabled: var(--accent-error-disabled);
  --button-background-color-danger-active: var(--accent-error-active);
  --button-outline-color-danger: var(--error);
  --button-outline-color-danger-disabled: var(--gray-40);

  --button-background-color-error: var(--error);
  --button-background-color-error-disabled: var(--accent-error-disabled);
  --button-background-color-error-active: var(--accent-error-active);
  --button-outline-color-error: var(--error);

  --button-text-size: var(--text-size-body);
  --button-thin-text-size: var(--text-size-body-small);
  --button-text-color-dark: var(--gray-90);
  --button-text-color-light: #fff;
  --button-text-color-disabled: var(--disabled);
  --button-focus-ring-color: var(--focus-light);
  --button-thin-height: var(--target-size-minimum);

  --button-height: 2.25rem;
}

.Button--primary,
.Button--secondary,
.Button--tertiary,
.Button--clear,
.Button--error,
.Button--danger,
.Button--danger-secondary {
  border-radius: 3px;
  border: 1px solid transparent;
  font-size: var(--button-text-size);
  box-sizing: border-box;
  padding: 0 var(--space-small);
  position: relative;
  text-align: center;
  min-height: var(--button-height);
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-items: center;
  justify-content: center;
  gap: var(--space-smallest);
  min-width: -moz-max-content;
  min-width: max-content;
}

.Button--tag,
.Button--badge {
  position: relative;
}

.Button--badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-small) 0 var(--space-smaller);
  background-color: var(--badge-background-color);
  color: var(--badge-text-color);
  border: 1px solid var(--badge-border-color);
  border-radius: var(--badge-height);
  font-size: var(--text-size-body);
  font-weight: var(--font-weight-normal);
  min-height: var(--badge-height);
}

.Button--badge:not([disabled], [aria-disabled='true']):active {
  background-color: var(--button-background-color-badge-active);
}

button.Link {
  cursor: pointer;
  font-size: inherit;
  font-weight: var(--font-weight-normal);
}

:is(
  .Button--primary,
  .Button--secondary,
  .Button--tertiary,
  .Button--error,
  .Button--danger,
  .Button--danger-secondary
):focus {
  outline: none;
}

:is(
  .Button--primary,
  .Button--secondary,
  .Button--tertiary,
  .Button--error,
  .Button--danger,
  .Button--danger-secondary,
  .Button--tag,
  .Button--badge
):before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 3px;
  pointer-events: none;
}

:is(.Button--tag, .Button--badge):before {
  border-radius: var(--button-height);
}

.Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
  box-shadow: 0 0 0 1px var(--button-outline-color-primary);
}

:is(.Button--secondary, .Button--tertiary):not([disabled]):not(
    [aria-disabled='true']
  ):hover:before {
  box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
}

:is(.Button--error, .Button--danger, .Button--danger-secondary):not(
    [disabled]
  ):not([aria-disabled='true']):hover:before {
  box-shadow: 0 0 0 1px var(--button-outline-color-error);
}

:is(.Button--tag, .Button--badge):not([disabled]):not(
    [aria-disabled='true']
  ):hover:before {
  box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
}

:is(
    .Button--primary,
    .Button--secondary,
    .Button--tertiary,
    .Button--error,
    .Button--danger,
    .Button--danger-secondary
  ):focus:before {
  box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
}

.Button--primary {
  background-color: var(--button-background-color-primary);
  color: var(--button-text-color-light);
}

.Button--primary[aria-disabled='true'],
.Button--primary[disabled] {
  background-color: var(--button-background-color-primary-disabled);
}

.Button--primary:not([disabled]):not([aria-disabled='true']):active {
  background: var(--button-background-color-primary-active);
}

.Button--secondary,
.Button--tertiary {
  background-color: var(--button-background-color-secondary);
  color: var(--button-text-color-dark);
  border: 1px solid var(--button-border-color-secondary);
}

.Button--tertiary:is(:not(:hover, :focus), [disabled], [aria-disabled='true']) {
  border-color: transparent;
  background-color: transparent;
}

.Button--secondary:is([aria-disabled='true'], [disabled]) {
  color: var(--button-text-color-disabled);
  background-color: var(--button-background-color-secondary-disabled);
}

.Button--tertiary:is([aria-disabled='true'], [disabled]) {
  color: var(--button-text-color-disabled);
}

:is(.Button--secondary, .Button--tertiary):not(
    [disabled],
    [aria-disabled='true']
  ):active {
  background-color: var(--button-background-color-secondary-active);
}

.Button--error,
.Button--danger,
.Button--danger-secondary:active {
  background-color: var(--button-background-color-danger);
  box-shadow: none;
  color: var(--button-text-color-light);
  --button-hover-outline-color: var(--button-outline-color-error);
}

.Button--danger-secondary {
  background-color: transparent;
  color: var(--button-background-color-danger);
  border: 1px solid var(--button-background-color-danger);
  --button-hover-outline-color: var(--button-outline-color-error);
}

.Button--error[aria-disabled='true'],
.Button--error[disabled] {
  color: var(--button-text-color-light);
  background-color: var(--button-background-color-error-disabled);
}

.Button--danger[aria-disabled='true'],
.Button--danger[disabled] {
  color: var(--button-text-color-light);
  background-color: var(--button-background-color-danger-disabled);
}

.Button--danger-secondary[aria-disabled='true'],
.Button--danger-secondary[disabled] {
  color: var(--button-text-color-disabled);
  border: 1px solid var(--button-outline-color-danger-disabled);
}

.Button--error:not([disabled]):not([aria-disabled='true']):active {
  background-color: var(--button-background-color-error-active);
}

.Button--tag:is([disabled], [aria-disabled='true']),
.Button--badge:is([disabled], [aria-disabled='true']) {
  color: var(--disabled);
}

:is(
    .Button--primary,
    .Button--secondary,
    .Button--tertiary,
    .Button--error,
    .Button--danger,
    .Button--danger-secondary
  )
  .Icon {
  margin: 0 -4px;
}

.Button--thin .Icon svg {
  width: calc(var(--button-thin-height) - 8px);
  height: calc(var(--button-thin-height) - 8px);
}

/* Usage of .DefinitionButton is deprecated and no longer supported */

.DefinitionButton {
  display: inline;
  vertical-align: baseline;
  position: relative;
}

/* Usage of .DefinitionButton is deprecated and no longer supported */

.DefinitionButton button {
  background-color: transparent;
  color: var(--text-color-base);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px dotted;
  display: inline-block;
  margin: 0 2px;
  padding: 0;
  font-size: inherit;
  vertical-align: baseline;
  cursor: auto;
  -moz-user-select: text;
       user-select: text;
}

.Button--thin {
  min-height: var(--button-thin-height);
  min-width: -moz-max-content;
  min-width: max-content;
  font-size: var(--button-thin-text-size);
  padding: 0 var(--space-small);
}

.Button--condensed {
  min-width: var(--button-height);
  padding: 0;
}

.Button--condensed:is(.Button--thin) {
  min-width: var(--button-thin-height);
}

/* Custom property for button sibling gap. Will be deprecated in https://github.com/dequelabs/cauldron/issues/1944 */

[class*='Button--'] + [class*='Button--'] {
  margin-left: var(--button-sibling-gap, var(--space-smallest));
}

/* Dark Theme */

.cauldron--theme-dark {
  --button-background-color-primary: var(--accent-medium);
  --button-background-color-primary-disabled: var(--accent-medium);
  --button-background-color-secondary: var(--accent-medium);
  --button-background-color-secondary-disabled: var(--accent-medium);
  --button-background-color-error-disabled: var(--accent-medium);

  --button-background-color-primary-active: #a7e9f7;
  --button-background-color-secondary-active: var(--accent-light);
  --button-background-color-error-active: #fea7a6;

  --button-background-color-danger: var(--accent-danger);

  --button-background-color-badge-active: var(--badge-background-color);

  --button-focus-ring-color: var(--focus-dark);
  --field-label-text-color: var(--accent-light);
  --field-border-color-error: var(--accent-danger);
  --error: var(--accent-danger);
}

.cauldron--theme-dark .Button--primary {
  border: 2px solid var(--accent-info);
}

.cauldron--theme-dark .Button--secondary {
  color: var(--accent-light);
  border: 2px solid var(--accent-light);
}

.cauldron--theme-dark .Button--tertiary {
  color: var(--accent-light);
}

.cauldron--theme-dark .Button--danger {
  color: var(--button-background-color-secondary);
  --button-outline-color-secondary: var(--button-background-color-danger);
}

.cauldron--theme-dark .Button--danger-secondary {
  border-width: 2px;
  color: var(--accent-light);
  background-color: var(--button-background-color-secondary);
}

.cauldron--theme-dark .Button--danger-secondary:active {
  color: var(--accent-light);
  background-color: var(--button-background-color-secondary);
}

.cauldron--theme-dark .Button--tertiary:is(:hover, :active, :focus) {
  border: 2px solid var(--accent-light);
}

.cauldron--theme-dark .Button--tertiary:not(:hover, :focus) {
  color: #fff;
}

.cauldron--theme-dark .Button--error {
  background-color: var(--accent-medium);
  color: #fff;
  border: 2px solid var(--accent-danger);
}

.cauldron--theme-dark
  :is(
    .Button--primary,
    .Button--secondary,
    .Button--error,
    .Button--danger,
    .Button--danger-secondary,
    .Button--tag,
    .Button--badge
  ):is([disabled], [aria-disabled='true']) {
  color: var(--dark-workspace-color);
}

.cauldron--theme-dark
  .Button--primary:not([disabled]):not([aria-disabled='true']):active,
.cauldron--theme-dark
  .Button--secondary:not([disabled]):not([aria-disabled='true']):active,
.cauldron--theme-dark
  .Button--tertiary:not([disabled]):not([aria-disabled='true']):active {
  color: var(--accent-medium);
}

.cauldron--theme-dark
  :is(.Button--error, .Button--danger, .Button--danger-secondary):not(
    [disabled]
  ):not([aria-disabled='true']):active {
  background-color: #fea7a6;
  color: var(--accent-medium);
}

.cauldron--theme-dark button.Link {
  color: var(--accent-light);
}

.cauldron--theme-dark button.Link:hover {
  color: #fff;
}

.cauldron--theme-dark
  .Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
  box-shadow:
    0 0 0 1px var(--dark-workspace-color),
    0 0 0 2px var(--accent-info);
}

.cauldron--theme-dark
  .Button--secondary:not([disabled]):not([aria-disabled='true']):hover:before,
.cauldron--theme-dark
  .Button--tertiary:not([disabled]):not([aria-disabled='true']):hover:before {
  box-shadow:
    0 0 0 1px var(--dark-workspace-color),
    0 0 0 2px var(--accent-light);
}

.cauldron--theme-dark
  .Button--error:not([disabled]):not([aria-disabled='true']):hover:before {
  box-shadow:
    0 0 0 1px var(--dark-workspace-color),
    0 0 0 2px var(--accent-danger);
}

.cauldron--theme-dark
  .Button--danger-secondary:not([disabled]):not(
    [aria-disabled='true']
  ):hover:before {
  box-shadow:
    0 0 0 1px var(--dark-workspace-color),
    0 0 0 2px var(--accent-danger);
}

.cauldron--theme-dark
  .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before,
.cauldron--theme-dark
  .Button--badge:not([disabled]):not([aria-disabled='true']):hover:before {
  box-shadow:
    0 0 0 1px var(--dark-workspace-color),
    0 0 0 2px var(--accent-info);
}

.cauldron--theme-dark .Button--tertiary:is([disabled], [aria-disabled='true']) {
  color: #74818b;
}

:root {
  /* Primary */
  --icon-button-primary-color: var(--button-text-color-light);
  --icon-button-background-color-primary: var(
    --button-background-color-primary
  );
  --icon-button-background-color-primary-active: var(
    --button-background-color-primary-active
  );
  --icon-button-outline-color-primary: var(--button-outline-color-primary);

  --icon-button-large-height: var(--button-height);

  /* Secondary */
  --icon-button-secondary-color: var(--button-text-color-dark);
  --icon-button-background-color-secondary: var(
    --button-background-color-secondary
  );
  --icon-button-background-color-secondary-active: var(
    --button-background-color-secondary-active
  );
  --icon-button-outline-color-secondary: var(--button-outline-color-secondary);
  --icon-button-border-color-secondary: var(--gray-40);

  /* Error */
  --icon-button-background-color-error: var(--button-background-color-error);
  --icon-button-outline-color-error: var(--button-outline-color-error);
  --icon-button-background-color-error-active: var(
    --button-background-color-error-active
  );

  --icon-button-text-color-disabled: var(--button-text-color-disabled);

  /* Deprecated variables */
  --icon-button-content-color-light-disabled: #ccc;
  --icon-button-background-color-light: #dadada;
  --icon-button-background-color-light-active: #c2c2c2;
  --icon-button-outline-color-light: var(--icon-button-background-color-light);

  --icon-button-content-color-dark-disabled: #fff 40%;
  --icon-button-background-color-dark: var(--accent-medium);
  --icon-button-background-color-dark-disabled: var(--accent-medium);
  --icon-button-background-color-dark-active: var(--accent-dark);
  --icon-button-outline-color-dark: var(--icon-button-background-color-dark);
  --icon-button-background-color-secondary-disabled: var(
    --button-background-color-secondary-disabled
  );
  --icon-button-background-color-error-disabled: var(
    --button-background-color-error-disabled
  );
  --icon-button-icon-size: var(--icon-size);
  --icon-button-hover-shadow-primary: 0 0 0 1px
    var(--icon-button-outline-color-primary);
  --icon-button-hover-shadow-secondary: 0 0 0 1px
    var(--icon-button-outline-color-secondary);
  --icon-button-hover-shadow-error: 0 0 0 1px
    var(--icon-button-outline-color-error);
}

.IconButton {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: var(--button-thin-height);
  width: var(--button-thin-height);
  border-radius: 3px;
  border: 1px solid transparent;
  background-color: var(--icon-button-background-color);
  color: var(--icon-button-icon-color);
  margin: 2px;
  padding: 0;
}

/* Ensure both <a> and <button> IconButtons are aligned correctly. See #846. */

a.IconButton {
  vertical-align: middle;
  line-height: unset;
}

.IconButton .Icon {
  height: calc(var(--icon-button-icon-size) - 8px);
  width: calc(var(--icon-button-icon-size) - 8px);
  pointer-events: none;
}

.IconButton .Icon svg {
  width: 100%;
  height: 100%;
}

.IconButton:focus {
  outline: none;
}

.IconButton:before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 3px;
  pointer-events: none;
}

.IconButton--large {
  height: var(--icon-button-large-height);
  width: var(--icon-button-large-height);
}

.IconButton--large .Icon {
  height: var(--icon-button-icon-size);
  width: var(--icon-button-icon-size);
}

.IconButton--secondary:is([aria-disabled='true'], [disabled]),
.IconButton--secondary:is([aria-disabled='true'], [disabled]):active {
  color: var(--icon-button-text-color-disabled);
  background-color: var(--button-background-color-secondary-disabled);
  cursor: default;
}

.IconButton--tertiary:is([aria-disabled='true'], [disabled]),
.IconButton--tertiary:is([aria-disabled='true'], [disabled]):active {
  color: var(--icon-button-text-color-disabled);
}

.IconButton--primary:is([aria-disabled='true'], [disabled]),
.IconButton--primary:is([aria-disabled='true'], [disabled]):active {
  background-color: var(--button-background-color-primary-disabled);
  cursor: default;
}

.IconButton--error:is([aria-disabled='true'], [disabled]),
.IconButton--error:is([aria-disabled='true'], [disabled]):active {
  color: var(--button-text-color-light);
  background-color: var(--button-background-color-error-disabled);
  cursor: default;
}

.IconButton:focus:before {
  box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
}

.IconButton--primary {
  background-color: var(--icon-button-background-color-primary);
  color: var(--icon-button-primary-color);
}

.IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
  box-shadow: var(--icon-button-hover-shadow-primary);
}

.IconButton--primary:active {
  background-color: var(--icon-button-background-color-primary-active);
}

.IconButton--secondary,
.IconButton--tertiary,
.IconButton--tertiary:is(:active) {
  border: 1px solid var(--icon-button-border-color-secondary);
  background-color: var(--icon-button-background-color-secondary);
  color: var(--icon-button-secondary-color);
}

.IconButton--secondary:not([disabled]):not([aria-disabled='true']):hover:before,
.IconButton--tertiary:not([disabled]):not([aria-disabled='true']):is(
    :hover
  ):before {
  box-shadow: var(--icon-button-hover-shadow-secondary);
}

.IconButton--tertiary:is(
  :not(:hover, :focus, :active),
  [disabled],
  [aria-disabled='true']
) {
  border-color: transparent;
  background-color: transparent;
}

.IconButton--secondary:active,
.IconButton--tertiary:active {
  background-color: var(--icon-button-background-color-secondary-active);
}

.IconButton--error {
  background-color: var(--icon-button-background-color-error);
  color: var(--button-text-color-light);
}

.IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
  box-shadow: var(--icon-button-hover-shadow-error);
}

.IconButton--error:active {
  background-color: var(--icon-button-background-color-error-active);
}

/* Dark Theme */

.cauldron--theme-dark {
  --icon-button-icon-color: var(--white);
  --icon-button-outline-shadow-color: var(--accent-medium);
  --icon-button-disabled-color: var(--dark-workspace-color);
  --icon-button-active-color: var(--accent-medium);

  /* Primary */
  --icon-button-primary-color: var(--white);
  --icon-button-background-color-primary: var(--accent-medium);
  --icon-button-background-color-primary-active: var(--accent-info-active);
  --icon-button-outline-color-primary: var(--accent-info);
  --icon-button-border-color-primary: var(--accent-info);

  /* Secondary */
  --icon-button-border-color-secondary: var(--accent-light);
  --icon-button-background-color-secondary: var(--accent-medium);
  --icon-button-secondary-color: var(--white);
  --icon-button-background-color-secondary-active: var(--accent-light);
  --icon-button-outline-color-secondary: var(--accent-light);

  /* Error */
  --icon-button-background-color-error: var(--accent-medium);
  --icon-button-border-color-error: var(--accent-danger);
  --icon-button-outline-color-error: var(--accent-danger);
  --icon-button-background-color-error-active: var(
    --button-background-color-error-active
  );

  /* Hover shadows (double ring in dark theme) */
  --icon-button-hover-shadow-primary:
    0 0 0 1px var(--icon-button-outline-shadow-color),
    0 0 0 2px var(--icon-button-outline-color-primary);
  --icon-button-hover-shadow-secondary:
    0 0 0 1px var(--icon-button-outline-shadow-color),
    0 0 0 2px var(--icon-button-outline-color-secondary);
  --icon-button-hover-shadow-error:
    0 0 0 1px var(--icon-button-outline-shadow-color),
    0 0 0 2px var(--icon-button-outline-color-error);
}

.cauldron--theme-dark .IconButton--primary {
  border: 2px solid var(--icon-button-border-color-primary);
}

.cauldron--theme-dark .IconButton--secondary,
.cauldron--theme-dark .IconButton--tertiary {
  border-width: 2px;
}

.cauldron--theme-dark .IconButton--error {
  border: 2px solid var(--icon-button-border-color-error);
}

.cauldron--theme-dark
  .IconButton--primary:is([aria-disabled='true'], [disabled]),
.cauldron--theme-dark
  .IconButton--secondary:is([aria-disabled='true'], [disabled]),
.cauldron--theme-dark
  .IconButton--error:is([aria-disabled='true'], [disabled]) {
  color: var(--icon-button-disabled-color);
}

.cauldron--theme-dark .IconButton--primary:active,
.cauldron--theme-dark .IconButton--secondary:active,
.cauldron--theme-dark .IconButton--tertiary:active,
.cauldron--theme-dark .IconButton--error:active {
  color: var(--icon-button-active-color);
}

.cauldron--theme-dark
  .IconButton:is([aria-disabled='true'], [disabled]):active {
  color: var(--icon-button-disabled-color);
}

.cauldron--theme-dark .IconButton:focus:before {
  box-shadow:
    0 0 0 2px var(--icon-button-outline-shadow-color),
    0 0 0 4px var(--button-focus-ring-color, --focus);
}

.cauldron--theme-dark
  .IconButton--tertiary:is([disabled], [aria-disabled='true']) {
  color: #74818b;
}

:root {
  --dialog-background-color: #fff;
  --dialog-border-color: var(--gray-40);
  --dialog-header-background-color: var(--gray-20);
  --dialog-footer-background-color: var(--gray-20);
  --dialog-heading-text-color: var(--header-text-color-dark);
  --dialog-padding: var(--space-small);
  --dialog-header-padding: var(--space-smallest) 0;
  --dialog-header-border: 1px solid var(--dialog-border-color);
  --dialog-content-padding: var(--dialog-padding);
  --dialog-footer-padding: var(--dialog-padding);
  --dialog-footer-border: 1px solid var(--dialog-border-color);
  --dialog-header-height: 2.625rem;
  --dialog-close-button-size: var(--target-size-minimum);
  --dialog-vertical-offset: 4rem;
  --dialog-bottom-spacing: 1.875rem;
  --dialog-content-line-height: inherit;
}

.cauldron--theme-dark {
  --dialog-background-color: var(--accent-medium);
  --dialog-border-color: var(--gray-20);
  --dialog-header-background-color: var(--accent-dark);
  --dialog-footer-background-color: var(--accent-dark);
  --dialog-heading-text-color: #fff;
}

.Dialog {
  display: none;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  position: fixed;
  top: 0;
  z-index: var(--z-index-dialog-scrim);
  background-color: var(--scrim-background-color);
}

.Dialog.Dialog--show {
  display: block;
}

.Dialog__inner {
  width: 400px;
  max-width: 90%;
  left: 50%;
  top: var(--dialog-vertical-offset);
  display: flex;
  flex-direction: column;
  transform: translateX(-50%);
  background-color: var(--dialog-background-color);
  border: 1px solid var(--dialog-border-color);
  z-index: var(--z-index-dialog);
  position: relative;
  box-shadow: var(--drop-shadow-overlay);
}

.Dialog__header {
  display: flex;
  background-color: var(--dialog-header-background-color);
  border-bottom: var(--dialog-header-border);
  align-items: center;
  justify-content: space-between;
  min-height: var(--dialog-header-height);
  font-weight: var(--font-weight-bold);
  padding: var(--dialog-header-padding);
  gap: var(--space-smallest);
}

.Dialog__heading,
.Dialog__close {
  margin: 0;
  font-size: var(--text-size-small);
}

.Dialog__heading {
  display: flex;
  align-items: center;
  margin-left: var(--dialog-padding);
  word-break: break-word;
}

.Dialog__close {
  color: var(--dialog-heading-text-color);
  background-color: initial;
  border: 1px solid var(--dialog-border-color);
  border-radius: 3px;
  padding: 0;
  height: var(--dialog-close-button-size);
  width: var(--dialog-close-button-size);
  margin-right: var(--space-smallest);
  flex-shrink: 0;
  position: relative;
}

.Dialog__close:active {
  background-color: var(--dialog-border-color);
}

.Dialog__close:before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 4px;
  pointer-events: none;
}

.cauldron--theme-dark .Dialog__close:before {
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
}

.Dialog__close:is(:hover, :focus):before {
  box-shadow: 0 0 0 1px var(--dialog-heading-text-color);
}

.Dialog__close svg {
  /* match icon size with height/width of button */
  --icon-size: 100%;
}

.cauldron--theme-dark .Dialog__close {
  border-width: 2px;
}

.Dialog__content {
  padding: var(--dialog-content-padding);
  line-height: var(--dialog-content-line-height);
}

.Dialog__content p:first-child {
  margin-top: 0;
}

.Dialog__content p:last-child {
  margin-bottom: 0;
}

.Dialog__footer {
  background-color: var(--dialog-footer-background-color);
  border-top: var(--dialog-footer-border);
  padding: var(--dialog-footer-padding);
}

/**
* style for info modal
*/

.Modal--info .Dialog__header {
  background-color: transparent;
}

.Modal--info .Dialog__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Modal--info .Dialog__footer {
  display: flex;
  justify-content: center;
  background-color: transparent;
  border-top: none;
  padding-top: 0;
}

@media (min-width: 20rem) {
  .Modal--scrollable .Dialog__inner {
    max-height: calc(
      100vh - var(--dialog-vertical-offset) - var(--dialog-bottom-spacing)
    );
  }

  .Modal--scrollable .Dialog__content {
    overflow-y: auto;
  }
}

/* Dark Theme */

.cauldron--theme-dark .Dialog__inner {
  color: var(--white);
  border-width: 4px;
}

/* Compensate for the larger dark theme border so Dialog dimensions remain consistent */

.cauldron--theme-dark .Dialog__content {
  --dialog-content-padding-compensation: 3px;
  padding: calc(
    var(--dialog-content-padding) - var(--dialog-content-padding-compensation)
  );
}

.cauldron--theme-dark .Dialog__header {
  border-bottom: 1px solid var(--stroke-dark);
}

.cauldron--theme-dark .Dialog__footer {
  border-top: 1px solid var(--stroke-dark);
}

.cauldron--theme-dark .Dialog__header,
.cauldron--theme-dark .Dialog__footer {
  color: var(--gray-20);
}

.cauldron--theme-dark .Dialog__close {
  color: var(--gray-20);
}

.cauldron--theme-dark .Dialog__close:active {
  color: var(--accent-medium);
}

.cauldron--theme-dark .Modal--info .Dialog__header,
.cauldron--theme-dark .Modal--info .Dialog__content,
.cauldron--theme-dark .Modal--info .Dialog__footer {
  background-color: transparent;
}

.cauldron--theme-dark .Modal--info .Dialog__footer {
  border-top: none;
}

.cauldron--theme-dark .Alert .Dialog__inner {
  background-color: var(--accent-dark);
}

.cauldron--theme-dark .Alert .Dialog__header {
  background-color: var(--accent-medium);
  border-bottom: none;
}

.cauldron--theme-dark .Alert .Dialog__footer {
  background-color: transparent;
  border-top: none;
}

.cauldron--theme-dark .Alert .Dialog__content .Link,
.cauldron--theme-dark .Alert .Dialog__content .Link:hover {
  color: currentColor;
}

/* Dark theme: checked checkbox/radio icons in Dialogs should inherit the
   dialog's text color rather than using the global checked color */

.cauldron--theme-dark .Dialog .Checkbox__overlay.Icon--checkbox-checked,
.cauldron--theme-dark .Dialog .Radio__overlay.Icon--radio-checked {
  color: currentColor;
}

:root {
  --link-text-color: var(--gray-90);
  --link-text-color-hover: #3873a3;
  --link-text-color-light: rgba(60, 122, 174, 0.1);
}

.cauldron--theme-dark {
  --link-text-color: var(--white);
  --link-text-color-hover: var(--accent-light);
}

.Link {
  text-decoration: underline;
  color: var(--link-text-color);
  padding: var(--link-padding, var(--space-quarter));
  background: transparent;
  vertical-align: baseline;
}

.Link:hover {
  text-decoration: underline;
  color: var(--link-text-color-hover);
}

.Link:focus {
  text-decoration: underline;
  outline-offset: 0;
}

.Link:where(:has(.Icon)) {
  width: -moz-fit-content;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--space-half);
  flex-wrap: wrap;
}

:root {
  --options-menu-text-color: var(--gray-90);
  --options-menu-disabled-text-color: var(--disabled);
  --options-menu-background-color: var(--white);
  --options-menu-hover-background-color: var(--gray-20);
  --options-menu-active-border-color: var(--accent-primary);
  --options-menu-border-color: var(--gray-40);
  --options-menu-width: auto;
  --options-menu-item-font-size: var(--text-size-smaller);
}

.cauldron--theme-dark {
  --options-menu-text-color: var(--white);
  --options-menu-disabled-text-color: rgba(255, 255, 255, 0.5);
  --options-menu-background-color: var(--accent-dark);
  --options-menu-hover-background-color: var(--accent-medium);
  --options-menu-active-border-color: var(--accent-info);
  --options-menu-border-color: var(--stroke-dark);
}

.OptionsMenu {
  position: relative;
  color: var(--text-color-base);
  width: var(--options-menu-width);
}

.OptionsMenu__trigger {
  font-size: var(--text-small-medium);
  color: var(--options-menu-text-color);
  border-radius: 3px;
  background-color: var(--options-menu-background-color);
  border: 1px solid var(--options-menu-border-color);
  box-sizing: border-box;
  height: 34px;
  width: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.OptionsMenu__trigger ~ .OptionsMenu__list {
  top: 33px;
}

.OptionsMenu__list {
  color: var(--options-menu-text-color);
  display: none;
  position: absolute;
  font-size: var(--options-menu-item-font-size);
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--options-menu-background-color);
  right: 0;
  left: auto;
  border: 1px solid var(--options-menu-border-color);
  z-index: var(--z-index-listbox);
  min-width: 150px;
  max-height: 140px;
  overflow-y: auto;
  box-shadow: var(--drop-shadow-overlay);
}

.OptionsMenu__list:is(.OptionsMenu--expanded) {
  display: block;
}

.OptionsMenu__list-item {
  font-weight: var(--font-weight-normal);
  padding: var(--space-smallest) calc(var(--space-smallest) + var(--space-half));
  cursor: default;
  border-bottom: 1px solid var(--options-menu-border-color);
  position: relative;
}

.OptionsMenu__list-item:last-child {
  border-bottom: none;
}

.OptionsMenu__list-item:hover,
.OptionsMenu__list-item:focus {
  background-color: var(--options-menu-hover-background-color);
  outline: 0;
}

.OptionsMenu__list-item:focus {
  box-shadow:
    inset 0 0 0 1px var(--options-menu-hover-background-color),
    inset 0 0 0 3px var(--focus);
}

.OptionsMenu__list-item[aria-disabled='true'] {
  color: var(--options-menu-disabled-text-color);
}

.OptionsMenu__list-item[aria-disabled='true']:hover {
  background-color: transparent;
}

.OptionsMenu.OptionsMenu--align-left .OptionsMenu__list {
  left: 0;
  right: auto;
}

.OptionsMenu .OptionsMenu__list {
  top: 100%;
}

:root {
  --scrim-background-color: rgba(0, 0, 0, 0.5);
}

.Scrim {
  background-color: var(--scrim-background-color);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  display: none;
  z-index: var(--z-index-scrim);
  transition: opacity 300ms;
}

.Scrim--light {
  background-color: rgba(255, 255, 255, 0.75);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  display: none;
  z-index: var(--z-index-scrim);
  transition: opacity 300ms;
  z-index: var(--z-index-scrim-action-needed);
}

.Scrim.Scrim--show,
.Scrim--light.Scrim--show {
  display: block;
}

.Scrim.Scrim--fade-in,
.Scrim--light.Scrim--fade-in {
  opacity: 1;
  transition: opacity 300ms;
}

:root {
  --select-min-height: 33px;
  --select-width: 300px;
  --select-arrow-spacing: 10px;
  --field-select-max-width: 100%;
  --field-select-margin-bottom: var(--space-small);
}

.Field__select {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--field-select-margin-bottom);
}

.Field__select + .Field__select {
  margin-top: 0;
}

.Field__select--disabled {
  opacity: 0.65;
}

.Field__select--wrapper {
  position: relative;
  width: var(--select-width);
  max-width: var(--field-select-max-width);
}

.arrow-down {
  width: 0;
  height: 0;
  position: absolute;
  top: 40%;
  right: var(--select-arrow-spacing);
  border-left: var(--space-half) solid transparent;
  border-right: var(--space-half) solid transparent;
  border-top: var(--space-three-quarters) solid var(--field-content-color);
  pointer-events: none;
}

.Field__select--wrapper select {
  width: 100%;
  min-height: var(--select-min-height);
  padding: var(--space-three-quarters) var(--space-smallest);
  padding-right: var(--space-large);
  border: 1px solid var(--field-border-color);
  border-radius: var(--field-border-radius);
  font-family: Roboto;
  font-weight: normal;
  font-style: normal;
  font-size: var(--text-size-small);
  color: var(--field-content-color);
  text-decoration: rgb(102, 102, 102);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.Field__select--wrapper select:not([disabled]):hover {
  border-color: var(--field-border-color-hover);
}

.Field__select--wrapper select:focus {
  border-color: var(--field-border-color-focus);
  box-shadow:
    0 0 0 1px var(--field-border-color-focus),
    0 0 5px var(--field-border-color-focus-glow),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.Field__select--wrapper select:focus:hover {
  border-color: var(--field-border-color-focus-hover);
}

.Field__select--wrapper select:user-invalid,
.Field--has-error select {
  border-width: 1px;
  border-color: var(--field-border-color-error);
}

.Field__select--wrapper select:user-invalid:hover,
.Field__select--wrapper.Field--has-error select:hover {
  border-color: var(--field-border-color-error-hover);
  box-shadow: 0 0 0 1px var(--field-border-color-error-hover);
}

.Field__select--wrapper select:user-invalid:focus,
.Field__select--wrapper.Field--has-error select:focus {
  border-color: var(--field-border-color-error);
  box-shadow:
    rgba(0, 0, 0, 0.05) 0 1px 2px 0 inset,
    var(--field-border-color-error) 0 0 0 1px,
    var(--field-border-color-error-focus-glow) 0 0 5px 0;
}

.Field__select--wrapper select:user-invalid:focus:hover,
.Field__select--wrapper.Field--has-error select:focus:hover {
  border-color: var(--field-border-color-error-hover);
}

:root {
  --menu-width: 257px;
}

.SideBar {
  display: none;
  position: fixed;
  top: var(--top-bar-height);
  bottom: 0;
  overflow: auto;
  background-color: var(--white);
  width: var(--menu-width);
  left: calc(-1 * var(--menu-width));
  box-sizing: border-box;
  transition: left 0.3s;
  z-index: var(--z-index-side-bar);
}

.TopBar--thin .SideBar {
  top: var(--top-bar-height-thin);
}

.SideBar.SideBar--show {
  display: block;
}

.SideBar.SideBar--active {
  left: 0;
  transition: left 0.3s;
}

.SideBar li {
  position: relative;
}

.SideBar li:not([aria-controls]) {
  padding: var(--space-small);
  border-left: var(--border-width) solid transparent;
}

.SideBar li:not([aria-controls]):not(.MenuItem--active):hover,
.SideBar li:not([aria-controls]):focus-within {
  outline: 0;
  background-color: var(--gray-20);
}

.SideBar li:not([aria-controls]).MenuItem--active {
  border-left: var(--border-width) solid var(--accent-primary);
  background-color: var(--white);
}

.SideBar li:not([aria-controls]).MenuItem--active a {
  color: var(--gray-90);
  font-weight: var(--font-weight-medium);
}

.SideBar li:not([aria-controls]).MenuItem--active a:focus:before {
  content: '';
  width: var(--border-width);
  height: 100%;
  background-color: var(--top-bar-text-color);
  position: absolute;
  top: 0;
  left: 2px;
}

.SideBar > li {
  color: var(--gray-60);
  font-size: var(--text-size-small);
  font-weight: var(--font-weight-light);
  cursor: pointer;
  border-right: 1px solid #b3bfc6;
  border-bottom: 1px solid#b3bfc6;
}

.SideBar > li:focus {
  outline: 0;
}

.SideBar > li a {
  text-decoration: none;
  color: var(--gray-60);
  font-size: var(--text-size-small);
  font-weight: var(--font-weight-light);
}

.SideBar > li a:focus {
  outline: 0;
}

/* Dark Theme */

.cauldron--theme-dark .SideBar {
  background-color: var(--accent-medium);
  color: var(--accent-light);
}

.cauldron--theme-dark .SideBar > li a {
  color: var(--accent-light);
}

.cauldron--theme-dark .SideBar > li {
  color: var(--accent-light);
  border-right: 2px solid #5d676f;
  border-bottom: 2px solid #5d676f;
}

.cauldron--theme-dark .SideBar li:not([aria-controls]).MenuItem--active {
  border-left: var(--border-width) solid var(--accent-info);
  background-color: var(--accent-medium);
}

.cauldron--theme-dark .SideBar li:not([aria-controls]).MenuItem--active a {
  color: var(--white);
  font-weight: var(--font-weight-medium);
}

.cauldron--theme-dark
  .SideBar
  li:not([aria-controls]):not(.MenuItem--active):hover,
.cauldron--theme-dark .SideBar li:not([aria-controls]):focus-within {
  background-color: var(--accent-dark);
}

.RadioCard__overlay {
  border-radius: 50%;
}

.RadioCard input[type='radio'] {
  position: absolute;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 1px;
  width: 1px;
}

.RadioCard__overlay.RadioCard__overlay--focused {
  border: 1px solid var(--focus);
  box-shadow:
    inset 0 0 0 1px var(--focus),
    0 0 4px 2px var(--focus-glow);
}

.RadioCard__overlay--checked.RadioCard__overlay--checked {
  background-color: var(--gray-20);
}

.RadioCard__overlay.RadioCard__overlay--disabled,
.RadioCard__overlay.RadioCard__overlay--disabled:hover {
  background-color: var(--gray-30);
}

.RadioCardGroup {
  display: flex;
  gap: var(--space-large);
  flex-wrap: wrap;
}

.RadioCardGroup .Radio + .Radio {
  margin-top: 0;
}

.RadioCardGroup__Base {
  text-align: center;
}

.RadioCardGroup__Checked {
  display: flex;
  justify-content: flex-end;
  min-height: 44px;
}

.RadioCardGroup__Icon.Icon svg {
  /**
   * this is edge case to pass color-contrast when the radio-card is selected,
   * it is not a color we want to live in cauldron as a variable
   * @see https://github.com/dequelabs/cauldron/pull/736
   */
  color: #4f990f;
  height: 44px;
  width: 44px;
}

.RadioCardGroup__Card {
  width: var(--radio-card-width);
  height: var(--radio-card-height);
  align-content: center;
}

.RadioCardGroup__Card .Panel__Content {
  padding-top: 0;
  padding-bottom: 0;
}

.RadioCardGroup__Card:hover {
  background-color: var(--gray-20);
}

.Radio__overlay--checked.Radio__overlay--checked {
  background-color: var(--gray-20);
}

.RadioCardGroup__Image * {
  max-width: 100%;
}

.RadioCardGroup__Image {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.RadioCardGroup__Label {
  font-size: var(--text-size-medium);
  font-weight: var(--font-weight-bold);
  color: var(--field-label-text-color);
  margin-top: var(--space-small);
  display: flex;
  justify-content: center;
}

.cauldron--theme-dark .RadioCardGroup__Icon.Icon svg {
  color: var(--accent-success);
}

.cauldron--theme-dark .RadioCardGroup__Card {
  background-color: var(--dark-workspace-color);
}

.Toast {
  top: var(--top-bar-height);
  position: var(--toast-position, fixed);
  right: 0;
  left: 0;
  color: #0b0e11;
  font-size: var(--text-size-small);
  z-index: var(--z-index-toast);
  align-items: center;
  box-sizing: border-box;
  display: flex;
  padding: var(--space-smallest) var(--space-small);
  max-height: calc(100vh - var(--top-bar-height));
}

.Toast.Toast--non-dismissible {
  position: static;
  margin-bottom: var(--space-small);
  max-height: none;
}

.TopBar--thin .Toast {
  top: var(--top-bar-height-thin);
  max-height: calc(100vh - var(--top-bar-height-thin));
}

.TopBar--thin .Toast.Toast--non-dismissible {
  max-height: none;
}

.TopBar--thin .Toast .Toast__message-content {
  max-height: calc(
    100vh - var(--top-bar-height-thin) - 2 * var(--space-smallest)
  );
}

.Toast.Toast--non-dismissible .Toast__message-content {
  max-height: none;
  overflow-y: visible;
}

.Toast.Toast--success {
  background-color: var(--success);
}

.Toast.Toast--warning {
  background-color: var(--warning);
}

.Toast.Toast--error {
  background-color: var(--error-alt);
  z-index: var(--z-index-toast-action-needed);
}

.Toast.Toast--info {
  background-color: var(--info);
}

.Toast__dismiss {
  background: transparent;
  border: 0;
  height: calc(var(--text-size-small) + 9px);
  color: currentColor;
  flex-shrink: 0;
}

.Toast__dismiss:focus {
  outline: 2px solid;
}

.Toast__message {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Toast__message .Toast__message-content {
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  overflow-y: auto;
  max-height: calc(100vh - var(--top-bar-height) - 2 * var(--space-smallest));
}

.Toast__message .Icon {
  margin-right: var(--space-smallest);
  flex-shrink: 0;
}

.Toast__message .fa {
  margin-right: 3px;
}

.Toast__message .Link,
.Toast__message button.Link {
  color: var(--accent-dark);
  font-size: var(--text-size-small);
  font-weight: var(--font-weight-light);
  text-decoration: underline;
}

.Toast__message .Link:focus {
  outline: 2px solid;
  outline-offset: var(--space-quarter);
}

.Toast__message button.Link:hover,
.Notice a.Link:hover {
  color: var(--accent-medium);
}

.Toast:focus {
  outline: 0;
}

.Toast:focus .Toast__message > .Toast__message-content {
  border-bottom-color: var(--accent-dark);
}

:root {
  --tooltip-background-color: var(--gray-10);
  --tooltip-border-color: var(--gray-90);
  --tooltip-text-color: var(--gray-90);
  --tooltip-box-shadow: var(--drop-shadow-overlay);
  --tooltip-info-background-color: var(--white);
  --tooltip-info-border-color: var(--accent-primary);
  --tooltip-info-text-color: var(--gray-90);
  --tooltip-info-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 10px 0px;
}

/* Dark theme variables */

.cauldron--theme-dark {
  --tooltip-background-color: var(--accent-medium);
  --tooltip-border-color: #b3bfc6;
  --tooltip-text-color: var(--white);
  --tooltip-info-background-color: var(--accent-dark);
  --tooltip-info-border-color: var(--accent-info);
  --tooltip-info-text-color: var(--white);
}

.Tooltip {
  background-color: var(--tooltip-background-color);
  border: 2px solid var(--tooltip-border-color);
  box-shadow: var(--tooltip-box-shadow);
  color: var(--tooltip-text-color);
  font-size: var(--text-size-smaller);
  line-height: var(--text-size-normal);
  padding: var(--space-half) var(--space-small);
  border-radius: 3px;
  z-index: var(--z-index-tooltip);
  text-align: center;
  max-width: calc(100vw - 16px);
  word-break: break-word;
}

.Tooltip--hidden {
  visibility: hidden;
  /* Take the tooltip out of the DOM layout flow so it doesn't reserve space when hidden */
  position: fixed !important;
}

.TooltipInfo {
  background-color: var(--tooltip-info-background-color);
  border: 2px solid var(--tooltip-info-border-color);
  box-shadow: var(--tooltip-info-box-shadow);
  color: var(--tooltip-info-text-color);
  max-width: 12.5rem;
  padding: var(--space-half);
}

/* TooltipArrow needs some dimensions to accurately calculate its positioning */

.TooltipArrow {
  position: absolute;
  height: 0.1px;
  width: 0.1px;
}

/* Adjust position to try to center the arrow in the tooltip's border */

[class*='Tooltip--top'] .TooltipArrow {
  left: 50%;
  bottom: -1px;
}

[class*='Tooltip--bottom'] .TooltipArrow {
  left: 50%;
  top: -1px;
}

[class*='Tooltip--left'] .TooltipArrow {
  top: 50%;
  right: -1px;
}

[class*='Tooltip--right'] .TooltipArrow {
  top: 50%;
  left: 0;
}

/*
 * Default tooltip arrow styles
 */

.TooltipArrow:before {
  content: '';
  position: absolute;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--tooltip-border-color);
  border-bottom: none;
  transform: translateX(-50%);
  transform-origin: top;
}

[class*='Tooltip--bottom'] .TooltipArrow:before {
  transform: translateX(-50%) rotate(180deg);
}

[class*='Tooltip--left'] .TooltipArrow:before {
  transform: rotate(-90deg) translateY(-6px);
}

[class*='Tooltip--right'] .TooltipArrow:before {
  transform: rotate(90deg) translateY(100%);
}

/*
 * Info tooltip arrow styles
 */

.TooltipInfo .TooltipArrow:before {
  border-top-color: var(--tooltip-info-border-color);
}

/*
 * "rich" tooltip with heading-like element and content
 */

.Tooltip--big {
  border: 1px solid var(--field-border-color);
  border-radius: 0;
  padding: 0;
  background: #fff;
  color: var(--text-base);
  width: 247px;
}

.Tooltip--big .Line {
  margin: 0;
}

.TooltipHead {
  background: var(--gray-20);
  font-size: var(--text-size-small);
  color: var(--gray-90);
  padding: var(--space-small) var(--space-large);
  text-align: center;
}

.TooltipContent {
  background: #fff;
  text-align: left;
}

.Tooltip--big ul {
  margin: 10px 15px 10px 28px;
}

.Tooltip--big li {
  margin: 6px 0;
}

button.TooltipTabstop {
  font-family: inherit;
  background-color: transparent;
  border: none;
  color: inherit;
  -webkit-appearance: none;
}

:root {
  --top-bar-background-color: var(--white);
  --top-bar-background-color-active: var(--white);
  --top-bar-text-color: var(--accent-dark);
  --top-bar-menuitem-separator: #b3bfc6;
  --top-bar-border-bottom-color: var(--gray-40);
  --top-bar-accent-primary: var(--accent-info);
  --top-bar-accent-warning: var(--accent-warning);
  --top-bar-accent-error: var(--accent-danger);
  --top-bar-accent-success: #62e86b;
  --top-bar-accent-warning-other: var(--accent-danger-light);
  --top-bar-height: 70px;
  --top-bar-height-thin: 43px;
  --top-bar-position: fixed;
  --top-bar-padding-inline-start: 0;
  --top-bar-menu-flex: auto;
  --top-bar-button-max-width: none;
  --top-bar-button-flex-direction: row;
  --top-bar-button-font-size: var(--text-size-small);
  --top-bar-item-padding: 0 var(--space-small);
  --top-bar-border-bottom: solid 1px var(--top-bar-border-bottom-color);
}

.TopBar {
  position: var(--top-bar-position);
  width: 100%;
  height: var(--top-bar-height);
  top: 0;
  flex: none;
  box-sizing: border-box;
  z-index: var(--z-index-top-bar);
  display: flex;
  align-items: center;
  background-color: var(--top-bar-background-color);
  color: var(--top-bar-text-color);
  border-bottom: var(--top-bar-border-bottom);
  -webkit-padding-start: var(--top-bar-padding-inline-start);
          padding-inline-start: var(--top-bar-padding-inline-start);
}

.TopBar--thin .TopBar {
  height: var(--top-bar-height-thin);
}

.TopBar > ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  flex: var(--top-bar-menu-flex);
}

.TopBar li button {
  background: transparent;
  color: inherit;
  max-width: var(--top-bar-button-max-width);
  font-size: var(--top-bar-button-font-size);
  flex-direction: var(--top-bar-button-flex-direction);
}

.TopBar > ul > li {
  box-sizing: border-box;
  height: var(--top-bar-height);
  cursor: pointer;
  position: relative;
}

.TopBar--thin .TopBar > ul > li {
  height: var(--top-bar-height-thin);
}

.TopBar > ul > li:not(.TopBar__menu-trigger) {
  padding: var(--top-bar-item-padding);
  font-size: var(--text-size-small);
  height: var(--top-bar-height);
  display: flex;
  align-items: center;
}

.TopBar--thin .TopBar > ul > li:not(.TopBar__menu-trigger) {
  height: var(--top-bar-height-thin);
}

.TopBar > ul > .TopBar__menu-trigger {
  border-bottom: solid 1px var(--top-bar-border-bottom-color);
}

.TopBar > ul > li:focus,
.TopBar > ul > li:hover {
  outline: 0;
}

.TopBar > ul > li:focus:before,
.TopBar > ul > li:hover:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--border-width);
  background-color: var(--top-bar-text-color);
}

.TopBar > ul > li .fa {
  font-size: var(--text-small-medium);
}

.TopBar > ul > li a:focus,
.TopBar > ul > li button:focus {
  outline: 0;
}

.TopBar a {
  color: var(--top-bar-text-color);
  text-decoration: none;
}

.TopBar .MenuItem--align-right {
  margin-left: auto;
}

.TopBar li.MenuItem--active,
.TopBar [aria-current='page'] {
  background-color: var(--top-bar-background-color-active);
}

.TopBar li.MenuItem--active:hover,
.TopBar [aria-current='page'] {
  border-bottom: var(--border-width) solid transparent !important;
}

.TopBar .TopBar__menu-trigger {
  display: flex;
  align-items: center;
  font-size: var(--text-size-medium);
  padding: 0 var(--space-small);
  align-self: flex-start;
  box-sizing: border-box;
  background-color: var(--top-bar-background-color);
  color: var(--top-bar-text-color);
}

.TopBar__item--icon {
  text-align: center;
}

.MenuItem__logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.MenuItem--separator {
  border-left: 1px solid var(--top-bar-menuitem-separator);
}

.TopBar .OptionsMenu__list {
  top: var(--top-bar-height);
  right: 0;
}

/* Dark Theme */

.cauldron--theme-dark {
  --top-bar-background-color: var(--accent-dark);
  --top-bar-menuitem-separator: #5d676f;
  --top-bar-border-bottom-color: var(--gray-70);
  --top-bar-text-color: var(--accent-light);
  --top-bar-background-color-active: #0b0e11;
  --top-bar-border-bottom: none;
}

.cauldron--theme-dark .TopBar [aria-current='page'] {
  background-color: var(--top-bar-background-color-active);
}

.cauldron--theme-dark .TopBar > ul > .TopBar__menu-trigger {
  border-bottom: solid 1px var(--top-bar-border-bottom-color);
}

.cauldron--theme-dark .TopBar > ul > li:focus-within:before,
.cauldron--theme-dark .TopBar > ul > li:hover:before {
  background-color: var(--top-bar-text-color);
}

@media (max-width: 71.25rem) {
  .TopBar > ul {
    border: 0;
  }
}

:root {
  --skip-link-background-color: rgba(255, 255, 255, 0.95);
  --skip-link-focus-color: var(--focus-light);
  --skip-link-text-color: var(--text-color-base);
}

.SkipLink {
  position: absolute;
  box-sizing: border-box;
  padding: var(--space-smallest);
  top: -999px;
  left: 11px;
  opacity: 0;
  transition: 250ms opacity;
  z-index: var(--z-index-skip-container);
}

.SkipLink.SkipLink--active {
  top: 11px;
}

.SkipLink.SkipLink--fade {
  opacity: 1;
  transition: 250ms opacity;
}

.SkipLink a {
  min-width: 13rem;
  background-color: var(--skip-link-background-color);
  display: block;
  color: var(--skip-link-text-color);
  text-decoration: none;
  padding: 12px;
  border-radius: 2px;
}

.SkipLink .SkipLink__item--first,
.SkipLink .SkipLink__item--second {
  display: block;
}

.SkipLink .SkipLink__item--first {
  font-size: var(--text-size-small);
  font-weight: var(--font-weight-light);
  margin-bottom: var(--space-three-quarters);
}

.SkipLink .SkipLink__item--second {
  font-size: var(--text-size-normal);
  font-weight: var(--font-weight-medium);
}

.SkipLink .Icon--triangle-right {
  color: var(--skip-link-focus-color);
}

.SkipLink ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.SkipLink ul li {
  padding: var(--space-quarter);
}

.SkipLink ul li a {
  padding: 0;
}

.SkipLink ul li a span {
  display: inline-block;
  margin-right: 3px;
}

.SkipLink ul li a:before {
  font-family: 'FontAwesome';
  content: '\f0da';
  margin: 0 2px;
  display: inline-block;
  color: transparent;
}

.SkipLink ul li a:after {
  font-family: 'FontAwesome';
  content: '\f0d9';
  margin: 0 2px;
  display: inline-block;
  color: transparent;
}

.SkipLink ul li a:focus {
  outline: 0;
}

.SkipLink ul li a:focus:before,
.SkipLink ul li a:focus:after {
  color: var(--text-color-light);
}

/* Dark Theme */

.cauldron--theme-dark {
  --skip-link-background-color: rgba(11, 14, 17, 0.95);
  --skip-link-focus-color: var(--focus-dark);
  --skip-link-text-color: var(--text-color-light);
}

:root {
  --loader-ring-size: 104px;
  --loader-ring-thickness: 10px;
  --loader-inner-ring-size: 4px;
  --loader-ring-color: var(--accent-primary);
  --loader-inner-ring-color: #fff;
  --loader-logo-color: var(--accent-primary);
  --loader-text-color: var(--gray-90);
  --loader-overlay-border-color: var(--gray-40);
  --loader-overlay-background-color: var(--workspace-background-color);
}

.cauldron--theme-dark {
  --loader-ring-color: var(--accent-dark);
  --loader-inner-ring-color: var(--accent-info);
  --loader-logo-color: var(--white);
  --loader-text-color: var(--white);
  --loader-overlay-border-color: #5d676e;
  --loader-overlay-background-color: var(--accent-medium);
}

.Loader {
  margin: 50px auto;
  position: relative;
  display: flex;
  height: var(--loader-ring-size);
  width: var(--loader-ring-size);
  align-items: center;
  justify-content: center;
}

.Loader:before,
.Loader:after {
  content: '';
  display: block;
  border-radius: 50%;
}

.Loader:before {
  height: var(--loader-ring-size);
  width: var(--loader-ring-size);
  border: var(--loader-ring-thickness) solid var(--loader-ring-color);
  position: absolute;
}

.Loader:after {
  --size: calc(
    var(--loader-ring-size) - var(--loader-ring-thickness) +
      var(--loader-inner-ring-size)
  );
  height: var(--size);
  width: var(--size);
  border: var(--loader-inner-ring-size) solid transparent;
  border-top: var(--loader-inner-ring-size) solid var(--loader-inner-ring-color);
  animation: spin 1.5s linear infinite;
}

.Loader__overlay {
  background: var(--loader-overlay-background-color);
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--loader-overlay-border-color);
  border-radius: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  padding: var(--space-large) var(--space-small) var(--space-small)
    var(--space-small);
  z-index: var(--z-index-loader);
  box-shadow: var(--drop-shadow-overlay);
  font-size: var(--text-size-smaller);
  color: var(--text-color-base);
  text-align: center;
}

.cauldron--theme-dark .Loader__overlay {
  color: var(--accent-light);
}

.Loader__overlay__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--loader-ring-size);
  min-width: var(--loader-ring-size);
  margin-bottom: var(--space-small);
}

.Loader__overlay__label {
  color: var(--loader-text-color);
  font-size: var(--text-size-normal);
}

.Loader__overlay > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.Loader__overlay .Loader {
  position: absolute;
  margin: 0;
}

.Loader__overlay svg {
  color: var(--loader-logo-color);
  height: calc(var(--loader-ring-size) * 0.7);
  width: calc(var(--loader-ring-size) * 0.7);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.Offscreen {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin-top: -1px;
}

:root {
  --code-text-color: var(--accent-primary-active);
  --code-border-color: var(--stroke-light);
  --code-background-color: var(--background-light);
  --code-padding: var(--space-smaller);
  --code-border: 1px solid var(--code-border-color);
  --code-display: block;
}

.cauldron--theme-dark {
  --code-text-color: var(--accent-light);
  --code-background-color: var(--accent-dark);
  --code-border-color: var(--stroke-dark);
  --code-border: 1px solid var(--code-border-color);
}

.Code__Header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-smallest);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-size-body);
}

.Code.hljs {
  display: var(--code-display);
  padding: var(--code-padding);
  background: var(--code-background-color);
  border: var(--code-border);
  border-radius: 3px;
  color: var(--code-text-color);
  word-break: break-all;
}

.Code--scrollable {
  overflow-x: auto;
}

.Code code {
  /* important needed to override inline styles */
  white-space: break-spaces !important;
}

.Code--scrollable code {
  /* important needed to override inline styles */
  white-space: pre !important;
}

.Code .hljs-comment {
  color: #575957;
  font-style: italic;
}

.Code .hljs-quote {
  color: #666666;
  font-style: italic;
}

.Code .hljs-keyword,
.Code .hljs-selector-tag,
.Code .hljs-literal,
.Code .hljs-type,
.Code .hljs-addition,
.Code .hljs-attr,
.Code .hljs-attribute {
  color: #8a0c8a;
}

.Code .hljs-number {
  color: #115800;
}

.Code .hljs-selector-attr,
.Code .jljs-selector-psuedo {
  color: var(--accent-primary-active);
}

.Code .hljs-string {
  color: var(--gray-60);
}

.Code .hljs-doctag,
.Code .hljs-regexp {
  color: #256244;
}

.Code .hljs-built_in,
.Code .hljs-title {
  color: var(--accent-dark);
}

.Code .hljs-name,
.Code .hljs-section {
  color: #113366;
  font-weight: bold;
}

.Code .hljs-variable,
.Code .hljs-template-variable,
.Code .hljs-tag,
.Code .hljs-selector-id,
.Code .hljs-selector-class {
  color: #8a0c8a;
}

.Code .hljs-strong {
  font-weight: bold;
}

.Code .hljs-symbol,
.Code .hljs-bullet,
.Code .hljs-subst,
.Code .hljs-meta,
.Code .hljs-link {
  color: #8a3500;
}

.Code .hljs-deletion {
  color: #c92e40;
}

.Code .hljs-formula {
  background: #eee8d5;
}

.Code .hljs-emphasis {
  font-style: italic;
}

/* Dark Theme */

.cauldron--theme-dark .Code .hljs-string {
  color: #8abeb7;
}

.cauldron--theme-dark .Code .hljs-keyword,
.cauldron--theme-dark .Code .hljs-selector-tag,
.cauldron--theme-dark .Code .hljs-literal,
.cauldron--theme-dark .Code .hljs-type,
.cauldron--theme-dark .Code .hljs-addition {
  color: #cc99cc;
}

.cauldron--theme-dark .Code .hljs-symbol,
.cauldron--theme-dark .Code .hljs-bullet,
.cauldron--theme-dark .Code .hljs-subst,
.cauldron--theme-dark .Code .hljs-meta,
.cauldron--theme-dark .Code .hljs-link {
  color: #f99157;
}

.cauldron--theme-dark .Code .hljs-comment {
  color: #9f9f9f;
}

.cauldron--theme-dark .Code .hljs-quote {
  color: orange;
}

.Code .hljs-name,
.Code .hljs-section {
  color: var(--accent-primary-active);
}

.cauldron--theme-dark .Code .hljs-name,
.cauldron--theme-dark .Code .hljs-section {
  color: #79a7d9;
}

.cauldron--theme-dark .Code .hljs-variable,
.cauldron--theme-dark .Code .hljs-template-variable,
.cauldron--theme-dark .Code .hljs-tag,
.cauldron--theme-dark .Code .hljs-selector-id,
.cauldron--theme-dark .Code .hljs-selector-class,
.cauldron--theme-dark .Code .hljs-deletion {
  color: #b5bd68;
}

.cauldron--theme-dark .Code .hljs-doctag,
.cauldron--theme-dark .Code .hljs-regexp {
  color: #f1d4a0;
}

.cauldron--theme-dark .Code .hljs-deletion {
  color: #f37a78;
}

.cauldron--theme-dark .Code .hljs-number {
  color: #ffb200;
}

.cauldron--theme-dark .Code .hljs-attr,
.cauldron--theme-dark .Code .hljs-attribute {
  color: #81a2be;
}

.cauldron--theme-dark .Code .hljs-built_in,
.cauldron--theme-dark .Code .hljs-title {
  color: var(--accent-light);
}

.cauldron--theme-dark .Code .hljs-selector-attr,
.cauldron--theme-dark .Code .hljs-selector-pseudo {
  color: #f99157;
}

.Line {
  border: none;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  margin: 26px auto;
  max-width: 300px;
}

.Line::after {
  content: '';
  display: inline-block;
  margin-top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fdfdfe;
  border: 1px solid #ccc;
}

:root {
  --tabs-border-color: var(--gray-20);
  --tab-shadow-color: var(--accent-primary);
  --tab-inactive-background-color: #fff;
  --tab-inactive-text-color: var(--gray-60);
  --tab-panel-background-color: #fff;
  --tab-active-background-color: #fff;
  --tab-hover-background-color: var(--gray-20);
  --tab-panel-color: var(--gray-80);
  --tab-panel-vertical-padding: var(--space-smaller) var(--space-largest)
    var(--space-largest);
  --tab-panel-horizontal-padding: var(--space-large) var(--space-small);
  --tabs-active-text-color: var(--accent-primary-active);
  --tab-height: 2.875rem;
  --tab-font-size: inherit;
  --tab-flex: initial;
  --tab-panel-border: none;
  --tabs-horizontal-border-bottom: 1px solid var(--tabs-border-color);
  --tabs-width: fit-content;
}

.cauldron--theme-dark {
  --tabs-border-color: var(--accent-dark);
  --tabs-horizontal-border-bottom: 1px solid var(--tabs-border-color);
  --tab-shadow-color: var(--accent-info);
  --tab-panel-background-color: var(--accent-medium);
  --tab-inactive-background-color: var(--accent-medium);
  --tab-inactive-text-color: var(--accent-light);
  --tab-active-background-color: var(--accent-medium);
  --tab-hover-background-color: var(--accent-dark);
  --tab-panel-color: var(--accent-light);
  --tabs-active-text-color: #fff;
}

.Tabs {
  width: var(--tabs-width);
}

.Tabs--vertical {
  display: inline-flex;
}

.Tabs--vertical ~ .TabPanel {
  vertical-align: top;
  display: inline-block;
  padding: var(--tab-panel-vertical-padding);
}

.Tabs--horizontal ~ .TabPanel {
  padding: var(--tab-panel-horizontal-padding);
}

.Tabs--horizontal {
  width: 100%;
  border-bottom: var(--tabs-horizontal-border-bottom);
  background-color: var(--tab-inactive-background-color);
}

.Tablist {
  display: flex;
  flex-direction: row;
  border-right: 1px solid var(--tabs-border-color);
}

.Tabs--vertical .Tablist {
  flex-direction: column;
}

.Tabs--horizontal .Tablist {
  border-left: 0;
}

.Tab {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--tab-height);
  white-space: nowrap;
  list-style-type: none;
  background-color: var(--tab-inactive-background-color);
  color: var(--tab-inactive-text-color);
  padding: var(--space-small);
  font-size: var(--tab-font-size);
  flex: var(--tab-flex);
}

.Tabs--vertical .Tab {
  justify-content: flex-start;
}

.Tabs--vertical .Tab {
  border-right: none;
}

.Tabs--horizontal .Tab {
  border-top: 0;
}

.Tab:hover {
  cursor: pointer;
  background-color: var(--tab-hover-background-color);
  font-weight: var(--font-weight-medium);
}

.Tab--active {
  color: var(--tabs-active-text-color);
  background-color: var(--tab-active-background-color);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--tab-shadow-color);
  z-index: 1;
}

.Tab--active:hover {
  background-color: var(--tab-active-background-color);
}

.Tabs--vertical .Tab--active {
  box-shadow: inset 2px 0 0 var(--tab-shadow-color);
}

.TabPanel {
  overflow-wrap: break-word;
  color: var(--tab-panel-color);
  background-color: var(--tab-panel-background-color);
  border: var(--tab-panel-border);
}

.TabPanel > * {
  margin-top: 0;
}

.TabPanel--hidden {
  display: none !important;
}

.Tabs--thin .Tab {
  height: 2.125rem;
  padding: var(--space-smallest) var(--space-small);
}

:root {
  --tag-text-color: var(--gray-90);
  --tag-background-color: var(--background-light);
  --tag-border-color: var(--gray-30);
  --tag-margin: 0;

  --tag-height: var(--button-height);
  --tag-small-height: 1.5rem;
  --tag-font-size: var(--text-size-body-small);
}

.cauldron--theme-dark {
  --tag-text-color: var(--white);
  --tag-label-text-color: var(--accent-light);
  --tag-background-color: var(--accent-medium);
  --tag-border-color: var(--stroke-dark);
}

.Tag {
  color: var(--tag-text-color);
  background-color: var(--tag-background-color);
  border: 1px solid var(--tag-border-color);
  border-radius: var(--tag-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--space-smallest);
  margin: var(--tag-margin);
  min-height: var(--tag-height);
  font-size: var(--tag-font-size);
}

.Tag--small {
  border-radius: var(--tag-small-height);
  min-height: var(--tag-small-height);
}

.Tag__label {
  margin-right: 3px;
  font-weight: var(--font-weight-medium);
}

:root {
  --tag-button-icon-size: 15px;
}

.TagButton {
  vertical-align: middle;
}

.TagButton__icon {
  margin-left: var(--space-half);
}

.TagButton__icon svg {
  width: var(--tag-button-icon-size);
  height: var(--tag-button-icon-size);
}

:root {
  --table-header-text-color: var(--gray-90);
  --table-header-background-color: var(--white);
  --table-header-background-color-hover: #dddddd;
  /* --table-header-sorting-text-color will be deprecated */
  --table-header-sorting-text-color: var(--gray-90);
  --table-cell-text-color: var(--gray-60);
  --table-cell-background-color: var(--white);
  --table-row-border-color: var(--gray-20);
  --table-space: var(--space-small);
  --table-header-sorting-border-color: var(--gray-90);
  --table-box-shadow: var(--drop-shadow-raised);
  /* --table-odd-row-background will be deprecated */
  --table-odd-row-background: var(--gray-10);
  --table-sort-hover-focus-ring-color: var(--gray-90);
}

.cauldron--theme-dark {
  --table-header-text-color: var(--white);
  --table-header-background-color: var(--accent-dark);
  /* --table-header-sorting-text-color will be deprecated */
  --table-header-sorting-text-color: var(--white);
  --table-header-background-color-hover: #53636e;
  --table-cell-text-color: var(--accent-light);
  --table-cell-background-color: var(--accent-dark);
  --table-row-border-color: #5d676f;
  --table-header-sorting-border-color: var(--accent-info);
  /* --table-odd-row-background will be deprecated */
  --table-odd-row-background: var(--gray-90);
  --table-sort-hover-focus-ring-color: var(--accent-light);
}

.Table {
  table-layout: auto;
  font-size: var(--text-size-small);
  border-collapse: collapse;
  text-align: left;
  width: var(--table-width, 100%);
  overflow-wrap: break-word;
}

.TableGrid {
  display: grid;
  grid-template-columns: var(--table-grid-template-columns, auto);
  grid-auto-rows: auto;
}

:where(.TableGrid) :is(.TableHead, .TableBody, .TableFooter, .TableRow) {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: -1 / 1;
}

.TableHeader {
  background: var(--table-header-background-color);
  font-weight: var(--font-weight-medium);
  color: var(--table-header-text-color);
  border-bottom: 1px solid var(--table-row-border-color);
}

.TableBody .TableHeader {
  border-bottom-width: 1px;
  border-right: 1px solid var(--table-row-border-color);
}

.TableBody .TableRow:last-child .TableHeader {
  border-bottom: none;
}

.TableHeader[aria-sort] {
  padding: 0;
}

.TableHeader .TableHeader__sort-button {
  background-color: transparent;
  font-family: inherit;
  width: 100%;
  font-size: var(--text-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--table-header-text-color);
  align-items: center;
  justify-content: flex-start;
  padding: var(--table-space) var(--space-large);
  text-align: inherit;
}

.TableHeader__sort-button:hover {
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--table-sort-hover-focus-ring-color);
}

.TableHeader__sort-button:focus {
  outline-offset: unset;
}

/* Applies TableCell styles to a <TableHeader> with variant="cell". Only results in visual changes, not semantic ones. */

.TableHeader--cell-variant {
  font-weight: var(--font-weight-normal);
}

/* These styles are not applying and will be deprecated */

.TableHeader--sort-ascending .TableHeader__sort-button,
.TableHeader--sort-decscending .TableHeader__sort-button {
  color: var(--table-header-sorting-text-color);
}

/* compensate the gap in height between TableHeader and Icon */

.TableHeader__sort-button span {
  margin: calc(var(--space-half) * -1) 0;
}

.TableCell {
  background: var(--table-cell-background-color);
  color: var(--table-cell-text-color);
  border-bottom: 1px solid var(--table-row-border-color);
}

.TableCell,
.TableHeader {
  padding: var(--table-space) var(--space-large);
}

.Table:not(.Table--border) .TableRow:last-child .TableCell {
  border: none;
}

.Table--border {
  box-shadow: var(--table-box-shadow);
}

.TableCell {
  color: var(--gray-90);
}

.cauldron--theme-dark .TableCell {
  color: var(--white);
}

.Table--border,
.Table--border :is(.TableHeader, .TableFooter, .TableCell) {
  border: 1px solid var(--gray-40);
}

:where(.TableGrid).Table--border :is(.TableCell, .TableHeader) {
  border: none;
}

:where(.TableGrid).Table--border
  :is(.TableBody, .TableHead, .TableFooter, .TableRow) {
  grid-gap: 1px;
  background-color: var(--table-row-border-color);
}

.Table--border .TableHeader {
  border-bottom: 1px solid var(--gray-40);
}

.Table--border .TableBody .TableHeader {
  border-bottom-width: 1px;
  border-right: 1px solid var(--table-row-border-color);
}

.cauldron--theme-dark .Table--border,
.cauldron--theme-dark .Table--border .TableHeader,
.cauldron--theme-dark .Table--border .TableFooter,
.cauldron--theme-dark .Table--border .TableCell {
  border-color: var(--stroke-dark);
}

.TableFooter .TableCell {
  background: var(--table-header-background-color);
  font-weight: var(--font-weight-medium);
  color: var(--table-header-text-color);
}

:root {
  --data-list-background-color: var(--gray-20);
  --data-list-value-background-color: var(--white);
  --data-list-border-color: var(--gray-40);
  --data-list-text-color: var(--gray-90);
  --data-list-value-text-color: var(--gray-90);
  --data-list-space: var(--space-small);
  --data-list-value-width: 187px;
}

.cauldron--theme-dark {
  --data-list-background-color: var(--accent-dark);
  --data-list-value-background-color: var(--accent-medium);
  --data-list-text-color: var(--white);
  --data-list-value-text-color: var(--accent-light);
  --data-list-border-color: #5d676f;
}

.DescriptionList {
  color: var(--data-list-text-color);
  font-size: var(--text-size-small);
  border-radius: 3px;
  border: 1px solid var(--data-list-border-color);
  box-shadow: var(--drop-shadow-raised);
  margin-bottom: var(--space-small);
}

.DescriptionList.DescriptionList--collapsed {
  width: 100%;
  border-radius: 0;
  border: none;
  text-align: left;
  font-size: var(--text-size-smaller);
  padding: var(--data-list-space);
  border-top: 1px solid var(--data-list-border-color);
  border-bottom: 1px solid var(--data-list-border-color);
  background-color: var(--data-list-value-background-color);
}

.DescriptionList__item {
  display: flex;
  border-top: 1px solid var(--data-list-border-color);
}

.DescriptionList--collapsed .DescriptionList__item {
  border: 0;
  margin-bottom: 12px;
  display: block;
  background-color: var(--data-list-value-background-color);
}

.DescriptionList__item:first-child {
  border-top: none;
}

.DescriptionList--collapsed .DescriptionList__item:last-child {
  margin-bottom: 0;
}

.DescriptionList__item:first-child .DescriptionList__term {
  border-top-left-radius: 3px;
}

.DescriptionList__item:last-child .DescriptionList__term {
  border-bottom-left-radius: 3px;
}

.DescriptionList__term {
  background-color: var(--data-list-background-color);
  width: var(--data-list-value-width);
  font-weight: var(--font-weight-medium);
  border-right: 1px solid var(--data-list-border-color);
  flex: 0 0 auto;
}

.DescriptionList--collapsed .DescriptionList__term {
  background-color: transparent;
  width: auto;
  border-right: none;
  margin-bottom: 2px;
}

.DescriptionList__details {
  width: 100%;
  color: var(--data-list-value-text-color);
  background-color: var(--data-list-value-background-color);
  font-weight: var(--font-weight-normal);
  word-break: break-word;
  overflow: hidden;
}

.DescriptionList--collapsed .DescriptionList__details {
  overflow: visible;
}

.DescriptionList__term,
.DescriptionList__details {
  padding: var(--data-list-space) var(--space-small);
  margin: 0;
}

.DescriptionList--collapsed .DescriptionList__term,
.DescriptionList--collapsed .DescriptionList__details {
  padding: 0;
}

.DescriptionList--collapsed .DescriptionList__details {
  font-size: var(--text-size-small);
}

/* Temporary solution for insufficient color contrast until proper dark mode is implemented. */

.cauldron--theme-dark .DescriptionList__details,
.cauldron--theme-dark .DescriptionList--collapsed .DescriptionList__term {
  color: var(--white);
}

@media screen and (max-width: 32rem) {
  .DescriptionList {
    margin-bottom: 0;
    box-shadow: none;
    border-bottom: 0;
    border-left: 1px solid var(--gray-40);
    border-right: 1px solid var(--gray-40);
  }
}

:root {
  --metadata-list-column-gap: var(--space-largest);
  --metadata-list-horizontal-row-gap: var(--space-largest);
  --metadata-list-vertical-row-gap: var(--space-large);
  --metadata-list-item-gap: var(--space-half);
  --metadata-list-padding: var(--space-small) 0;
  --metadata-list-label-text-color: var(--gray-90);
  --metadata-list-label-font-size: var(--text-size-small);
  --metadata-list-label-font-weight: var(--font-weight-medium);
  --metadata-list-label-line-height: 1.5;
  --metadata-list-value-text-color: var(--gray-60);
  --metadata-list-value-font-size: var(--text-size-small);
  --metadata-list-value-font-weight: var(--font-weight-normal);
  --metadata-list-value-line-height: 1.5;
}

.cauldron--theme-dark {
  --metadata-list-label-text-color: var(--white);
  --metadata-list-value-text-color: var(--accent-light);
}

.MetadataList {
  display: flex;
  column-gap: var(--metadata-list-column-gap);
  padding: var(--metadata-list-padding);
  margin-top: 0;
  margin-bottom: 0;
}

.MetadataList.MetadataList--horizontal {
  flex-wrap: wrap;
  row-gap: var(--metadata-list-horizontal-row-gap);
}

.MetadataList.MetadataList--vertical {
  flex-direction: column;
  row-gap: var(--metadata-list-vertical-row-gap);
}

.MetadataList__item {
  display: flex;
  flex-direction: column;
  gap: var(--metadata-list-item-gap);
}

.MetadataList__label,
.MetadataList__value {
  margin: 0;
}

.MetadataList__label {
  color: var(--metadata-list-label-text-color);
  font-size: var(--metadata-list-label-font-size);
  font-weight: var(--metadata-list-label-font-weight);
  line-height: var(--metadata-list-label-line-height);
}

.MetadataList__value {
  color: var(--metadata-list-value-text-color);
  font-size: var(--metadata-list-value-font-size);
  font-weight: var(--metadata-list-value-font-weight);
  line-height: var(--metadata-list-value-line-height);
}

:root {
  --step-indicator-size: 1.75rem;
  --step-line-height: 0.5rem;
  --step-line-offset: 1.438rem;

  --step-indicator-content-size: 1rem;

  --step-label-color: var(--gray-60);
  --step-line-color: var(--accent-light);
  --step-indicator-background: var(--accent-light);
  --step-indicator-color: var(--gray-90);

  --step-current-indicator-background: #fff;
  --step-current-indicator-color: var(--accent-dark);
  --step-current-indicator-shadow: 0 0 0 2px var(--accent-dark);
  --step-current-complete-line-border-color: var(--accent-dark);

  --step-complete-indicator-background: var(--accent-dark);
  --step-complete-indicator-color: #fff;

  --step-current-label-color: var(--gray-90);
  --step-complete-indicator-svg-color: var(--accent-success);

  --stepper-color: var(--gray-90);
}

/* Dark theme variables */

.cauldron--theme-dark {
  --step-label-color: var(--accent-light);
  --step-line-color: var(--accent-medium);
  --step-indicator-color: #fff;
  --step-indicator-background: var(--accent-medium);

  --step-current-indicator-background: #fff;
  --step-current-indicator-color: var(--accent-dark);
  --step-current-indicator-shadow:
    0 0 0 2px var(--accent-dark), 0 0 0 4px var(--accent-info);
  --step-current-complete-line-border-color: var(--accent-info);

  --step-complete-indicator-background: var(--accent-info);
  --step-complete-indicator-color: var(--accent-dark);

  --step-current-label-color: #fff;
  --step-complete-indicator-svg-color: #000;

  --stepper-color: var(--accent-light);
  --stepper-background-color: var(--accent-dark);
}

.Stepper {
  display: flex;
  padding: var(--space-medium);
  align-items: flex-start;
  color: var(--stepper-color);
  background-color: var(--stepper-background-color);
  list-style-type: none;
  margin: 0 auto;
}

.Stepper__step {
  flex: 1;
  position: relative;
  padding: 0 var(--space-smallest);
}

.Stepper__step-line {
  position: absolute;
  top: calc((var(--step-indicator-size) - var(--step-line-height)) / 2);
  left: calc(-50% + var(--step-line-offset));
  right: calc(50% + var(--step-line-offset));
  flex: 1 1 auto;
  border-top: var(--step-line-height) solid var(--step-line-color);
}

.Stepper__step:first-child .Stepper__step-line {
  display: none;
}

.Stepper__step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Stepper__step-indicator {
  width: var(--step-indicator-size);
  height: var(--step-indicator-size);
  border-radius: 50%;
  background: var(--step-indicator-background);
  color: var(--step-indicator-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.Stepper__step-indicator:before {
  font-size: var(--text-size-small);
  content: counter(list-item);
}

.Stepper__step-label {
  text-align: center;
  width: 100%;
  padding-top: var(--space-smallest);
  font-size: var(--text-size-smaller);
  color: var(--step-label-color);
}

/*
  status-specific styles
*/

.Stepper__step--current-indicator {
  background: var(--step-current-indicator-background);
  color: var(--step-current-indicator-color);
  box-shadow: var(--step-current-indicator-shadow);
}

.Stepper__step--current-indicator:before {
  font-weight: var(--font-weight-medium);
}

.Stepper__step--current-label {
  font-weight: var(--font-weight-medium);
  color: var(--step-current-label-color);
}

.Stepper__step--current-line,
.Stepper__step--complete-line {
  border-color: var(--step-current-complete-line-border-color);
}

.Stepper__step--complete-indicator {
  background: var(--step-complete-indicator-background);
  color: var(--step-complete-indicator-color);
}

.Stepper__step--complete-indicator:before {
  content: '';
}

.Stepper__step--complete-indicator svg {
  height: var(--step-indicator-content-size);
  width: var(--step-indicator-content-size);
  color: var(--step-complete-indicator-svg-color);
}

:root {
  --panel-border-color: var(--gray-40);
  --panel-border-radius: var(--radius-12);
  --panel-border-width: 1px;
  --panel-background-color: var(--white);
  --panel-heading-color: var(--gray-90);
  --panel-padding: var(--space-small);
  --panel-divider-border-color: var(--gray-40);
  --panel-content-color: var(--gray-80);
  --panel-border: var(--panel-border-width) solid var(--panel-border-color);
  --panel-box-shadow: var(--drop-shadow-raised);
}

.Panel {
  padding: var(--panel-padding);
  margin: 0;
  border: var(--panel-border);
  border-radius: var(--panel-border-radius);
  box-shadow: var(--panel-box-shadow);
  background-color: var(--panel-background-color);
  word-break: break-word;
  color: var(--panel-content-color);
}

.Panel--no-padding {
  padding: 0;
  margin: 0;
}

.Panel__Content {
  padding: var(--panel-padding);
  margin: 0 calc(var(--panel-padding) * -1);
}

.Panel__Heading,
.Panel__Header {
  padding: max(calc(var(--panel-header-padding, var(--panel-padding)) - 4px))
    var(--panel-header-padding, var(--panel-padding));
}

.Panel__Heading {
  margin: calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1)
    var(--space-small) calc(var(--panel-padding) * -1);
}

.Panel__Heading + .Panel__Content {
  margin-top: calc(var(--panel-padding) * -1);
}

.Panel__Header {
  margin: calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1) 0
    calc(var(--panel-padding) * -1);
  border-start-start-radius: max(
    0px,
    calc(var(--panel-border-radius) - var(--panel-border-width))
  );
  border-start-end-radius: max(
    0px,
    calc(var(--panel-border-radius) - var(--panel-border-width))
  );
}

.Panel--no-padding > :is(.Panel__Heading, .Panel__Header, .Panel__Content) {
  margin: 0;
}

.Panel__Content--no-padding {
  --panel-padding: 0;
  margin: 0 calc(var(--panel-padding) * -1);
}

.Panel > :not(.Panel__Heading, .Panel__Header, .Panel__Content):first-child,
.Panel > :is(.Panel__Heading, .Panel__Header) + :not(.Panel__Content),
.Panel__Content > :first-child {
  margin-top: 0;
}

.Panel > :not(.Panel__Heading, .Panel__Header, .Panel__Content):last-child,
.Panel__Content > :last-child {
  margin-bottom: 0;
}

.Panel
  :is(.Panel__Header + .Panel__Content, .Panel__Content + .Panel__Content) {
  border-top: var(--panel-border-width) solid var(--panel-divider-border-color);
}

.Panel__Content:last-child {
  padding-bottom: 0;
}

.Panel--no-padding > .Panel__Content:last-child {
  padding-bottom: var(--panel-padding);
}

.Panel > .Panel__Heading {
  border-bottom: var(--panel-border-width) solid
    var(--panel-divider-border-color);
}

.Panel > .Panel__Heading:is(h1, h2, h3, h4, h5, h6),
.Panel > :is(.Panel__Header, .Panel__Heading) > :is(h1, h2, h3, h4, h5, h6),
.Panel legend {
  font-size: var(--text-size-normal);
  font-weight: var(--font-weight-medium);
  color: var(--panel-heading-color);
}

.Panel > :is(.Panel__Header, .Panel__Heading) > :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

.Panel--collapsed {
  --panel-padding: 12px;
}

.Panel--collapsed .Panel__Heading {
  margin: 0 0 var(--panel-padding) 0;
  font-size: var(--text-size-normal);
}

fieldset.Panel {
  position: relative;
  padding-top: 76px;
}

/* reset absurd browser-default legend styles */

.Panel legend {
  position: absolute;
  top: var(--space-large);
}

/* Dark Theme */

.cauldron--theme-dark {
  --panel-border-color: var(--stroke-dark);
  --panel-border: var(--panel-border-width) solid var(--panel-border-color);
  --panel-background-color: var(--accent-medium);
  --panel-heading-color: #fff;
  --panel-divider-border-color: var(--stroke-dark);
  --panel-content-color: var(--accent-light);
}

:root {
  --popover-background-color: var(--gray-10);
  --popover-border-color: var(--gray-90);
  --popover-text-color: var(--gray-90);
  --popover-box-shadow: var(--drop-shadow-overlay);
  --popover-font-size: var(--text-size-smaller);
  --popover-line-height: var(--text-size-normal);
  --popover-padding: 0 var(--space-small);
  --popover-alert-max-width: 12rem;
  --popover-alert-padding: var(--space-small);
  --popover-alert-apply-button-margin: var(--space-smallest) 0;
}

/* Dark theme variables */

.cauldron--theme-dark {
  --popover-background-color: var(--accent-medium);
  --popover-border-color: var(--accent-light);
  --popover-text-color: var(--white);
}

.Popover {
  background-color: var(--popover-background-color);
  border: 2px solid var(--popover-border-color);
  box-shadow: var(--popover-box-shadow);
  color: var(--popover-text-color);
  font-size: var(--popover-font-size);
  line-height: var(--popover-line-height);
  padding: var(--popover-padding);
  word-break: break-word;
}

.Popover--hidden {
  visibility: hidden;
  /* Take the tooltip out of the DOM layout flow so it doesn't reserve space when hidden */
  position: fixed !important;
}

/* TooltipArrow needs some dimensions to accurately calculate its positioning */

.Popover__popoverArrow {
  position: absolute;
  height: 0.1px;
  width: 0.1px;
}

.Popover__borderLeft {
  position: absolute;
  left: 4px;
  top: var(--space-half);
  height: calc(100% - (var(--space-half) * 2));
  width: 3px;
  background-color: var(--popover-border-color);
}

/* Adjust position to try to center the arrow in the tooltip's border */

[class*='Popover--top'] .Popover__popoverArrow {
  left: 50%;
  bottom: -1px;
}

[class*='Popover--bottom'] .Popover__popoverArrow {
  left: 50%;
  top: -1px;
}

[class*='Popover--left'] .Popover__popoverArrow {
  top: 50%;
  right: -1px;
}

[class*='Popover--right'] .Popover__popoverArrow {
  top: 50%;
  left: 0;
}

/*
 * Default tooltip arrow styles
 */

.Popover__popoverArrow:before {
  content: '';
  position: absolute;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--popover-border-color);
  border-bottom: none;
  transform: translateX(-50%);
  transform-origin: top;
}

[class*='Popover--bottom'] .Popover__popoverArrow:before {
  transform: translateX(-50%) rotate(180deg);
}

[class*='Popover--left'] .Popover__popoverArrow:before {
  transform: rotate(-90deg) translateY(-6px);
}

[class*='Popover--right'] .Popover__popoverArrow:before {
  transform: rotate(90deg) translateY(100%);
}

/* Alert popover styles */

.Popover--prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--popover-alert-padding);
  max-width: var(--popover-alert-max-width);
}

.Popover--prompt > .Button--thin {
  width: 100%;
  margin-left: 0;
}

.Popover__apply {
  margin: var(--popover-alert-apply-button-margin);
}

:root {
  --top-nav-height: 3rem;
  --top-nav-background-color: var(--top-bar-background-color);
  --top-nav-background-color-hover: var(--gray-20);
  --top-nav-text-color: var(--top-bar-text-color);
  --top-nav-border-bottom-color: var(--gray-40);
  --top-nav-active-shadow-color: var(--accent-primary);
  --top-nav-box-shadow-color: var(--gray-40);
}

.cauldron--theme-dark {
  --top-nav-background-color: var(--top-bar-background-color);
  --top-nav-background-color-hover: var(--accent-medium);
  --top-nav-text-color: var(--top-bar-text-color);
  --top-nav-border-bottom-color: #5d676f;
  --top-nav-active-shadow-color: var(--accent-info);
  --top-nav-box-shadow-color: #5d676f;
}

.NavBar {
  height: var(--top-nav-height);
  /* allow the top bar dropdown to be higher in stacking order */
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: var(--top-nav-background-color);
  color: var(--top-nav-text-color);
}

.NavBar > ul {
  width: 100%;
  list-style-type: none;
  display: flex;
  z-index: var(--z-index-top-nav);
  border-bottom: 1px solid var(--top-nav-border-bottom-color);
}

.NavBar > ul > li {
  height: var(--top-nav-height);
  font-size: var(--text-size-normal);
  min-width: 9.375rem;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--top-nav-background-color);
  border-right: 1px solid var(--top-nav-box-shadow-color);
  transition: background-color 0.3s ease;
}

.NavBar > ul > .NavItem {
  font-weight: var(--font-weight-normal);
}

.NavBar > ul > .NavItem--active {
  font-weight: var(--font-weight-medium);
}

.NavBar > ul > .NavItem a {
  font-weight: inherit;
}

.NavBar > ul > li:first-child:not(.NavBar__trigger) {
  border-left: 1px solid var(--top-nav-box-shadow-color);
}

.NavBar > ul > li:hover {
  background-color: var(--top-nav-background-color-hover);
}

.NavBar > ul > li:focus-within {
  /* make focus outline visible */
  z-index: calc(var(--z-index-top-nav) + 1);
}

.NavBar > ul > li.NavItem--active {
  box-shadow: inset 0px 4px 0px var(--top-nav-active-shadow-color);
  /* make focus outline visible */
  z-index: calc(var(--z-index-top-nav) + 1);
}

.NavBar > ul > li > a {
  color: var(--top-nav-text-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-small);
  /* clicking anywhere in the "item" should activate the anchor */
  height: 100%;
  width: 100%;
}

/* NavBar collapsed */

.NavBar.NavBar--collapsed {
  align-items: flex-start;
  flex-direction: column;
  height: auto;
}

.NavBar--collapsed > ul {
  flex-direction: column;
  width: 100%;
  overflow: auto;
}

.NavBar.NavBar--collapsed > ul > li {
  width: 100%;
  height: var(--top-nav-height);
  font-size: var(--text-size-small);
  color: var(--top-nav-text-color);
  flex: 0 1 3.125rem;
  border-right: none;
}

.NavBar.NavBar--collapsed > ul > .NavItem--active {
  box-shadow:
    inset 0px -1px 0px var(--top-nav-box-shadow-color),
    inset 6px 0px 0px var(--top-nav-active-shadow-color);
}

.NavBar.NavBar--collapsed > .NavBar__trigger--active {
  box-shadow:
    inset 0px -1px 0px var(--top-nav-box-shadow-color),
    inset 0px 4px 0px var(--top-nav-active-shadow-color);
  z-index: calc(var(--z-index-top-nav) + 1);
}

.NavBar--collapsed > .NavBar__trigger {
  padding: 0 var(--space-small);
  background-color: var(--top-nav-background-color);
  color: var(--top-nav-text-color);
  width: 100%;
  height: 3.125rem;
}

.NavBar--collapsed > .NavBar__trigger:hover {
  background-color: var(--top-nav-background-color-hover);
}

/* make focus outline visible */

.NavBar--collapsed > ul > li > a:focus,
.NavBar--collapsed > .NavBar__trigger:focus {
  outline-offset: calc(var(--space-quarter) * -1);
}

.NavBar--collapsed > .NavBar__trigger .Icon {
  margin-right: var(--space-smallest);
}

@media (max-width: 64rem) {
  .NavBar {
    padding: 0 var(--space-small);
  }
}

@media (max-width: 61.25rem) {
  .NavBar > ul > li {
    font-size: var(--text-size-small);
  }

  .NavBar > ul > li:not(.NavItem--previous):not(.NavItem--next) {
    min-width: 7.125rem;
  }
}

:root {
  --progress-bar-background-color: var(--accent-dark);
  --progress-bar-fill-color: var(--accent-info-light);
  --progress-bar-animation-timing: 150ms;
  --progress-bar-padding: 2px;
  --progress-bar-border-radius: calc((var(--space-small) * 0.5) + 2px);
  --progress-bar-fill-height: var(--space-small);
  --progress-bar-fill-border-radius: calc(var(--space-small) * 0.5);
  --progress-bar-fill-min-width: var(--space-small);
}

.ProgressBar {
  background-color: var(--progress-bar-background-color);
  padding: var(--progress-bar-padding);
  border-radius: var(--progress-bar-border-radius);
  margin-bottom: var(--space-smallest);
}

.ProgressBar--fill {
  border-radius: var(--progress-bar-fill-border-radius);
  background-color: var(--progress-bar-fill-color);
  height: var(--progress-bar-fill-height);
  min-width: var(--progress-bar-fill-min-width);
  transition: width linear var(--progress-bar-animation-timing);
}

.ProgressBar--thin {
  --progress-bar-padding: 3px;
  --progress-bar-border-radius: 3px;
  --progress-bar-fill-height: var(--space-half);
  --progress-bar-fill-border-radius: 1px;
  --progress-bar-fill-min-width: 1px;
}

.cauldron--theme-dark .Icon--robot circle {
  stroke: var(--accent-light);
  stroke-width: 2px;
  color: #0b141c;
}

.cauldron--theme-dark .Icon--robot path {
  color: #76cfe8;
}

.cauldron--theme-light .Icon--robot circle {
  stroke: var(--gray-40);
  stroke-width: 2px;
  color: var(--white);
}

.cauldron--theme-light .Icon--robot path {
  color: #3e7aae;
}

:root {
  --address-line-height: 1.618;
}

.Address {
  line-height: var(--address-line-height);
}

:root {
  --pagination-button-background-color: var(--gray-20);
  --pagination-button-border-color: var(--gray-40);
  --pagination-button-disabled-text-color: var(--gray-40);
  --pagination-text-accent-color: var(--gray-90);
}

.cauldron--theme-dark {
  --pagination-button-background-color: var(--accent-medium);
  --pagination-button-border-color: transparent;
  --pagination-button-disabled-text-color: var(--stroke-dark);
  --pagination-text-accent-color: var(--white);
}

.Pagination > ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  font-size: var(--text-size-small);
  margin: 0;
}

.Pagination > ul > li:not(:last-child) {
  margin-right: var(--space-smallest);
}

.Pagination:not(.Pagination--thin) button {
  height: 2.26rem;
  width: 2.26rem;
}

.Pagination button {
  display: flex;
  justify-content: center;
  align-items: center;
  /* light theme-specific styles */
  background: var(--pagination-button-background-color);
  border: 1px solid var(--pagination-button-border-color);
  padding: 0;
  margin: 0;
  border-radius: 2px;
}

.Pagination button[aria-disabled='true'] {
  color: var(--pagination-button-disabled-text-color);
}

.Pagination button .Icon {
  width: auto;
  height: auto;
}

.Pagination [role='log'] {
  margin: 0 var(--space-small);
  font-variant-numeric: tabular-nums;
}

.Pagination--thin [role='log'] {
  font-size: var(--text-size-smaller);
  margin: 0 var(--space-half);
}

.Pagination [role='log'] strong {
  color: var(--pagination-text-accent-color);
}

.cauldron--theme-dark .Pagination [role='log'] {
  color: var(--accent-light);
}

@media (max-width: 28.125rem) {
  .Pagination [role='log'] {
    margin: 0;
  }

  .Pagination--thin [role='log'] {
    margin: 0;
  }
}

:root {
  --breadcrumb-separator-color: var(--gray-60);
}

.cauldron--theme-dark {
  --breadcrumb-separator-color: var(--accent-light);
}

.Breadcrumb ol {
  display: block;
  word-break: break-all;
  align-items: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.Breadcrumb__Separator {
  padding: 0 var(--space-half);
  color: var(--breadcrumb-separator-color);
}

.Breadcrumb__Link {
  padding: 0;
  display: inline;
}

.Breadcrumb__Item {
  font-weight: var(--font-weight-medium);
  color: var(--link-text-color);
  display: inline;
}

.Breadcrumb__Item:last-child {
  font-weight: var(--font-weight-normal);
}

:root {
  --two-column-panel-border-color: var(--gray-40);
  --two-column-panel-background-color: #fff;
  --two-column-panel-border-radius: 3px;
  --two-column-panel-header-height: 3.125rem;
  --two-column-panel-animation-timing: 0.25s;
  --two-column-panel-left-column-width: 17.5rem;
  --two-column-panel-header-text-color: var(--gray-90);
  --two-column-panel-accent-text-color: var(--text-color-base);
  --two-column-panel-list-background-color: var(
    --two-column-panel-background-color
  );
  --two-column-panel-group-heading-background-color: var(--accent-secondary);
  --two-column-panel-group-heading-text-color: var(--text-base);
}

.cauldron--theme-dark {
  --two-column-panel-border-color: #5d676f;
  --two-column-panel-background-color: var(--accent-medium);
  --two-column-panel-header-text-color: #fff;
  --two-column-panel-accent-text-color: #fff;
  --two-column-panel-list-background-color: var(--accent-dark);
  --two-column-panel-group-heading-background-color: #b3bfc6;
  --two-column-panel-group-heading-text-color: var(--accent-dark);
}

.TwoColumnPanel {
  display: flex;
  border: 1px solid var(--two-column-panel-border-color);
  background-color: var(--two-column-panel-background-color);
  border-radius: var(--two-column-panel-border-radius);
  box-shadow: var(--drop-shadow-raised);
}

.TwoColumnPanel__Header {
  /* The -2px is to account for the borders that are outside of the element and will make it line up with the left panel when there's only one line of text */
  padding: calc(var(--space-small) - 2px);
  border-bottom: 1px solid var(--two-column-panel-border-color);
  min-height: var(--two-column-panel-header-height);
  font-weight: 500;
  color: var(--two-column-panel-header-text-color);
  flex: 1;
  display: flex;
  align-items: center;
}

.TwoColumnPanel__Left {
  position: relative;
  width: var(--two-column-panel-left-column-width);
  border-right: 1px solid var(--two-column-panel-border-color);
  background-color: var(--two-column-panel-background-color);
  border-top-left-radius: var(--two-column-panel-border-radius);
  border-bottom-left-radius: var(--two-column-panel-border-radius);
  align-content: start;
}

.TwoColumnPanel__Right {
  flex: 1;
  align-content: flex-start;
}

.TwoColumnPanel__Left,
.TwoColumnPanel__Right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.TwoColumnPanel__Right .TwoColumnPanel__Header {
  flex: 1;
  font-size: var(--text-size-normal);
}

.TwoColumnPanel__Left .TwoColumnPanel__Header ~ * {
  flex-basis: 100%;
}

.TwoColumnPanel__Left ul li {
  list-style-type: none;
  color: var(--gray-90);
  font-weight: 500;
  text-decoration: none;
  background-color: var(--two-column-panel-list-background-color);
  transition: ease-in-out 100ms background-color;
  height: 4.1875rem;
  flex-direction: column;
  align-items: flex-start;
  border-top: 1px solid var(--two-column-panel-border-color);
}

.TwoColumnPanel__Left ul li a {
  display: flex;
  flex-direction: column;
  padding: var(--space-small);
  text-decoration: none;
  height: 100%;
}

.TwoColumnPanel__Left ul li a:last-child {
  box-shadow: 0px 1px 0px 0px var(--two-column-panel-border-color);
}

.TwoColumnPanel__Left ul li a[aria-current]:not([aria-current='false']) {
  box-shadow: inset 4px 0 0 var(--tab-shadow-color);
}

.TwoColumnPanel__Left
  ul
  li
  a[aria-current]:not([aria-current='false']):last-child {
  box-shadow:
    inset 4px 0 0 var(--tab-shadow-color),
    0px 1px 0px 0px var(--two-column-panel-border-color);
}

.TwoColumnPanel__Left ul li em {
  color: var(--two-column-panel-accent-text-color);
  font-size: var(--text-size-smaller);
  font-style: normal;
  font-weight: 300;
  display: block;
}

.TwoColumnPanel__Left ul li:hover {
  background-color: var(--tab-inactive-background-color);
}

.TwoColumnPanel__Left ul li:first-child {
  border-top: none;
}

.TwoColumnPanel__Left ul li:last-child {
  border-bottom: none;
}

.TwoColumnPanel__GroupHeader {
  border-top: 1px solid var(--two-column-panel-border-color);
  border-bottom: 1px solid var(--two-column-panel-border-color);
  background: var(--two-column-panel-group-heading-background-color);
  text-transform: uppercase;
  font-size: var(--text-size-smaller);
  font-weight: var(--font-weight-medium);
  padding: var(--space-smallest) var(--space-small);
  color: var(--two-column-panel-group-heading-text-color);
  position: sticky;
  top: 0;
}

.TwoColumnPanel__Header :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-size: inherit;
  font-weight: var(--font-weight-medium);
  margin: 0;
  padding: 0;
}

.TwoColumnPanel__GroupHeader :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-size: var(--text-size-smaller);
  font-weight: var(--font-weight-medium);
  margin: 0;
  padding: 0;
}

.TwoColumnPanel__Header + .TwoColumnPanel__GroupHeader,
.TwoColumnPanel__GroupHeader:first-child {
  border-top: none;
}

.TwoColumnPanel__Right .TwoColumnPanel__Header ~ * {
  display: flex;
  flex-direction: column;
  width: unset;
  min-height: unset;
  flex-basis: 100%;
  border: none;
  padding: var(--space-small);
}

.TwoColumnPanel__Right .TwoColumnPanel__Header ~ * > :last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

.TwoColumnPanel__ButtonToggle {
  display: flex;
}

.TwoColumnPanel__ButtonToggle button,
.TwoColumnPanel__Close button {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--two-column-panel-border-color);
  min-height: var(--two-column-panel-header-height);
  width: var(--two-column-panel-header-height);
}

.TwoColumnPanel__ButtonToggle button {
  border-right: 1px solid var(--two-column-panel-border-color);
}

.TwoColumnPanel__Close {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}

.TwoColumnPanel__ButtonToggle button:focus,
.TwoColumnPanel__Close button:focus {
  position: relative;
  /* TODO: fix this z-index */
  z-index: 2;
}

.TwoColumnPanel__ButtonToggle button:hover {
  background-color: var(--tab-inactive-background-color);
}

/* Panel show/hide transitions */

.TwoColumnPanel__Left {
  transition: opacity ease-in-out var(--two-column-panel-animation-timing);
}

.TwoColumnPanel--hide .TwoColumnPanel__Left {
  opacity: 0;
}

.TwoColumnPanel--show .TwoColumnPanel__Left {
  opacity: 1;
  animation: TwoColumnPanel--fade-in ease-in-out
    var(--two-column-panel-animation-timing);
}

@keyframes TwoColumnPanel--fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion) {
  .TwoColumnPanel__Left {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 45rem) {
  .TwoColumnPanel__Close {
    display: block;
  }

  .TwoColumnPanel__Left {
    position: relative;
    z-index: 1;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform cubic-bezier(0.5, 0.5, 0, 1)
      var(--two-column-panel-animation-timing);
  }

  .TwoColumnPanel--hide .TwoColumnPanel__Left,
  .TwoColumnPanel--show .TwoColumnPanel__Left {
    max-width: 100%;
    /* This will constrain the component to the max-width of its container, as well as adjusting the offset margin to the max negative value to prevent incorrect offset when the max-width is less than the column width. */
    margin-left: max(
      calc(var(--two-column-panel-left-column-width) * -1),
      calc(100% * -1)
    );
    animation: none;
    opacity: 1;
  }

  .TwoColumnPanel__Right .TwoColumnPanel__Header {
    border-top: 1px solid var(--two-column-panel-border-color);
    flex-basis: 100%;
    font-size: var(--text-size-small);
  }

  .TwoColumnPanel__ButtonToggle button {
    border-bottom: none;
  }

  .TwoColumnPanel--show .TwoColumnPanel__Left {
    transform: translateX(100%);
  }

  .TwoColumnPanel--hide .TwoColumnPanel__Left {
    transform: translateX(-10vw);
  }

  .TwoColumnPanel > .SkipLink {
    display: none;
  }
}

:root {
  --accordion-trigger-background-color: var(--white);
  --accordion-trigger-background-color-expanded: var(--white);
  --accordion-trigger-text-color: var(--gray-90);
  --accordion-trigger-text-color-hover: var(--accent-primary);
  --accordion-trigger-box-shadow-hover: var(--accent-primary);
  --accordion-trigger-border-color: var(--gray-40);
  --accordion-trigger-icon-color: var(--gray-90);
  --accordion-trigger-padding: calc(var(--space-small) - var(--space-half));
  --accordion-trigger-text-decoration: underline solid
    var(--accordion-trigger-text-color);
  --accordion-panel-background-color: var(--white);
  --accordion-panel-text-color: var(--gray-90);
  --accordion-panel-border-color: var(--gray-40);
  /* deprecated, not used */
  --accordion-box-shadow-color: rgba(0, 0, 0, 0.15);
}

.cauldron--theme-dark {
  --accordion-trigger-background-color: var(--accent-medium);
  --accordion-trigger-background-color-expanded: var(--accent-dark);
  --accordion-trigger-text-color: var(--white);
  --accordion-trigger-text-color-hover: var(--accent-light);
  --accordion-trigger-box-shadow-hover: var(--accent-info);
  --accordion-trigger-border-color: var(--stroke-dark);
  --accordion-trigger-icon-color: var(--white);
  --accordion-panel-background-color: var(--accent-medium);
  --accordion-panel-text-color: var(--white);
  --accordion-panel-border-color: var(--stroke-dark);
}

.Accordion > :is(h1, h2, h3, h4, h5, h6):first-of-type {
  all: unset;
}

.Accordion__trigger,
button.Accordion__trigger {
  background-color: var(--accordion-trigger-background-color);
  padding: var(--accordion-trigger-padding);
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 3px;
  border: 1px solid var(--accordion-trigger-border-color);
  font-size: var(--text-size-small);
  margin-top: var(--space-small);
  color: var(--accordion-trigger-text-color);
  text-decoration: var(--accordion-trigger-text-decoration);
}

.Accordion__trigger[aria-expanded='true'] {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--accordion-trigger-background-color-expanded);
}

.Accordion__trigger:hover {
  box-shadow: inset 8px 0 0 -4px var(--accordion-trigger-box-shadow-hover);
  color: var(--accordion-trigger-text-color-hover);
  transition: all 0.2s ease-in-out;
  text-decoration: underline solid var(--accordion-trigger-text-color-hover);
}

.Accordion__trigger:hover .Icon {
  color: var(--accordion-trigger-icon-color);
}

.Accordion .Icon {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.2s;
}

.Accordion__panel {
  background: var(--accordion-panel-background-color);
  color: var(--accordion-panel-text-color);
  padding: var(--space-small);
  border: 1px solid var(--accordion-panel-border-color);
  border-top: 0;
  border-radius: 0 0 3px 3px;
}

.Accordion:has(> button[aria-expanded='true']) {
  box-shadow: var(--drop-shadow-raised);
}

:root {
  --notice-info-color: #f5f7f8;
  --notice-caution-color: #fff8ef;
  --notice-danger-color: #fdf2f2;
  --notice-success-color: #f3fcf7;
  --notice-text-color: var(--accent-dark);
  --notice-title-text-color: var(--accent-dark);
  --notice-title-font-weight: var(--font-weight-medium);
  --notice-background-color: var(--notice-info-color);
  --notice-border-color: var(--accent-dark);
  --notice-link-hover-color: var(--accent-medium);
  --notice-icon-size: 1rem;
  --notice-info-border-color: #547d93;
  --notice-caution-border-color: #a16200;
  --notice-danger-border-color: #df5252;
  --notice-success-border-color: #4d8c6e;
  --notice-info-icon-color: #547d93;
  --notice-caution-icon-color: #a16200;
  --notice-danger-icon-color: #df5252;
  --notice-success-icon-color: #4d8c6e;
}

.Notice--info {
  --notice-background-color: var(--notice-info-color);
  --notice-border-color: var(--notice-info-border-color);
  --notice-icon-color: var(--notice-info-icon-color);
}

.Notice--caution {
  --notice-background-color: var(--notice-caution-color);
  --notice-border-color: var(--notice-caution-border-color);
  --notice-icon-color: var(--notice-caution-icon-color);
}

.Notice--danger {
  --notice-background-color: var(--notice-danger-color);
  --notice-border-color: var(--notice-danger-border-color);
  --notice-icon-color: var(--notice-danger-icon-color);
}

.Notice--success {
  --notice-background-color: var(--notice-success-color);
  --notice-border-color: var(--notice-success-border-color);
  --notice-icon-color: var(--notice-success-icon-color);
}

.Notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-small);
  padding: var(--notice-padding, var(--space-large));
  align-items: start;
  border-radius: 4px;
  border: 1px solid var(--notice-border-color);
  background-color: var(--notice-background-color);
  color: var(--notice-text-color);
}

.Notice--condensed {
  grid-template-columns: 1fr;
  padding: var(--space-small);
  gap: var(--space-smallest);
}

.Notice__content {
  grid-column: 2;
}

.Notice--condensed .Notice__content {
  grid-column: 1;
}

.Notice .Notice__title,
.Notice .Notice__title > :is(h1, h2, h3, h4, h5, h6) {
  display: flex;
  align-items: flex-start;
  font-weight: var(--notice-title-font-weight);
  margin: 0;
  padding: 0;
  gap: var(--space-three-quarters);
  color: var(--notice-title-text-color);
}

.Notice .Notice__content {
  margin-top: var(--space-smallest);
}

.Notice .Icon > svg {
  height: var(--notice-icon-size);
  width: var(--notice-icon-size);
  color: var(--notice-icon-color);
}

.Notice button.Link,
.Notice a.Link {
  background: transparent;
  border: 0;
  color: currentColor;
}

.Notice button.Link,
.Notice a.Link {
  color: var(--accent-dark);
  font-weight: var(--font-weight-light);
  text-decoration: underline;
}

.Notice button.Link:focus,
.Notice a.Link:focus {
  outline: 2px solid;
  color: var(--gray-90);
}

.Notice button.Link:hover,
.Notice a.Link:hover {
  color: var(--notice-link-hover-color);
}

.Notice .Notice__content > p:first-of-type {
  margin-top: 0;
  margin-bottom: var(--space-smallest);
}

.Notice ul {
  margin: var(--space-smallest) 0;
  padding-left: var(--space-small);
}

.Notice li {
  margin-bottom: var(--space-smallest);
}

:root {
  --combobox-listbox-border-color: var(--gray-40);
  --combobox-listbox-background-color: #fff;
  --combobox-option-font-color: var(--gray-90);
  --combobox-option-hover-background-color: var(--gray-20);
  --combobox-option-description-font-color: var(--gray-60);
  --combobox-option-description-font-size: var(--text-size-smaller);
  --combobox-option-min-height: 2.625rem;
  --combobox-group-label-background-color: var(--gray-20);
  --combobox-group-label-font-size: var(--text-size-smaller);
  --combobox-option-selected-icon-color: var(--accent-primary);
  --combobox-pill-height: 1.65rem;
  --combobox-pill-icon-size: 18px;
}

.cauldron--theme-dark {
  --combobox-option-font-color: var(--text-color-light);
  --combobox-option-hover-background-color: var(--accent-dark);
  --combobox-option-description-font-color: var(--accent-light);
  --combobox-listbox-background-color: var(--accent-medium);
  --combobox-group-label-background-color: var(--accent-dark);
  --combobox-option-selected-icon-color: var(--accent-info);
  --combobox-arrow-color: var(--text-color-light);
}

.Combobox :where(.TextFieldWrapper) {
  --text-field-wrapper-border-color: var(
    --combobox-input-border-color,
    var(--field-border-color)
  );
  --text-field-wrapper-background-color: var(
    --combobox-input-background-color,
    var(--field-background-color)
  );
  --text-field-wrapper-border-focus-color: var(
    --combobox-input-border-focus-color,
    var(--field-border-color-focus)
  );
  --text-field-wrapper-border-hover-color: var(
    --combobox-input-border-hover-color,
    var(--field-border-color-hover)
  );
  --text-field-wrapper-border-focus-glow-color: var(
    --combobox-input-border-focus-glow-color,
    var(--field-border-color-focus-glow)
  );
  --text-field-wrapper-error-border-color: var(
    --combobox-input-error-border-color,
    var(--field-border-color-error)
  );
  --text-field-wrapper-error-focus-border-color: var(
    --combobox-input-error-focus-border-color,
    var(--field-border-color-error-hover)
  );
  --text-field-wrapper-error-focus-border-glow-color: var(
    --combobox-input-error-focus-border-glow-color,
    var(--field-border-color-focus-glow)
  );
  --text-field-wrapper-font-size: var(
    --combobox-input-font-size,
    var(--field-font-size)
  );
  --text-field-wrapper-font-color: var(
    --combobox-input-font-color,
    var(--field-content-color)
  );
}

.cauldron--theme-dark .Combobox :where(.TextFieldWrapper) {
  --text-field-wrapper-border-color: var(
    --combobox-input-border-color,
    var(--field-border-color)
  );
  --text-field-wrapper-background-color: var(
    --combobox-input-background-color,
    var(--field-background-color)
  );
  --text-field-wrapper-border-focus-color: var(
    --combobox-input-border-focus-color,
    var(--field-border-color-focus)
  );
  --text-field-wrapper-border-hover-color: var(
    --combobox-input-border-hover-color,
    var(--field-border-color-hover)
  );
  --text-field-wrapper-border-focus-glow-color: var(
    --combobox-input-border-focus-glow-color,
    var(--field-border-color-focus-glow)
  );
  --text-field-wrapper-error-border-color: var(
    --combobox-input-error-border-color,
    var(--field-border-color-error)
  );
  --text-field-wrapper-error-focus-border-color: var(
    --combobox-input-error-focus-border-color,
    var(--field-border-color-error-hover)
  );
  --text-field-wrapper-error-focus-border-glow-color: var(
    --combobox-input-error-focus-border-glow-color,
    var(--field-border-color-focus-glow)
  );
  --text-field-wrapper-font-size: var(
    --combobox-input-font-size,
    var(--field-font-size)
  );
  --text-field-wrapper-font-color: var(
    --combobox-input-font-color,
    var(--field-content-color)
  );
}

.Combobox {
  --field-listbox-selected-background-color: transparent;
  position: relative;
}

.Combobox .TextFieldWrapper input[type='text'] {
  margin-right: 1.25rem;
}

.Combobox .TextFieldWrapper input:is([disabled]) {
  background-color: var(--field-background-color-disabled);
}

.Combobox__arrow {
  width: 2rem;
  display: flex;
  justify-content: center;
  position: absolute;
  right: 0;
  pointer-events: none;
  color: var(--combobox-arrow-color, currentColor);
}

.Combobox__arrow:before {
  content: '';
  display: inline-block;
  border-top: 7px solid currentColor;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-radius: 2px;
}

.Combobox__listbox {
  display: none;
  position: absolute;
  min-width: 100%;
  border: 1px solid var(--combobox-listbox-border-color);
  box-shadow: var(--drop-shadow-overlay);
  background-color: var(--combobox-listbox-background-color);
  z-index: var(--z-index-listbox);
  max-width: var(--combobox-listbox-max-width, 100%);
  max-height: var(
    --combobox-listbox-max-height,
    calc(var(--combobox-option-min-height) * 10)
  );
  overflow-y: auto;
  animation: combobox-animate-in ease-out 150ms;
}

@keyframes combobox-animate-in {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion) {
  .Combobox__listbox {
    animation: none;
  }
}

.Combobox__listbox:hover {
  border-color: var(--combobox-listbox-border-color);
}

/*
 * Note: Firefox doesn't yet have full support for :has, so .Combobox__listbox--open
 * is provided as a fallback selector to indicate open listboxes
 * see: https://caniuse.com/css-has
 */

.Combobox:has([role='combobox'][aria-expanded='true']) .Combobox__listbox,
.Combobox__listbox--open {
  display: block;
}

.Combobox__listbox li {
  list-style-type: none;
}

.Combobox__listbox > ul[role='group']:not(:last-child) {
  border-bottom: 1px solid var(--combobox-listbox-border-color);
}

.ComboboxGroup__label {
  background-color: var(--combobox-group-label-background-color);
  padding: var(--space-smallest);
  font-size: var(--combobox-group-label-font-size);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--combobox-listbox-border-color);
}

.ComboboxGroup--hidden {
  display: none !important;
}

.ComboboxOption {
  --field-listbox-selected-text-color: var(--combobox-option-font-color);
  color: var(--combobox-option-font-color);
  padding: var(--space-smallest);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-half);
  justify-content: space-between;
  min-height: var(--combobox-option-min-height);
}

.ComboboxOption:not(:last-child) {
  border-bottom: 1px solid var(--combobox-listbox-border-color);
}

.ComboboxOption--active {
  box-shadow:
    inset 0 0 0 1px var(--combobox-listbox-background-color),
    inset 0 0 0 3px var(--focus);
}

.ComboboxOption:is(:hover, [role='option'][aria-selected='true']:hover) {
  background-color: var(--combobox-option-hover-background-color);
}

.ComboboxOption .Icon {
  color: var(--combobox-option-selected-icon-color);
}

.ComboboxOption .Icon svg {
  padding: 4px;
  height: 1.6em;
  width: 1.6em;
  border: 2.5px solid currentColor;
  border-radius: 50%;
}

.ComboboxOption__match {
  text-decoration: underline;
  font-style: normal;
  font-weight: var(--font-weight-medium);
}

.ComboboxOption__description {
  padding-top: var(--space-half);
  padding-bottom: var(--space-quarter);
  color: var(--combobox-option-description-font-color);
  font-size: var(--combobox-option-description-font-size);
}

.ComboboxListbox__empty {
  padding: var(--space-smaller);
  text-align: center;
}

.Combobox--multiselect .TextFieldWrapper {
  flex-wrap: wrap;
  gap: var(--space-half);
  padding-left: var(--space-half);
  padding-right: var(--space-large);
}

.Combobox--multiselect .TextFieldWrapper input {
  width: auto;
}

.ComboboxPill {
  --tag-height: var(--combobox-pill-height);
  --icon-size: var(--combobox-pill-icon-size);
}

.ComboboxPill + .ComboboxPill {
  margin: 0;
}

:root {
  --timeline-mark-color: var(--accent-success-dark);
  --timeline-mark-border-color: #fff;
  --timeline-separator-color: var(--gray-40);
  --timeline-icon-size: 18px;
}

.cauldron--theme-dark {
  --timeline-mark-color: var(--accent-success-light);
  --timeline-mark-border-color: var(--accent-medium);
  --timeline-separator-color: #54636f;
}

.Timeline {
  margin: 0;
  padding: 0;
}

.Timeline:is(ol) {
  list-style-type: none;
}

.TimelineItem {
  display: flex;
  margin-left: var(--space-smaller);
}

.TimelineItem:not(:last-child) {
  min-height: 3.75rem;
  padding-bottom: var(--space-half);
}

.TimelineItem:not(:last-child) .TimelineItem__details {
  padding-bottom: var(--space-smaller);
}

.TimelineItem__separator {
  display: flex;
  flex-direction: column;
  width: var(--timeline-icon-size);
  flex-shrink: 0;
  --icon-size: var(--timeline-icon-size);
}

.TimelineItem__separator:empty:before,
.TimelineItem__separator > * {
  transform: translateX(calc(-50% + 2px));
  margin-bottom: var(--space-smallest);
  max-width: var(--timeline-icon-size);
}

.TimelineItem__separator:empty:before {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  margin-top: var(--space-half);
  border-radius: 50%;
  background-color: var(--timeline-mark-color);
}

.TimelineItem:not(:last-child) .TimelineItem__separator:after {
  content: '';
  display: block;
  flex: 1;
  width: 6px;
  border-radius: 3px;
  background-color: var(--timeline-separator-color);
  border: 1px solid var(--timeline-mark-border-color);
  transform: translateX(-1px);
}

.SearchField :where(.TextFieldWrapper) {
  --text-field-wrapper-border-color: var(
    --search-field-border-color,
    var(--field-border-color)
  );
  --text-field-wrapper-background-color: var(
    --search-field-background-color,
    var(--field-background-color)
  );
  --text-field-wrapper-border-focus-color: var(
    --search-field-border-focus-color,
    var(--field-border-color-focus)
  );
  --text-field-wrapper-border-hover-color: var(
    --search-field-border-hover-color,
    var(--field-border-color-hover)
  );
  --text-field-wrapper-border-focus-glow-color: var(
    --search-field-border-focus-glow-color,
    var(--field-border-color-focus-glow)
  );
  --text-field-wrapper-error-border-color: var(
    --search-field-error-border-color,
    var(--field-border-color-error)
  );
  --text-field-wrapper-error-focus-border-color: var(
    --search-field-error-focus-border-color,
    var(--field-border-color-error-hover)
  );
  --text-field-wrapper-error-focus-border-glow-color: var(
    --search-field-error-focus-border-glow-color,
    var(--field-border-color-focus-glow)
  );
  --text-field-wrapper-font-size: var(
    --search-field-font-size,
    var(--field-font-size)
  );
  --text-field-wrapper-font-color: var(
    --search-field-font-color,
    var(--field-content-color)
  );
}

.cauldron--theme-dark .SearchField :where(.TextFieldWrapper) {
  --text-field-wrapper-border-color: var(
    --search-field-border-color,
    var(--field-border-color)
  );
  --text-field-wrapper-background-color: var(
    --search-field-background-color,
    var(--field-background-color)
  );
  --text-field-wrapper-border-focus-color: var(
    --search-field-border-focus-color,
    var(--field-border-color-focus)
  );
  --text-field-wrapper-border-hover-color: var(
    --search-field-border-hover-color,
    var(--field-border-color-hover)
  );
  --text-field-wrapper-border-focus-glow-color: var(
    --search-field-border-focus-glow-color,
    var(--field-border-color-focus-glow)
  );
  --text-field-wrapper-error-border-color: var(
    --search-field-error-border-color,
    var(--field-border-color-error)
  );
  --text-field-wrapper-error-focus-border-color: var(
    --search-field-error-focus-border-color,
    var(--field-border-color-error-hover)
  );
  --text-field-wrapper-error-focus-border-glow-color: var(
    --search-field-error-focus-border-glow-color,
    var(--field-border-color-focus-glow)
  );
  --text-field-wrapper-font-size: var(
    --search-field-font-size,
    var(--field-font-size)
  );
  --text-field-wrapper-font-color: var(
    --search-field-font-color,
    var(--field-content-color)
  );
}

.SearchField__search-icon {
  color: var(--search-field-icon-color);
  margin-left: var(--space-smallest);
}

.SearchField input::-webkit-search-cancel-button {
  margin-left: var(--space-smallest);
}

.SearchField input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.TextEllipsis {
  display: block !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Try and prevent Safari from showing a platform
 * tooltip when visible text is truncated
 * see: https://github.com/dequelabs/cauldron/issues/1926
 * Only apply to single-line ellipsis to avoid Chrome false ellipsis bug
 */

.TextEllipsis:not(.TextEllipsis--multiline):after {
  content: '';
  display: block;
}

.TextEllipsis:where([role='button']) {
  text-align: inherit;
  -moz-user-select: inherit;
       user-select: inherit;
}

.TextEllipsis--multiline {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  white-space: normal;
}

:root {
  --badge-text-color: var(--gray-90);
  --badge-background-color: transparent;
  --badge-border-color: var(--gray-30);

  --badge-height: var(--button-height);
  --badge-small-height: 1.5rem;

  --badge-font-size: 1rem;
}

.cauldron--theme-dark {
  --badge-text-color: var(--white);
  --badge-background-color: var(--accent-medium);
  --badge-border-color: var(--stroke-dark);
}

.Badge {
  color: var(--badge-text-color);
  background-color: var(--badge-background-color);
  border: 1px solid var(--badge-border-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--space-small) 0 var(--space-smaller);
  min-height: var(--badge-height);
  border-radius: var(--badge-height);
  font-size: var(--badge-font-size);
}

.Badge--small {
  border-radius: var(--badge-small-height);
  min-height: var(--badge-small-height);
}

.Badge__Label {
  margin-right: 3px;
  font-weight: var(--font-weight-medium);
}

.Badge > .Icon {
  margin: 0 var(--space-half) 0 -4px;
}

:root {
  --impact-badge-critical-background-color: var(--issue-critical);
  --impact-badge-critical-border-color: var(--accent-error-disabled);

  --impact-badge-serious-background-color: var(--issue-serious);
  --impact-badge-serious-border-color: var(--accent-warning);

  --impact-badge-moderate-background-color: var(--issue-moderate);
  --impact-badge-moderate-border-color: #eb94ff;

  --impact-badge-minor-background-color: var(--issue-minor);
  --impact-badge-minor-border-color: var(--gray-30);

  --impact-badge-text-color: var(--gray-90);
}

.ImpactBadge {
  --badge-text-color: var(--impact-badge-text-color);
}

.ImpactBadge--critical {
  --badge-background-color: var(--impact-badge-critical-background-color);
  --badge-border-color: var(--impact-badge-critical-border-color);
}

.ImpactBadge--serious {
  --badge-background-color: var(--impact-badge-serious-background-color);
  --badge-border-color: var(--impact-badge-serious-border-color);
}

.ImpactBadge--moderate {
  --badge-background-color: var(--impact-badge-moderate-background-color);
  --badge-border-color: var(--impact-badge-moderate-border-color);
}

.ImpactBadge--minor {
  --badge-background-color: var(--impact-badge-minor-background-color);
  --badge-border-color: var(--impact-badge-minor-border-color);
}

.Drawer {
  position: fixed;
  max-height: var(--drawer-height, 100vh);
  max-width: var(--drawer-width, 100vw);
  z-index: var(--z-index-drawer);
  transition: transform var(--drawer-animation-timing-function, ease-out)
    var(--drawer-animation-timing, 250ms);
}

.Drawer--top,
.Drawer--bottom {
  max-height: var(--drawer-height, auto);
  min-width: 100%;
}

.Drawer--left,
.Drawer--right {
  max-width: var(--drawer-width, auto);
  min-height: var(--drawer-height, 100%);
}

.Drawer--top {
  top: var(--drawer-top, 0);
  transform: translateY(-100%);
}

.Drawer--bottom {
  bottom: var(--drawer-bottom, 0);
  transform: translateY(100%);
}

.Drawer--left {
  top: var(--drawer-top, 0);
  transform: translateX(-100%);
}

.Drawer--right {
  top: var(--drawer-top, 0);
  right: 0;
  transform: translateX(100%);
}

.Drawer--open:is(.Drawer--top, .Drawer--bottom) {
  transform: translateX(0);
}

.Drawer--open:is(.Drawer--left, .Drawer--right) {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .Drawer {
    transition: none !important;
  }
}

:root {
  --bottom-sheet-width: 40rem;
  --bottom-sheet-background-color: #fff;
}

.cauldron--theme-dark {
  --bottom-sheet-background-color: var(--accent-medium);
  --bottom-sheet-text-color: #fff;
}

.BottomSheet {
  max-width: var(--bottom-sheet-width);
  color: var(--bottom-sheet-text-color);
  background-color: var(--bottom-sheet-background-color);
  margin: 0 auto;
  border-top-left-radius: var(--space-small);
  border-top-right-radius: var(--space-small);
  padding: var(--space-large) var(--space-small);
  box-shadow: var(--drop-shadow-overlay);
}

.BottomSheet__title {
  font-weight: var(--font-weight-medium);
}

.BottomSheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-small);
  border-bottom: 1px solid var(--gray-30);
  padding-bottom: var(--space-small);
  margin-bottom: var(--space-small);
}

:root {
  --section-header-description-color: var(--gray-60);
}

.cauldron--theme-dark {
  --section-header-description-color: var(--accent-light);
}

.SectionHeader {
  container-type: inline-size;
}

.SectionHeader__content {
  display: grid;
  word-break: break-word;
  grid-template-columns: 1fr;
  grid-template-areas:
    'heading'
    'description'
    'children';
}

.SectionHeader__actions {
  margin-top: var(--space-small);
  grid-area: children;
}

.SectionHeader .SectionHeader__content .SectionHeader__description {
  margin: var(--space-smallest) 0 0 0;
  padding: 0;
  color: var(--section-header-description-color);
  font-size: var(--text-size-base);
  grid-area: description;
  max-width: 30.5rem;
}

.SectionHeader :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-size-heading-2);
  font-weight: var(--font-weight-medium);
  margin: 0;
  padding: 0;
}

@container (min-width: 48rem) {
  .SectionHeader__content {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'heading children'
      'description children';
    align-items: start;
    column-gap: var(--space-smallest);
  }

  .SectionHeader__actions {
    margin: 0;
    justify-self: end;
  }
}

:root {
  --page-header-overline-color: var(--gray-60);
}

.cauldron--theme-dark {
  --page-header-overline-color: var(--accent-light);
}

.PageHeader :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-size-heading-1);
}

.PageHeader__overline {
  margin: 0 0 var(--space-smallest) 0;
  padding: 0;
  color: var(--page-header-overline-color);
  font-size: var(--text-size-base);
  word-break: break-word;
}

:root {
  --empty-state-border-color: var(--gray-30);
}

.cauldron--theme-dark {
  --empty-state-border-color: var(--accent-light);
}

.EmptyState > :where(h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-size-heading-3);
  line-height: var(--line-height-heading-3);
  margin-top: 0;
  margin-bottom: 0;
}

.EmptyState > :where(h1, h2, h3, h4, h5, h6) + :where(p) {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.EmptyState__primary {
  padding-top: var(--space-small);
}

.EmptyState__secondary {
  margin-top: var(--space-small);
  padding-top: var(--space-small);
  border-top: 1px solid var(--empty-state-border-color);
}

:root {
  --action-menu-border-color: var(--gray-30);
  --action-menu-background-color: #fff;
}

.cauldron--theme-dark {
  --action-menu-background-color: var(--accent-medium);
}

.ActionMenu {
  border: 1px solid var(--action-menu-border-color);
  background-color: var(--action-menu-background-color);
  padding: var(--space-smallest) 0;
  border-radius: 8px;
  width: var(--action-menu-width);
  min-width: var(--action-menu-min-width, 10rem);
  max-height: var(--action-menu-max-height, 80vh);
  max-width: var(--action-menu-max-width, 31rem);
  box-shadow: var(--drop-shadow-overlay);
  overflow-y: auto;
  z-index: var(--z-index-listbox);
}

:where(.cauldron--theme-dark) .ActionMenu .ActionListItem--danger {
  --action-list-text-color: var(--accent-warning-light);
  --action-list-item-icon-color: var(--accent-warning-light);
}

:root {
  --action-list-background-color: #fff;
  --action-list-text-color: var(--gray-90);
  --action-list-group-label-font-size: var(--text-size-base);
  --action-list-item-hover-background-color: var(--gray-20);
  --action-list-item-description-color: var(--gray-60);
  --action-list-item-icon-color: var(--gray-60);
  --action-list-item-disabled-text-color: var(--gray-40);
}

.cauldron--theme-dark {
  --action-list-background-color: var(--accent-medium);
  --action-list-text-color: #fff;
  --action-list-item-description-color: var(--accent-light);
  --action-list-item-icon-color: var(--accent-light);
  --action-list-item-hover-background-color: var(--accent-dark);
  --action-list-item-disabled-text-color: rgba(255, 255, 255, 0.25);
}

.ActionList,
.ActionList:hover,
.ActionList:focus,
.ActionList:focus:hover {
  color: var(--action-list-text-color);
  border: none;
  box-shadow: none;
  background: none;
  margin: 0;
}

.ActionList li {
  list-style-type: none;
}

.ActionMenu > .ActionList {
  outline: none;
}

.ActionListGroup,
.ActionListSeparator {
  padding-bottom: var(--space-smallest);
  margin-bottom: var(--space-smallest);
  border-bottom: 1px solid var(--action-menu-border-color);
}

.ActionList > li:last-child .ActionListGroup {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ActionListGroup > li:first-child {
  font-weight: var(--font-weight-medium);
  font-size: var(--action-list-group-label-font-size);
  padding: var(--space-smallest) var(--space-small);
}

.ActionList:focus {
  outline: none;
}

:where(.ActionList:focus-within) .ActionListItem--active {
  position: relative;
  box-shadow: inset 0 0 0 2px var(--focus);
  z-index: 1;
}

.ActionListItem {
  padding: var(--space-smallest);
}

.ActionListItem--danger {
  --action-list-text-color: var(--accent-error);
  --action-list-item-icon-color: var(--accent-error);
  --action-list-item-description-color: var(--action-list-text-color);
}

:where(.cauldron--theme-dark) .ActionListItem--danger {
  --action-list-text-color: #fff;
  --action-list-item-icon-color: #fff;
}

.ActionListItem {
  --icon-size: 1rem;
  --icon-spacing: 1.2rem;
  display: grid;
  align-items: center;
  gap: var(--space-half);
  color: var(--action-list-text-color);
  margin: 0 var(--space-smallest);
  border-radius: 4px;
  cursor: pointer;
}

.ActionListItem:is([aria-disabled='true']) {
  color: var(--action-list-item-disabled-text-color);
  cursor: not-allowed;
}

.ActionListItem:hover:not([aria-disabled='true']) {
  background-color: var(--action-list-item-hover-background-color);
}

.ActionListItem__selection,
.ActionListItem__leadingIcon,
.ActionListItem__trailingIcon {
  width: var(--icon-spacing);
}

:where(.ActionListItem:not([aria-disabled='true']))
  :is(
    .ActionListItem__selection,
    .ActionListItem__leadingIcon,
    .ActionListItem__trailingIcon
  ) {
  color: var(--action-list-item-icon-color);
}

.ActionListItem:has(> .ActionListItem__selection) {
  grid-template-columns: var(--icon-spacing) auto;
}

:where(.ActionListItem:has(.ActionListItem__description))
  :is(
    .ActionListItem__selection,
    .ActionListItem__leadingIcon,
    .ActionListItem__trailingIcon
  ) {
  grid-row: span 2;
  align-self: start;
}

:where(.ActionListItem:has(> .ActionListItem__selection))
  .ActionListItem__description,
:where(
    .ActionListItem:has(> .ActionListItem__leadingIcon):has(
        > .ActionListItem__description
      )
  )
  .ActionListItem__description {
  grid-column: 2;
}

:where(
    .ActionListItem:has(> .ActionListItem__selection):has(
        > .ActionListItem__leadingIcon
      )
  )
  .ActionListItem__description {
  grid-column: 3;
}

:where(
    .ActionListItem:has(> .ActionListItem__trailingIcon):has(
        > .ActionListItem__description
      )
  )
  .ActionListItem__description {
  grid-row: 2;
}

.ActionListItem:has(> .ActionListItem__leadingIcon) {
  grid-template-columns: var(--icon-spacing) auto;
}

.ActionListItem:has(> .ActionListItem__trailingIcon) {
  grid-template-columns: auto var(--icon-spacing);
}

.ActionListItem:has(> .ActionListItem__leadingIcon):has(
    > .ActionListItem__trailingIcon
  ) {
  grid-template-columns: var(--icon-spacing) auto var(--icon-spacing);
}

.ActionListItem:has(> .ActionListItem__selection):has(
    > .ActionListItem__leadingIcon
  ) {
  grid-template-columns: var(--icon-spacing) var(--icon-spacing) auto;
}

.ActionListItem:has(> .ActionListItem__selection):has(
    > .ActionListItem__trailingIcon
  ) {
  grid-template-columns: var(--icon-spacing) auto var(--icon-spacing);
}

.ActionListItem:has(> .ActionListItem__selection):has(
    > .ActionListItem__leadingIcon
  ):has(> .ActionListItem__trailingIcon) {
  grid-template-columns: var(--icon-spacing) var(--icon-spacing) auto var(
      --icon-spacing
    );
}

:where(.ActionListItem:not([aria-checked='true'])) .ActionListItem__selection {
  visibility: hidden;
}

.ActionListItem__description {
  color: var(--action-list-item-description-color);
}

:where(.ActionListItem:is([aria-disabled='true']))
  .ActionListItem__description {
  color: var(--action-list-item-disabled-text-color);
}

:root {
  --tree-view-padding: 1rem;
  --tree-view-focus-ring-color: var(--focus-light);
  --tree-view-highlight-background: var(--accent-light);
}

.cauldron--theme-dark {
  --tree-view-focus-ring-color: var(--focus-dark);
  --tree-view-highlight-background: var(--accent-dark);
}

.TreeView {
  display: flex;
  flex-direction: column;
  gap: var(--space-quarter);
  overflow: auto;
  padding: var(--space-half);
  outline: none;
  box-sizing: border-box;
}

.TreeView[data-focus-visible] {
  outline: 2px solid var(--tree-view-focus-ring-color);
  outline-offset: -1px;
}

.TreeView .TreeView__item {
  display: flex;
  align-items: center;
  gap: 0.571rem;
  min-height: 28px;
  padding: 0.286rem 0.286rem 0.286rem 0.571rem;
  outline: none;
  position: relative;
  transform: translateZ(0);
}

.TreeView .TreeView__item .TreeView__chevron {
  all: unset;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 100%;
  padding-left: calc((var(--tree-item-level) - 1) * var(--tree-view-padding));
}

.TreeView .TreeView__item .TreeView__chevron svg {
  transform: rotate(0deg);
  transition: transform 200ms;
}

.TreeView .TreeView__item[data-has-child-items] .TreeView__chevron {
  visibility: visible;
}

.TreeView .TreeView__item[data-expanded] .TreeView__chevron svg {
  transform: rotate(90deg);
}

.TreeView .TreeView__item[data-focus-visible] {
  outline: 2px solid var(--tree-view-focus-ring-color);
  outline-offset: -2px;
}

.TreeView .TreeView__item[aria-selected='true'] {
  background: var(--tree-view-highlight-background);
}

/**
 * Compact density preset for constrained viewports.
 *
 * Apply the `.cauldron--density-compact` class to the root element (e.g. <body>)
 * alongside the theme class to get tighter sizing across all components.
 * This is designed for embedded UIs like browser extension panels.
 *
 * Works orthogonally to theme classes:
 *   <body class="cauldron--theme-dark cauldron--density-compact">
 */

.cauldron--density-compact {
  /* TopBar: static positioning for embedded contexts, compact button layout */
  --top-bar-position: static;
  --top-bar-padding-inline-start: var(--space-small);
  --top-bar-menu-flex: initial;
  --top-bar-button-max-width: 80px;
  --top-bar-button-flex-direction: column;
  --top-bar-button-font-size: var(--text-size-smallest);
  --top-bar-item-padding: 0;

  /* Tabs: fill width, smaller font */
  --tabs-width: auto;
  --tab-font-size: var(--text-size-small);
  --tab-flex: 1;

  /* Tags: use small variant sizing by default */
  --tag-height: var(--tag-small-height);
  --tag-font-size: var(--text-size-smaller);

  /* Dialog: viewport-aware positioning for short viewports (e.g. docked devtools) */
  --dialog-vertical-offset: clamp(8px, calc(18vh - 50px), 100px);
  --dialog-content-line-height: 1.4;

  /* OptionsMenu: auto-width for narrow viewports */
  --options-menu-width: auto;

  /* Toast: static positioning (no fixed TopBar to anchor to) */
  --toast-position: static;

  /* Field select: constrained width */
  --select-width: clamp(0px, 25rem, 100%);

  /* Code: inline compact display */
  --code-display: inline;
  --code-padding: var(--space-quarter) var(--space-half);
  --code-border: none;
}

/* TopBar buttons: vertical icon-above-label layout in compact mode */

.cauldron--density-compact .TopBar li button:not(.Link) {
  display: flex;
  align-items: center;
  white-space: normal;
}

/* TopBar: restore padding on items containing text links (not icon buttons) */

.cauldron--density-compact .TopBar > ul > li:has(button.Link) {
  padding: 0 var(--space-small);
}