:root {
  --hbr-color-brand-gradient: linear-gradient(89.93deg, rgba(83, 168, 40, 1) 4%, rgba(32, 171, 78, 1) 94%);

  /** AI sentiment */
  --hbr-color-ai-gradient: linear-gradient(to top, #3b76ea 10%, #00bceb 88%, #63fff7 162%);
  --hbr-color-ai-gradient-bg: linear-gradient(var(--hbr-color-neutral-bg), var(--hbr-color-neutral-bg)) padding-box,
    var(--hbr-color-ai-gradient) border-box;

  /* SENTIMENT overrides */
  --hbr-color-interact-icon: var(--hbr-color-interact-medium, #2774d9);

  /* TOKENS -- Magnetic only */

  --hbr-color-text-heading: var(--hbr-color-neutral-text-medium, #373c42);

  --hbr-focus-ring: 0 0 0 var(--hbr-control-border-width) var(--hbr-control-color-focus-ring, #d9e7ff);
  --hbr-focus-ring-danger: 0 0 0 var(--hbr-control-border-width) var(--hbr-control-color-focus-ring-error, #fce2de);

  /** Label **/
  --hbr-control-font-weight-label: 600;

  /** Close Icon **/
  --hbr-close-icon-color-text: var(--hbr-color-neutral-icon);
}

.hbr-type-h1,
.hbr-type h1,
.hbr-type-h2,
.hbr-type h2,
.hbr-type-h3,
.hbr-type h3,
.hbr-type-h4,
.hbr-type h4,
.hbr-type-h5,
.hbr-type h5,
.hbr-type-h6,
.hbr-type h6,
.hbr-type-n1,
.hbr-type .n1,
.hbr-type-n2,
.hbr-type .n2,
.hbr-type-n3,
.hbr-type .n3,
.hbr-type-n4,
.hbr-type .n4,
.hbr-type-n5,
.hbr-type .n5 {
  font-family: var(--hbr-font-heading);
}

.hbr-type-h1,
.hbr-type h1,
.hbr-type-h2,
.hbr-type h2,
.hbr-type-h3,
.hbr-type h3,
.hbr-type-h4,
.hbr-type h4,
.hbr-type-h5,
.hbr-type h5,
.hbr-type-h6,
.hbr-type h6 {
  color: var(--hbr-color-neutral-text-medium);
}

.hbr-type-h1,
.hbr-type h1 {
  font-size: var(--hbr-font-size-xl);
  line-height: var(--hbr-font-line-height-dense);
  font-weight: var(--hbr-font-weight-bold);
}
.hbr-type-h2,
.hbr-type h2 {
  font-size: var(--hbr-font-size-lg);
  line-height: var(--hbr-font-line-height-denser);
  font-weight: var(--hbr-font-weight-bold);
}
.hbr-type-h3,
.hbr-type h3 {
  font-size: var(--hbr-font-size-md);
  line-height: var(--hbr-font-line-height-dense);
  font-weight: var(--hbr-font-weight-bold);
}
.hbr-type-h4,
.hbr-type h4 {
  font-size: var(--hbr-font-size-sm);
  line-height: var(--hbr-font-line-height-dense);
  font-weight: var(--hbr-font-weight-bold);
  text-transform: uppercase;
}
.hbr-type-h5,
.hbr-type h5 {
  font-size: var(--hbr-font-size-xs);
  font-weight: var(--hbr-font-weight-bold);
}
.hbr-type-h6,
.hbr-type h6 {
  font-size: var(--hbr-font-size-2xs);
  letter-spacing: 1rem;
  text-transform: uppercase;
  font-weight: var(--hbr-font-weight-bold);
}

.hbr-type-body1,
.hbr-type .body1 {
  font-size: var(--hbr-font-size-lg);
}
.hbr-type-body2,
.hbr-type .body2,
.hbr-type-link,
.hbr-type .link {
  font-size: var(--hbr-font-size-md);
}
.hbr-type-body3,
.hbr-type .body3 {
  font-size: var(--hbr-font-size-sm);
}
/* Magnetic only */
.hbr-type-body4,
.hbr-type .body4 {
  font-size: var(--hbr-font-size-xs);
}

/* Magnetic only numerical styles */
.hbr-type-n1,
.hbr-type .n1 {
  font-size: var(--hbr-font-size-5xl);
  line-height: var(--hbr-font-line-height-denser);
  font-weight: var(--hbr-font-weight-bold);
}
.hbr-type-n2,
.hbr-type .n2 {
  font-size: var(--hbr-font-size-4xl);
  line-height: var(--hbr-font-line-height-denser);
  font-weight: var(--hbr-font-weight-bold);
}
.hbr-type-n3,
.hbr-type .n3 {
  font-size: var(--hbr-font-size-3xl);
  font-weight: var(--hbr-font-weight-bold);
}
.hbr-type-n4,
.hbr-type .n4 {
  font-size: var(--hbr-font-size-2xl);
  font-weight: var(--hbr-font-weight-bold);
}
.hbr-type-n5,
.hbr-type .n5 {
  font-size: var(--hbr-font-size-x-medium);
  font-weight: var(--hbr-font-weight-bold);
}

/********************
** menu
********************/
hbr-time-picker::part(select),
hbr-select {
  --menu-panel-border: var(--hbr-spacing-3xs) solid var(--hbr-color-neutral-disabled, #cccccc);
  --menu-panel-box-shadow: var(--hbr-shadow-xs);
  --menu-panel-border-radius: var(--hbr-border-radius-md);
  --menu-panel-padding: var(--hbr-spacing-2xs) 0px;
}
hbr-time-picker::part(select) {
  --no-label-placeholder-color: var(--hbr-color-neutral-text-weak);
}
hbr-pagination::part(menu-item),
hbr-dropdown hbr-menu hbr-menu-item[size="medium"]:not([sentiment="admin"])::part(base),
hbr-menu hbr-menu-item[size="medium"]:not([sentiment="admin"])::part(base),
hbr-dropdown hbr-menu hbr-menu-item[size="medium"]:not([sentiment="admin"])[nested]::part(base),
hbr-menu hbr-menu-item[size="medium"]:not([sentiment="admin"])[nested]::part(base),
hbr-menu-item[size="medium"]:not([sentiment="admin"])::part(base) {
  --padding: var(--hbr-spacing-xs) 10px;
}

hbr-dropdown hbr-menu hbr-menu-item.hbr-menu-item-group:not([sentiment="admin"])::part(base),
hbr-menu hbr-menu-item.hbr-menu-item-group:not([sentiment="admin"])::part(base),
hbr-dropdown hbr-menu hbr-menu-item.hbr-menu-item-group:not([sentiment="admin"])[nested]::part(base),
hbr-menu hbr-menu-item.hbr-menu-item-group:not([sentiment="admin"])[nested]::part(base),
hbr-menu-item.hbr-menu-item-group:not([sentiment="admin"])::part(base) {
  --padding: 7px 10px 7px 18px;
}

hbr-pagination::part(menu-item),
hbr-dropdown hbr-menu hbr-menu-item[sentiment="neutral"]::part(base),
hbr-menu hbr-menu-item[sentiment="neutral"]::part(base),
hbr-dropdown hbr-menu hbr-menu-item[sentiment="neutral"][nested]::part(base),
hbr-menu hbr-menu-item[sentiment="neutral"][nested]::part(base),
hbr-menu-item[sentiment="neutral"]::part(base) {
  --hover-background: var(--hbr-control-color-menu-hover);
  --checked-background-color: none;
  --hover-checked-background-color: var(--hover-background);
}

hbr-dropdown hbr-menu hbr-menu-item[nested]::part(base),
hbr-menu hbr-menu-item[nested]::part(base) {
  --padding-nested: var(--hbr-spacing-xs) 10px;
}

hbr-dropdown hbr-menu hbr-menu-item[sentiment="neutral"][nested]:hover::part(base),
hbr-menu hbr-menu-item[sentiment="neutral"][nested]:hover::part(base),
hbr-menu-item[sentiment="neutral"][nested]:hover::part(base),
hbr-dropdown hbr-menu hbr-menu-item[sentiment="neutral"][nested][nested-selected]::part(base),
hbr-menu hbr-menu-item[sentiment="neutral"][nested][nested-selected]::part(base),
hbr-menu-item[sentiment="neutral"][nested][nested-selected]::part(base) {
  --hover-background: var(--hbr-control-color-menu-hover, #d9e7ff);
  --checked-background-color: none;
  --hover-checked-background-color: var(--hover-background);
}

hbr-nav-item hbr-menu hbr-menu-item[size="medium"]:not([sentiment="admin"])::part(base) {
  --hover-background: var(--hbr-control-color-menu-hover);
  --checked-background-color: var(--hbr-color-neutral-bg-selected, #f0f1f2);
  --padding: calc(var(--hbr-spacing-2xs) + 2px) calc(var(--hbr-spacing-xs) + 2px);
  --color: var(--hbr-color-neutral-text, #23282e);
}

hbr-menu-item[checkbox],
hbr-menu-item[checkbox] hbr-checkbox {
  --padding: 0px;
}

hbr-dropdown hbr-menu {
  --padding: var(--hbr-spacing-2xs) 0px;
}

hbr-dropdown hbr-menu::part(nested),
hbr-menu {
  --border: 2px solid var(--hbr-color-neutral-border, #889099);
  --box-shadow: var(--hbr-shadow-xs);
  --border-radius: 6px;
  --padding: 4px 0px;
}
.hbr-tab-popover.hbr-floating-component hbr-menu {
  --box-shadow: none;
}

hbr-menu-label {
  --padding: 7px 12px;
  --font-size: var(--hbr-font-size-xs, 12px);
  --font-weight: var(--hbr-font-weight-normal, 400);
  --color: var(--hbr-color-neutral-text-weak, #656c75);
}

hbr-menu-item[sentiment="neutral"] {
  --color: var(--hbr-control-color, #23282e);
}

hbr-menu-item > hbr-icon {
  color: var(--color-sentiment-icon);
}

hbr-menu-item:hover > hbr-icon {
  color: var(--color-sentiment-icon-hover);
}

hbr-menu-item[checked] > hbr-icon {
  color: var(--color-sentiment-icon-hover);
}

hbr-menu-item[disabled] > hbr-icon,
hbr-menu-item[disabled]:hover > hbr-icon {
  color: var(--color-sentiment-icon-disabled);
}

hbr-menu-divider {
  --border-color: var(--hbr-color-neutral-border-weak);
}

/********************
  ** Select
********************/

hbr-select,
hbr-pagination::part(select) {
  --popup-border: 2px solid var(--hbr-color-neutral-border, #889099);
  --popup-box-shadow: var(--hbr-shadow-xs);
  --popup-border-radius: 6px;
  --popup-padding: var(--hbr-spacing-2xs);
}

hbr-select[size="medium"]::part(combobox) {
  --spacing-medium: var(--hbr-spacing-xs);
}

hbr-select[variant="tag"][size="medium"]::part(combobox) {
  --spacing-medium: 6px;
}

hbr-select[variant="tag"].select-tag--selected::part(combobox) {
  align-items: flex-start;
  padding-block: var(--hbr-spacing-3xs);
}

hbr-select[size="small"]::part(combobox) {
  --spacing-small: 6px;
}
hbr-select[variant="tag"][size="small"]::part(combobox) {
  --spacing-small: 5px;
}

hbr-select::part(content):focus {
  color: var(--hbr-color-neutral-text);
}
hbr-select[size="small"]::part(display-input) {
  font-size: var(--hbr-font-size-xs);
}

hbr-select[size="small"]::part(clear-button) {
  padding-block: 1px 2px;
  margin-left: 6px;
}

hbr-select[size="medium"][variant="tag"].select-tag--selected::part(clear-button) {
  padding-top: 6px;
}
hbr-select[size="small"][variant="tag"].select-tag--selected::part(clear-button) {
  padding-top: 4px;
}
hbr-select[size="medium"][variant="tag"].select-tag--selected::part(expand-icon) {
  padding-top: 6px;
  padding-bottom: 5px;
}
hbr-select[size="small"][variant="tag"].select-tag--selected::part(expand-icon) {
  padding-top: 4px;
  padding-bottom: 4px;
}

hbr-select[size="small"]::part(control) {
  border-radius: var(--hbr-control-border-radius, 6px);
}

hbr-select[size="large"]::part(control) {
  border-radius: var(--hbr-control-border-radius, 6px);
}

hbr-select::part(tags) {
  padding-top: 1px; /* due to flex-start*/
}

hbr-select::part(tag__base) {
  border-radius: 14px;
  font-weight: var(--hbr-font-weight-semibold, 600);
  font-size: var(--hbr-font-size-xs);
}
hbr-select[size="medium"]::part(tag__base) {
  padding-block: 3px; /* due to flex-start*/
}

hbr-select::part(tag__content) {
  line-height: 18px; /* due to flex-start*/
}

hbr-select::part(tag__remove-button) {
  color: var(--hbr-icon-color-interactive);
  margin-left: 0;
  font-size: var(--hbr-font-size-sm);
}
hbr-select[size="small"]::part(tag__remove-button) {
  font-size: var(--hbr-font-size-xs);
}
hbr-select::part(tag__remove-button) {
  margin-left: 0;
}
hbr-select[siz="small"]::part(tag__remove-button) {
  font-size: var(--hbr-font-size-xs);
}

hbr-select::part(expand-icon),
hbr-select::part(clear-button) {
  font-size: var(--hbr-font-size-md);
}

hbr-select::part(expand-icon) {
  padding: var(--hbr-spacing-3xs);
}
hbr-select[size="small"]::part(expand-icon) {
  font-size: var(--hbr-font-size-sm);
  padding: var(--hbr-spacing-3xs) 3px;
}

hbr-select::part(clear-button) {
  padding: var(--hbr-spacing-3xs) 3px;
  margin-left: 5px;
}

hbr-select-anchor > hbr-icon[slot="prefix"],
hbr-select-anchor > hbr-icon[slot="suffix"],
hbr-select::part(expand-icon),
hbr-select::part(clear-button) {
  color: var(--hbr-icon-color-interactive);
}
hbr-select-anchor[disabled] > hbr-icon[slot="prefix"],
hbr-select-anchor[disabled] > hbr-icon[slot="suffix"],
hbr-select[disabled]::part(expand-icon),
hbr-select[disabled]::part(clear-button) {
  color: var(--hbr-icon-color-disabled);
}

hbr-select::part(counter) {
  background-color: var(--hbr-color-neutral-bg-weak);
  border-radius: 14px;
  color: var(--hbr-color-neutral-text);
  font-weight: var(--hbr-font-weight-semibold);
}
hbr-select[size="small"]::part(counter) {
  margin-right: var(--hbr-spacing-2xs);
}

hbr-select[size="medium"]::part(prefix) {
  font-size: 16px;
}
hbr-select[size="small"]::part(prefix) {
  font-size: 14px;
}

hbr-select[error]::part(label) {
  color: initial;
}

/********************
** Option
********************/
hbr-option::part(label) {
  line-height: 20px;
}

hbr-option:not([sentiment]):not([disabled])::part(base) {
  color: var(--hbr-color-neutral-text);
}

hbr-option::part(checked-icon) {
  color: var(--hbr-color-interact-text, #1d69cc);
  font-size: var(--hbr-font-size-md);
}

hbr-option[size="small"]::part(base) {
  line-height: 18px;
  height: 18px;
}

/********************
   ** dropdown
   ********************/

hbr-dropdown::part(trigger) {
  font-weight: 700;
  --trigger-focus-ring: none;
}

hbr-dropdown[size="medium"]::part(trigger) {
  font-size: var(--hbr-font-size-sm, 14px);
  line-height: 20px;
}
hbr-dropdown[size="small"]::part(trigger) {
  font-size: var(--hbr-font-size-xs, 12px);
  line-height: 18px;
}
hbr-dropdown {
  --prefix-margin-right: var(--hbr-spacing-2xs, 4px);
  --arrow-icon-margin-left: var(--hbr-spacing-2xs, 4px);
  --suffix-margin-left: var(--hbr-spacing-2xs, 4px);
}
hbr-dropdown hbr-menu hbr-menu-item[checked] > hbr-icon {
  color: var(--color-sentiment-icon);
}

/********************
   ** border
   ********************/
hbr-dropdown,
hbr-button,
hbr-select,
hbr-textarea {
  --hbr-border-width: 2px;
}

/********************
 ** Form
 ********************/
:root {
  --form-control-asterisk-display: none;
  --asterisk-margin: 0;
}

hbr-input[disabled]::part(label),
hbr-select[disabled]::part(label),
hbr-date-picker[disabled]::part(label),
hbr-time-picker[disabled]::part(label),
hbr-checkbox[disabled]::part(label),
hbr-checkbox-group[disabled]::part(legend),
hbr-radio[disabled]::part(label),
hbr-radio-group[disabled]::part(legend),
hbr-switch[disabled]::part(label),
hbr-switch-group[disabled]::part(legend),
hbr-textarea[disabled]::part(label),
hbr-progress-bar[disabled]::part(label),
hbr-view-switcher[disabled]::part(legend) {
  color: inherit;
}

/********************
   ** Form - input
   ********************/

hbr-input::part(error-icon) {
  display: none;
}

hbr-input[size="small"]::part(base) {
  border-radius: var(--hbr-control-border-radius, 6px);
  font-size: var(--hbr-font-size-xs, 12px);
  font-family: var(--hbr-font-body, Inter);
  line-height: 18px;
}

hbr-input[size="medium"]::part(base) {
  border-radius: var(--hbr-control-border-radius, 6px);
}

hbr-input[size="large"]::part(base) {
  border-radius: var(--hbr-control-border-radius, 6px);
}

hbr-input[size="small"]::part(input) {
  margin: 0px 6px;
}

hbr-input[size="medium"]::part(input) {
  margin: 0px 10px;
}

hbr-input[size="large"]::part(input) {
  margin: 0px 14px;
}

hbr-input[size="large"][type="password"]::part(input) {
  margin: 0px 12px 0px 14px;
}

hbr-input[size="medium"][type="password"]::part(input) {
  margin: 0px 8px 0px 10px;
}

hbr-input[size="small"][type="password"]::part(input) {
  margin: 0px 4px 0px 6px;
}

hbr-input::part(password-toggle-button),
hbr-input::part(clear-button) {
  color: var(--hbr-color-interact);
  /* padding-top: 0px; */
}

hbr-input::part(password-toggle-button) {
  font-weight: var(--hbr-font-weight-bold, 700);
  font-size: var(--hbr-font-size-xs, 12px);
  line-height: 18px;
  margin-right: 10px;
  font-family: var(--hbr-font-body, Inter);
}
hbr-input[size="small"]::part(clear-button) {
  font-size: var(--font-size-sm, 14px);
}

hbr-input[size="large"]::part(password-toggle-button){
  font-weight: var(--hbr-font-weight-bold, 700);
  font-size: var(--hbr-font-size-sm, 14px);
  line-height: 20px;
  margin-right: 14px;
}

hbr-input[size="small"]::part(password-toggle-button) {
  margin-right: 6px;
}
hbr-input[disabled]::part(password-toggle-button),
hbr-input[disabled]::part(clear-button) {
  color: var(--hbr-color-neutral-icon-disabled);
}

hbr-checkbox-group,
hbr-checkbox,
hbr-radio-group,
hbr-radio,
hbr-switch-group,
hbr-switch,
hbr-slider,
hbr-time-picker,
hbr-textarea,
hbr-input,
hbr-select {
  --label-error-color: var(--hbr-color-neutral-text, #464c54);
}

/********************
   ** Dashboard
   ********************/
hbr-grid {
  --margin-x: var(--hbr-spacing-xs);
}

.hbr-css--grid-item--type-dashboard,
.hbr-css--grid-item--type-cards {
  --margin-y: var(--hbr-spacing-sm);
  --margin-x: var(--hbr-spacing-xs);
  border: none;
  margin: var(--margin-y) var(--margin-x);
  box-shadow: var(--hbr-shadow-sm);
}

.hbr-css--grid-item--type-cards {
  box-shadow: none;
  border: 2px solid var(--hbr-color-neutral-border);
}

/********************
   ** Button
   ********************/
hbr-button {
  --label-affix-padding-sm: 2px;
  --label-affix-padding-md: 4px;
  --label-affix-padding-lg: 6px;
  --padding-horizontal-sm: var(--hbr-spacing-xs);
  --padding-horizontal-md: var(--hbr-spacing-sm);
  --padding-horizontal-lg: var(--hbr-spacing-md);
}
hbr-button[variant="text"]::part(base) {
  line-height: 20px;
}
hbr-button[size="small"][variant="text"]::part(base) {
  line-height: 18px;
}
hbr-button[size="large"][variant="text"]::part(base) {
  line-height: 22px;
}

hbr-button::part(base) {
  --label-font-weight: var(--hbr-font-weight-bold);
}

hbr-button::part(prefix) {
  font-size: 13px;
}
hbr-button[size="small"]::part(prefix) {
  font-size: 11px;
}

hbr-button.hbr-button-group__button::part(base) {
  font-weight: var(--hbr-font-weight-semibold, 600);
}

hbr-button > hbr-icon {
  font-size: var(--hbr-font-size-md);
}

hbr-button[size="small"] > hbr-icon {
  font-size: var(--hbr-font-size-sm);
}

hbr-button[size="small"] hbr-icon:not([slot]) {
  font-size: var(--hbr-font-size-md);
}

hbr-button hbr-icon:not([slot]) {
  font-size: calc(var(--hbr-font-size-lg) + 2px);
}

hbr-button[variant="text"] > hbr-icon:not([slot="prefix"]):not([slot="suffix"]) {
  color: var(--hbr-color-neutral-icon);
}

hbr-button[variant="text"]:hover > hbr-icon:not([slot="prefix"]):not([slot="suffix"]) {
  color: var(--hbr-color-neutral-icon-hover);
}

hbr-button[variant="text"][disabled] > hbr-icon:not([slot="prefix"]):not([slot="suffix"]) {
  color: var(--hbr-color-neutral-icon-disabled);
}

/* Neutral button with icon, has stronger icon and background, used in places like chat menu button */
hbr-button[variant="text"][sentiment="neutral"]:not([disabled])
  > hbr-icon:not([slot="prefix"]):not([slot="suffix"])::part(base) {
  color: var(--hbr-color-neutral-icon-strong, #656c75);
}

hbr-button[variant="text"][sentiment="neutral"]:not([disabled]):hover
  > hbr-icon:not([slot="prefix"]):not([slot="suffix"])::part(base) {
  color: var(--hbr-color-neutral-icon-strong-hover, #464c54);
}

hbr-button[sentiment="ai"]:not([disabled])::part(base) {
  --bg-color: var(--hbr-color-ai-gradient-bg);
  --bg-color-hover: var(--hbr-color-interact-bg-hover, #cce1ff);
  --bg-color-active: var(--hbr-color-interact-bg-hover, #cce1ff);

  --label-color: var(--hbr-color-neutral-text);
  --label-color-hover: var(--hbr-color-interact-text-hover, #0d5cbd);
  --label-color-active: var(--hbr-color-interact-text-hover, #0d5cbd);
  --label-color-disabled: var(--hbr-color-interact-text-disabled, #a3c8ff);

  --border-color: transparent;
  --border-color-hover: var(--hbr-color-interact-border-hover, #0d5cbd);
  --border-color-active: var(--hbr-color-interact-border-hover, #0d5cbd);
}

hbr-button:not([variant]) hbr-icon,
hbr-button[variant="fill"] hbr-icon {
  --path-color-weak: currentColor;
  --path-color-default: currentColor;
  --path-color-medium: currentColor;
  --path-color-strong: currentColor;
  --path-color-light: transparent;
  --path-color-contrast: var(--bg-color);
}

hbr-button[sentiment="ai"]:not([disabled]) hbr-icon {
  color: var(--hbr-color-interact-icon);
}

/* TODO - button should have disabled variables too */
hbr-button[sentiment="ai"][disabled]::part(base) {
  --label-color: var(--hbr-color-interact-disabled);
  --border-color: var(--hbr-color-interact-disabled);
}

hbr-button[sentiment="ai-action"]:not([disabled])::part(base) {
  --bg-color: transparent;
  --bg-color-hover: var(--hbr-color-ai-gradient-bg);
  --bg-color-active: var(--hbr-color-ai-gradient-bg);

  --label-color: var(--hbr-color-neutral-icon-strong, #656c75);
  --label-color-hover: var(--hbr-color-neutral-text, #23282e);
  --label-color-active: var(--hbr-color-neutral-text, #23282e);
  --label-color-disabled: var(--hbr-color-interact-text-disabled, #a3c8ff);

  --border-color: transparent;
  --border-color-hover: transparent;
  --border-color-active: transparent;
}

/********************
** spinner
********************/
hbr-spinner {
  --size: var(--hbr-font-size-md);
  --indicator-color: var(--hbr-color-neutral-icon, #7e868f);
}

hbr-spinner[slot="label"] {
  color: var(--hbr-color-neutral-text-weak, #596069);
}

/********************
** Link
********************/
hbr-link::part(base) {
  font-weight: var(--hbr-font-weight-bold);
}

/********************
   ** Radio button
   ********************/
hbr-checkbox[size="small"]::part(control),
hbr-radio[size="small"]::part(control) {
  font-size: 16px;
}
hbr-checkbox[size="medium"]::part(control),
hbr-radio[size="medium"]::part(control) {
  font-size: 20px;
}
hbr-checkbox[size="medium"]::part(content),
hbr-radio[size="medium"]::part(content) {
  line-height: 20px;
}
hbr-checkbox[size="large"]::part(control),
hbr-radio[size="large"]::part(control) {
  font-size: 24px;
}
hbr-radio::part(control-focus) {
  box-shadow: 0 0px 0px 2px var(--hbr-control-color-focus-ring);
}
hbr-radio[size="large"]::part(control-focus) {
  box-shadow: 0 0px 0px 3px var(--hbr-control-color-focus-ring);
}
hbr-checkbox[disabled]::part(content),
hbr-radio[disabled]::part(content) {
  color: var(--hbr-color-neutral-text-disabled, #c1c6cc);
}
hbr-checkbox::part(content),
hbr-radio::part(content) {
  color: var(--hbr-color-neutral-text, #23282e);
}
hbr-radio:not([disabled])::part(default-icon) {
  color: var(--hbr-control-color-border, #889099);
}
hbr-radio:not([disabled]):hover::part(default-icon) {
  color: var(--hbr-control-color-border-hover, #3e84e5);
}
hbr-radio[disabled]::part(default-icon) {
  color: var(--hbr-control-color-border-disabled, #d0d4d9);
  --path-color-contrast: var(--hbr-control-color-bg-disabled, #f7f7f7);
}
hbr-radio[disabled]::part(checked-icon) {
  color: var(--hbr-color-neutral-border-disabled, #d0d4d9);
  --path-color-contrast: var(--hbr-control-color-bg-disabled, #f7f7f7);
  --path-color-2: var(--hbr-color-neutral-text-disabled, #c1c6cc);
  --path-color-0: var(--hbr-color-neutral-border-disabled);
}
hbr-radio::part(checked-icon) {
  color: var(--hbr-control-color-border-focus, #3e84e5);
  --path-color-1: var(--hbr-color-interact-text-medium, #2774d9);
}
hbr-radio:not([disabled])::part(checked-icon):hover {
  color: var(--hbr-color-interact-text-hover, #0d5cbd);
  --path-color-1: var(--hbr-color-interact-text-hover, #0d5cbd);
}

hbr-radio[disabled]::part(default-icon-wrapper) {
  --path-secondary-color: var(--hbr-control-color-bg-disabled);
}
hbr-checkbox[disabled]::part(default-icon-wrapper) {
  --path-fill-color-0: var(--hbr-control-color-bg-disabled);
}

/********************
   ** Radio group
   ********************/
hbr-radio-group {
  --asterisk-font-weight: 600;
}
/********************
   ** checkbox
   ********************/
hbr-checkbox[disabled]::part(default-icon) {
  color: var(--hbr-control-color-border-disabled, #d0d4d9);
  --path-color-2: var(--hbr-control-color-bg-disabled, #f7f7f7);
}
hbr-checkbox::part(checked-icon),
hbr-checkbox::part(indeterminate-icon) {
  color: var(--hbr-color-interact-text-medium, #2774d9);
  --path-color-0: var(--hbr-color-interact-text-medium, #2774d9);
  --path-color-2: var(--hbr-color-interact-text-medium, #2774d9);
  --path-fill-color-0: var(--hbr-color-interact-text-medium, #2774d9);
  --path-color-contrast: var(--hbr-color-neutral-contrast-icon);
}
hbr-checkbox:not([disabled])::part(checked-icon):hover,
hbr-checkbox:not([disabled])::part(indeterminate-icon):hover {
  color: var(--hbr-color-interact-text-hover, #0d5cbd);
  --path-color-0: var(--hbr-color-interact-text-hover, #0d5cbd);
  --path-color-2: var(--hbr-color-interact-text-hover, #0d5cbd);
  --path-fill-color-0: var(--hbr-color-interact-text-hover, #2774d9);
}
hbr-checkbox:not([disabled])[error]::part(control) {
  box-shadow: var(--hbr-focus-ring-danger);
}
hbr-checkbox:not([disabled])::part(indeterminate-icon-wrapper),
hbr-checkbox:not([disabled])[checked]::part(checked-icon-wrapper) {
  color: var(--hbr-color-interact-active, #4580e5);
  --path-secondary-color: white;
  --path-color-0: var(--hbr-color-interact-active, #4580e5);
  --path-color-1: white;
}
hbr-checkbox:not([disabled]):hover::part(default-icon) {
  --path-color-0: var(--hbr-control-color-border-hover, #3e84e5);
}
hbr-checkbox:not([disabled])::part(default-icon) {
  --path-color-0: var(--hbr-control-color-border, #889099);
}
hbr-checkbox:not([disabled])[error]::part(error-icon) {
  --path-color-0: var(--hbr-color-danger);
}
hbr-checkbox[disabled]::part(checked-icon),
hbr-checkbox[disabled]::part(indeterminate-icon) {
  color: var(--hbr-color-neutral-border-disabled, #d0d4d9);
  --path-fill-color-0: var(--hbr-color-neutral-bg-medium, #f7f7f7);
  --path-color-1: var(--hbr-color-neutral-border-disabled, #d0d4d9);
  --path-color-2: var(--hbr-control-color-bg-disabled, #f7f7f7);
  --path-color-0: var(--hbr-color-neutral-border-disabled, #d0d4d9);
  --path-color-contrast: var(--hbr-color-neutral-contrast-icon-disabled);
}

hbr-checkbox-group[size="small"] > hbr-checkbox {
  margin: var(--checkbox-margin-column-small);
}

hbr-radio-group[size="small"] > hbr-radio {
  margin: var(--radio-margin-column-small);
}

hbr-checkbox-group[size="small"][direction="row"] > hbr-checkbox {
  margin: var(--checkbox-margin-row-small);
}
hbr-radio-group[size="small"][direction="row"] > hbr-radio {
  margin: var(--radio-margin-row-small);
}

/********************
   ** Modal
   ********************/
hbr-modal {
  --padding: 0px var(--hbr-spacing-lg) var(--hbr-spacing-lg) var(--hbr-spacing-lg);
}

hbr-modal::part(panel) {
  box-shadow: var(--hbr-shadow-md, 0px 4px 12px rgba(0, 0, 0, 0.12));
  border-radius: var(--hbr-border-radius-lg, 8px);
}

hbr-modal::part(body) {
  font-size: 14px;
}

hbr-modal::part(title) {
  padding: var(--hbr-spacing-lg) var(--hbr-spacing-lg) var(--hbr-spacing-md) var(--hbr-spacing-lg);
  font-weight: var(--hbr-font-weight-bold, 700);
  font-size: var(--hbr-font-size-xl);
  color: var(--hbr-color-neutral-text-medium);
  font-family: var(--hbr-font-body);
}

hbr-modal::part(footer) {
  padding: var(--hbr-spacing-lg);
}

hbr-modal::part(closer) {
  display: none;
}

/********************
   ** Drawer
   ********************/

hbr-drawer::part(panel) {
  border: none;
  box-shadow: var(--hbr-shadow-md, 0px 4px 12px rgba(0, 0, 0, 0.12));
}

hbr-drawer::part(title) {
  padding: 16px 52px 12px 24px;
  font-size: var(--hbr-font-size-xl);
  font-weight: var(--hbr-font-weight-bold, 700);
  color: var(--hbr-color-neutral-text-medium, #373c42);
  font-family: var(--hbr-font-heading);
}

hbr-drawer:not(.hbr-css__scroll-view-offset-top)::part(header) {
  border: none;
}

hbr-drawer::part(closer) {
  margin: calc(var(--hbr-spacing-md) + 5px) var(--hbr-spacing-lg) 44px var(--hbr-spacing-sm);
  font-size: var(--hbr-font-size-md, 16px);
}

hbr-drawer::part(close-button) {
  width: 20px;
  height: 20px;
  line-height: 20px;
}

hbr-drawer:not([no-padding])::part(body) {
  padding: 4px 24px 24px 24px;
}

hbr-drawer {
  --closer-icon-color: var(--hbr-color-neutral-icon, #889099);
}

.hbr-cta--sample---container hbr-button:first-child {
  padding-right: 8px !important;
}

/********************
   ** Slider
   ********************/

hbr-slider {
  --hbr-slider-background-color: #ffffff;
  --hbr-slider-thumb-border: 2px solid var(--hbr-color-neutral-bg-weak-selected, #656c75);
  --thumb-size: 24px;
  --thumb-margin-top: -9px;
  --slider-range-selected-color: var(--hbr-color-interact-vivid-border, #2774d9);
  --slider-range-unselected-color: var(--hbr-color-neutral-border-weak, #e1e4e8);
  --hbr-slider-thumb-transition-scale: none;
  --slider-ticks-active-color: var(--hbr-color-neutral-disabled, #c1c6cc);
  --slider-ticks-inactive-color: var(--hbr-color-interact-bg-medium, #cce1ff);
  --slider-tick-size: 4px;
  --hbr-slider-thumb-border-active: 2px solid var(--hbr-color-interact-border-medium, #3e84e5);
  --hbr-slider-thumb-outline-active: 2px solid rgba(62, 132, 229, 0.2);
  --hbr-slider-tooltip-background-color: var(--hbr-color-neutral-15, #373c42);
  --hbr-tooltip-arrow-size: 10px;
  --hbr-tooltip-arrow-background-color: var(--hbr-color-neutral-15, #373c42);
  --hbr-tooltip-arrow-size: 8px;
  --tooltip-offset-y: 12px;
  --slider-pip-label-top: 35px;
  --slider-range-unselected-color-disabled: var(--hbr-color-neutral-border, #e1e4e8);
  --slider-range-selected-color-disabled: var(--hbr-color-neutral-disabled, #c1c6cc);
  --hbr-slider-thumb-hover: 2px solid #3e84e5;
}

hbr-slider::part(inputstart::-webkit-slider-thumb:hover) {
  border: 2px solid black;
}

hbr-slider::part(track) {
  height: 8px;
  border-radius: var(--hbr-border-radius-sm, 4px);
}

hbr-slider::part(tooltipstart),
hbr-slider::part(tooltipend) {
  padding: 4px 8px;
  font-weight: var(--hbr-font-weight-normal, 400);
  font-size: var(--hbr-font-size-xs, 12px);
  line-height: 18px;
  color: var(--hbr-slider-background-color, #ffffff);
}

hbr-slider::part(pips) {
  font-weight: var(--hbr-font-weight-normal, 400);
  font-size: var(--hbr-font-size-xs, 12px);
  line-height: 18px;
  color: var(--hbr-color-neutral-text-weak, #6f7680);
}

hbr-table[theme] hbr-table-header .header-rgRow:not(.group),
hbr-table-header::part(row) {
  font-weight: 800;
  border-bottom: var(--hbr-border-width) solid var(--hbr-color-neutral-text);
  box-shadow: none;
  clip-path: none;
}
hbr-table[theme="magnetic"] {
  --header-height: 36px;
  --row-height: 37px;
  --header-border-color: var(--hbr-color-neutral, #656c75);
  --row-bg-selected-color: var(--hbr-color-interact-bg, #E3EEFF);
  --cell-padding: var(--hbr-spacing-xs, 8px);
}
hbr-table[theme="magnetic"] hbr-table-header .header-rgRow:not(.group),
hbr-table[theme="magnetic"] hbr-table-header::part(row) {
  font-weight: 800;
  border-bottom: var(--hbr-border-width) solid var(--header-border-color);
  box-shadow: none;
  clip-path: none;
}
hbr-table[theme="magnetic"] hbr-table-header .rgHeaderCell,
hbr-table[theme="magnetic"] hbr-table-data .rgCell {
  padding: var(--cell-padding, 8px);
}
hbr-table[theme="magnetic"] hbr-table-data .rgCell {
  font-size: 14px;
  line-height: 20px;
  color: var(--hbr-color-neutral-text, #23282e);
}
hbr-table[theme="magnetic"] hbr-table-data .rgRow {
  line-height: 21px; /* 37px - 8px * 2 */
  box-shadow: none;
  border-bottom: 1px solid #cccccc;
}
hbr-table[theme="magnetic"] hbr-table-header .header-rgRow {
  height: var(--header-height);
}
hbr-table[theme="magnetic"] hbr-table-header .header-rgRow.group {
  height: var(--group-header-height, var(--header-height));
}
hbr-table[theme="magnetic"] hbr-table-header .rgHeaderCell .rv-filter {
  height: unset;
}
hbr-table[theme="magnetic"] hbr-table-header .rgHeaderCell .filter-wrapper {
  display: flex;
}
hbr-table[theme="magnetic"] hbr-table-header .rgHeaderCell .header-content {
  color: var(--hbr-color-neutral-text, #23282e);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  display: flex;
  align-items: center;
}
hbr-table[theme="magnetic"] hbr-table-data .rgRow.groupingRow .group-expand {
  max-height: unset;
}
hbr-icon[name="hbr-empty-state"] {
  --path-color-2: #a6c4f5;
  --path-color-1: #a6c4f5;
  --path-color-0: #a6c4f5;
  --path-color-3: #5b92f0;
}

/********************
** Textarea
********************/

hbr-textarea[size="large"]::part(textarea) {
  padding: 7px 32px 7px 16px;
  line-height: 22px;
}

hbr-textarea[size="large"]::part(base) {
  font-size: var(--hbr-font-size-md, 16px);
}

hbr-textarea[size="medium"]::part(textarea) {
  padding: 7px 28px 7px 12px;
  line-height: 20px;
}

hbr-textarea[size="medium"]::part(base) {
  font-size: var(--hbr-font-size-sm, 14px);
}

hbr-textarea[size="small"]::part(textarea) {
  padding: 7px 24px 7px 8px;
  line-height: 18px;
}

hbr-textarea[size="small"]::part(base) {
  font-size: var(--hbr-font-size-xs, 12px);
}

/********************
** Breadcrumb
********************/

hbr-breadcrumb hbr-breadcrumb-item:last-child::part(separator) {
  display: none;
}
hbr-breadcrumb-item::part(base) {
  font-weight: var(--hbr-font-weight-semibold, 600);
  font-size: var(--hbr-font-size-sm, 14px);
  line-height: 20px;
}

hbr-breadcrumb-item:not([disabled])::part(clickable):hover {
  color: var(--hbr-color-interact, #326cd1);
  text-decoration: underline;
}

hbr-breadcrumb-item[disabled]::part(base) {
  cursor: default;
}

hbr-breadcrumb-item[disabled]::part(base):hover {
  color: inherit;
  text-decoration: none;
}

hbr-breadcrumb-item::part(separator) {
  font-size: var(--hbr-font-size-xs, 12px);
  color: var(--hbr-color-neutral-active, #889099);
}

hbr-breadcrumb-item {
  --label-color: var(--hbr-color-neutral-text-weak, #6f7680);
  --label-hover-color: var(--hbr-color-interact, #326cd1);
  --label-hover-text-decoration: "underline";
}
hbr-breadcrumb-item:not([disabled])::part(prefix):hover {
  cursor: pointer;
}

hbr-breadcrumb-item[disabled]::part(label) {
  cursor: default;
}

hbr-breadcrumb-item[disabled]::part(label):hover {
  color: inherit;
  text-decoration: none;
}

hbr-breadcrumb-item hbr-icon[name="arrow-left"] {
  font-size: var(--hbr-font-size-md);
}

hbr-breadcrumb-item hbr-icon[name="arrow-left"] {
  vertical-align: middle;
}

/********************
** Collapse
********************/

hbr-accordion[variant="contained"]:last-child::part(base) {
  --border-top: 0px;
  --border-bottom-right-radius: var(--border-radius);
  --border-bottom-left-radius: var(--border-radius);
}

hbr-accordion[variant="contained"]::part(base) {
  --border-top-left-radius: 0;
  --border-top-right-radius: 0;
  --border-bottom-right-radius: 0;
  --border-bottom-left-radius: 0;
}

hbr-accordion[variant="contained"]:first-child::part(base) {
  --border-bottom: 0;
  --border-top-left-radius: var(--border-radius);
  --border-top-right-radius: var(--border-radius);
}

hbr-accordion[variant="contained"] {
  --header-border-bottom: 0px solid transparent;
}

hbr-accordion[variant="borderless"]:last-child::part(base) {
  --border-top: 0;
}

hbr-accordion[variant="borderless"]::part(base) {
  --border-right: 0;
  --border-left: 0;
  --border-top-left-radius: 0;
  --border-top-right-radius: 0;
  --border-bottom-right-radius: 0;
  --border-bottom-left-radius: 0;
}

hbr-accordion[variant="borderless"]:first-child::part(base) {
  --border-bottom: 0;
}

hbr-accordion[variant="borderless"] {
  --header-border-bottom: 0px solid transparent;
}

hbr-accordion[variant="borderless"]:not(:first-child)::part(base),
hbr-accordion[variant="borderless"]:not(:first-child):not(:last-child)::part(base),
hbr-accordion[variant="contained"]:not(:first-child)::part(base),
hbr-accordion[variant="contained"]:not(:first-child):not(:last-child)::part(base) {
  --border-top: none;
}

hbr-accordion[variant="borderless"]:first-child::part(base),
hbr-accordion[variant="contained"]:first-child::part(base) {
  --border-bottom: var(--hbr-border-width, 2px) solid var(--hbr-color-neutral-border);
}

hbr-accordion {
  --icon-rotation: rotate(180deg);
}

hbr-accordion[size="medium"]::part(header),
hbr-accordion[size="large"]::part(header) {
  gap: var(--hbr-spacing-md);
}
hbr-accordion[size="small"]::part(header) {
  gap: var(--hbr-spacing-sm);
}
hbr-accordion[size="large"][variant="borderless"]::part(content),
hbr-accordion[size="large"][variant="contained"]::part(content) {
  padding-top: var(--hbr-spacing-xs);
}
hbr-accordion[size="small"][variant="borderless"]::part(content),
hbr-accordion[size="medium"][variant="borderless"]::part(content),
hbr-accordion[size="small"][variant="contained"]::part(content),
hbr-accordion[size="medium"][variant="contained"]::part(content) {
  padding-top: var(--hbr-spacing-2xs);
}

hbr-accordion[variant="card"] {
  /* TODO: Most if not all card variant styles will be moved here */
  --border-radius: var(--hbr-border-radius-xl, 12px);
  --outline: 0;
  --label-font-family: var(--hbr-font-heading);
}

/********************
** Badge
********************/
hbr-badge:not([sentiment]):not([dot])::part(base) {
  font-weight: var(--hbr-font-weight-semibold, 600);
}

hbr-badge[size="small"]:not([dot])::part(base) {
  line-height: 18px;
}

hbr-badge[size="medium"]:not([dot])::part(base),
hbr-badge[size="large"]:not([dot])::part(base) {
  font-size: var(--hbr-font-size-sm, 14px);
  line-height: 20px;
}

hbr-badge[pill][size="small"]:not([dot])::part(base) {
  padding: 1px 8px;
  height: 20px;
}
hbr-badge[pill][size="medium"]:not([dot])::part(base) {
  padding: 3px 10px;
  height: 26px;
}
hbr-badge[pill][size="large"]:not([dot])::part(base) {
  padding: 5px 12px;
  height: 30px;
}

/********************
** Banner
********************/
hbr-banner::part(base) {
  border-top: none;
  border-bottom: none;
  border-right: none;
  line-height: 20px;
  letter-spacing: var(--hbr-font-letter-spacing-dense);
}

hbr-banner::part(base outline) {
  box-shadow: var(--hbr-shadow-sm, 0px 3px 8px rgba(0, 0, 0, 0.08));
}

hbr-banner::part(base fill) {
  /** form element inline banner */
  box-shadow: none;
  --close-btn-padding-inline: var(--hbr-spacing-md) var(--hbr-spacing-md) var(--hbr-spacing-xs);
}

hbr-banner::part(message) {
  max-width: 720px;
  padding-top: var(--hbr-spacing-3xs);
}

hbr-banner[sentiment="info"]:not([variant="fill"])::part(base) {
  border-left-color: var(--hbr-color-info);
}
hbr-banner[sentiment="progress"]::part(icon) {
  font-size: 19px;
}

hbr-banner hbr-button[href][size="medium"]::part(base) {
  line-height: 16px;
}

hbr-banner[variant="outline"]::part(close-button) {
  padding-block: var(--hbr-spacing-3xs);
}

/********************
** Toast
********************/
.hbr-toast-stack {
  padding: var(--hbr-spacing-lg);
}
.hbr-toast-stack hbr-banner {
  --state-icon-margin-left-toast: 22px;
  --close-btn-padding: var(--hbr-spacing-md) 20px;
  --close-btn-padding-toast: var(--hbr-spacing-md) 20px;
}
.hbr-toast-stack hbr-banner::part(icon) {
  margin-left: 0;
}

/********************
** Card
********************/
hbr-card {
  --min-width: 208px;
}

hbr-card::part(header) {
  line-height: 24px;
}

hbr-card::part(base) {
  border-radius: var(--hbr-border-radius-lg);
}

/********************
** progress bar/ring
********************/
hbr-progress-bar {
  --suffix-width: 30px;
}
hbr-progress-ring::part(label) {
  color: var(--hbr-color-neutral, #464c54);
}
hbr-progress-bar,
hbr-progress-ring {
  --percentage-color: var(--hbr-color-info, #5b92f0);
  --track-color: var(--hbr-color-neutral-bg-weak, #e1e4e8);
}
hbr-progress-ring hbr-icon[name="hbr-error-filled"],
hbr-progress-bar::part(error-icon) {
  --path-color-1: var(--hbr-color-neutral-text-in);
  --path-color-2: var(--hbr-color-neutral-text-in);
}
hbr-progress-ring hbr-icon[name="hbr-success-filled"],
hbr-progress-bar::part(success-icon) {
  --path-color-1: var(--hbr-color-neutral-text-in);
}

/********************
** Tag
********************/
hbr-tag[variant="label"],
hbr-tag[variant="selectable"],
hbr-chat::part(header-label) {
  --bg-color: var(--hbr-color-neutral-border-weak);
  --border-color: var(--hbr-color-neutral-border-weak);
  --text-color: var(--hbr-color-neutral-text);
  --font-weight: var(--hbr-font-weight-semibold);
}

hbr-tag[removable][variant="label"]::part(base):hover {
  border-color: var(--hbr-color-neutral-bg-hover, #d0d4d9);
  background-color: var(--hbr-color-neutral-bg-hover, #d0d4d9);
}
hbr-tag[variant="selectable"][sentiment="danger"]::part(base):active {
  color: var(--hbr-color-danger-text-in);
}

hbr-tag[removable][size="small"]::part(remove-button) {
  font-size: var(--hbr-font-size-xs);
}
hbr-tag[size="small"]::part(base base-suffix) {
  padding-right: 0;
}
hbr-tag[removable][size="medium"]::part(remove-button) {
  font-size: var(--hbr-font-size-sm);
}
hbr-tag[size="medium"]::part(base base-suffix) {
  padding-right: 0;
}

hbr-tag[size="small"]::part(base),
hbr-tag[size="small"]::part(add) {
  /* line-height: 18px;  need padding top and bottom if we want to use this */
  line-height: initial;
  height: 20px;
}
hbr-tag[size="medium"]::part(base),
hbr-tag[variant="add"]::part(add),
hbr-tag[size="medium"]::part(add) {
  /* line-height: 18px;  need padding top and bottom if we want to use this */
  line-height: initial;
  height: 26px;
}
hbr-tag[size="large"]::part(base) {
  padding: 0 10px;
}
hbr-tag[size="small"]::part(base),
hbr-tag[size="medium"]::part(base) {
  padding: 0 6px;
}
hbr-tag[size="medium"][overflow]::part(base) {
  padding: 0 10px;
}
hbr-tag[size="large"][variant="add"]::part(base),
hbr-tag[size="medium"][variant="add"]::part(base) {
  padding: 0 12px;
}

hbr-tag[size="medium"]::part(base base-prefix) {
  padding: 0 6px;
}

hbr-tag[size="large"]::part(base),
hbr-tag[size="large"]::part(add) {
  line-height: initial;
  height: 28px;
  /* line-height: 20px; need padding top and bottom if we want to use this */
}
hbr-tag[removable][size="large"]::part(remove-button) {
  font-size: var(--hbr-font-size-md);
}
hbr-tag[size="large"]::part(base base-suffix) {
  padding-right: 0;
}

hbr-tag[size="small"] hbr-icon[slot="prefix"] {
  font-size: 12px;
}
hbr-tag[size="medium"] hbr-icon[slot="prefix"] {
  font-size: 14px;
}
hbr-tag[size="large"] hbr-icon[slot="prefix"] {
  font-size: 16px;
}

hbr-tag[size][status]::part(base base-prefix) {
  padding-left: 2px;
}
hbr-tag[status][size="small"] hbr-icon[slot="prefix"] {
  font-size: 16px;
}
hbr-tag[status][size="medium"] hbr-icon[slot="prefix"] {
  font-size: 18px;
}
hbr-tag[status][size="large"] hbr-icon[slot="prefix"] {
  font-size: 20px;
}

/********************
** Tab Group
********************/
hbr-tab-group {
  --border-color: var(--hbr-color-neutral-border-weak);
}

hbr-tab-group::part(nav) {
  padding: 0;
}
hbr-tab-group[primary] hbr-tab::part(base),
hbr-tab-group[primary] hbr-tab::part(menu) {
  --active-color: var(--hbr-color-neutral-text);
  --hover-color: var(--hbr-color-neutral-text);
  --indicator-hover-color: var(--hbr-color-neutral-border-weak);
}

hbr-tab-group[primary] hbr-tab hbr-button::part(base) {
  --label-color: var(--color);
  --label-color-hover: var(--hover-color);
  --label-color-active: var(--hover-color);
  font-weight: var(--font-weight);
  font-size: 16px;
}

hbr-tab-group[primary] hbr-tab[active] hbr-button::part(base) {
  --label-color: var(--hover-color);
  font-weight: var(--font-weight-active);
}

/********************
** Tab Horizontal
********************/
hbr-tab {
  --line-height: 22px;
}
hbr-tab-group[size="small"] hbr-tab {
  --line-height: 20px;
  --margin-right: 24px;
}

/********************
** Tab
********************/
hbr-tab[vertical] {
  --line-height: 20px;
}
hbr-tab-vertical:not([navigation]) hbr-tab[vertical],
hbr-tab-vertical:not([navigation]) hbr-tab-fold hbr-tab[vertical] {
  --padding: var(--hbr-spacing-xs) calc(calc(var(--hbr-spacing-xs) + var(--indicator-size)) + 1px) var(--hbr-spacing-xs)
    var(--hbr-spacing-lg);
  margin: var(--hbr-spacing-2xs) 0;
  line-height: 20px;
}
hbr-tab-vertical:not([navigation]) hbr-tab-fold hbr-tab[vertical]::part(base) {
  padding-left: calc(var(--hbr-spacing-2xl));
}
hbr-tab-vertical:not([navigation]) .hbr-tab-header {
  padding: var(--hbr-spacing-sm) var(--hbr-spacing-lg);
}

hbr-tab-vertical:not([navigation]) hbr-tab::part(base),
hbr-tab-group hbr-tab::part(base),
hbr-tab-fold::part(label) {
  font-weight: var(--font-weight);
}

hbr-tab-vertical:not([navigation]) hbr-tab[disabled]::part(base),
hbr-tab-fold[disabled]::part(label),
hbr-tab-fold[disabled]:hover::part(open-button),
hbr-tab-group hbr-tab[disabled]::part(base),
hbr-tab-vertical:not([navigation]) hbr-tab[disabled]::part(base) {
  color: var(--hbr-color-neutral-text-disabled, #c1c6cc);
}
hbr-tab-fold[disabled]:hover::part(label) {
  cursor: not-allowed;
}

hbr-tab-vertical:not([navigation]) hbr-tab[active]::part(base),
hbr-tab-group hbr-tab[active]::part(base),
hbr-tab-vertical:not([navigation]) hbr-tab-fold hbr-tab[active]::part(base),
hbr-tab-fold[active]::part(label) {
  font-weight: var(--font-weight-active);
}

/* tab vertical indicator */
hbr-tab-vertical:not([navigation]) hbr-tab[vertical]:hover:not([disabled]):not([active])::part(indicator),
hbr-tab-vertical:not([navigation]) hbr-tab-fold hbr-tab[vertical]:hover:not([disabled]):not([active])::part(indicator) {
  display: flex;
  background: var(--indicator-hover-color, #bad6ff);
}

hbr-tab-vertical:not([navigation]) hbr-tab[vertical][active]::part(indicator),
hbr-tab-vertical:not([navigation]) hbr-tab-fold hbr-tab[vertical][active]::part(indicator),
hbr-tab-fold[active]::part(indicator) {
  background: var(--indicator-color, #2774d9);
}

hbr-tab-vertical:not([navigation]) hbr-tab[vertical][active][disabled]::part(indicator),
hbr-tab-vertical:not([navigation]) hbr-tab-fold hbr-tab[vertical][active][disabled]::part(indicator),
hbr-tab-fold[active][disabled]::part(indicator) {
  background: var(--indicator-disabled-color);
}

hbr-tab-group hbr-tab[nested] hbr-dropdown::part(trigger) {
  font-weight: 600;
  --trigger-color: var(--hbr-color-neutral-text);
}
hbr-tab-group hbr-tab[nested] hbr-dropdown[sentiment="interact"]::part(trigger) {
  --trigger-selected-color: var(--hbr-color-interact);
}
hbr-tab-group hbr-tab[nested] hbr-dropdown::part(trigger) {
  padding: var(--hbr-spacing-xs) 0 calc(var(--hbr-spacing-xs) + var(--indicator-size)) 0;
}
hbr-tab-group hbr-tab[nested] hbr-dropdown::part(trigger) {
  --trigger-background-hover-color: transparent;
}
hbr-tab-group[size="small"] hbr-tab[nested] hbr-dropdown::part(trigger) {
  font-size: var(--hbr-font-size-sm);
}
hbr-tab-group[size="medium"] hbr-tab[nested] hbr-dropdown::part(trigger) {
  font-size: var(--hbr-font-size-md);
}
hbr-tab-group[size="small"] hbr-tab,
hbr-tab-group[size="small"] hbr-tab[nested] hbr-dropdown::part(trigger) {
  line-height: 20px;
}
hbr-tab-group[size="medium"] hbr-tab,
hbr-tab-group[size="medium"] hbr-tab[nested] hbr-dropdown::part(trigger) {
  line-height: 22px;
}

hbr-tab-group[size="medium"] hbr-tab:not([vertical])::part(indicator) {
  border-radius: var(--hbr-border-width, 2px);
  height: var(--indicator-size);
}

hbr-tab-group hbr-tab:not([active]):not([disabled])::part(base),
hbr-tab-group hbr-tab[nested] hbr-dropdown[sentiment="interact"][value=""]::part(trigger),
hbr-tab-group hbr-tab[nested] hbr-dropdown[sentiment="interact"]:not([value])::part(trigger),
hbr-tab-vertical:not([navigation]) hbr-tab:not([active]):not([disabled])::part(base) {
  color: var(--hbr-color-neutral-text-weak, #656c75);
}

hbr-tab-group hbr-tab[nested]::part(base),
hbr-tab-group hbr-tab[nested] hbr-dropdown::part(trigger) {
  height: 100%;
}

hbr-tab-group hbr-tab:hover:not([active]):not([disabled])::part(base),
hbr-tab-group hbr-tab[nested]:hover hbr-dropdown[value=""]::part(trigger),
hbr-tab-group hbr-tab[nested]:hover hbr-dropdown:not([value])::part(trigger),
hbr-tab-vertical:not([navigation]) hbr-tab:hover:not([active]):not([disabled])::part(base) {
  color: var(--hover-color);
}

hbr-tab-vertical:not([navigation])::part(border) {
  background: transparent;
  width: 1px;
  box-shadow: -1px 0 0px 0px var(--hbr-color-neutral-border-weak, #e1e4e8);
}

hbr-tab {
  --color: var(--hbr-color-neutral-text-weak, #656c75);
}

hbr-tab {
  --prefix-margin-right: calc(var(--hbr-spacing-xs) - 2px);
  --suffix-margin-left: calc(var(--hbr-spacing-xs) - 2px);
}

hbr-tab-popover[nav],
hbr-tab[nav] {
  --prefix-margin-right: 0;
  --suffix-margin-left: 0;
}

hbr-tab > hbr-icon {
  color: var(--hbr-color-neutral-icon);
}

hbr-tab:hover > hbr-icon {
  color: var(--hbr-color-neutral-icon-weak-hover);
}

hbr-tab[active] > hbr-icon {
  color: var(--hbr-color-neutral-icon-weak-selected);
}

hbr-tab[disabled] > hbr-icon {
  color: var(--hbr-color-neutral-icon-disabled);
}

hbr-tab hbr-dropdown[slot="menu"] hbr-button[slot="trigger"]::part(label) {
  padding: 0 7px 0 1px;
}

hbr-tab hbr-dropdown[slot="menu"] hbr-button[slot="trigger"]::part(caret) {
  color: var(--hbr-color-neutral-icon);
}

hbr-tab hbr-dropdown[slot="menu"]:hover hbr-button[slot="trigger"]::part(caret) {
  color: var(--hbr-color-neutral-icon-weak-hover, #6f7680);
}
/********************
** hbr-pagination
********************/
hbr-pagination {
  --padding: 0;
}
hbr-pagination::part(page-number) {
  font-weight: var(--hbr-font-weight-semibold, 600);
  font-size: var(--hbr-font-size-sm, 14px);
}
hbr-pagination.active::part(base) {
  border-radius: var(--hbr-border-radius-md, 6px);
  border: var(--hbr-control-border-width) solid var(--hbr-color-interact-active, #4580e5);
}

hbr-pagination::part(size-description) {
  font-weight: var(--hbr-font-weight-normal, 400);
  font-size: var(--hbr-font-size-sm, 14px);
  line-height: 20px;

  display: flex;
  align-items: center;
  text-align: center;

  color: var(--hbr-color-neutral-text, #464c54);
  margin-right: var(--hbr-spacing-xs, 8px);
}

hbr-pagination::part(previous),
hbr-pagination::part(next) {
  color: var(--hbr-color-neutral-weak, #889099);
  font-size: 20px;
}
hbr-pagination::part(previous-disabled),
hbr-pagination::part(next-disabled) {
  color: var(--hbr-color-neutral-weak, #889099);
}

hbr-pagination::part(positioner) {
  --menu-panel-border: var(--hbr-spacing-3xs) solid var(--hbr-color-neutral-disabled, #c1c6cc);
  --menu-panel-box-shadow: var(--hbr-shadow-xs);
  --menu-panel-border-radius: var(--hbr-control-border-radius, 6px);
  --menu-panel-padding: var(--hbr-spacing-2xs) 0px;
}

/********************
** Date Picker
********************/
hbr-date-picker::part(month-container),
hbr-date-picker::part(month-label),
hbr-date-picker::part(year-label) {
  color: var(--hbr-color-neutral-text);
}
hbr-date-picker::part(month-container) {
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--hbr-spacing-xs, 0.8rem);
  font-size: var(--hbr-control-font-size-label-md);
  padding: var(--hbr-spacing-2xs);
}

hbr-date-picker[size="large"] hbr-input hbr-icon-button::part(base) {
  font-size: 20px;
}

hbr-date-picker hbr-input::part(base) {
  margin-left: 16px;
  margin-right: 16px;
}
hbr-date-picker[size="large"] hbr-input::part(input) {
  line-height: 22px;
}
hbr-date-picker hbr-input::part(input) {
  line-height: 20px;
}
hbr-date-picker[size="small"] hbr-input::part(input) {
  line-height: 18px;
}
hbr-date-picker:not([variant="outline"])[size="large"] hbr-input::part(input) {
  margin-left: 10px;
  margin-right: 8px;
}
hbr-date-picker:not([variant="outline"])[size="small"] hbr-input::part(input) {
  margin-left: 6px;
  margin-right: 4px;
}

hbr-date-picker::part(calendar-title) {
  padding: 10px 10px 0;
}

hbr-date-picker::part(dropdown-panel) {
  box-shadow: var(--hbr-shadow-sm, 0px 2px 5px rgba(0, 0, 0, 0.05));
  border-color: var(--hbr-color-neutral-border, #889099);
}

/********************
** Switch
********************/
hbr-switch {
  --control-color: var(--hbr-color-neutral-text-weak, #656c75);
  --control-hover-color: var(--hbr-color-neutral-text, #23282e);
  --control-checked-color: var(--hbr-color-interact-selected, #4580e5);
  --control-checked-hover-color: var(--hbr-color-interact-hover, #235ec4);
  --control-checked-focus-color: var(--hbr-color-blue-40, #235ec4);
  --control-disabled-color: var(--hbr-color-neutral-medium-disabled, #d0d4d9);
  --control-checked-disabled-color: var(--hbr-color-interact-bg-weak, #ccdefc);
  --label-color: var(--hbr-color-neutral-text, #23282e);
  --label-checked-color: var(--hbr-color-neutral-text, #23282e);
  --label-disabled-color: var(--hbr-color-neutral-disabled, #c1c6cc);
  --line-height: 20px;
}
hbr-switch[size="small"]::part(base) {
  --thumb-size: 10px;
  --control-height: 16px;
  --control-width: 32px;
  --control-unchecked-padding-left: 3px;
  --control-checked-padding-left: calc(
    var(--control-width) - var(--thumb-size) - var(--control-unchecked-padding-left)
  );
  --line-height: 18px;
}
hbr-switch[size="small"]::part(label) {
  font-size: var(--hbr-font-size-xs);
}

hbr-switch[size="medium"]::part(base) {
  --thumb-size: 14px;
  --control-height: 20px;
  --control-width: 40px;
  --control-unchecked-padding-left: 3px;
  --control-checked-padding-left: calc(
    var(--control-width) - var(--thumb-size) - var(--control-unchecked-padding-left)
  );
}
hbr-switch[size="medium"]::part(label) {
  font-size: var(--hbr-font-size-sm);
}

hbr-switch[size="large"]::part(base) {
  --thumb-size: 18px;
  --control-height: 24px;
  --control-width: 48px;
  --control-unchecked-padding-left: 3px;
  --control-checked-padding-left: calc(
    var(--control-width) - var(--thumb-size) - var(--control-unchecked-padding-left)
  );
}
hbr-switch[size="large"]::part(label) {
  font-size: var(--hbr-font-size-md);
}

hbr-shell-header hbr-input::part(form-control) {
  --hbr-control-height-md: 36px;
}

/********************
** time-picker
********************/
hbr-time-picker {
  --input-width: 125px;
  --column-menu-width: 60px;
}
hbr-time-picker::part(input-error-icon) {
  display: none;
}
hbr-time-picker::part(column-header) {
  color: var(--hbr-color-neutral-text-weak, #6f7680);
  padding: var(--hbr-spacing-xs, 8px) var(--hbr-spacing-sm, 12px) var(--hbr-spacing-2xs, 4px);
  font-weight: var(--hbr-font-weight-semibold, 600);
  font-size: var(--hbr-font-size-xs, 12px);
  justify-content: flex-start;
}
hbr-time-picker::part(column-menu-item) {
  --checked-background-color: var(--hbr-color-interact-bg-weak, #e3eeff);
  --padding: 0px;
}
hbr-time-picker::part(column-menu-item-text) {
  color: var(--hbr-color-neutral-text, #464c54);
  justify-content: flex-start;
  padding: 8px 12px;
  width: 60px;
}
hbr-time-picker::part(now-button) {
  color: #1d69cc;
}
hbr-time-picker::part(ok-button) {
  --bg-color: #1d69cc;
}
hbr-time-picker::part(suffix-clock) {
  font-size: 16px;
}
hbr-time-picker:not([disabled])::part(suffix-clock) {
  color: #7e868f;
}
hbr-time-picker[disabled]::part(suffix-clock) {
  color: #d0d4d9;
}
hbr-time-picker::part(panel-footer) {
  --hbr-font-weight-normal: var(--hbr-font-weight-bold);
}

/********************
** View Switcher
********************/
hbr-view-switcher > hbr-radio-button::part(button) {
  --bg-color-checked: var(--hbr-color-interact-bg);
  --border-color-checked: var(--hbr-color-interact-border-medium);
}

hbr-view-switcher > hbr-radio-button[disabled][checked]::part(button) {
  /* TODO need a bg-disabled color token */
  background: var(--hbr-color-neutral-95);
}

hbr-view-switcher > hbr-radio-button::part(label) {
  --label-color: var(--hbr-color-neutral-text-weak);
  padding: 0 var(--hbr-spacing-sm);
}

hbr-view-switcher[size="small"] > hbr-radio-button::part(label) {
  padding: 0 var(--hbr-spacing-xs);
  font-weight: var(--hbr-font-weight-semibold);
  font-size: var(--hbr-font-size-xs);
  line-height: 18px;
}

hbr-view-switcher[size="small"] > hbr-radio-button::part(button) {
  height: 28px;
}

hbr-view-switcher[variant="icon"] > hbr-radio-button::part(label) {
  font-size: 20px;
  padding: 0 5px;
}

hbr-view-switcher[variant="icon"][size="small"] > hbr-radio-button::part(label) {
  font-size: 16px;
  padding: 0 4px;
}

hbr-view-switcher > hbr-radio-button:not([checked]):not([disabled]):hover > hbr-icon {
  /* TODO need a icon color token */
  color: var(--hbr-color-neutral-35);
}

/********************
** Shell-Header
********************/
/* Header Sentiment */
hbr-shell-header {
  --hbr-color-header: "transparent";
  --hbr-color-header-text-in: var(--hbr-color-neutral-98);
  --hbr-color-header-hover: var(--hbr-color-neutral-25);
  --hbr-color-header-active: var(--hbr-color-neutral-35);
  color: var(--hbr-color-header-text-in, #f7f7f7);
}

hbr-shell-header [slot="search"] {
  --color: var(--hbr-color-header-text-in, #f7f7f7);
  --box-bg-color: var(--hbr-color-neutral-bg-in);
  --border-width: var(--hbr-control-border-width);
  --border-color: var(--hbr-control-color-border);

  --box-bg-color-hover: var(--hbr-color-neutral-bg-in);
  --border-color-hover: var(--hbr-color-interact-border-weak);

  --border-color-focus: var(--hbr-color-interact-border-weak);
  --focus-ring: 0 0 0 2px var(--hbr-color-border-medium, #4680e5);

  --placeholder-color: #ffffff;

  margin: 0 6px 0px 12px;
  width: 260px;
}

hbr-shell-header hbr-input[slot="search"]::part(base) {
  height: 36px;
  border: none;
  border-radius: 8px;
}

hbr-shell-header hbr-input[data-focused="true"][slot="search"]::part(base) {
  border-radius: 8px;
  border: 2px solid var(--inverse-border-active, #cce1ff);
  background: var(--inverse-bg-base, #373c42);
  /* Focus Inverse */
  box-shadow: 0px 0px 0px 2px #1d69cc;
  outline: none;
}

hbr-shell-header hbr-input[size="medium"]::part(clear-button) {
  font-size: 24px;
  color: var(--hbr-color-neutral-vivid-icon, #f7f7f7);
}

hbr-shell-header [slot="logo-name"] > hbr-icon {
  font-size: 37px;
  padding-left: 6px;
  height: 100%;
  --path-color-contrast: var(--hbr-color-neutral-vivid-icon, #f7f7f7);
}

hbr-shell-header [slot="logo-name"] > hbr-icon::part(base) {
  display: contents;
}

hbr-shell-header [slot="logo-name"] > div {
  margin: 0;
  font-weight: var(--hbr-font-weight-normal, 400);
  font-size: 19px;
  line-height: 18px;
  margin-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}

hbr-shell-header [slot="search"] [slot="prefix"] {
  font-size: 24px;
}

hbr-shell-header [slot="search"][size="medium"]::part(input) {
  margin: 0px 8px;
  color: var(--hbr-color-neutral-vivid-text, #f7f7f7);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

hbr-shell-header svg {
  vertical-align: middle;
}

hbr-shell-header [slot="utilities"] > * {
  margin: 0 6px;
}

hbr-shell-header hbr-button[sentiment="header"]::part(base) {
  --label-color: var(--hbr-color-neutral-vivid-text);
  --label-color-hover: var(--hbr-color-neutral-vivid-text);
  --label-color-active: var(--hbr-color-neutral-vivid-text);
  padding: 0 6px;
  height: 36px;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

hbr-shell-header hbr-button[sentiment="header"]::part(base):focus-visible {
  outline: var(--hbr-color-interact-border-medium) solid 2px;
  box-shadow: 0 0 0 2px var(--hbr-color-interact-bg-medium);
  outline-offset: 2px;
  border-radius: var(--hbr-border-radius-lg, 8px);
}

hbr-shell-header hbr-button[sentiment="header"]::part(base):active {
  background-color: #464c54;
}

hbr-shell-header hbr-input::part(password-toggle-button),
hbr-shell-header hbr-input::part(clear-button) {
  color: var(--hbr-color-neutral-vivid-text);
}

hbr-shell-header hbr-dropdown[slot="user-profile"] hbr-button::part(label) {
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

hbr-shell-header hbr-menu-divider[sentiment="header"] {
  height: 24px;
  margin: 0 6px;
  color: #f7f7f7;
}

hbr-shell-header hbr-dropdown[slot="application-launcher"] hbr-button {
  margin-left: 12px;
}

/********************
** Copy Clipboard
********************/

hbr-copyclipboard::part(main-container) {
  background-color: var(--hbr-color-neutral-bg-medium, #f7f7f7);
  border-radius: 6px;
  padding-left: 12px;
  padding-right: 12px;
  height: 44px;
}

hbr-copyclipboard::part(value) {
  font-family: Inter;
  font-weight: var(--hbr-font-weight-normal, 400);
  font-size: 14px;
  line-height: 20px;
  margin-right: 16px;
}

hbr-copyclipboard.small-size::part(value) {
  font-family: Inter;
  font-weight: var(--hbr-font-weight-normal, 400);
  font-size: 12px;
  line-height: 18px;
  margin-right: 12px;
}

hbr-copyclipboard::part(format-button) {
  color: var(--hbr-color-interact, #1d69cc);
}

hbr-copyclipboard::part(copy-button):hover {
  background-color: transparent;
  border-color: transparent;
}

hbr-copyclipboard.small-size::part(main-container) {
  padding-left: 8px;
  padding-right: 8px;
  height: 34px;
}

hbr-copyclipboard.small-size::part(copy-button) {
  font-size: 14px;
}

hbr-copyclipboard.small-size {
  --hbr-copyclipboard-button-text-font-size: 12px;
  --hbr-copyclipboard-button-text-font-height: 18px;
}

hbr-copyclipboard.small-size::part(icon-button) {
  font-size: 14px;
}

/********************
** Tooltip
********************/
hbr-breadcrumb hbr-tooltip::part(body) {
  white-space: initial;
}

/********************
** uploader
********************/
hbr-uploader {
  --width: 400px;
  --file-container-width: 400px;
}
hbr-uploader[size="small"] {
  --width: 320px;
  --file-container-width: 320px;
}

hbr-uploader::part(container-icon) {
  width: 20px;
  height: 20px;
  color: var(--hbr-color-neutral, #656c75);
}
hbr-uploader[size="small"]::part(container-icon) {
  width: 16px;
  height: 16px;
}

hbr-uploader::part(label) {
  line-height: 20px;
}

hbr-uploader[size="small"]::part(label),
hbr-uploader::part(supplemental-text) {
  line-height: 18px;
}

/********************
** file item
********************/
hbr-file-item[state="error"]::part(thumbnail) {
  margin-right: 12px;
}
hbr-file-item[state="error"]::part(file-name) {
  gap: 4px;
}

/********************
Deprecated primitive colors
Based on the 12week / one quarter deprecation policy, the following primitive colors are deprecated and will be removed in the next major release.
Primitive colors should never be used by applications. They are intended for use by components internally.
Remove support and will be a breaking change in v2.x release July 2024 
********************/
:root {
  /* Amber renamed to yellow*/
  --hbr-color-amber-95: #faefb9;
  --hbr-color-amber-90: #f5e08e;
  --hbr-color-amber-85: #f2d268;
  --hbr-color-amber-80: #f2c13a;
  --hbr-color-amber-70: #e0a419;
  --hbr-color-amber-65: #d6900d;
  --hbr-color-amber-60: #cc8604;
  --hbr-color-amber-55: #bd7202;
  --hbr-color-amber-50: #b05f04;
  --hbr-color-amber-45: #a65503;
  --hbr-color-amber-40: #944b03;
  --hbr-color-amber-35: #804103;

  /* Cyan renamed to teal*/
  --hbr-color-cyan-95: #d5f5f5;
  --hbr-color-cyan-90: #a9ebeb;
  --hbr-color-cyan-85: #84e3e3;
  --hbr-color-cyan-80: #4ad9d9;
  --hbr-color-cyan-70: #17c2c2;
  --hbr-color-cyan-65: #0bb2b8;
  --hbr-color-cyan-60: #04a4b0;
  --hbr-color-cyan-55: #028e99;
  --hbr-color-cyan-50: #01818c;
  --hbr-color-cyan-45: #017580;
  --hbr-color-cyan-40: #006773;
  --hbr-color-cyan-35: #005c66;

  /* Sky renamed to lightblue*/
  --hbr-color-sky-95: #d9f2ff;
  --hbr-color-sky-90: #b8e7ff;
  --hbr-color-sky-85: #9fddfc;
  --hbr-color-sky-80: #79d1fc;
  --hbr-color-sky-70: #3fb6f2;
  --hbr-color-sky-65: #24a7ed;
  --hbr-color-sky-60: #139beb;
  --hbr-color-sky-55: #0d8bd4;
  --hbr-color-sky-50: #087abd;
  --hbr-color-sky-45: #0570ad;
  --hbr-color-sky-40: #03639c;
  --hbr-color-sky-35: #015788;

  /* Indigo renamed to lavender*/
  --hbr-color-indigo-95: #ebedff;
  --hbr-color-indigo-90: #d9ddff;
  --hbr-color-indigo-85: #ccd1ff;
  --hbr-color-indigo-80: #bac1ff;
  --hbr-color-indigo-70: #9ca6ff;
  --hbr-color-indigo-65: #8a95ff;
  --hbr-color-indigo-60: #7d8aff;
  --hbr-color-indigo-55: #6977f0;
  --hbr-color-indigo-50: #5a68e5;
  --hbr-color-indigo-45: #505ed9;
  --hbr-color-indigo-40: #4653c7;
  --hbr-color-indigo-35: #3b47b2;

  /* lavendar renamed to slate */
  --hbr-color-lavendar-95: #ebedff;
  --hbr-color-lavendar-90: #d9defa;
  --hbr-color-lavendar-85: #ced3f2;
  --hbr-color-lavendar-80: #c1c6e8;
  --hbr-color-lavendar-70: #a3aad6;
  --hbr-color-lavendar-65: #959ccc;
  --hbr-color-lavendar-60: #868ec2;
  --hbr-color-lavendar-55: #767eb2;
  --hbr-color-lavendar-50: #6871a3;
  --hbr-color-lavendar-45: #5d6596;
  --hbr-color-lavendar-40: #545c8a;
  --hbr-color-lavendar-35: #484f7a;

  /** purple renamed to violet, but still in the system as a copy */

  /** Fuchsia is deleted */
  --hbr-color-fuchsia-95: #fee8ff;
  --hbr-color-fuchsia-90: #f7d4fa;
  --hbr-color-fuchsia-85: #f2c6f5;
  --hbr-color-fuchsia-80: #ebb4f0;
  --hbr-color-fuchsia-70: #df90e4;
  --hbr-color-fuchsia-65: #d37ed7;
  --hbr-color-fuchsia-60: #c671c9;
  --hbr-color-fuchsia-55: #b665ba;
  --hbr-color-fuchsia-50: #a557a8;
  --hbr-color-fuchsia-45: #994e9c;
  --hbr-color-fuchsia-40: #874389;
  --hbr-color-fuchsia-35: #773a78;

  /** pink was renamed to magenta */
  /** rose was renamed to pink */
  --hbr-color-rose-95: #ffe8ef;
  --hbr-color-rose-90: #ffd4e0;
  --hbr-color-rose-85: #ffc4d5;
  --hbr-color-rose-80: #fcb3c8;
  --hbr-color-rose-70: #ff87a9;
  --hbr-color-rose-65: #f57398;
  --hbr-color-rose-60: #f2638c;
  --hbr-color-rose-55: #e3447c;
  --hbr-color-rose-50: #cf3a7a;
  --hbr-color-rose-45: #c2306f;
  --hbr-color-rose-40: #b02863;
  --hbr-color-rose-35: #991d53;
}