:where(button) {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: start;
  outline: none;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}

:where(button):focus {
  outline: 0;
}

:where(button):focus-visible {
  outline: inherit;
}

clg-profile-avatar {
  display: inline-block;
  height: var(
    --clg-avatar-host-size,
    var(--clg-dimension-app-avatar-base-size, 48px)
  );
  width: var(
    --clg-avatar-host-size,
    var(--clg-dimension-app-avatar-base-size, 48px)
  );
}

clg-profile-avatar[size="smallest"] {
  --clg-avatar-host-size: var(--clg-dimension-app-avatar-smallest-size, 24px);
}

clg-profile-avatar[size="smaller"] {
  --clg-avatar-host-size: var(--clg-dimension-app-avatar-smaller-size, 32px);
}

clg-profile-avatar[size="larger"] {
  --clg-avatar-host-size: var(--clg-dimension-app-avatar-larger-size, 64px);
}

clg-profile-avatar[size="largest"] {
  --clg-avatar-host-size: var(--clg-dimension-app-avatar-largest-size, 96px);
}

clg-shop-avatar {
  --clg-shop-avatar-size: var(--clg-dimension-app-avatar-base-size, 48px);
  display: inline-flex;
  width: var(--clg-shop-avatar-size);
  height: var(--clg-shop-avatar-size);
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
}

clg-shop-avatar[size="smaller"] {
  --clg-shop-avatar-size: var(--clg-dimension-app-avatar-smaller-size, 32px);
}

clg-shop-avatar[size="larger"] {
  --clg-shop-avatar-size: var(--clg-dimension-app-avatar-larger-size, 64px);
}

clg-shop-avatar[size="largest"] {
  --clg-shop-avatar-size: var(--clg-dimension-app-avatar-largest-size, 96px);
}

clg-icon {
  height: var(--clg-icon-size, var(--clg-dimension-sem-icon-core-base, 24px));
  width: var(--clg-icon-size, var(--clg-dimension-sem-icon-core-base, 24px));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  aspect-ratio: 1/1;
}

clg-icon[size="smallest"] {
  --clg-icon-size: var(--clg-dimension-sem-icon-core-smallest, 12px);
}

clg-icon[size="smaller"] {
  --clg-icon-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

clg-icon[size="larger"] {
  --clg-icon-size: var(--clg-dimension-sem-icon-core-larger, 32px);
}

clg-icon[size="largest"] {
  --clg-icon-size: var(--clg-dimension-sem-icon-core-largest, 48px);
}

clg-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: var(--clg-icon-size, var(--clg-dimension-sem-icon-brand-base, 96px));
  width: var(--clg-icon-size, var(--clg-dimension-sem-icon-brand-base, 96px));
}

clg-brand-icon[size="smallest"] {
  --clg-icon-container-size: var(
    --clg-dimension-sem-icon-brand-container-smallest,
    96px
  );
  --clg-icon-size: var(--clg-dimension-sem-icon-brand-smallest, 60px);
}

clg-brand-icon[size="smaller"] {
  --clg-icon-container-size: var(
    --clg-dimension-sem-icon-brand-container-smaller,
    120px
  );
  --clg-icon-size: var(--clg-dimension-sem-icon-brand-smaller, 84px);
}

clg-brand-icon[size="larger"] {
  --clg-icon-container-size: var(
    --clg-dimension-sem-icon-brand-container-larger,
    168px
  );
  --clg-icon-size: var(--clg-dimension-sem-icon-brand-larger, 108px);
}

clg-brand-icon[size="largest"] {
  --clg-icon-container-size: var(
    --clg-dimension-sem-icon-brand-container-largest,
    192px
  );
  --clg-icon-size: var(--clg-dimension-sem-icon-brand-largest, 120px);
}

clg-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: var(--clg-dimension-sem-icon-core-base, 24px);
  width: auto;
}

clg-shape {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: var(
    --clg-shape-size,
    var(--clg-dimension-app-avatar-base-size, 48px)
  );
  width: var(--clg-shape-size, var(--clg-dimension-app-avatar-base-size, 48px));
}

clg-shape[size="larger"] {
  --clg-shape-size: var(--clg-dimension-app-avatar-larger-size, 64px);
}

clg-shape[size="largest"] {
  --clg-shape-size: var(--clg-dimension-app-avatar-largest-size, 96px);
}

clg-feature-illustration,
clg-spot-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}

clg-feature-illustration {
  height: var(
    --clg-illustration-size,
    var(--clg-dimension-app-feature-illustration-base-size, 184px)
  );
  width: var(
    --clg-illustration-size,
    var(--clg-dimension-app-feature-illustration-base-size, 184px)
  );
  padding: var(
    --clg-illustration-padding,
    var(--clg-dimension-pal-spacing-400, 24px)
  );
}

clg-feature-illustration[size="large"] {
  --clg-illustration-size: var(
    --clg-dimension-app-feature-illustration-large-size,
    240px
  );
}

clg-feature-illustration[not-padded] {
  padding: 0;
}

clg-spot-illustration {
  height: var(
    --clg-illustration-size,
    var(--clg-dimension-app-spot-illustration-base-size, 96px)
  );
  width: var(
    --clg-illustration-size,
    var(--clg-dimension-app-spot-illustration-base-size, 96px)
  );
}

clg-spot-illustration[size="smallest"] {
  --clg-illustration-size: var(
    --clg-dimension-app-spot-illustration-smallest-size,
    56px
  );
}

clg-spot-illustration[size="small"] {
  --clg-illustration-size: var(
    --clg-dimension-app-spot-illustration-small-size,
    80px
  );
}

clg-spot-illustration[size="large"] {
  --clg-illustration-size: var(
    --clg-dimension-app-spot-illustration-large-size,
    112px
  );
}

clg-spot-illustration[size="largest"] {
  --clg-illustration-size: var(
    --clg-dimension-app-spot-illustration-largest-size,
    120px
  );
}

clg-spot-illustration:not([fill-color]) {
  color: var(--clg-color-sem-text-primary, #312b36);
}

:where(clg-focusable-scroll-container) {
  display: block;
  --clg-focus-ring-offset: 0;
}

:host([pseudo-focus]) :where(clg-focusable-scroll-container),
:where(clg-focusable-scroll-container):focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible]) :where(clg-focusable-scroll-container),
:where(clg-focusable-scroll-container):focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus])
  :where(clg-focusable-scroll-container):not(:focus-visible),
:where(clg-focusable-scroll-container):focus:not(:focus-visible) {
  outline: none;
}

[data-clg-mode="dark"] {
  container-name: clg-dark-mode;
  container-type: inline-size;
}

.clg-trigger--underline {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-position: under;
  text-decoration-color: inherit;
  cursor: help;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

:root {
  --clg-global-styles-loaded: 1;
}

@keyframes hideBriefly {
  0%,
  100% {
    opacity: 0;
  }
}

:not(:defined):not([data-no-fouce]) {
  animation: step-end hideBriefly 2s;
}

:host(
  :is(
    clg-action-list-item,
    clg-navigational-list-item,
    clg-cascading-list-item,
    clg-selectable-list-item
  )
) {
  display: block;
}

.clg-interactive-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clg-dimension-app-list-graphic-margin, 8px);
  min-height: var(--clg-dimension-sem-interaction-base, 48px);
  width: 100%;
  cursor: pointer;
  position: relative;
  border-radius: var(--clg-shape-sem-border-radius-smallest, 2px);
  color: inherit;
  text-decoration: none;
  --clg-list-item-h-padding: var(--clg-dimension-pal-grid-200, 16px);
  padding: var(--clg-dimension-app-list-padding-vertical, 12px)
    var(--clg-list-item-h-padding);
}

@media only screen and (min-width: 640px) {
  .clg-interactive-list-item {
    --clg-list-item-h-padding: var(
      --clg-dimension-sem-spacing-page-margin,
      32px
    );
  }
}

.clg-interactive-list-item--menu {
  --clg-list-item-h-padding: var(
    --clg-dimension-app-list-padding-horizontal,
    16px
  );
}

.clg-interactive-list-item--menu {
  --clg-interactive-list-item-focus-ring-radius: var(
    --clg-shape-app-menu-border-radius,
    8px
  );
}

.clg-interactive-list-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(
    --clg-interactive-list-item-focus-ring-radius,
    var(--clg-shape-sem-border-radius-smallest, 2px)
  );
  pointer-events: none;
  display: none;
  z-index: 1;
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    calc(var(--clg-shape-sem-border-width-focused, 2px) * -1)
  );
}

:host(
    :is(
      clg-navigational-list-item,
      clg-cascading-list-item,
      clg-action-list-item
    )
  )
  .clg-interactive-list-item:focus {
  outline: none;
}

:host(
    :is(
      clg-navigational-list-item,
      clg-cascading-list-item,
      clg-action-list-item
    )
  )
  .clg-interactive-list-item:focus::before {
  display: block;
}

@supports selector(:focus-visible) {
  :host(
      :is(
        clg-navigational-list-item,
        clg-cascading-list-item,
        clg-action-list-item
      )
    )
    .clg-interactive-list-item:focus::before {
    display: none;
  }

  :host(
      :is(
        clg-navigational-list-item,
        clg-cascading-list-item,
        clg-action-list-item
      )
    )
    .clg-interactive-list-item:focus-visible::before {
    display: block;
  }
}

:host(clg-selectable-list-item:focus) {
  outline: none;
}

:host(clg-selectable-list-item:focus) .clg-interactive-list-item::before {
  display: block;
}

@supports selector(:focus-visible) {
  :host(clg-selectable-list-item:focus) .clg-interactive-list-item::before {
    display: none;
  }

  :host(clg-selectable-list-item:focus-visible)
    .clg-interactive-list-item::before {
    display: block;
  }
}

:host([disabled]) .clg-interactive-list-item {
  cursor: not-allowed;
  color: var(--clg-color-sem-text-disabled, #c8bdb7);
}

:host([divider]) .clg-interactive-list-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--clg-list-item-h-padding, var(--clg-list-h-padding));
  right: var(--clg-list-item-h-padding, var(--clg-list-h-padding));
  height: var(--clg-shape-sem-border-width-thin, 1px);
  background-color: var(--clg-color-sem-border-divider, #e0dad6);
}

:host([density="tight"]) .clg-interactive-list-item {
  min-height: var(--clg-dimension-sem-interaction-small, 36px);
  --clg-icon-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host(clg-selectable-list-item[selected]) .clg-interactive-list-item {
  background-color: var(
    --clg-color-app-list-item-selectable-selected,
    rgba(51, 20, 0, 0.031372549)
  );
}

:host(:not(clg-cascading-list-item):not([disabled]))
  .clg-interactive-list-item:hover {
  background-color: var(
    --clg-color-sem-background-surface-hovered-subtle,
    rgba(51, 20, 0, 0.0509803922)
  );
}

:host(:not(clg-selectable-list-item):not([disabled]))
  .clg-interactive-list-item:active,
:host(clg-cascading-list-item[submenu-open]) .clg-interactive-list-item,
:host(clg-cascading-list-item[submenu-open]) .clg-interactive-list-item:hover {
  background-color: var(
    --clg-color-sem-background-surface-selected-subtle,
    rgba(51, 20, 0, 0.1333333333)
  );
}

.clg-interactive-list-item__start {
  display: flex;
  flex-grow: 1;
  min-height: var(--clg-icon-size);
}

.clg-interactive-list-item__end {
  display: none;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--clg-dimension-app-list-graphic-margin, 8px);
}

:host(:has([slot="detail"])) .clg-interactive-list-item__end {
  display: flex;
}

@scope {
  :scope:has([slot="detail"]) .clg-interactive-list-item__end {
    display: flex;
  }
}

:host(:has([slot="indicator"])) .clg-interactive-list-item__end {
  display: flex;
}

@scope {
  :scope:has([slot="indicator"]) .clg-interactive-list-item__end {
    display: flex;
  }
}

:host(clg-selectable-list-item[selected]) .clg-interactive-list-item__end,
:host(
    :is(
      clg-cascading-list-item,
      clg-navigational-list-item:not([end-icon="none"])
    )
  )
  .clg-interactive-list-item__end {
  display: flex;
}

.clg-interactive-list-item__detail {
  display: none;
  color: var(--clg-color-sem-text-secondary, #665e5c);
}

:host(:has([slot="detail"])) .clg-interactive-list-item__detail {
  display: block;
}

@scope {
  :scope:has([slot="detail"]) .clg-interactive-list-item__detail {
    display: block;
  }
}

.clg-interactive-list-item__indicator {
  display: none;
}

:host(:has([slot="indicator"])) .clg-interactive-list-item__indicator {
  display: flex;
}

@scope {
  :scope:has([slot="indicator"]) .clg-interactive-list-item__indicator {
    display: flex;
  }
}

.clg-interactive-list-item__graphic {
  display: none;
  align-self: flex-start;
  justify-content: center;
  align-items: center;
  margin-right: var(--clg-dimension-app-list-graphic-margin, 8px);
}

:host(:has([slot="graphic"])) .clg-interactive-list-item__graphic {
  display: flex;
}

@scope {
  :scope:has([slot="graphic"]) .clg-interactive-list-item__graphic {
    display: flex;
  }
}

.clg-interactive-list-item__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-base-font-weight);
  font-size: var(--clg-typography-sem-product-body-base-font-size);
  line-height: var(--clg-typography-sem-product-body-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-base-letter-spacing);
  gap: var(--clg-dimension-app-list-text-margin, 4px);
}

:host([variant="subtle"]) .clg-interactive-list-item__title {
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-base-font-weight);
  font-size: var(--clg-typography-sem-product-body-base-font-size);
  line-height: var(--clg-typography-sem-product-body-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-base-letter-spacing);
}

:host([variant="subtle"][density="tight"]) .clg-interactive-list-item__title {
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

:host([variant="strong"]) .clg-interactive-list-item__title {
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
}

:host([variant="strong"][density="tight"]) .clg-interactive-list-item__title {
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

.clg-interactive-list-item__subtitle {
  display: none;
}

:host(:has([slot="subtitle"])) .clg-interactive-list-item__subtitle {
  display: block;
}

@scope {
  :scope:has([slot="subtitle"]) .clg-interactive-list-item__subtitle {
    display: block;
  }
}

:host([variant="subtle"]) .clg-interactive-list-item__subtitle {
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
  color: var(--clg-color-sem-text-secondary, #665e5c);
}

:host([variant="subtle"][density="tight"])
  .clg-interactive-list-item__subtitle {
  font-family: var(--clg-typography-sem-product-body-smaller-font-family);
  font-weight: var(--clg-typography-sem-product-body-smaller-font-weight);
  font-size: var(--clg-typography-sem-product-body-smaller-font-size);
  line-height: var(--clg-typography-sem-product-body-smaller-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-smaller-letter-spacing);
}

:host([variant="strong"]) .clg-interactive-list-item__subtitle {
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

:host([variant="strong"][density="tight"])
  .clg-interactive-list-item__subtitle {
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

:host(clg-action-list-item[destructive]) .clg-interactive-list-item__subtitle,
:host(clg-action-list-item[destructive]) .clg-interactive-list-item__title,
:host(clg-action-list-item[destructive]) .clg-interactive-list-item__detail,
:host(clg-action-list-item[destructive]) .clg-interactive-list-item__graphic {
  color: var(--clg-color-sem-text-critical, #c7102f);
}

.clg-interactive-list-item ::slotted(*) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

:host(:where(clg-navigational-list-item, clg-selectable-list-item)) svg {
  display: none;
  vertical-align: middle;
}

:host(clg-selectable-list-item[selected]) svg,
:host(clg-navigational-list-item:not([end-icon])) svg[data-name="right"],
:host(clg-navigational-list-item[end-icon="right"]) svg[data-name="right"],
:host(clg-navigational-list-item[end-icon="openinnewview"])
  svg[data-name="openinnewview"] {
  display: inline;
}

:host(:is(clg-action-list, clg-navigational-list, clg-selectable-list)) {
  display: block;
}

.clg-interactive-list {
  width: 100%;
  --clg-list-h-padding: var(--clg-dimension-pal-grid-200, 16px);
}

@media only screen and (min-width: 640px) {
  .clg-interactive-list {
    --clg-list-h-padding: var(--clg-dimension-sem-spacing-page-margin, 32px);
  }
}

.clg-interactive-list__title {
  padding: 0 var(--clg-list-h-padding);
  margin-bottom: var(--clg-dimension-app-list-gap, 4px);
}

:host([hide-label]) .clg-interactive-list__title {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

:host([density="tight"]) .clg-interactive-list__title-text {
  container-name: clg-interactive-list-tight;
  container-type: inline-size;
}

.clg-interactive-list__content {
  display: flex;
  flex-direction: column;
}

.clg-avatar-group {
  display: inline-flex;
  align-items: flex-start;
}

:host(clg-avatar-group[size="larger"]) .clg-avatar-group__profile-avatar {
  margin-left: var(--clg-dimension-app-avatar-larger-group-gap, -12px);
}

:host(clg-avatar-group[size="largest"]) .clg-avatar-group__profile-avatar {
  margin-left: var(--clg-dimension-app-avatar-largest-group-gap, -12px);
}

.clg-profile-avatar {
  --clg-avatar-bg-color: unset;
  --clg-avatar-border-width: unset;
  --clg-avatar-border-color: var(--clg-color-app-avatar-border, #faf8f5);
  --clg-avatar-size: unset;
  position: relative;
  display: inline-block;
  fill: var(--clg-avatar-bg-color);
}

:host(clg-profile-avatar[size="smallest"]) .clg-profile-avatar {
  --clg-avatar-size: var(--clg-dimension-app-avatar-smallest-image-size, 24px);
}

:host(clg-profile-avatar[border][size="smallest"]) .clg-profile-avatar {
  --clg-avatar-border-width: var(
    --clg-shape-app-avatar-smallest-border-width,
    1px
  );
}

:host(clg-profile-avatar[size="smaller"]) .clg-profile-avatar {
  --clg-avatar-size: var(--clg-dimension-app-avatar-smaller-image-size, 32px);
}

:host(clg-profile-avatar[border][size="smaller"]) .clg-profile-avatar {
  --clg-avatar-border-width: var(
    --clg-shape-app-avatar-smaller-border-width,
    1px
  );
}

:host(clg-profile-avatar[size="larger"]) .clg-profile-avatar {
  --clg-avatar-size: var(--clg-dimension-app-avatar-larger-image-size, 40px);
}

:host(clg-profile-avatar[border][size="larger"]) .clg-profile-avatar {
  --clg-avatar-border-width: var(
    --clg-shape-app-avatar-larger-border-width,
    4px
  );
}

:host(clg-profile-avatar[size="largest"]) .clg-profile-avatar {
  --clg-avatar-size: var(--clg-dimension-app-avatar-largest-image-size, 64px);
}

:host(clg-profile-avatar[border][size="largest"]) .clg-profile-avatar {
  --clg-avatar-border-width: var(
    --clg-shape-app-avatar-largest-border-width,
    4px
  );
}

:host(clg-profile-avatar[color="red"][with-image]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-red-light,
    #f7d5da
  );
}

:host(clg-profile-avatar[color="red"]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-red-dark,
    #93150e
  );
}

:host(clg-profile-avatar[color="yellow"][with-image]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-yellow-light,
    #f1e8c8
  );
}

:host(clg-profile-avatar[color="yellow"]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-yellow-dark,
    #c19502
  );
}

:host(clg-profile-avatar[color="blue"][with-image]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-blue-light,
    #d2dff2
  );
}

:host(clg-profile-avatar[color="blue"]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-blue-dark,
    #545a78
  );
}

:host(clg-profile-avatar[color="green"][with-image]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-green-light,
    #d2dbbd
  );
}

:host(clg-profile-avatar[color="green"]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-green-dark,
    #6a7550
  );
}

:host(clg-profile-avatar[color="purple"][with-image]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-purple-light,
    #ded3e8
  );
}

:host(clg-profile-avatar[color="purple"]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-purple-dark,
    #4d3464
  );
}

:host(clg-profile-avatar[color="teal"][with-image]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-teal-light,
    #cadade
  );
}

:host(clg-profile-avatar[color="teal"]) .clg-profile-avatar {
  --clg-avatar-bg-color: var(
    --clg-color-sem-background-surface-expressive-teal-dark,
    #789aa2
  );
}

.clg-profile-avatar__circle {
  display: none;
  border-radius: var(--clg-shape-app-avatar-profile-border-radius, 999999px);
  background-color: var(--clg-avatar-bg-color);
}

:host(clg-profile-avatar[size="smallest"]) .clg-profile-avatar__circle {
  display: block;
  width: var(--clg-dimension-app-avatar-smallest-size, 24px);
  height: var(--clg-dimension-app-avatar-smallest-size, 24px);
}

:host(clg-profile-avatar[size="smaller"]) .clg-profile-avatar__circle {
  display: block;
  width: var(--clg-dimension-app-avatar-smaller-size, 32px);
  height: var(--clg-dimension-app-avatar-smaller-size, 32px);
}

:host(clg-profile-avatar[border][size="smallest"]:not([with-image]))
  .clg-profile-avatar__circle,
:host(clg-profile-avatar[border][size="smaller"]:not([with-image]))
  .clg-profile-avatar__circle {
  border-radius: var(--clg-shape-app-avatar-profile-border-radius, 999999px);
  border: var(--clg-avatar-border-width) solid var(--clg-avatar-border-color);
}

:host(clg-profile-avatar[size="smaller"]) .clg-profile-avatar__shape,
:host(clg-profile-avatar[size="smallest"]) .clg-profile-avatar__shape {
  display: none;
}

:host(clg-profile-avatar[border]) .clg-profile-avatar__shape {
  stroke: var(--clg-avatar-border-color);
  stroke-width: var(
    --clg-avatar-border-width,
    var(--clg-shape-app-avatar-base-border-width, 2px)
  );
}

.clg-profile-avatar__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--clg-shape-app-avatar-profile-border-radius, 999999px);
  display: flex;
  align-items: center;
  justify-content: center;
}

:host(clg-profile-avatar[with-image]) .clg-profile-avatar__content {
  overflow: hidden;
}

:host(clg-profile-avatar[border][with-image][size="smallest"])
  .clg-profile-avatar__content,
:host(clg-profile-avatar[border][with-image][size="smaller"])
  .clg-profile-avatar__content {
  border-radius: var(--clg-shape-app-avatar-profile-border-radius, 999999px);
  border: var(--clg-avatar-border-width) solid var(--clg-avatar-border-color);
}

.clg-profile-avatar__content ::slotted(img) {
  height: var(
    --clg-avatar-size,
    var(--clg-dimension-app-avatar-base-image-size, 32px)
  );
  width: var(
    --clg-avatar-size,
    var(--clg-dimension-app-avatar-base-image-size, 32px)
  );
  object-fit: cover;
  display: block;
}

.clg-profile-avatar__initial {
  color: var(--clg-color-app-avatar-text, #faf8f5);
  text-align: center;
  font-size: 0;
  display: block;
  padding-right: 1px;
}

.clg-profile-avatar__initial::first-letter {
  font-family: var(--clg-typography-sem-product-heading-base-font-family);
  font-weight: var(--clg-typography-sem-product-heading-base-font-weight);
  font-size: var(--clg-typography-sem-product-heading-base-font-size);
  line-height: var(--clg-typography-sem-product-heading-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-heading-base-letter-spacing);
  font-size: var(--clg-dimension-app-avatar-base-text-size, 24px);
  text-transform: uppercase;
}

:host(clg-profile-avatar[size="smallest"])
  .clg-profile-avatar__initial::first-letter {
  font-family: var(--clg-typography-pal-family-serif-regular);
  font-weight: var(--clg-typography-pal-weight-400);
  font-size: var(--clg-typography-sem-product-heading-small-font-size);
  line-height: var(--clg-typography-sem-product-heading-small-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-heading-small-letter-spacing
  );
  font-size: var(--clg-dimension-app-avatar-smallest-text-size, 12px);
}

:host(clg-profile-avatar[size="smaller"])
  .clg-profile-avatar__initial::first-letter {
  font-family: var(--clg-typography-sem-product-heading-small-font-family);
  font-weight: var(--clg-typography-sem-product-heading-small-font-weight);
  font-size: var(--clg-typography-sem-product-heading-small-font-size);
  line-height: var(--clg-typography-sem-product-heading-small-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-heading-small-letter-spacing
  );
  font-size: var(--clg-dimension-app-avatar-smaller-text-size, 16px);
}

:host(clg-profile-avatar[size="larger"])
  .clg-profile-avatar__initial::first-letter {
  font-family: var(--clg-typography-sem-product-heading-large-font-family);
  font-weight: var(--clg-typography-sem-product-heading-large-font-weight);
  font-size: var(--clg-typography-sem-product-heading-large-font-size);
  line-height: var(--clg-typography-sem-product-heading-large-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-heading-large-letter-spacing
  );
  font-size: var(--clg-dimension-app-avatar-larger-text-size, 32px);
}

:host(clg-profile-avatar[size="largest"])
  .clg-profile-avatar__initial::first-letter {
  font-family: var(--clg-typography-sem-product-heading-large-font-family);
  font-weight: var(--clg-typography-sem-product-heading-large-font-weight);
  font-size: var(--clg-typography-sem-product-heading-large-font-size);
  line-height: var(--clg-typography-sem-product-heading-large-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-heading-large-letter-spacing
  );
  font-size: var(--clg-dimension-app-avatar-largest-text-size, 40px);
}

.clg-profile-avatar__dot-indicator {
  position: absolute;
  top: 0;
  right: 0;
}

:host(clg-profile-avatar[size="smallest"]) .clg-profile-avatar__dot-indicator {
  top: calc(-1 * var(--clg-dimension-pal-grid-100, 8px));
  right: calc(-1 * var(--clg-dimension-pal-grid-050, 4px));
}

:host(clg-profile-avatar[size="smaller"]) .clg-profile-avatar__dot-indicator {
  top: calc(-1 * var(--clg-dimension-pal-grid-100, 8px));
  right: calc(-1 * var(--clg-dimension-pal-grid-050, 4px));
}

:host(clg-profile-avatar[size="larger"]) .clg-profile-avatar__dot-indicator {
  top: var(--clg-dimension-pal-grid-025, 2px);
  right: var(--clg-dimension-pal-grid-025, 2px);
}

:host(clg-profile-avatar[size="largest"]) .clg-profile-avatar__dot-indicator {
  top: var(--clg-dimension-pal-grid-050, 4px);
  right: var(--clg-dimension-pal-grid-050, 4px);
}

.clg-profile-avatar__badge {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
}

:host(clg-profile-avatar[badge="etsy-admin"]) .clg-profile-avatar__badge,
:host(clg-profile-avatar[badge="star-seller"]) .clg-profile-avatar__badge,
:host(clg-profile-avatar[badge="slot"]) .clg-profile-avatar__badge {
  display: block;
}

.clg-profile-avatar__badge-admin {
  display: none;
  height: var(--clg-dimension-sem-icon-core-smaller, 16px);
  width: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host(clg-profile-avatar[badge="etsy-admin"]) .clg-profile-avatar__badge-admin {
  display: block;
}

:host(clg-profile-avatar[size="largest"]) .clg-profile-avatar__badge-admin {
  height: var(--clg-dimension-sem-icon-core-base, 24px);
  width: var(--clg-dimension-sem-icon-core-base, 24px);
}

.clg-profile-avatar__badge-star-seller {
  display: none;
  background-color: var(--clg-color-app-avatar-border, #faf8f5);
  border-radius: var(--clg-shape-app-avatar-profile-border-radius, 999999px);
  width: var(--clg-dimension-app-avatar-larger-badge-size, 16px);
  height: var(--clg-dimension-app-avatar-larger-badge-size, 16px);
}

:host(clg-profile-avatar[badge="star-seller"])
  .clg-profile-avatar__badge-star-seller {
  display: flex;
}

:host(clg-profile-avatar[size="largest"])
  .clg-profile-avatar__badge-star-seller {
  width: var(--clg-dimension-app-avatar-largest-badge-size, 24px);
  height: var(--clg-dimension-app-avatar-largest-badge-size, 24px);
}

.clg-profile-avatar svg {
  color: var(--clg-color-sem-text-star-seller);
  font-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host(clg-profile-avatar[size="largest"]) .clg-profile-avatar svg {
  font-size: var(--clg-dimension-sem-icon-core-base, 24px);
}

.clg-shop-avatar {
  --clg-shop-avatar-border-width: var(
    --clg-shape-app-avatar-base-border-width,
    2px
  );
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--clg-shape-app-avatar-shop-border-radius, 4px);
  background-color: var(
    --clg-color-app-avatar-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  height: 100%;
  width: 100%;
}

:host(clg-shop-avatar[border]) .clg-shop-avatar {
  padding: var(--clg-shop-avatar-border-width);
  background-color: var(--clg-color-app-avatar-border, #faf8f5);
}

:host(clg-shop-avatar[size="larger"]) .clg-shop-avatar {
  --clg-shop-avatar-border-width: var(
    --clg-shape-app-avatar-larger-border-width,
    4px
  );
}

:host(clg-shop-avatar[size="largest"]) .clg-shop-avatar {
  --clg-shop-avatar-border-width: var(
    --clg-shape-app-avatar-largest-border-width,
    4px
  );
}

.clg-shop-avatar ::slotted(img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--clg-shape-app-avatar-shop-border-radius, 4px);
}

.clg-shop-avatar svg {
  font-size: var(--clg-dimension-sem-icon-core-base, 24px);
}

:host([size="smaller"]) .clg-shop-avatar svg {
  font-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host([size="larger"]) .clg-shop-avatar svg {
  font-size: var(--clg-dimension-sem-icon-core-larger, 32px);
}

:host([size="largest"]) .clg-shop-avatar svg {
  font-size: var(--clg-dimension-sem-icon-core-largest, 48px);
}

:host(clg-global-alert-banner),
:host(clg-section-alert-banner) {
  display: block;
}

.clg-alert-banner {
  --clg-banner-color: var(--clg-color-sem-text-on-surface-light);
  --clg-banner-icon-color: var(--clg-color-sem-text-on-surface-light);
  --clg-banner-icon-bg: var(--clg-color-pal-greyscale-000);
  --clg-banner-bg: unset;
  color: var(--clg-banner-color);
  background-color: var(--clg-banner-bg);
  border-radius: var(--clg-banner-border-radius);
}

.clg-alert-banner__icon {
  background: var(--clg-color-app-alert-banner-strong-icon-background, #faf8f5);
  color: var(--clg-banner-icon-color);
  background-color: var(--clg-banner-icon-bg);
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  width: var(--clg-dimension-pal-grid-400, 32px);
  height: var(--clg-dimension-pal-grid-400, 32px);
  justify-content: center;
  align-items: center;
  font-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

.clg-alert-banner__bell,
.clg-alert-banner__exclamation,
.clg-alert-banner__check {
  display: none;
}

:host(clg-section-alert-banner) .clg-alert-banner {
  --clg-banner-border-radius: var(--clg-shape-app-alert-border-radius);
}

:host(clg-section-alert-banner[color="warning"]) .clg-alert-banner__bell {
  display: flex;
}

:host(clg-section-alert-banner[color="critical"])
  .clg-alert-banner__exclamation {
  display: flex;
}

:host(clg-global-alert-banner[color="warning"]) .clg-alert-banner__bell {
  display: flex;
}

:host(clg-global-alert-banner[color="critical"])
  .clg-alert-banner__exclamation {
  display: flex;
}

:host(clg-section-alert-banner[color="success"]) .clg-alert-banner__check {
  display: flex;
}

:host(clg-section-alert-banner[color="warning"][variant="subtle"])
  .clg-alert-banner {
  --clg-banner-icon-bg: var(
    --clg-color-app-alert-banner-subtle-warning-icon-background
  );
  --clg-banner-icon-color: var(
    --clg-color-app-alert-banner-subtle-warning-icon-foreground
  );
  --clg-banner-color: var(--clg-color-app-alert-banner-subtle-warning-text);
}

:host(clg-section-alert-banner[color="warning"][variant="strong"])
  .clg-alert-banner {
  --clg-banner-bg: var(--clg-color-app-alert-banner-strong-warning-background);
  --clg-banner-color: var(--clg-color-app-alert-banner-strong-warning-text);
}

:host(clg-global-alert-banner[color="warning"]) .clg-alert-banner {
  --clg-banner-bg: var(--clg-color-app-alert-banner-strong-warning-background);
  --clg-banner-color: var(--clg-color-app-alert-banner-strong-warning-text);
}

:host(clg-section-alert-banner[color="critical"][variant="subtle"])
  .clg-alert-banner {
  --clg-banner-icon-bg: var(
    --clg-color-app-alert-banner-subtle-critical-icon-background
  );
  --clg-banner-icon-color: var(
    --clg-color-app-alert-banner-subtle-critical-icon-foreground
  );
  --clg-banner-color: var(--clg-color-app-alert-banner-subtle-critical-text);
}

:host(clg-section-alert-banner[color="critical"][variant="strong"])
  .clg-alert-banner {
  --clg-banner-bg: var(--clg-color-app-alert-banner-strong-critical-background);
  --clg-banner-color: var(--clg-color-app-alert-banner-strong-critical-text);
}

:host(clg-global-alert-banner[color="critical"]) .clg-alert-banner {
  --clg-banner-bg: var(--clg-color-app-alert-banner-strong-critical-background);
  --clg-banner-color: var(--clg-color-app-alert-banner-strong-critical-text);
}

:host(clg-section-alert-banner[color="success"][variant="subtle"])
  .clg-alert-banner {
  --clg-banner-icon-bg: var(
    --clg-color-app-alert-banner-subtle-success-icon-background
  );
  --clg-banner-icon-color: var(
    --clg-color-app-alert-banner-subtle-success-icon-foreground
  );
  --clg-banner-color: var(--clg-color-app-alert-banner-subtle-success-text);
}

:host(clg-section-alert-banner[color="success"][variant="strong"])
  .clg-alert-banner {
  --clg-banner-bg: var(--clg-color-app-alert-banner-strong-success-background);
  --clg-banner-color: var(--clg-color-app-alert-banner-strong-success-text);
}

:host(clg-banner-base) {
  display: block;
}

.clg-banner-base {
  padding: var(--clg-dimension-app-alert-banner-padding-vertical, 12px);
  position: relative;
  display: flex;
  width: 100%;
  gap: var(--clg-dimension-app-alert-banner-icon-margin, 12px);
  text-align: left;
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
  color: var(--clg-banner-color);
  background-color: var(--clg-banner-bg);
  border-radius: var(
    --clg-banner-border-radius,
    var(--clg-shape-app-alert-border-radius, 8px)
  );
}

:host(clg-banner-base:not([open])) .clg-banner-base {
  display: none;
}

:host(clg-banner-base[variant="subtle"]) .clg-banner-base {
  border: var(--clg-shape-app-alert-border-width, 1px) solid
    var(--clg-color-app-alert-banner-subtle-border, #e0dad6);
}

.clg-banner-base__middle-content {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--clg-dimension-app-alert-banner-button-group-margin, 8px);
}

:host(clg-banner-base[buttons="buttonGroup"]) .clg-banner-base__middle-content {
  flex-wrap: wrap;
}

.clg-banner-base__alert-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

:host(clg-banner-base[subtitle]) .clg-banner-base__alert-content {
  gap: var(--clg-dimension-pal-grid-050, 4px);
}

:host(clg-banner-base[buttons="buttonGroup"]) .clg-banner-base__alert-content {
  flex: 9999 1 calc(480px - 200px);
}

:host(clg-banner-base[buttons="inlineButton"]) .clg-banner-base__alert-content {
  flex: 1;
}

.clg-banner-base__title a,
.clg-banner-base__body a {
  color: inherit;
}

.clg-banner-base__title {
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
  display: flex;
  align-items: center;
}

.clg-banner-base__title ::slotted([slot="title"]) {
  font: inherit;
  margin: 0;
}

.clg-banner-base__icon {
  align-self: start;
}

:host(clg-banner-base[without-icon]) .clg-banner-base__icon {
  display: none;
}

.clg-banner-base__button-group,
.clg-banner-base__inline-button,
.clg-banner-base__dismiss-button {
  display: none;
}

:host(clg-banner-base[buttons="dismissOnly"]) .clg-banner-base__dismiss-button {
  display: block;
}

:host(clg-banner-base[buttons="inlineButton"]) .clg-banner-base__inline-button {
  display: block;
  flex-shrink: 0;
  white-space: nowrap;
}

:host(clg-banner-base[buttons="buttonGroup"]) .clg-banner-base__button-group {
  display: block;
  flex: 0 0 auto;
  white-space: nowrap;
}

:host(
    clg-banner-base:not([without-icon]):not([subtitle][buttons]):where(
        [buttons="inlineButton"],
        [buttons="buttonGroup"],
        [buttons="dismissOnly"]
      )
  )
  .clg-banner-base__alert-content {
  min-height: var(--clg-dimension-sem-interaction-small, 36px);
}

:host(
    clg-banner-base:not([without-icon]):not([subtitle][buttons]):where(
        [buttons="inlineButton"],
        [buttons="buttonGroup"],
        [buttons="dismissOnly"]
      )
  )
  .clg-banner-base__icon {
  display: flex;
  align-items: center;
  align-self: auto;
  max-height: var(--clg-dimension-sem-interaction-small, 36px);
}

:host(clg-signal-banner) {
  display: block;
}

.clg-signal-banner {
  --clg-banner-color: unset;
  --clg-banner-icon-color: var(
    --clg-color-app-alert-banner-strong-icon-foreground
  );
  --clg-banner-icon-bg: var(
    --clg-color-app-alert-banner-strong-icon-background
  );
  --clg-banner-bg: unset;
  color: var(--clg-banner-color);
  background-color: var(--clg-banner-bg);
  border-radius: var(
    --clg-banner-border-radius,
    var(--clg-shape-app-alert-border-radius, 8px)
  );
}

.clg-signal-banner__icon {
  background: var(--clg-color-app-alert-banner-strong-icon-background, #faf8f5);
  color: var(--clg-banner-icon-color);
  background-color: var(--clg-banner-icon-bg);
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  display: flex;
  width: var(--clg-dimension-pal-grid-400, 32px);
  height: var(--clg-dimension-pal-grid-400, 32px);
  justify-content: center;
  align-items: center;
}

:host(clg-signal-banner[without-icon]) .clg-signal-banner__icon {
  display: none;
}

:host(clg-signal-banner[variant="subtle"]) .clg-signal-banner {
  --clg-banner-bg: var(--clg-color-app-alert-banner-subtle-background);
  --clg-banner-color: var(--clg-color-app-alert-banner-subtle-text);
}

:host(clg-signal-banner[color="neutral"][variant="subtle"]) .clg-signal-banner {
  --clg-banner-icon-bg: var(
    --clg-color-app-alert-banner-subtle-neutral-icon-background
  );
  --clg-banner-icon-color: var(
    --clg-color-app-alert-banner-subtle-neutral-icon-foreground
  );
}

:host(clg-signal-banner[color="neutral"][variant="strong"]) .clg-signal-banner {
  --clg-banner-bg: var(--clg-color-app-alert-banner-strong-neutral-background);
  --clg-banner-color: var(--clg-color-app-alert-banner-strong-neutral-text);
}

:host(clg-signal-banner[color="highlight"][variant="subtle"])
  .clg-signal-banner {
  --clg-banner-icon-bg: var(
    --clg-color-app-alert-banner-subtle-highlight-icon-background
  );
  --clg-banner-icon-color: var(
    --clg-color-app-alert-banner-subtle-highlight-icon-foreground
  );
}

:host(clg-signal-banner[color="highlight"][variant="strong"])
  .clg-signal-banner {
  --clg-banner-bg: var(
    --clg-color-app-alert-banner-strong-highlight-background
  );
  --clg-banner-color: var(--clg-color-app-alert-banner-strong-highlight-text);
}

:host(clg-button) {
  display: inline-block;
}

.clg-button {
  --clg-button-bg-color: unset;
  --clg-button-text-color: unset;
  --clg-button-border-color: unset;
  --clg-button-border-width: unset;
  --clg-button-font-size: var(
    --clg-typography-sem-product-title-desktop-base-font-size,
    16px
  );
  --clg-button-height: var(--clg-dimension-sem-minimum-tap-target, 48px);
  --clg-button-width: var(--clg-dimension-sem-interaction-base, 48px);
  --clg-button-padding-vertical: var(
    --clg-dimension-app-button-padding-vertical,
    12px
  );
  --clg-button-padding-horizontal: var(
    --clg-dimension-app-button-padding-horizontal,
    18px
  );
  --clg-button-font-line-height: calc(
    var(--clg-button-height) - var(--clg-button-padding-vertical) * 2 -
      var(--clg-button-border-width, 0) * 2
  );
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 100%;
  min-width: var(--clg-button-width);
  padding: var(--clg-button-padding-vertical)
    var(--clg-button-padding-horizontal);
  font: inherit;
  font-size: var(--clg-button-font-size);
  font-weight: var(
    --clg-typography-sem-product-title-desktop-base-font-weight,
    700
  );
  line-height: var(--clg-button-font-line-height);
  text-align: center;
  text-decoration: none;
  background: none;
  outline: none;
  border-radius: var(--clg-shape-app-button-border-radius, 24px);
  background-color: var(--clg-button-bg-color);
  border: var(--clg-button-border-color) solid var(--clg-button-border-width);
  color: var(--clg-button-text-color);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  appearance: none;
  transition:
    scale
      var(
        --clg-effect-app-button-on-hover-scale-curve,
        cubic-bezier(0.3, 0, 0, 1)
      )
      var(--clg-effect-app-button-on-hover-scale-duration, 75ms),
    background-color
      var(--clg-effect-app-button-on-hover-fade-curve, cubic-bezier(0, 0, 1, 1))
      var(--clg-effect-app-button-on-hover-fade-duration, 25ms);
  --clg-focus-ring-color: var(--clg-color-app-button-focused-border, #426bdb);
}

:host(clg-button:not([disabled]):not([loading])) .clg-button:hover {
  scale: var(--clg-effect-app-button-on-hover-scale-to, 1.01);
  color: var(--clg-button-text-color-hovered);
  background-color: var(--clg-button-bg-color-hovered);
  border-color: var(--clg-button-border-color-hovered);
}

:host(clg-button:not([disabled]):not([loading])) .clg-button:active {
  color: var(--clg-button-text-color-pressed);
  background-color: var(--clg-button-bg-color-pressed);
  border-color: var(--clg-button-border-color-pressed);
  scale: var(--clg-effect-app-button-on-press-scale-to, 0.94);
  transition:
    scale
      var(
        --clg-effect-app-button-on-press-scale-curve,
        cubic-bezier(0, 0, 0, 1)
      )
      var(--clg-effect-app-button-on-press-scale-duration, 100ms),
    background-color
      var(--clg-effect-app-button-on-press-fade-curve, cubic-bezier(0, 0, 1, 1))
      var(--clg-effect-app-button-on-press-fade-duration, 25ms);
}

:host(clg-button:not([disabled]):not([loading])) .clg-button[data-released] {
  transition:
    scale
      var(
        --clg-effect-app-button-on-release-scale-curve,
        cubic-bezier(0, 0, 0, 1)
      )
      var(--clg-effect-app-button-on-release-scale-duration, 150ms),
    background-color
      var(
        --clg-effect-app-button-on-release-fade-curve,
        cubic-bezier(0.3, 0, 0, 1)
      )
      var(--clg-effect-app-button-on-release-fade-duration, 150ms);
}

:host(clg-button[background-type="light"]) .clg-button {
  --clg-focus-ring-color: var(
    --clg-color-app-button-focused-on-surface-light-border,
    #426bdb
  );
}

:host(clg-button[background-type="dark"]) .clg-button {
  --clg-focus-ring-color: var(
    --clg-color-app-button-focused-on-surface-dark-border,
    #426bdb
  );
}

:host([pseudo-focus]) :host(clg-button:not([disabled])) .clg-button,
:host(clg-button:not([disabled])) .clg-button:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host(clg-button:not([disabled])) .clg-button:focus-within,
:host(clg-button:not([disabled])) .clg-button:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus])
  :host(clg-button:not([disabled]))
  .clg-button:not(:focus-visible),
:host(clg-button:not([disabled])) .clg-button:focus:not(:focus-visible) {
  outline: none;
}

:host(clg-button[loading]) .clg-button,
:host(clg-button[disabled]) .clg-button {
  color: var(--clg-button-text-color-disabled);
  background-color: var(--clg-button-bg-color-disabled);
  border-color: var(--clg-button-border-color-disabled);
}

:host(clg-button[disabled]) .clg-button {
  cursor: not-allowed;
}

:host(clg-button[disabled][loading]) .clg-button,
:host(clg-button[loading]) .clg-button {
  cursor: progress;
}

:host(clg-button[loading]) .clg-button__content {
  visibility: hidden !important;
}

:host(clg-button[floating]:not([variant="tertiary"])) .clg-button {
  box-shadow: var(
    --clg-effect-app-button-floating-shadow,
    0px 0px 24px 4px rgba(51, 20, 0, 0.2588235294)
  );
}

:host(clg-button[floating][variant="secondary"]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-primary-on-surface-dark-background,
    #faf8f5
  );
  --clg-button-border-color: unset;
  --clg-button-border-width: unset;
}

:host(clg-button[floating][variant="secondary"]) .clg-button:hover {
  --clg-button-bg-color-hovered: var(
    --clg-color-app-button-primary-on-surface-dark-background,
    #faf8f5
  );
}

:host(clg-button[size="small"]) .clg-button {
  --clg-button-font-size: var(
    --clg-typography-sem-product-body-desktop-small-font-size,
    14px
  );
  --clg-button-height: var(--clg-dimension-sem-interaction-small, 36px);
  --clg-button-width: var(--clg-dimension-sem-interaction-small, 36px);
  --clg-button-padding-vertical: calc(
    var(--clg-dimension-pal-spacing-100, 6px) +
      var(--clg-dimension-pal-spacing-050, 3px)
  );
  --clg-button-padding-horizontal: var(
    --clg-dimension-app-button-small-padding-horizontal,
    15px
  );
  --clg-icon-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

.clg-button__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--clg-dimension-app-button-gap, 6px);
}

.clg-button__spinner-frame {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

:host(clg-button:not([loading])) .clg-button__spinner-frame {
  display: none;
}

:host(clg-button) .clg-button__spinner-frame__light-spinner,
:host(clg-button) .clg-button__spinner-frame__dark-spinner {
  display: none;
}

:host(clg-button[variant="primary"]) .clg-button__spinner-frame__light-spinner,
:host(clg-button[variant="secondary"][background-type="dark"])
  .clg-button__spinner-frame__light-spinner,
:host(clg-button[variant="tertiary"][background-type="dark"])
  .clg-button__spinner-frame__light-spinner {
  display: block;
}

:host(clg-button[variant="primary"][background-type="dark"])
  .clg-button__spinner-frame__light-spinner {
  display: none;
}

:host(clg-button[variant="primary"][background-type="dark"])
  .clg-button__spinner-frame__dark-spinner,
:host(clg-button[variant="secondary"]) .clg-button__spinner-frame__dark-spinner,
:host(clg-button[variant="tertiary"]) .clg-button__spinner-frame__dark-spinner {
  display: block;
}

:host(clg-button[variant="secondary"][background-type="dark"])
  .clg-button__spinner-frame__dark-spinner,
:host(clg-button[variant="tertiary"][background-type="dark"])
  .clg-button__spinner-frame__dark-spinner {
  display: none;
}

:host(clg-button[variant="primary"]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-primary-background,
    #312b36
  );
  --clg-button-text-color: var(--clg-color-app-button-primary-text, #faf8f5);
  --clg-button-border-color: var(
    --clg-color-app-button-primary-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-hovered: var(
    --clg-color-app-button-primary-hovered-background,
    #534d4c
  );
  --clg-button-text-color-hovered: var(
    --clg-color-app-button-primary-hovered-text,
    #faf8f5
  );
  --clg-button-border-color-hovered: var(
    --clg-color-app-button-primary-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-pressed: var(
    --clg-color-app-button-primary-pressed-background,
    #605957
  );
  --clg-button-text-color-pressed: var(
    --clg-color-app-button-primary-pressed-text,
    #faf8f5
  );
  --clg-button-border-color-pressed: var(
    --clg-color-app-button-primary-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-disabled: var(
    --clg-color-app-button-primary-disabled-background,
    #c8bdb7
  );
  --clg-button-text-color-disabled: var(
    --clg-color-app-button-primary-disabled-text,
    #faf8f5
  );
  --clg-button-border-color-disabled: var(
    --clg-color-app-button-primary-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-button[variant="primary"][background-type="light"]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-primary-on-surface-light-background,
    #312b36
  );
  --clg-button-text-color: var(
    --clg-color-app-button-primary-on-surface-light-text,
    #faf8f5
  );
  --clg-button-border-color: var(
    --clg-color-app-button-primary-on-surface-light-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-hovered: var(
    --clg-color-app-button-primary-on-surface-light-hovered-background,
    #534d4c
  );
  --clg-button-text-color-hovered: var(
    --clg-color-app-button-primary-on-surface-light-hovered-text,
    #faf8f5
  );
  --clg-button-border-color-hovered: var(
    --clg-color-app-button-primary-on-surface-light-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-pressed: var(
    --clg-color-app-button-primary-on-surface-light-pressed-background,
    #605957
  );
  --clg-button-text-color-pressed: var(
    --clg-color-app-button-primary-on-surface-light-pressed-text,
    #faf8f5
  );
  --clg-button-border-color-pressed: var(
    --clg-color-app-button-primary-on-surface-light-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-disabled: var(
    --clg-color-app-button-primary-on-surface-light-disabled-background,
    #c8bdb7
  );
  --clg-button-text-color-disabled: var(
    --clg-color-app-button-primary-on-surface-light-disabled-text,
    #faf8f5
  );
  --clg-button-border-color-disabled: var(
    --clg-color-app-button-primary-on-surface-light-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-button[variant="primary"][background-type="dark"]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-primary-on-surface-dark-background,
    #faf8f5
  );
  --clg-button-text-color: var(
    --clg-color-app-button-primary-on-surface-dark-text,
    #312b36
  );
  --clg-button-border-color: var(
    --clg-color-app-button-primary-on-surface-dark-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-hovered: var(
    --clg-color-app-button-primary-on-surface-dark-hovered-background,
    #d5cdc8
  );
  --clg-button-text-color-hovered: var(
    --clg-color-app-button-primary-on-surface-dark-hovered-text,
    #312b36
  );
  --clg-button-border-color-hovered: var(
    --clg-color-app-button-primary-on-surface-dark-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-pressed: var(
    --clg-color-app-button-primary-on-surface-dark-pressed-background,
    #c8bdb7
  );
  --clg-button-text-color-pressed: var(
    --clg-color-app-button-primary-on-surface-dark-pressed-text,
    #312b36
  );
  --clg-button-border-color-pressed: var(
    --clg-color-app-button-primary-on-surface-dark-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-disabled: var(
    --clg-color-app-button-primary-on-surface-dark-disabled-background,
    #605957
  );
  --clg-button-text-color-disabled: var(
    --clg-color-app-button-primary-on-surface-dark-disabled-text,
    #312b36
  );
  --clg-button-border-color-disabled: var(
    --clg-color-app-button-primary-on-surface-dark-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-button[variant="secondary"]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-secondary-background,
    rgba(0, 0, 0, 0)
  );
  --clg-button-text-color: var(--clg-color-app-button-secondary-text, #312b36);
  --clg-button-border-color: var(
    --clg-color-app-button-secondary-border,
    #312b36
  );
  --clg-button-bg-color-hovered: var(
    --clg-color-app-button-secondary-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-button-text-color-hovered: var(
    --clg-color-app-button-secondary-hovered-text,
    #312b36
  );
  --clg-button-border-color-hovered: var(
    --clg-color-app-button-secondary-hovered-border,
    #312b36
  );
  --clg-button-bg-color-pressed: var(
    --clg-color-app-button-secondary-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-button-text-color-pressed: var(
    --clg-color-app-button-secondary-pressed-text,
    #312b36
  );
  --clg-button-border-color-pressed: var(
    --clg-color-app-button-secondary-pressed-border,
    #312b36
  );
  --clg-button-bg-color-disabled: var(
    --clg-color-app-button-secondary-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-button-text-color-disabled: var(
    --clg-color-app-button-secondary-disabled-text,
    #c8bdb7
  );
  --clg-button-border-color-disabled: var(
    --clg-color-app-button-secondary-disabled-border,
    #c8bdb7
  );
}

:host(clg-button[variant="secondary"][background-type="light"]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-secondary-on-surface-light-background,
    rgba(0, 0, 0, 0)
  );
  --clg-button-text-color: var(
    --clg-color-app-button-secondary-on-surface-light-text,
    #312b36
  );
  --clg-button-border-color: var(
    --clg-color-app-button-secondary-on-surface-light-border,
    #312b36
  );
  --clg-button-bg-color-hovered: var(
    --clg-color-app-button-secondary-on-surface-light-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-button-text-color-hovered: var(
    --clg-color-app-button-secondary-on-surface-light-hovered-text,
    #312b36
  );
  --clg-button-border-color-hovered: var(
    --clg-color-app-button-secondary-on-surface-light-hovered-border,
    #312b36
  );
  --clg-button-bg-color-pressed: var(
    --clg-color-app-button-secondary-on-surface-light-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-button-text-color-pressed: var(
    --clg-color-app-button-secondary-on-surface-light-pressed-text,
    #312b36
  );
  --clg-button-border-color-pressed: var(
    --clg-color-app-button-secondary-on-surface-light-pressed-border,
    #312b36
  );
  --clg-button-bg-color-disabled: var(
    --clg-color-app-button-secondary-on-surface-light-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-button-text-color-disabled: var(
    --clg-color-app-button-secondary-on-surface-light-disabled-text,
    #c8bdb7
  );
  --clg-button-border-color-disabled: var(
    --clg-color-app-button-secondary-on-surface-light-disabled-border,
    #c8bdb7
  );
}

:host(clg-button[variant="secondary"][background-type="dark"]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-secondary-on-surface-dark-background,
    rgba(0, 0, 0, 0)
  );
  --clg-button-text-color: var(
    --clg-color-app-button-secondary-on-surface-dark-text,
    #faf8f5
  );
  --clg-button-border-color: var(
    --clg-color-app-button-secondary-on-surface-dark-border,
    #faf8f5
  );
  --clg-button-bg-color-hovered: var(
    --clg-color-app-button-secondary-on-surface-dark-hovered-background,
    rgba(255, 255, 255, 0.1294117647)
  );
  --clg-button-text-color-hovered: var(
    --clg-color-app-button-secondary-on-surface-dark-hovered-text,
    #faf8f5
  );
  --clg-button-border-color-hovered: var(
    --clg-color-app-button-secondary-on-surface-dark-hovered-border,
    #faf8f5
  );
  --clg-button-bg-color-pressed: var(
    --clg-color-app-button-secondary-on-surface-dark-pressed-background,
    rgba(255, 255, 255, 0.3803921569)
  );
  --clg-button-text-color-pressed: var(
    --clg-color-app-button-secondary-on-surface-dark-pressed-text,
    #faf8f5
  );
  --clg-button-border-color-pressed: var(
    --clg-color-app-button-secondary-on-surface-dark-pressed-border,
    #faf8f5
  );
  --clg-button-bg-color-disabled: var(
    --clg-color-app-button-secondary-on-surface-dark-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-button-text-color-disabled: var(
    --clg-color-app-button-secondary-on-surface-dark-disabled-text,
    #605957
  );
  --clg-button-border-color-disabled: var(
    --clg-color-app-button-secondary-on-surface-dark-disabled-border,
    #605957
  );
}

:host(clg-button[variant="tertiary"]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-tertiary-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-button-text-color: var(--clg-color-app-button-tertiary-text, #312b36);
  --clg-button-border-color: var(
    --clg-color-app-button-tertiary-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-hovered: var(
    --clg-color-app-button-tertiary-hovered-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-button-text-color-hovered: var(
    --clg-color-app-button-tertiary-hovered-text,
    #312b36
  );
  --clg-button-border-color-hovered: var(
    --clg-color-app-button-tertiary-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-pressed: var(
    --clg-color-app-button-tertiary-pressed-background,
    rgba(51, 20, 0, 0.2588235294)
  );
  --clg-button-text-color-pressed: var(
    --clg-color-app-button-tertiary-pressed-text,
    #312b36
  );
  --clg-button-border-color-pressed: var(
    --clg-color-app-button-tertiary-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-disabled: var(
    --clg-color-app-button-tertiary-disabled-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-button-text-color-disabled: var(
    --clg-color-app-button-tertiary-disabled-text,
    #c8bdb7
  );
  --clg-button-border-color-disabled: var(
    --clg-color-app-button-tertiary-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-button[variant="tertiary"][background-type="light"]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-tertiary-on-surface-light-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-button-text-color: var(
    --clg-color-app-button-tertiary-on-surface-light-text,
    #312b36
  );
  --clg-button-border-color: var(
    --clg-color-app-button-tertiary-on-surface-light-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-hovered: var(
    --clg-color-app-button-tertiary-on-surface-light-hovered-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-button-text-color-hovered: var(
    --clg-color-app-button-tertiary-on-surface-light-hovered-text,
    #312b36
  );
  --clg-button-border-color-hovered: var(
    --clg-color-app-button-tertiary-on-surface-light-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-pressed: var(
    --clg-color-app-button-tertiary-on-surface-light-pressed-background,
    rgba(51, 20, 0, 0.2588235294)
  );
  --clg-button-text-color-pressed: var(
    --clg-color-app-button-tertiary-on-surface-light-pressed-text,
    #312b36
  );
  --clg-button-border-color-pressed: var(
    --clg-color-app-button-tertiary-on-surface-light-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-disabled: var(
    --clg-color-app-button-tertiary-on-surface-light-disabled-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-button-text-color-disabled: var(
    --clg-color-app-button-tertiary-on-surface-light-disabled-text,
    #c8bdb7
  );
  --clg-button-border-color-disabled: var(
    --clg-color-app-button-tertiary-on-surface-light-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-button[variant="tertiary"][background-type="dark"]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-tertiary-on-surface-dark-background,
    rgba(255, 255, 255, 0.1294117647)
  );
  --clg-button-text-color: var(
    --clg-color-app-button-tertiary-on-surface-dark-text,
    #faf8f5
  );
  --clg-button-border-color: var(
    --clg-color-app-button-tertiary-on-surface-dark-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-hovered: var(
    --clg-color-app-button-tertiary-on-surface-dark-hovered-background,
    rgba(255, 255, 255, 0.3803921569)
  );
  --clg-button-text-color-hovered: var(
    --clg-color-app-button-tertiary-on-surface-dark-hovered-text,
    #faf8f5
  );
  --clg-button-border-color-hovered: var(
    --clg-color-app-button-tertiary-on-surface-dark-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-pressed: var(
    --clg-color-app-button-tertiary-on-surface-dark-pressed-background,
    rgba(255, 255, 255, 0.5215686275)
  );
  --clg-button-text-color-pressed: var(
    --clg-color-app-button-tertiary-on-surface-dark-pressed-text,
    #faf8f5
  );
  --clg-button-border-color-pressed: var(
    --clg-color-app-button-tertiary-on-surface-dark-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-button-bg-color-disabled: var(
    --clg-color-app-button-tertiary-on-surface-dark-disabled-background,
    rgba(255, 255, 255, 0.1294117647)
  );
  --clg-button-text-color-disabled: var(
    --clg-color-app-button-tertiary-on-surface-dark-disabled-text,
    #605957
  );
  --clg-button-border-color-disabled: var(
    --clg-color-app-button-tertiary-on-surface-dark-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-button[variant="primary"]) .clg-button {
  --clg-button-border-width: var(
    --clg-shape-app-button-primary-border-width,
    0px
  );
}

:host(clg-button[variant="secondary"]) .clg-button {
  --clg-button-border-width: var(
    --clg-shape-app-button-secondary-border-width,
    1px
  );
}

:host(clg-button[variant="tertiary"]) .clg-button {
  --clg-button-border-width: var(
    --clg-shape-app-button-tertiary-border-width,
    0px
  );
}

:host(clg-button[variant="tertiary"]:not([disabled]):not([loading]))
  .clg-button:hover,
:host(clg-button[variant="tertiary"]:not([disabled]):not([loading]))
  .clg-button:focus-within,
:host(clg-button[variant="tertiary"]:not([disabled]):not([loading]))
  .clg-button:focus-visible {
  box-shadow: none;
  transform: none;
  transition: none;
}

:host(clg-button) ::slotted([slot="submit-input"]) {
  opacity: 0;
  position: absolute;
  inset: 0;
  border-radius: var(--clg-shape-app-button-border-radius, 24px);
  cursor: inherit;
}

:host(clg-button[hydrated]) ::slotted([slot="submit-input"]) {
  display: none;
}

.clg-button-group {
  --clg-button-group-direction: unset;
  display: flex;
  position: relative;
  flex-wrap: wrap;
  gap: var(--clg-dimension-app-button-gap, 6px);
  flex-direction: var(--clg-button-group-direction);
}

:host(clg-button-group) {
  display: inline-block;
}

:host(clg-button-group[orientation="horizontal"]) .clg-button-group {
  --clg-button-group-direction: row;
}

:host(clg-button-group[orientation="vertical"]) .clg-button-group {
  --clg-button-group-direction: column;
}

::slotted(clg-text-button) {
  align-self: center;
}

:host(clg-anchored-button-group) {
  display: block;
  width: 100%;
}

.clg-anchored-button-group {
  display: flex;
  flex-direction: column;
  gap: var(
    --clg-anchored-button-group-content-gap,
    var(--clg-dimension-pal-grid-150, 12px)
  );
  padding-top: var(
    --clg-anchored-button-group-padding-top,
    var(--clg-dimension-pal-grid-150, 12px)
  );
  padding-right: var(
    --clg-anchored-button-group-padding-inline-end,
    var(
      --clg-anchored-button-group-padding-inline,
      var(--clg-dimension-pal-grid-200, 16px)
    )
  );
  padding-bottom: var(
    --clg-anchored-button-group-padding-bottom,
    var(--clg-dimension-pal-grid-150, 12px)
  );
  padding-left: var(
    --clg-anchored-button-group-padding-inline-start,
    var(
      --clg-anchored-button-group-padding-inline,
      var(--clg-dimension-pal-grid-200, 16px)
    )
  );
}

.clg-anchored-button-group__buttons {
  --clg-anchored-button-group-direction: column;
  --clg-anchored-button-group-align-items: stretch;
  --clg-anchored-button-group-gap: var(--clg-dimension-pal-grid-150, 12px);
  display: flex;
  width: 100%;
  gap: var(--clg-anchored-button-group-gap);
  flex-direction: var(--clg-anchored-button-group-direction);
  align-items: var(--clg-anchored-button-group-align-items);
}

:host(clg-anchored-button-group[divider]) .clg-anchored-button-group {
  border-top: var(--clg-shape-sem-border-width-thin, 1px) solid
    var(--clg-color-sem-border-divider, #e0dad6);
}

:host(clg-anchored-button-group[orientation="vertical"])
  .clg-anchored-button-group__buttons {
  --clg-anchored-button-group-direction: column;
  --clg-anchored-button-group-align-items: stretch;
  --clg-anchored-button-group-gap: var(--clg-dimension-pal-grid-150, 12px);
}

:host(clg-anchored-button-group[orientation="horizontal"])
  .clg-anchored-button-group__buttons {
  --clg-anchored-button-group-direction: row;
  --clg-anchored-button-group-align-items: center;
  --clg-anchored-button-group-gap: var(--clg-dimension-app-button-gap, 6px);
  justify-content: flex-end;
}

:host(clg-anchored-button-group[orientation="horizontal"])
  .clg-anchored-button-group__buttons__primary {
  order: 2;
}

:host(clg-anchored-button-group[orientation="horizontal"])
  .clg-anchored-button-group__buttons__secondary {
  order: 1;
}

:host(clg-anchored-button-group[orientation="horizontal"])
  .clg-anchored-button-group__buttons__tertiary {
  order: 0;
  margin-right: auto;
}

:host(clg-button[variant="primary"][withrefresh]),
:host(clg-button[variant="primary"][withrefresh]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-primary-on-surface-light-background
  );
  --clg-button-text-color: var(
    --clg-color-app-button-primary-on-surface-light-text
  );
}

:host(clg-button[variant="primary"][withrefresh]:not([disabled])):hover,
:host(clg-button[variant="primary"][withrefresh]:not([disabled])):focus-within,
:host(clg-button[variant="primary"][withrefresh]:not([disabled])):focus-visible,
:host(clg-button[variant="primary"][withrefresh]:not([disabled]))
  .clg-button:hover,
:host(clg-button[variant="primary"][withrefresh]:not([disabled]))
  .clg-button:focus-within,
:host(clg-button[variant="primary"][withrefresh]:not([disabled]))
  .clg-button:focus-visible {
  --clg-button-bg-color: var(
    --clg-color-app-button-primary-on-surface-light-background
  );
  --clg-button-text-color: var(
    --clg-color-app-button-primary-on-surface-light-text
  );
}

:host(clg-button[variant="primary"][withrefresh]:not([disabled])):active,
:host(clg-button[variant="primary"][withrefresh]:not([disabled]))
  .clg-button:active {
  --clg-button-bg-color: var(--clg-color-app-button-primary-pressed-background);
}

:host(clg-button[variant="tertiary"][withrefresh]),
:host(clg-button[variant="tertiary"][withrefresh]) .clg-button {
  --clg-button-bg-color: var(
    --clg-color-app-button-tertiary-on-surface-light-background
  );
  --clg-button-text-color: var(
    --clg-color-app-button-tertiary-on-surfaec-light-text
  );
}

:host(clg-button[variant="tertiary"][withrefresh]:not([disabled])):hover,
:host(clg-button[variant="tertiary"][withrefresh]:not([disabled])):focus-within,
:host(
  clg-button[variant="tertiary"][withrefresh]:not([disabled])
):focus-visible,
:host(clg-button[variant="tertiary"][withrefresh]:not([disabled]))
  .clg-button:hover,
:host(clg-button[variant="tertiary"][withrefresh]:not([disabled]))
  .clg-button:focus-within,
:host(clg-button[variant="tertiary"][withrefresh]:not([disabled]))
  .clg-button:focus-visible {
  --clg-button-bg-color: var(
    --clg-color-app-button-tertiary-on-surface-light-background
  );
  --clg-button-text-color: var(
    --clg-color-app-button-tertiary-on-surface-light-text
  );
}

:host(clg-button[variant="tertiary"][withrefresh]:not([disabled])):active,
:host(clg-button[variant="tertiary"][withrefresh]:not([disabled]))
  .clg-button:active {
  --clg-button-bg-color: var(
    --clg-color-app-button-tertiary-pressed-background
  );
  --clg-button-text-color: var(--clg-color-app-button-tertiary-pressed-text);
}

@keyframes clg-favorite-button-icon-pop {
  0% {
    transform: scale(1);
  }

  2% {
    transform: scale(0.75);
  }

  20% {
    transform: scale(1.152);
  }

  40% {
    transform: scale(1.024);
  }

  60% {
    transform: scale(0.968);
  }

  80% {
    transform: scale(0.992);
  }

  100% {
    transform: scale(1);
  }
}

.clg-favorite-button__icon--animate {
  animation: clg-favorite-button-icon-pop 500ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .clg-favorite-button__icon--animate {
    animation: none;
  }
}

.clg-favorite-button {
  --clg-favorite-button-bg-color: unset;
  --clg-favorite-button-icon-color: unset;
  --clg-favorite-button-border-color: unset;
  --clg-favorite-button-border-width: unset;
  --clg-favorite-button-height: var(--clg-dimension-sem-interaction-base, 48px);
  --clg-favorite-button-width: var(--clg-dimension-sem-interaction-base, 48px);
  --clg-favorite-button-padding-vertical: var(
    --clg-dimension-app-button-favorite-padding-vertical,
    4px
  );
  --clg-favorite-button-padding-horizontal: var(
    --clg-dimension-app-button-favorite-padding-horizontal,
    4px
  );
  --clg-favorite-button-scale: scaleX(1) scaleY(1) perspective(1px);
  --clg-favorite-button-scale-hover: scaleX(1.015) scaleY(1.035)
    perspective(1px);
  --clg-favorite-button-scale-pressed: scale(0.99);
  --clg-favorite-button-icon-size: var(
    --clg-dimension-sem-icon-core-base,
    24px
  );
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--clg-effect-pal-z-index-100, 10);
  min-height: var(--clg-favorite-button-height);
  min-width: var(--clg-favorite-button-width);
  background: none;
  outline: none;
  border-radius: var(--clg-shape-app-button-border-radius, 24px);
  background-color: var(--clg-favorite-button-bg-color);
  border: var(--clg-favorite-button-border-color) solid
    var(--clg-favorite-button-border-width);
  color: var(--clg-favorite-button-icon-color);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}

:host(clg-favorite-button:not([disabled])) .clg-favorite-button:hover {
  transform: var(--clg-favorite-button-scale-hover);
  transition:
    transform var(--clg-effect-pal-duration-200, 200ms)
      cubic-bezier(0.345, 0.115, 0.135, 1.42),
    opacity var(--clg-effect-pal-duration-200, 200ms) ease-out;
}

:host(clg-favorite-button:not([disabled])) .clg-favorite-button:active {
  transform: var(--clg-favorite-button-scale-pressed);
}

:host([pseudo-focus]) .clg-favorite-button,
.clg-favorite-button:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible]) .clg-favorite-button,
.clg-favorite-button:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus]) .clg-favorite-button:not(:focus-visible),
.clg-favorite-button:focus:not(:focus-visible) {
  outline: none;
}

.clg-favorite-button__icon {
  display: inline-flex;
  font-size: var(--clg-dimension-sem-icon-core-base, 24px);
}

:host(clg-favorite-button[selected]) .clg-favorite-button__unselected-text,
:host(clg-favorite-button[selected]) svg[data-name="heart"] {
  display: none;
}

:host(clg-favorite-button:not([selected])) .clg-favorite-button__selected-text,
:host(clg-favorite-button:not([selected])) svg[data-name="heart_fill"] {
  display: none;
}

:host(clg-favorite-button) {
  display: inline-block;
}

:host(clg-favorite-button) .clg-favorite-button {
  --clg-favorite-button-bg-color: var(
    --clg-color-app-button-favorite-background,
    #faf8f5
  );
  --clg-favorite-button-border-color: var(
    --clg-color-app-button-favorite-border,
    #e0dad6
  );
  --clg-favorite-button-icon-color: var(
    --clg-color-app-button-favorite-icon,
    #312b36
  );
  --clg-favorite-button-border-width: var(
    --clg-shape-app-button-secondary-border-width,
    1px
  );
}

:host(clg-favorite-button) .clg-favorite-button:not(:disabled):active {
  --clg-favorite-button-bg-color: var(
    --clg-color-app-button-favorite-pressed-background,
    #d5cdc8
  );
  --clg-favorite-button-border-color: var(
    --clg-color-app-button-favorite-pressed-border,
    #e0dad6
  );
  --clg-favorite-button-icon-color: var(
    --clg-color-app-button-favorite-pressed-icon,
    #312b36
  );
}

:host(clg-favorite-button[selected]) .clg-favorite-button {
  --clg-favorite-button-bg-color: var(
    --clg-color-app-button-favorite-selected-background,
    #faf8f5
  );
  --clg-favorite-button-border-color: var(
    --clg-color-app-button-favorite-selected-border,
    #e0dad6
  );
  --clg-favorite-button-icon-color: var(
    --clg-color-app-button-favorite-selected-icon,
    #c7102f
  );
}

:host(clg-favorite-button[selected])
  .clg-favorite-button:not(:disabled):active {
  --clg-favorite-button-bg-color: var(
    --clg-color-app-button-favorite-selected-pressed-background,
    #d5cdc8
  );
  --clg-favorite-button-border-color: var(
    --clg-color-app-button-favorite-selected-pressed-border,
    #e0dad6
  );
  --clg-favorite-button-icon-color: var(
    --clg-color-app-button-favorite-selected-pressed-icon,
    #c7102f
  );
}

:host(clg-favorite-button[background-type="dark"]) .clg-favorite-button {
  --clg-favorite-button-bg-color: var(
    --clg-color-app-button-favorite-on-surface-dark-background,
    #312b36
  );
  --clg-favorite-button-border-color: var(
    --clg-color-app-button-favorite-on-surface-dark-border,
    #534d4c
  );
  --clg-favorite-button-icon-color: var(
    --clg-color-app-button-favorite-on-surface-dark-icon,
    #faf8f5
  );
}

:host(clg-favorite-button[background-type="dark"])
  .clg-favorite-button:not(:disabled):active {
  --clg-favorite-button-bg-color: var(
    --clg-color-app-button-favorite-on-surface-dark-pressed-background,
    #605957
  );
  --clg-favorite-button-border-color: var(
    --clg-color-app-button-favorite-on-surface-dark-pressed-border,
    #534d4c
  );
  --clg-favorite-button-icon-color: var(
    --clg-color-app-button-favorite-on-surface-dark-pressed-icon,
    #faf8f5
  );
}

:host(clg-favorite-button[selected][background-type="dark"])
  .clg-favorite-button {
  --clg-favorite-button-bg-color: var(
    --clg-color-app-button-favorite-on-surface-dark-selected-background,
    #312b36
  );
  --clg-favorite-button-border-color: var(
    --clg-color-app-button-favorite-on-surface-dark-selected-border,
    #534d4c
  );
  --clg-favorite-button-icon-color: var(
    --clg-color-app-button-favorite-on-surface-dark-selected-icon,
    #f58598
  );
}

:host(clg-favorite-button[selected][background-type="dark"])
  .clg-favorite-button:not(:disabled):active {
  --clg-favorite-button-bg-color: var(
    --clg-color-app-button-favorite-on-surface-dark-selected-pressed-background,
    #605957
  );
  --clg-favorite-button-border-color: var(
    --clg-color-app-button-favorite-on-surface-dark-selected-pressed-border,
    #534d4c
  );
  --clg-favorite-button-icon-color: var(
    --clg-color-app-button-favorite-on-surface-dark-selected-pressed-icon,
    #f58598
  );
}

:host(clg-favorite-button[size="small"]) .clg-favorite-button {
  --clg-favorite-button-height: var(
    --clg-dimension-app-button-icon-small-size,
    36px
  );
  --clg-favorite-button-width: var(
    --clg-dimension-app-button-icon-small-size,
    36px
  );
  --clg-favorite-button-padding-vertical: var(
    --clg-dimension-app-button-icon-padding-vertical,
    4px
  );
  --clg-favorite-button-padding-horizontal: var(
    --clg-dimension-app-button-icon-padding-horizontal,
    4px
  );
  --clg-dimension-sem-icon-core-base: var(
    --clg-dimension-sem-icon-core-smaller,
    16px
  );
}

:host(clg-icon-button) {
  display: inline-block;
}

.clg-icon-button {
  --clg-icon-button-height: var(--clg-dimension-sem-interaction-base, 48px);
  --clg-icon-button-width: var(--clg-dimension-sem-interaction-base, 48px);
  --clg-icon-button-border-color: unset;
  --clg-icon-button-border-width: var(
    --clg-shape-app-button-secondary-border-width,
    1px
  );
  font-size: var(--clg-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: var(--clg-icon-button-height);
  width: var(--clg-icon-button-width);
  text-align: center;
  text-decoration: none;
  border-radius: var(--clg-shape-app-button-border-radius, 24px);
  background-color: var(--clg-icon-button-bg-color);
  border: var(--clg-icon-button-border-color) solid
    var(--clg-icon-button-border-width);
  color: var(--clg-icon-button-icon-color);
  transition:
    scale
      var(
        --clg-effect-app-button-on-hover-scale-curve,
        cubic-bezier(0.3, 0, 0, 1)
      )
      var(--clg-effect-app-button-on-hover-scale-duration, 75ms),
    background-color
      var(--clg-effect-app-button-on-hover-fade-curve, cubic-bezier(0, 0, 1, 1))
      var(--clg-effect-app-button-on-hover-fade-duration, 25ms);
}

:host(clg-icon-button:not([disabled])) .clg-icon-button:hover {
  scale: var(--clg-effect-app-button-on-hover-scale-to, 1.01);
  color: var(--clg-icon-button-icon-color-hovered);
  background-color: var(--clg-icon-button-bg-color-hovered);
  border-color: var(--clg-icon-button-border-color-hovered);
}

:host(clg-icon-button:not([disabled])) .clg-icon-button:active {
  color: var(--clg-icon-button-icon-color-pressed);
  background-color: var(--clg-icon-button-bg-color-pressed);
  border-color: var(--clg-icon-button-border-color-pressed);
  scale: var(--clg-effect-app-button-on-press-scale-to, 0.94);
  transition:
    scale
      var(
        --clg-effect-app-button-on-press-scale-curve,
        cubic-bezier(0, 0, 0, 1)
      )
      var(--clg-effect-app-button-on-press-scale-duration, 100ms),
    background-color
      var(--clg-effect-app-button-on-press-fade-curve, cubic-bezier(0, 0, 1, 1))
      var(--clg-effect-app-button-on-press-fade-duration, 25ms);
}

:host(clg-icon-button:not([disabled])) .clg-icon-button[data-released] {
  transition:
    scale
      var(
        --clg-effect-app-button-on-release-scale-curve,
        cubic-bezier(0, 0, 0, 1)
      )
      var(--clg-effect-app-button-on-release-scale-duration, 150ms),
    background-color
      var(
        --clg-effect-app-button-on-release-fade-curve,
        cubic-bezier(0.3, 0, 0, 1)
      )
      var(--clg-effect-app-button-on-release-fade-duration, 150ms);
}

:host(clg-icon-button[disabled]) .clg-icon-button {
  cursor: not-allowed;
  color: var(--clg-icon-button-icon-color-disabled);
  background-color: var(--clg-icon-button-bg-color-disabled);
  border-color: var(--clg-icon-button-border-color-disabled);
}

:host([pseudo-focus]) .clg-icon-button,
.clg-icon-button:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible]) .clg-icon-button,
.clg-icon-button:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus]) .clg-icon-button:not(:focus-visible),
.clg-icon-button:focus:not(:focus-visible) {
  outline: none;
}

:host(clg-icon-button[size="small"]) .clg-icon-button {
  --clg-icon-button-height: var(
    --clg-dimension-app-button-icon-small-size,
    36px
  );
  --clg-icon-button-width: var(
    --clg-dimension-app-button-icon-small-size,
    36px
  );
  --clg-icon-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host(clg-icon-button[size="smallest"]) .clg-icon-button {
  --clg-icon-button-height: var(
    --clg-dimension-app-button-icon-smallest-size,
    24px
  );
  --clg-icon-button-width: var(
    --clg-dimension-app-button-icon-smallest-size,
    24px
  );
  --clg-icon-size: var(--clg-dimension-sem-icon-core-smallest, 12px);
}

:host(clg-icon-button[variant="primary"]) .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-primary-background,
    #312b36
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-primary-icon,
    #faf8f5
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-primary-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-primary-hovered-background,
    #534d4c
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-primary-hovered-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-primary-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-primary-pressed-background,
    #605957
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-primary-pressed-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-primary-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-primary-disabled-background,
    #c8bdb7
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-primary-disabled-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-primary-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-icon-button[variant="primary"][background-type="light"])
  .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-primary-on-surface-light-background,
    #312b36
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-primary-on-surface-light-icon,
    #faf8f5
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-primary-on-surface-light-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-primary-on-surface-light-hovered-background,
    #534d4c
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-primary-on-surface-light-hovered-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-primary-on-surface-light-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-primary-on-surface-light-pressed-background,
    #605957
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-primary-on-surface-light-pressed-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-primary-on-surface-light-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-primary-on-surface-light-disabled-background,
    #c8bdb7
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-primary-on-surface-light-disabled-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-primary-on-surface-light-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-icon-button[variant="primary"][background-type="dark"])
  .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-primary-on-surface-dark-background,
    #faf8f5
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-primary-on-surface-dark-icon,
    #312b36
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-primary-on-surface-dark-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-primary-on-surface-dark-hovered-background,
    #d5cdc8
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-primary-on-surface-dark-hovered-icon,
    #312b36
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-primary-on-surface-dark-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-primary-on-surface-dark-pressed-background,
    #c8bdb7
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-primary-on-surface-dark-pressed-icon,
    #312b36
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-primary-on-surface-dark-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-primary-on-surface-dark-disabled-background,
    #605957
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-primary-on-surface-dark-disabled-icon,
    #312b36
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-primary-on-surface-dark-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-icon-button[variant="secondary-strong"]) .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-secondary-strong-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-secondary-strong-icon,
    #312b36
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-secondary-strong-border,
    #312b36
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-secondary-strong-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-secondary-strong-hovered-icon,
    #312b36
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-secondary-strong-hovered-border,
    #312b36
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-pressed-icon,
    #312b36
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-pressed-border,
    #312b36
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-secondary-strong-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-secondary-strong-disabled-icon,
    #c8bdb7
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-secondary-strong-disabled-border,
    #c8bdb7
  );
}

:host(clg-icon-button[variant="secondary-strong"][background-type="light"])
  .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-icon,
    #312b36
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-border,
    #312b36
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-hovered-icon,
    #312b36
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-hovered-border,
    #312b36
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-pressed-icon,
    #312b36
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-pressed-border,
    #312b36
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-disabled-icon,
    #c8bdb7
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-light-disabled-border,
    #c8bdb7
  );
}

:host(clg-icon-button[variant="secondary-strong"][background-type="dark"])
  .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-icon,
    #faf8f5
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-border,
    #faf8f5
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-hovered-background,
    rgba(255, 255, 255, 0.1294117647)
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-hovered-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-hovered-border,
    #faf8f5
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-pressed-background,
    rgba(255, 255, 255, 0.3803921569)
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-pressed-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-pressed-border,
    #faf8f5
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-disabled-icon,
    #605957
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-secondary-strong-on-surface-dark-disabled-border,
    #605957
  );
}

:host(clg-icon-button[variant="secondary-subtle"]) .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-secondary-subtle-background,
    #faf8f5
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-secondary-subtle-icon,
    #312b36
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-secondary-subtle-border,
    #e0dad6
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-secondary-subtle-hovered-background,
    #efecea
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-secondary-subtle-hovered-icon,
    #312b36
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-secondary-subtle-hovered-border,
    #e0dad6
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-secondary-subtle-pressed-background,
    #d5cdc8
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-secondary-subtle-pressed-icon,
    #312b36
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-secondary-subtle-pressed-border,
    #e0dad6
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-secondary-subtle-disabled-background,
    #faf8f5
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-secondary-subtle-disabled-icon,
    #c8bdb7
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-secondary-subtle-disabled-border,
    #c8bdb7
  );
}

:host(clg-icon-button[variant="secondary-subtle"][background-type="light"])
  .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-background,
    #faf8f5
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-icon,
    #312b36
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-border,
    #e0dad6
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-hovered-background,
    #efecea
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-hovered-icon,
    #312b36
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-hovered-border,
    #e0dad6
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-pressed-background,
    #d5cdc8
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-pressed-icon,
    #312b36
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-pressed-border,
    #e0dad6
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-disabled-background,
    #faf8f5
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-disabled-icon,
    #c8bdb7
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-light-disabled-border,
    #c8bdb7
  );
}

:host(clg-icon-button[variant="secondary-subtle"][background-type="dark"])
  .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-background,
    #312b36
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-icon,
    #faf8f5
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-border,
    #534d4c
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-hovered-background,
    #534d4c
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-hovered-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-hovered-border,
    #534d4c
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-pressed-background,
    #605957
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-pressed-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-pressed-border,
    #534d4c
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-disabled-background,
    #312b36
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-disabled-icon,
    #605957
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-secondary-subtle-on-surface-dark-disabled-border,
    #605957
  );
}

:host(clg-icon-button[variant="tertiary"]) .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-tertiary-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-tertiary-icon,
    #312b36
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-tertiary-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-tertiary-hovered-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-tertiary-hovered-icon,
    #312b36
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-tertiary-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-tertiary-pressed-background,
    rgba(51, 20, 0, 0.2588235294)
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-tertiary-pressed-icon,
    #312b36
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-tertiary-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-tertiary-disabled-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-tertiary-disabled-icon,
    #c8bdb7
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-tertiary-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-icon-button[variant="tertiary"][background-type="light"])
  .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-icon,
    #312b36
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-hovered-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-hovered-icon,
    #312b36
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-pressed-background,
    rgba(51, 20, 0, 0.2588235294)
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-pressed-icon,
    #312b36
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-disabled-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-disabled-icon,
    #c8bdb7
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-tertiary-on-surface-light-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-icon-button[variant="tertiary"][background-type="dark"])
  .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-background,
    rgba(255, 255, 255, 0.1294117647)
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-icon,
    #faf8f5
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-hovered-background,
    rgba(255, 255, 255, 0.3803921569)
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-hovered-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-pressed-background,
    rgba(255, 255, 255, 0.5215686275)
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-pressed-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-disabled-background,
    rgba(255, 255, 255, 0.1294117647)
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-disabled-icon,
    #605957
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-tertiary-on-surface-dark-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-icon-button[variant="transparent"]) .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-transparent-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-transparent-icon,
    #312b36
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-transparent-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-transparent-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-transparent-hovered-icon,
    #312b36
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-transparent-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-transparent-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-transparent-pressed-icon,
    #312b36
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-transparent-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-transparent-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-transparent-disabled-icon,
    #c8bdb7
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-transparent-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-icon-button[variant="transparent"][background-type="light"])
  .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-transparent-on-surface-light-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-transparent-on-surface-light-icon,
    #312b36
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-transparent-on-surface-light-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-transparent-on-surface-light-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-transparent-on-surface-light-hovered-icon,
    #312b36
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-transparent-on-surface-light-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-transparent-on-surface-light-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-transparent-on-surface-light-pressed-icon,
    #312b36
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-transparent-on-surface-light-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-transparent-on-surface-light-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-transparent-on-surface-light-disabled-icon,
    #c8bdb7
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-transparent-on-surface-light-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-icon-button[variant="transparent"][background-type="dark"])
  .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-icon,
    #faf8f5
  );
  --clg-icon-button-border-color: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-hovered-background,
    rgba(255, 255, 255, 0.1294117647)
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-hovered-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-hovered: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-pressed-background,
    rgba(255, 255, 255, 0.3803921569)
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-pressed-icon,
    #faf8f5
  );
  --clg-icon-button-border-color-pressed: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-disabled-icon,
    #c8bdb7
  );
  --clg-icon-button-border-color-disabled: var(
    --clg-color-app-button-icon-transparent-on-surface-dark-disabled-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-icon-button[floating]) .clg-icon-button {
  box-shadow: var(
    --clg-effect-app-button-floating-shadow,
    0px 0px 24px 4px rgba(51, 20, 0, 0.2588235294)
  );
}

:host(clg-icon-button[floating][variant="secondary-strong"]) .clg-icon-button {
  --clg-icon-button-bg-color: var(
    --clg-color-sem-background-surface-secondary,
    #ffffff
  );
  --clg-icon-button-bg-color-hovered: var(
    --clg-color-sem-background-surface-secondary,
    #ffffff
  );
  --clg-icon-button-bg-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-icon-button-bg-color-disabled: var(
    --clg-color-sem-background-surface-secondary,
    #ffffff
  );
  --clg-icon-button-border-color: unset;
  --clg-icon-button-border-width: unset;
  --clg-icon-button-icon-color: var(
    --clg-color-app-button-icon-secondary-strong-icon,
    #312b36
  );
  --clg-icon-button-icon-color-hovered: var(
    --clg-color-app-button-icon-secondary-strong-hovered-icon,
    #312b36
  );
  --clg-icon-button-icon-color-pressed: var(
    --clg-color-app-button-icon-secondary-strong-pressed-icon,
    #312b36
  );
  --clg-icon-button-icon-color-disabled: var(
    --clg-color-app-button-icon-secondary-strong-disabled-icon,
    #c8bdb7
  );
}

.clg-logo-button {
  --clg-logo-button-bg-color: unset;
  --clg-logo-button-text-color: unset;
  --clg-logo-button-border-color: unset;
  --clg-logo-button-border-width: unset;
  --clg-logo-button-font-size: var(
    --clg-typography-sem-product-title-desktop-base-font-size,
    16px
  );
  --clg-logo-button-font-line-height: var(
    --clg-typography-sem-product-body-desktop-base-tight-line-height,
    20px
  );
  --clg-logo-button-height: var(--clg-dimension-sem-minimum-tap-target, 48px);
  --clg-logo-button-width: var(--clg-dimension-sem-interaction-base, 48px);
  --clg-logo-button-padding-vertical: var(
    --clg-dimension-app-button-padding-vertical,
    12px
  );
  --clg-logo-button-padding-horizontal: var(
    --clg-dimension-app-button-padding-horizontal,
    18px
  );
  --clg-logo-button-scale: scaleX(1) scaleY(1) perspective(1px);
  --clg-logo-button-scale-hover: scaleX(1.015) scaleY(1.035) perspective(1px);
  --clg-logo-button-scale-pressed: scale(0.99);
  display: inline-block;
  position: relative;
  vertical-align: middle;
  z-index: var(--clg-effect-pal-z-index-100, 10);
  min-height: var(--clg-logo-button-height);
  min-width: var(--clg-logo-button-width);
  padding: var(--clg-logo-button-padding-vertical)
    var(--clg-logo-button-padding-horizontal);
  font: inherit;
  font-size: var(--clg-logo-button-font-size);
  font-weight: var(
    --clg-typography-sem-product-title-desktop-base-font-weight,
    700
  );
  line-height: var(--clg-logo-button-font-line-height);
  text-align: center;
  text-decoration: none;
  background: none;
  outline: none;
  border-radius: var(--clg-shape-app-button-border-radius, 24px);
  background-color: var(--clg-logo-button-bg-color);
  border: var(--clg-logo-button-border-color) solid
    var(--clg-logo-button-border-width);
  color: var(--clg-logo-button-text-color);
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}

.clg-logo-button__content {
  display: flex;
  gap: var(--clg-dimension-pal-grid-050, 4px);
  justify-content: center;
  align-items: center;
}

:host(clg-logo-button:not([disabled])) .clg-logo-button:hover {
  transform: var(--clg-logo-button-scale-hover);
  transition:
    transform var(--clg-effect-pal-duration-200, 200ms)
      cubic-bezier(0.345, 0.115, 0.135, 1.42),
    opacity var(--clg-effect-pal-duration-200, 200ms) ease-out;
}

:host(clg-logo-button:not([disabled])) .clg-logo-button:active {
  transform: var(--clg-logo-button-scale-pressed);
}

:host([pseudo-focus]) .clg-logo-button,
.clg-logo-button:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible]) .clg-logo-button,
.clg-logo-button:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus]) .clg-logo-button:not(:focus-visible),
.clg-logo-button:focus:not(:focus-visible) {
  outline: none;
}

.clg-logo-button__spinner-frame {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clg-logo-button__spinner-frame .clg-logo-button__spinner--default,
.clg-logo-button__spinner-frame .clg-logo-button__spinner--light {
  display: none;
}

:host(clg-logo-button) {
  display: inline-block;
}

:host(clg-logo-button) .clg-logo-button {
  --clg-logo-button-padding-vertical: calc(
    var(--clg-dimension-pal-grid-100, 8px) -
      var(--clg-shape-app-button-secondary-border-width, 1px)
  );
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-secondary-background,
    rgba(0, 0, 0, 0)
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-secondary-border,
    #312b36
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-secondary-text,
    #312b36
  );
  --clg-logo-button-border-width: var(
    --clg-shape-app-button-secondary-border-width,
    1px
  );
}

:host(clg-logo-button[loading]) .clg-logo-button {
  cursor: progress;
  --clg-logo-button-border-color: var(
    --clg-color-app-button-secondary-disabled-border,
    #c8bdb7
  );
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-secondary-disabled-background,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-logo-button[loading]) .clg-logo-button__content {
  visibility: hidden;
}

:host(clg-logo-button:not([disabled])) .clg-logo-button:hover,
:host(clg-logo-button:not([disabled])) .clg-logo-button:focus-within,
:host(clg-logo-button:not([disabled])) .clg-logo-button:focus-visible {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-secondary-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-secondary-hovered-border,
    #312b36
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-secondary-hovered-text,
    #312b36
  );
}

:host(clg-logo-button:not([disabled])) .clg-logo-button:active {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-secondary-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-secondary-pressed-border,
    #312b36
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-secondary-pressed-text,
    #312b36
  );
}

:host(clg-logo-button[background-type="dark"]) .clg-logo-button {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-secondary-on-surface-dark-background,
    rgba(0, 0, 0, 0)
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-secondary-on-surface-dark-border,
    #faf8f5
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-secondary-on-surface-dark-text,
    #faf8f5
  );
}

:host(clg-logo-button[variant="apple-pay"]) .clg-logo-button__spinner--light,
:host(clg-logo-button[variant="google-pay"]) .clg-logo-button__spinner--light {
  display: inline-flex;
}

:host(clg-logo-button:not([variant])) .clg-logo-button__spinner--default,
:host(clg-logo-button[variant="payment"]) .clg-logo-button__spinner--default,
:host(clg-logo-button[variant="signin"]) .clg-logo-button__spinner--default {
  display: inline-flex;
}

:host(clg-logo-button[background-type="dark"]:not([disabled]))
  .clg-logo-button:hover,
:host(clg-logo-button[background-type="dark"]:not([disabled]))
  .clg-logo-button:focus-within,
:host(clg-logo-button[background-type="dark"]:not([disabled]))
  .clg-logo-button:focus-visible {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-secondary-on-surface-dark-hovered-background,
    rgba(255, 255, 255, 0.1294117647)
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-secondary-on-surface-dark-hovered-border,
    #faf8f5
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-secondary-on-surface-dark-hovered-text,
    #faf8f5
  );
}

:host(clg-logo-button[background-type="dark"]:not([disabled]))
  .clg-logo-button:active {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-secondary-on-surface-dark-pressed-background,
    rgba(255, 255, 255, 0.3803921569)
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-secondary-on-surface-dark-pressed-border,
    #faf8f5
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-secondary-on-surface-dark-pressed-text,
    #faf8f5
  );
}

:host(clg-logo-button[disabled]) .clg-logo-button {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-secondary-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-secondary-disabled-border,
    #c8bdb7
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-secondary-disabled-text,
    #c8bdb7
  );
}

:host(clg-logo-button[background-type="dark"][disabled]) .clg-logo-button {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-secondary-on-surface-dark-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-secondary-on-surface-dark-disabled-border,
    #605957
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-secondary-on-surface-dark-disabled-text,
    #605957
  );
}

:host(clg-logo-button) .clg-logo-button__apple-pay,
:host(clg-logo-button) .clg-logo-button__google-pay {
  display: none;
}

:host(clg-logo-button[variant="apple-pay"]) .clg-logo-button {
  --clg-logo-button-text-color: var(
    --clg-color-app-button-primary-text,
    #faf8f5
  );
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-primary-background,
    #312b36
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-primary-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-logo-button[variant="apple-pay"]) .clg-logo-button__apple-pay {
  display: inline-flex;
  --clg-logo-svg-width: auto;
  --clg-logo-svg-height: auto;
  width: 48px;
}

:host(clg-logo-button[variant="google-pay"]) .clg-logo-button {
  --clg-logo-button-text-color: var(
    --clg-color-app-button-primary-text,
    #faf8f5
  );
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-primary-background,
    #312b36
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-primary-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-logo-button[variant="google-pay"]) .clg-logo-button__google-pay {
  display: inline-flex;
  --clg-logo-svg-width: auto;
  --clg-logo-svg-height: auto;
  width: 58px;
}

:host(clg-logo-button[variant="apple-pay"][background-type="dark"])
  .clg-logo-button,
:host(clg-logo-button[variant="google-pay"][background-type="dark"])
  .clg-logo-button {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-primary-on-surface-dark-background,
    #faf8f5
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-primary-on-surface-dark-border,
    rgba(0, 0, 0, 0)
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-primary-on-surface-dark-text,
    #312b36
  );
}

:host(clg-logo-button[variant="apple-pay"][disabled]) .clg-logo-button,
:host(clg-logo-button[variant="google-pay"][disabled]) .clg-logo-button {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-primary-disabled-background,
    #c8bdb7
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-primary-disabled-border,
    rgba(0, 0, 0, 0)
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-primary-disabled-text,
    #faf8f5
  );
}

:host(clg-logo-button[variant="apple-pay"][background-type="dark"][disabled])
  .clg-logo-button,
:host(clg-logo-button[variant="google-pay"][background-type="dark"][disabled])
  .clg-logo-button {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-primary-on-surface-dark-disabled-background,
    #605957
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-primary-on-surface-dark-disabled-border,
    rgba(0, 0, 0, 0)
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-primary-on-surface-dark-disabled-text,
    #312b36
  );
}

:host(clg-logo-button[variant="apple-pay"]:not([disabled]))
  .clg-logo-button:hover,
:host(clg-logo-button[variant="apple-pay"]:not([disabled]))
  .clg-logo-button:focus-within,
:host(clg-logo-button[variant="apple-pay"]:not([disabled]))
  .clg-logo-button:focus-visible,
:host(clg-logo-button[variant="google-pay"]:not([disabled]))
  .clg-logo-button:hover,
:host(clg-logo-button[variant="google-pay"]:not([disabled]))
  .clg-logo-button:focus-within,
:host(clg-logo-button[variant="google-pay"]:not([disabled]))
  .clg-logo-button:focus-visible {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-primary-hovered-background,
    #534d4c
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-primary-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-primary-hovered-text,
    #faf8f5
  );
}

:host(clg-logo-button[variant="apple-pay"]:not([disabled]))
  .clg-logo-button:active,
:host(clg-logo-button[variant="google-pay"]:not([disabled]))
  .clg-logo-button:active {
  --clg-logo-button-bg-color: var(
    --clg-color-app-button-primary-pressed-background,
    #605957
  );
  --clg-logo-button-border-color: var(
    --clg-color-app-button-primary-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-logo-button-text-color: var(
    --clg-color-app-button-primary-pressed-text,
    #faf8f5
  );
}

:host(clg-text-button) {
  display: inline-block;
  --clg-text-button-height: var(--clg-dimension-sem-interaction-base, 48px);
  --clg-text-button-width: var(--clg-dimension-sem-interaction-base, 48px);
  --clg-text-button-padding-horizontal: 0px;
}

.clg-text-button {
  --clg-text-button-bg-color: unset;
  --clg-text-button-text-color: unset;
  --clg-text-button-border-color: var(
    --clg-color-app-button-transparent-on-surface-light-border,
    rgba(0, 0, 0, 0)
  );
  --clg-text-button-border-width: var(
    --clg-shape-app-button-transparent-border-width,
    0px
  );
  --clg-text-button-font-size: var(
    --clg-typography-sem-product-title-desktop-base-font-size,
    16px
  );
  --clg-text-button-font-line-height: var(
    --clg-typography-sem-product-body-desktop-base-tight-line-height,
    20px
  );
  --clg-text-button-scale: scaleX(0.7) scaleY(0.7) perspective(1px)
    rotate(0.0001deg);
  --clg-text-button-scale-hover: scaleX(1.015) scaleY(1.035) perspective(1px)
    rotate(0.0001deg);
  --clg-text-button-scale-pressed: scale(0.99);
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: middle;
  z-index: var(--clg-effect-pal-z-index-100, 10);
  width: 100%;
  min-height: var(--clg-text-button-height);
  min-width: var(--clg-text-button-width);
  padding-left: var(--clg-text-button-padding-horizontal);
  padding-right: var(--clg-text-button-padding-horizontal);
  font: inherit;
  font-size: var(--clg-text-button-font-size);
  font-weight: var(
    --clg-typography-sem-product-title-desktop-base-font-weight,
    700
  );
  line-height: var(--clg-text-button-font-line-height);
  text-align: center;
  text-decoration: none;
  background: none;
  outline: none;
  border-radius: var(--clg-shape-app-button-border-radius, 24px);
  border: 0;
  background-color: rgba(0, 0, 0, 0);
  color: var(--clg-text-button-text-color);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  appearance: none;
}

.clg-text-button:after {
  content: "";
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: var(--clg-text-button-scale);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: var(--clg-text-button-bg-color);
  transition:
    transform var(--clg-effect-pal-duration-200, 200ms)
      cubic-bezier(0.345, 0.115, 0.135, 1.42),
    background 150ms ease-out,
    box-shadow var(--clg-effect-pal-duration-200, 200ms) ease-out;
}

.clg-text-button:not(:disabled):hover:after,
.clg-text-button:not(:disabled):focus-visible:after {
  transform: var(--clg-text-button-scale-hover);
  text-decoration: none;
  opacity: 1;
}

:host([pseudo-focus]) .clg-text-button,
.clg-text-button:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible]) .clg-text-button,
.clg-text-button:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus]) .clg-text-button:not(:focus-visible),
.clg-text-button:focus:not(:focus-visible) {
  outline: none;
}

.clg-text-button__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--clg-dimension-app-button-gap, 6px);
  width: 100%;
}

.clg-text-button__spinner-frame {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

:host(clg-text-button[loading]) .clg-text-button {
  cursor: progress;
}

:host(clg-text-button[loading]) .clg-text-button__content {
  visibility: hidden;
}

:host(clg-text-button) .clg-text-button__spinner-frame__light-spinner,
:host(clg-text-button) .clg-text-button__spinner-frame__dark-spinner {
  display: none;
}

:host(clg-text-button:not([background-type="dark"])[loading])
  .clg-text-button__spinner-frame__dark-spinner {
  display: block;
}

:host(clg-text-button[background-type="dark"][loading])
  .clg-text-button__spinner-frame__light-spinner {
  display: block;
}

:host(clg-text-button[variant="primary"]) .clg-text-button {
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-primary-text,
    #426bdb
  );
  --clg-text-button-bg-color: var(
    --clg-color-app-button-transparent-on-surface-light-background,
    rgba(0, 0, 0, 0)
  );
  --clg-text-button-border-color: var(
    --clg-color-app-button-transparent-on-surface-light-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-text-button[variant="primary"]) .clg-text-button:focus-visible {
  box-shadow: none;
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-primary-hovered-text,
    #426bdb
  );
  --clg-text-button-border-color: var(
    --clg-color-app-button-focused-border,
    #426bdb
  );
}

:host(clg-text-button[variant="primary"]) .clg-text-button:active {
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-primary-pressed-text,
    #426bdb
  );
}

:host([pseudo-focus])
  :host(clg-text-button[variant="primary"])
  .clg-text-button,
:host(clg-text-button[variant="primary"]) .clg-text-button:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible])
  :host(clg-text-button[variant="primary"])
  .clg-text-button,
:host(clg-text-button[variant="primary"]) .clg-text-button:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus])
  :host(clg-text-button[variant="primary"])
  .clg-text-button:not(:focus-visible),
:host(clg-text-button[variant="primary"])
  .clg-text-button:focus:not(:focus-visible) {
  outline: none;
}

:host(clg-text-button[variant="primary"][background-type="dark"])
  .clg-text-button {
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-primary-on-surface-dark-text,
    #7c98e6
  );
  --clg-text-button-bg-color: var(
    --clg-color-app-button-transparent-on-surface-dark-background,
    rgba(0, 0, 0, 0)
  );
  --clg-text-button-border-color: var(
    --clg-color-app-button-transparent-on-surface-dark-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-text-button[variant="primary"][background-type="dark"])
  .clg-text-button:focus-visible {
  box-shadow: none;
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-primary-on-surface-dark-hovered-text,
    #7c98e6
  );
  --clg-text-button-border-color: var(
    --clg-color-app-button-focused-border,
    #426bdb
  );
}

:host(clg-text-button[variant="primary"][background-type="dark"])
  .clg-text-button:active {
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-primary-on-surface-dark-pressed-text,
    #7c98e6
  );
}

:host([pseudo-focus])
  :host(clg-text-button[variant="primary"][background-type="dark"])
  .clg-text-button,
:host(clg-text-button[variant="primary"][background-type="dark"])
  .clg-text-button:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible])
  :host(clg-text-button[variant="primary"][background-type="dark"])
  .clg-text-button,
:host(clg-text-button[variant="primary"][background-type="dark"])
  .clg-text-button:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus])
  :host(clg-text-button[variant="primary"][background-type="dark"])
  .clg-text-button:not(:focus-visible),
:host(clg-text-button[variant="primary"][background-type="dark"])
  .clg-text-button:focus:not(:focus-visible) {
  outline: none;
}

:host(clg-text-button[variant="secondary"]) .clg-text-button {
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-secondary-text,
    #312b36
  );
  --clg-text-button-bg-color: var(
    --clg-color-app-button-transparent-on-surface-light-background,
    rgba(0, 0, 0, 0)
  );
  --clg-text-button-border-color: var(
    --clg-color-app-button-transparent-on-surface-light-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-text-button[variant="secondary"]) .clg-text-button:focus-visible {
  box-shadow: none;
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-secondary-hovered-text,
    #312b36
  );
  --clg-text-button-border-color: var(
    --clg-color-app-button-focused-border,
    #426bdb
  );
}

:host(clg-text-button[variant="secondary"]) .clg-text-button:active {
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-secondary-pressed-text,
    #312b36
  );
}

:host([pseudo-focus])
  :host(clg-text-button[variant="secondary"])
  .clg-text-button,
:host(clg-text-button[variant="secondary"]) .clg-text-button:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible])
  :host(clg-text-button[variant="secondary"])
  .clg-text-button,
:host(clg-text-button[variant="secondary"]) .clg-text-button:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus])
  :host(clg-text-button[variant="secondary"])
  .clg-text-button:not(:focus-visible),
:host(clg-text-button[variant="secondary"])
  .clg-text-button:focus:not(:focus-visible) {
  outline: none;
}

:host(clg-text-button[variant="secondary"][background-type="dark"])
  .clg-text-button {
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-secondary-on-surface-dark-text,
    #faf8f5
  );
  --clg-text-button-bg-color: var(
    --clg-color-app-button-transparent-on-surface-dark-background,
    rgba(0, 0, 0, 0)
  );
  --clg-text-button-border-color: var(
    --clg-color-app-button-transparent-on-surface-dark-border,
    rgba(0, 0, 0, 0)
  );
}

:host(clg-text-button[variant="secondary"][background-type="dark"])
  .clg-text-button:focus-visible {
  box-shadow: none;
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-secondary-on-surface-dark-hovered-text,
    #faf8f5
  );
  --clg-text-button-border-color: var(
    --clg-color-app-button-focused-border,
    #426bdb
  );
}

:host(clg-text-button[variant="secondary"][background-type="dark"])
  .clg-text-button:active {
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-secondary-on-surface-dark-pressed-text,
    #faf8f5
  );
}

:host([pseudo-focus])
  :host(clg-text-button[variant="secondary"][background-type="dark"])
  .clg-text-button,
:host(clg-text-button[variant="secondary"][background-type="dark"])
  .clg-text-button:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible])
  :host(clg-text-button[variant="secondary"][background-type="dark"])
  .clg-text-button,
:host(clg-text-button[variant="secondary"][background-type="dark"])
  .clg-text-button:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus])
  :host(clg-text-button[variant="secondary"][background-type="dark"])
  .clg-text-button:not(:focus-visible),
:host(clg-text-button[variant="secondary"][background-type="dark"])
  .clg-text-button:focus:not(:focus-visible) {
  outline: none;
}

:host(clg-text-button[variant="primary"][disabled]) .clg-text-button,
:host(clg-text-button[variant="secondary"][disabled]) .clg-text-button {
  cursor: not-allowed;
}

:host(clg-text-button[variant="primary"][disabled])
  .clg-text-button
  ::slotted(.wt-icon),
:host(clg-text-button[variant="secondary"][disabled])
  .clg-text-button
  ::slotted(.wt-icon) {
  opacity: 0.5;
}

:host(clg-text-button[variant="primary"][disabled]) .clg-text-button {
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-primary-disabled-text,
    #c8bdb7
  );
}

:host(clg-text-button[variant="secondary"][disabled]) .clg-text-button {
  --clg-text-button-text-color: var(
    --clg-color-app-button-text-secondary-disabled-text,
    #c8bdb7
  );
}

:host(clg-text-button[fillwidth]),
:host(clg-text-button[fillwidth]) .clg-text-button {
  width: 100%;
}

:host(clg-text-button[size="small"]) .clg-text-button {
  --clg-text-button-font-line-height: var(
    --clg-typography-sem-product-body-desktop-small-line-height,
    16px
  );
  --clg-text-button-font-size: var(
    --clg-typography-sem-product-body-desktop-small-font-size,
    14px
  );
  --clg-text-button-height: var(--clg-dimension-sem-interaction-small, 36px);
  --clg-text-button-width: var(--clg-dimension-sem-interaction-small, 36px);
}

:host(clg-text-button[underline]) .clg-text-button {
  text-decoration: underline;
}

:host(clg-text-button[flush~="top"]) .clg-text-button {
  align-items: flex-start;
}

:host(clg-text-button[flush~="bottom"]) .clg-text-button {
  align-items: flex-end;
}

:host(clg-text-button[flush~="left"]) .clg-text-button__content {
  justify-content: flex-start;
}

:host(clg-text-button[flush~="right"]) .clg-text-button__content {
  justify-content: flex-end;
}

:host(clg-text-button[padding][flush~="left"]) .clg-text-button {
  padding-left: 0;
}

:host(clg-text-button[padding][flush~="right"]) .clg-text-button {
  padding-right: 0;
}

:host(clg-text-button:not([underline]):not([disabled])) .clg-text-button:hover,
:host(clg-text-button:not([underline]):not([disabled]))
  .clg-text-button:focus-visible {
  text-decoration: underline;
}

:host(clg-text-button[padding]) {
  --clg-text-button-padding-horizontal: var(--clg-dimension-pal-grid-100, 8px);
}

:host(clg-card) {
  display: block;
  --clg-card-background-color: transparent;
  --clg-card-orientation: unset;
  --clg-card-gap: unset;
  --clg-card-border-color: transparent;
  --clg-card-image-padding: 0;
  --clg-card-content-padding: 0;
}

.clg-card {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: var(--clg-card-orientation);
  gap: var(--clg-card-gap);
  background-color: var(--clg-card-background-color);
  border: var(--clg-shape-sem-border-width-thin, 1px) solid
    var(--clg-card-border-color);
  border-radius: var(--clg-shape-sem-border-radius-card, 8px);
  background-clip: padding-box;
  overflow: hidden;
}

.clg-card:has(.clg-card__link[href]):hover {
  cursor: pointer;
}

.clg-card:has(.clg-card__link:focus-visible) {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

.clg-card__image {
  padding: var(--clg-card-image-padding);
  align-self: stretch;
}

.clg-card__content {
  display: var(--clg-card-content-display, block);
  padding: var(--clg-card-content-padding);
}

.clg-card__link {
  text-decoration: none;
  color: inherit;
  outline: none;
}

.clg-card__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.clg-card ::slotted(*) {
  position: relative;
  z-index: var(--clg-effect-pal-z-index-100, 10);
}

:host(clg-card[image-layout="top"]) .clg-card {
  --clg-card-orientation: column;
  --clg-card-gap: var(
    --clg-dimension-app-card-container-default-vertical-gap,
    4px
  );
  align-items: center;
}

:host(clg-card[image-layout="start"]) .clg-card,
:host(clg-card[image-layout="end"]) .clg-card {
  --clg-card-orientation: row;
  --clg-card-gap: var(--clg-dimension-app-card-horizontal-gap, 12px);
  align-items: flex-start;
}

:host(clg-card[image-layout="end"]) .clg-card {
  --clg-card-orientation: row-reverse;
  justify-content: space-between;
}

:host(clg-card[container="elevated"][image-layout="start"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: var(--clg-color-sem-border-divider, #e0dad6);
  --clg-card-image-padding: 0;
  --clg-card-content-padding: var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px) 0;
}

:host(clg-card[container="elevated"][image-layout="end"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: var(--clg-color-sem-border-divider, #e0dad6);
  --clg-card-image-padding: 0;
  --clg-card-content-padding: var(--clg-dimension-app-card-padding, 12px) 0
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px);
}

:host(clg-card[container="elevated"][image-layout="top"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: var(--clg-color-sem-border-divider, #e0dad6);
  --clg-card-image-padding: 0;
  --clg-card-content-padding: 0 var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px);
}

:host(clg-card[container="elevated"][image-layout="top"]) .clg-card {
  --clg-card-gap: var(--clg-dimension-app-card-vertical-gap, 12px);
}

:host(clg-card[container="elevated-padded"][image-layout="start"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: var(--clg-color-sem-border-divider, #e0dad6);
  --clg-card-image-padding: var(--clg-dimension-app-card-padding, 12px) 0
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px);
  --clg-card-content-padding: var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px) 0;
}

:host(clg-card[container="elevated-padded"][image-layout="end"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: var(--clg-color-sem-border-divider, #e0dad6);
  --clg-card-image-padding: var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px) 0;
  --clg-card-content-padding: var(--clg-dimension-app-card-padding, 12px) 0
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px);
}

:host(clg-card[container="elevated-padded"][image-layout="top"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: var(--clg-color-sem-border-divider, #e0dad6);
  --clg-card-image-padding: var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px) 0
    var(--clg-dimension-app-card-padding, 12px);
  --clg-card-content-padding: 0 var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px);
}

:host(clg-card[container="elevated-padded"][image-layout="top"]) .clg-card {
  --clg-card-gap: var(--clg-dimension-app-card-vertical-gap, 12px);
}

:host(clg-card[container="elevated-no-border"][image-layout="start"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: transparent;
  --clg-card-image-padding: 0;
  --clg-card-content-padding: var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px) 0;
}

:host(clg-card[container="elevated-no-border"][image-layout="end"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: transparent;
  --clg-card-image-padding: 0;
  --clg-card-content-padding: var(--clg-dimension-app-card-padding, 12px) 0
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px);
}

:host(clg-card[container="elevated-no-border"][image-layout="top"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: transparent;
  --clg-card-image-padding: 0;
  --clg-card-content-padding: 0 var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px);
}

:host(clg-card[container="elevated-no-border"][image-layout="top"]) .clg-card {
  --clg-card-gap: var(--clg-dimension-app-card-vertical-gap, 12px);
}

:host(clg-card[container="elevated-padded-no-border"][image-layout="start"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: transparent;
  --clg-card-image-padding: var(--clg-dimension-app-card-padding, 12px) 0
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px);
  --clg-card-content-padding: var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px) 0;
}

:host(clg-card[container="elevated-padded-no-border"][image-layout="end"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: transparent;
  --clg-card-image-padding: var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px) 0;
  --clg-card-content-padding: var(--clg-dimension-app-card-padding, 12px) 0
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px);
}

:host(clg-card[container="elevated-padded-no-border"][image-layout="top"]) {
  --clg-card-background-color: var(
    --clg-color-sem-background-elevation-1,
    #ffffff
  );
  --clg-card-border-color: transparent;
  --clg-card-image-padding: var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px) 0
    var(--clg-dimension-app-card-padding, 12px);
  --clg-card-content-padding: 0 var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px)
    var(--clg-dimension-app-card-padding, 12px);
}

:host(clg-card[container="elevated-padded-no-border"][image-layout="top"])
  .clg-card {
  --clg-card-gap: var(--clg-dimension-app-card-vertical-gap, 12px);
}

:host(clg-slot-card) {
  display: block;
}

.clg-slot-card {
  position: relative;
  display: block;
  padding: var(--clg-dimension-app-card-padding, 12px);
  min-height: var(--clg-dimension-sem-minimum-tap-target, 48px);
  min-width: var(--clg-dimension-sem-minimum-tap-target, 48px);
  background-color: var(--clg-color-sem-background-elevation-1, #ffffff);
  border-radius: var(--clg-shape-sem-border-radius-card, 8px);
  border: var(--clg-shape-sem-border-width-thin, 1px) solid
    var(--clg-color-sem-background-elevation-1, #ffffff);
}

.clg-slot-card:has(.clg-slot-card__link[href]):hover {
  cursor: pointer;
}

.clg-slot-card:has(.clg-slot-card__link:focus-visible) {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host(clg-slot-card[border]) .clg-slot-card {
  border-color: var(--clg-color-sem-border-divider, #e0dad6);
}

.clg-slot-card[aria-disabled] {
  color: var(--clg-color-sem-text-disabled, #c8bdb7);
  cursor: not-allowed;
}

.clg-slot-card__link {
  text-decoration: none;
  color: inherit;
  outline: none;
}

.clg-slot-card__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.clg-slot-card ::slotted(*) {
  position: relative;
  z-index: var(--clg-effect-pal-z-index-100, 10);
}

:host(clg-card-group) {
  display: block;
  --clg-card-group-card-width: calc(
    var(--clg-dimension-pal-grid-1300, 104px) +
      var(--clg-dimension-pal-grid-700, 56px)
  );
}

:host(clg-card-group[size="small"]) {
  --clg-card-group-card-width: var(--clg-dimension-pal-grid-1300, 104px);
}

:host(clg-card-group[size="large"]) {
  --clg-card-group-card-width: 390px;
}

.clg-card-group__header {
  margin-bottom: var(--clg-dimension-pal-grid-100, 8px);
}

:host(clg-card-group:not([with-header])) .clg-card-group__header {
  display: none;
}

.clg-card-group__content {
  display: flex;
  flex-direction: row;
  gap: var(--clg-dimension-pal-grid-100, 8px);
}

.clg-card-group__content ::slotted(*) {
  flex: 0 0 var(--clg-card-group-card-width);
}

:host(clg-card-group[overflow="wrap"]) .clg-card-group__content {
  flex-wrap: wrap;
}

:host(clg-card-group[overflow="scroll"]) .clg-card-group__content {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

:host(clg-card-group[overflow="scroll"]) .clg-card-group__content ::slotted(*) {
  scroll-snap-align: start;
}

:host(clg-card-group[image-position="only"])
  .clg-card-group__content
  ::slotted(*) {
  --clg-card-content-display: none;
  --clg-card-gap: 0;
}

@keyframes clg-carousel-dots-track-shift {
  from {
    transform: translateX(var(--clg-carousel-dots-track-shift));
  }

  to {
    transform: translateX(0);
  }
}

:host(clg-carousel-dots) {
  display: block;
  text-align: center;
}

:host(clg-carousel-dots:is([item-count="0"], [item-count="1"])) {
  display: none;
}

.clg-carousel-dots {
  display: inline-flex;
  padding: var(--clg-dimension-app-carousel-dots-v2-padding-vertical, 6px)
    var(--clg-dimension-app-carousel-dots-v2-padding-horizontal, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--clg-dimension-app-carousel-dots-v2-gap, 6px);
  border-radius: var(
    --clg-shape-app-carousel-dots-v2-border-container-border-radius,
    8px
  );
  background: var(
    --clg-color-app-carousel-dots-v2-container-background,
    rgba(35, 20, 16, 0.6196078431)
  );
}

:host(clg-carousel-dots[item-count="2"]) .clg-carousel-dots {
  min-width: 42px;
}

:host(clg-carousel-dots[item-count="3"]) .clg-carousel-dots {
  min-width: 52px;
}

:host(clg-carousel-dots[item-count="4"]) .clg-carousel-dots {
  min-width: 62px;
}

:host(
    clg-carousel-dots:not(
      :is(
        [item-count="0"],
        [item-count="1"],
        [item-count="2"],
        [item-count="3"],
        [item-count="4"]
      )
    )
  )
  .clg-carousel-dots {
  min-width: 72px;
}

.clg-carousel-dots--has-buffers {
  max-width: 72px;
  justify-content: flex-start;
}

.clg-carousel-dots__track {
  display: contents;
}

.clg-carousel-dots--has-buffers .clg-carousel-dots__track {
  display: flex;
  align-items: center;
  gap: var(--clg-dimension-app-carousel-dots-v2-gap, 6px);
  overflow: hidden;
}

.clg-carousel-dots--has-buffers .clg-carousel-dots__dot:first-child {
  margin-left: calc(
    -1 * var(--clg-dimension-app-carousel-dots-v2-size, 4px) -
      var(--clg-dimension-app-carousel-dots-v2-gap, 6px)
  );
}

.clg-carousel-dots__dot {
  display: flex;
  position: relative;
  width: var(--clg-dimension-app-carousel-dots-v2-size, 4px);
  height: var(--clg-dimension-app-carousel-dots-v2-size, 4px);
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  background-color: var(
    --clg-color-app-carousel-dots-v2-inactive-background,
    #ffffff
  );
  color: var(--clg-color-sem-text-on-surface-dark, #faf8f5);
  --clg-icon-size: 6px;
  --clg-icon-fill-color: var(--clg-color-sem-text-on-surface-dark, #faf8f5);
  transition:
    width var(--clg-effect-pal-duration-300, 300ms)
      var(--clg-effect-pal-curve-long-tail, cubic-bezier(0.3, 0, 0, 1)),
    background-color var(--clg-effect-pal-duration-300, 300ms)
      var(--clg-effect-pal-curve-long-tail, cubic-bezier(0.3, 0, 0, 1)),
    transform var(--clg-effect-pal-duration-300, 300ms)
      var(--clg-effect-pal-curve-long-tail, cubic-bezier(0.3, 0, 0, 1));
}

.clg-carousel-dots__dot--active {
  width: var(--clg-dimension-app-carousel-dots-v2-progress-bar-width, 16px);
  background-color: var(
    --clg-color-app-carousel-dots-v2-active-background,
    #ffffff
  );
}

.clg-carousel-dots__dot--small {
  transform: scale(0.75);
}

.clg-carousel-dots__dot--video:not(.clg-carousel-dots__dot--active) {
  background-color: rgba(0, 0, 0, 0);
}

.clg-carousel-dots__dot clg-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  transition:
    opacity var(--clg-effect-pal-duration-100, 100ms)
      var(--clg-effect-pal-curve-symmetrical-out, cubic-bezier(0.5, 0, 1, 1)),
    transform var(--clg-effect-pal-duration-100, 100ms)
      var(--clg-effect-pal-curve-symmetrical-out, cubic-bezier(0.5, 0, 1, 1));
}

.clg-carousel-dots__dot--video:not(.clg-carousel-dots__dot--active) clg-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity var(--clg-effect-pal-duration-100, 100ms)
      var(--clg-effect-pal-curve-symmetrical-out, cubic-bezier(0.5, 0, 1, 1))
      var(--clg-effect-pal-duration-100, 100ms),
    transform var(--clg-effect-pal-duration-100, 100ms)
      var(--clg-effect-pal-curve-symmetrical-out, cubic-bezier(0.5, 0, 1, 1))
      var(--clg-effect-pal-duration-100, 100ms);
}

.clg-carousel-dots__track--shifting {
  animation: clg-carousel-dots-track-shift
    var(--clg-effect-pal-duration-300, 300ms)
    var(--clg-effect-pal-curve-long-tail, cubic-bezier(0.3, 0, 0, 1));
}

@media (prefers-reduced-motion: reduce) {
  .clg-carousel-dots__dot,
  .clg-carousel-dots__dot clg-icon {
    transition: none;
  }

  .clg-carousel-dots__track--shifting {
    animation: none;
  }
}

.clg-carousel-dots:not(.clg-carousel-dots--has-buffers)
  .clg-carousel-dots__dot:nth-child(n + 6) {
  display: none;
}

:host(clg-carousel-dots[item-count="2"])
  .clg-carousel-dots:not(.clg-carousel-dots--has-buffers)
  .clg-carousel-dots__dot:nth-child(n + 3) {
  display: none;
}

:host(clg-carousel-dots[item-count="3"])
  .clg-carousel-dots:not(.clg-carousel-dots--has-buffers)
  .clg-carousel-dots__dot:nth-child(n + 4) {
  display: none;
}

:host(clg-carousel-dots[item-count="4"])
  .clg-carousel-dots:not(.clg-carousel-dots--has-buffers)
  .clg-carousel-dots__dot:nth-child(n + 5) {
  display: none;
}

:host(clg-checkbox) {
  display: block;
}

.clg-checkbox {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.clg-checkbox__label {
  display: inline-flex;
  align-items: center;
  min-height: var(--clg-dimension-sem-minimum-tap-target, 48px);
  cursor: pointer;
}

:host(clg-checkbox[disabled]) .clg-checkbox__label {
  cursor: not-allowed;
}

:host(clg-checkbox[size="small"]) .clg-checkbox,
:host(clg-checkbox[size="small"]) .clg-checkbox__label {
  min-height: var(--clg-dimension-sem-interaction-smallest, 24px);
}

.clg-checkbox__inner {
  display: flex;
  align-items: start;
}

:host(:not([hide-label])) .clg-checkbox__inner {
  gap: var(--clg-dimension-pal-grid-100, 8px);
}

.clg-checkbox__label-text {
  display: block;
  align-self: center;
}

.clg-checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.clg-checkbox__input:focus,
.clg-checkbox__input:focus-visible {
  outline: 0;
}

:host(clg-checkbox[with-caption]) .clg-checkbox__after,
:host(clg-checkbox[caption]) .clg-checkbox__after,
:host(clg-checkbox[invalid]) .clg-checkbox__after {
  margin-top: var(--clg-dimension-pal-grid-050, 4px);
}

clg-checkbox-square {
  width: var(--clg-dimension-app-input-selectable-size, 32px);
  height: var(--clg-dimension-app-input-selectable-size, 32px);
}

clg-checkbox-square[size="small"] {
  width: var(--clg-dimension-app-input-selectable-small-size, 20px);
  height: var(--clg-dimension-app-input-selectable-small-size, 20px);
}

:host(clg-checkbox-group) {
  display: block;
  --clg-checkbox-group-gap: 0;
}

.clg-checkbox-group {
  --clg-checkbox-group-direction: column;
  margin: 0;
  padding: 0;
  border: none;
}

:host(clg-checkbox-group:not([hide-label])) .clg-checkbox-group__before {
  margin-bottom: var(--clg-dimension-pal-grid-050, 4px);
}

:host(clg-checkbox-group[size="small"]) .clg-checkbox-group__before {
  margin-bottom: var(--clg-dimension-pal-grid-100, 8px);
}

:host(clg-checkbox-group[with-caption]) .clg-checkbox-group__after,
:host(clg-checkbox-group[caption]) .clg-checkbox-group__after,
:host(clg-checkbox-group[invalid]) .clg-checkbox-group__after {
  margin-top: var(--clg-dimension-pal-grid-100, 8px);
}

.clg-checkbox-group__content {
  display: flex;
  flex-direction: var(--clg-checkbox-group-direction);
  align-items: flex-start;
  gap: var(--clg-checkbox-group-gap);
}

.clg-checkbox-group__legend {
  display: contents;
}

:host(clg-checkbox-group[size="small"]) .clg-checkbox-group {
  --clg-checkbox-group-gap: var(--clg-dimension-pal-grid-100, 8px);
}

:host(clg-checkbox-group[orientation="horizontal"])
  .clg-checkbox-group__content {
  --clg-checkbox-group-direction: row;
  --clg-checkbox-group-gap: var(--clg-dimension-pal-grid-200, 16px);
}

@keyframes clg-checkbox-check-scale-beat1 {
  from {
    scale: var(--clg-effect-app-checkbox-selected-scale-1-from, 0.6);
  }

  to {
    scale: var(--clg-effect-app-checkbox-selected-scale-1-to, 1.1);
  }
}

@keyframes clg-checkbox-check-scale-beat2 {
  from {
    scale: var(--clg-effect-app-checkbox-selected-scale-2-from, 1.1);
  }

  to {
    scale: var(--clg-effect-app-checkbox-selected-scale-2-to, 1);
  }
}

@keyframes clg-checkbox-uncheck-scale {
  from {
    scale: var(--clg-effect-app-checkbox-unselected-scale-from, 1);
  }

  to {
    scale: var(--clg-effect-app-checkbox-unselected-scale-to, 0.7);
  }
}

.clg-checkbox-square {
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  width: var(--clg-dimension-app-input-selectable-size, 32px);
  height: var(--clg-dimension-app-input-selectable-size, 32px);
  background-color: var(
    --clg-color-app-input-selectable-background,
    rgba(0, 0, 0, 0)
  );
  border-radius: var(--clg-shape-app-input-checkbox-border-radius, 2px);
  border: var(--clg-shape-app-input-border-width, 1px) solid
    var(--clg-color-app-input-border, #928681);
}

.clg-checkbox-square__check {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--clg-color-app-input-selectable-selected-text, #faf8f5);
  scale: 0;
  opacity: 0;
  font-size: var(
    --clg-dimension-app-input-selectable-checkbox-indicator-size,
    24px
  );
}

:host([disabled]) .clg-checkbox-square__check {
  color: var(--clg-color-app-input-disabled-text, #736b68);
}

.clg-checkbox-square--animate {
  transition: background-color
    var(--clg-effect-app-checkbox-unselected-fade-duration, 75ms)
    var(
      --clg-effect-app-checkbox-unselected-fade-curve,
      cubic-bezier(0, 0, 1, 1)
    );
}

:host([checked]) .clg-checkbox-square--animate {
  transition: background-color
    var(--clg-effect-app-checkbox-selected-fade-duration, 25ms)
    var(--clg-effect-app-checkbox-selected-fade-curve, cubic-bezier(0, 0, 1, 1));
}

.clg-checkbox-square--animate .clg-checkbox-square__check {
  animation: clg-checkbox-uncheck-scale
    var(--clg-effect-app-checkbox-unselected-fade-duration, 75ms)
    var(
      --clg-effect-app-checkbox-unselected-scale-curve,
      cubic-bezier(0, 0, 0, 1)
    )
    forwards;
  transition: opacity
    var(--clg-effect-app-checkbox-unselected-fade-duration, 75ms)
    var(
      --clg-effect-app-checkbox-unselected-fade-curve,
      cubic-bezier(0, 0, 1, 1)
    );
}

:host([checked]) .clg-checkbox-square--animate .clg-checkbox-square__check {
  transition: opacity
    var(--clg-effect-app-checkbox-selected-fade-duration, 25ms)
    var(--clg-effect-app-checkbox-selected-fade-curve, cubic-bezier(0, 0, 1, 1));
  animation:
    clg-checkbox-check-scale-beat1
      var(--clg-effect-app-checkbox-selected-scale-1-duration, 150ms)
      var(
        --clg-effect-app-checkbox-selected-scale-1-curve,
        cubic-bezier(0, 0, 0.5, 1)
      )
      forwards,
    clg-checkbox-check-scale-beat2
      var(--clg-effect-app-checkbox-selected-scale-2-duration, 200ms)
      var(
        --clg-effect-app-checkbox-selected-scale-2-curve,
        cubic-bezier(0.5, 0, 0.5, 1)
      )
      var(--clg-effect-app-checkbox-selected-scale-1-duration, 150ms) forwards;
}

:host(clg-checkbox-square[focused]) .clg-checkbox-square {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(--clg-focus-ring-offset, 0);
  border-color: rgba(0, 0, 0, 0);
}

:host(clg-checkbox-square[checked]) .clg-checkbox-square {
  background-color: var(
    --clg-color-app-input-selectable-selected-background,
    #312b36
  );
  border-color: var(--clg-color-app-input-selectable-selected-border, #312b36);
}

:host(clg-checkbox-square[checked]) .clg-checkbox-square__check {
  scale: var(--clg-effect-app-checkbox-selected-scale-2-to, 1);
  opacity: 1;
}

:host(clg-checkbox-square[checked][focused]) .clg-checkbox-square {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host(clg-checkbox-square[disabled]) .clg-checkbox-square {
  cursor: not-allowed;
  background-color: var(--clg-color-app-input-disabled-background, #efecea);
  border-color: var(--clg-color-app-input-disabled-border, #928681);
}

:host(clg-checkbox-square[invalid]:not([disabled])) .clg-checkbox-square {
  background-color: var(--clg-color-app-input-error-background, #fdecef);
  border-color: var(
    --clg-color-app-input-selectable-error-selected-border,
    #c7102f
  );
}

:host(clg-checkbox-square[invalid][focused]) .clg-checkbox-square {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(
      --clg-focus-ring-color,
      var(--clg-color-app-input-selectable-error-selected-border, #c7102f)
    );
  outline-offset: var(--clg-focus-ring-offset, 0);
  border-color: rgba(0, 0, 0, 0);
}

:host(clg-checkbox-square[invalid][checked]:not([disabled]))
  .clg-checkbox-square {
  background-color: var(
    --clg-color-app-input-selectable-error-selected-background,
    #c7102f
  );
  border-color: var(
    --clg-color-app-input-selectable-error-selected-border,
    #c7102f
  );
}

:host(clg-checkbox-square[invalid][focused][checked]) .clg-checkbox-square {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(
      --clg-focus-ring-color,
      var(--clg-color-app-input-selectable-error-selected-border, #c7102f)
    );
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host(clg-checkbox-square[size="small"]) .clg-checkbox-square {
  width: var(--clg-dimension-app-input-selectable-small-size, 20px);
  height: var(--clg-dimension-app-input-selectable-small-size, 20px);
}

:host(clg-checkbox-square[size="small"]) .clg-checkbox-square__check {
  font-size: var(
    --clg-dimension-app-input-selectable-checkbox-small-indicator-size,
    12px
  );
}

:host(clg-float) {
  display: contents;
  --clg-float-arrow-size: 6px;
  --clg-float-arrow-size-diagonal: calc(var(--clg-float-arrow-size) / sqrt(2));
  --clg-float-slide-offset: var(--clg-dimension-pal-grid-050, 4px);
  --clg-float-show-duration: var(--clg-effect-pal-duration-300, 300ms);
  --clg-float-hide-duration: var(--clg-effect-pal-duration-300, 300ms);
}

.clg-float {
  display: contents;
}

@keyframes clg-float-show {
  from {
    opacity: 0;
    transform: var(--clg-float-closed-transform, translate(0));
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.clg-float__popup {
  z-index: var(--clg-effect-pal-z-index-100, 10);
  position: absolute;
  isolation: isolate;
  max-width: var(--clg-float-auto-size-available-width, none);
  max-height: var(--clg-float-auto-size-available-height, none);
}

.clg-float__popup:where([popover]) {
  inset: unset;
  padding: unset;
  margin: unset;
  width: unset;
  height: unset;
  color: unset;
  background: unset;
  border: unset;
  overflow: unset;
}

.clg-float__popup--fixed {
  position: fixed;
}

.clg-float__popup:not([hidden]) {
  display: block;
}

.clg-float-show {
  animation: clg-float-show var(--clg-float-show-duration)
    cubic-bezier(0.175, 0.745, 0.425, 1.11);
}

.clg-float-hide {
  animation: clg-float-show var(--clg-float-hide-duration)
    cubic-bezier(0.175, 0.745, 0.425, 1.11) reverse;
}

:host([data-current-placement^="top"]) .clg-float__popup {
  --clg-float-closed-transform: translateY(var(--clg-float-slide-offset));
}

:host([data-current-placement^="bottom"]) .clg-float__popup {
  --clg-float-closed-transform: translateY(
    calc(-1 * var(--clg-float-slide-offset))
  );
}

:host([data-current-placement^="left"]) .clg-float__popup {
  --clg-float-closed-transform: translateX(var(--clg-float-slide-offset));
}

:host([data-current-placement^="right"]) .clg-float__popup {
  --clg-float-closed-transform: translateX(
    calc(-1 * var(--clg-float-slide-offset))
  );
}

@media (prefers-reduced-motion: reduce) {
  .clg-float__popup {
    --clg-float-show-duration: 0s;
    --clg-float-hide-duration: 0s;
  }
}

.clg-float__arrow {
  position: absolute;
  width: var(--clg-float-arrow-width, var(--clg-float-arrow-size));
  height: var(--clg-float-arrow-height, var(--clg-float-arrow-size));
  background: var(--clg-float-arrow-color, inherit);
  transform: var(--clg-float-arrow-transform, rotate(45deg));
  clip-path: var(--clg-float-arrow-clip-path, none);
}

.clg-float__arrow[data-side="top"] {
  bottom: calc(
    var(--clg-float-arrow-offset, var(--clg-float-arrow-size-diagonal)) * -1
  );
  transform: var(
    --clg-float-arrow-transform-top,
    var(--clg-float-arrow-transform, rotate(45deg))
  );
}

.clg-float__arrow[data-side="bottom"] {
  top: calc(
    var(--clg-float-arrow-offset, var(--clg-float-arrow-size-diagonal)) * -1
  );
  transform: var(
    --clg-float-arrow-transform-bottom,
    var(--clg-float-arrow-transform, rotate(45deg))
  );
}

.clg-float__arrow[data-side="left"] {
  right: calc(
    var(--clg-float-arrow-offset, var(--clg-float-arrow-size-diagonal)) * -1
  );
  transform: var(
    --clg-float-arrow-transform-left,
    var(--clg-float-arrow-transform, rotate(45deg))
  );
  width: var(
    --clg-float-arrow-width-horizontal,
    var(--clg-float-arrow-width, var(--clg-float-arrow-size))
  );
  height: var(
    --clg-float-arrow-height-horizontal,
    var(--clg-float-arrow-height, var(--clg-float-arrow-size))
  );
  clip-path: var(
    --clg-float-arrow-clip-path-left,
    var(--clg-float-arrow-clip-path, none)
  );
}

.clg-float__arrow[data-side="right"] {
  left: calc(
    var(--clg-float-arrow-offset, var(--clg-float-arrow-size-diagonal)) * -1
  );
  transform: var(
    --clg-float-arrow-transform-right,
    var(--clg-float-arrow-transform, rotate(45deg))
  );
  width: var(
    --clg-float-arrow-width-horizontal,
    var(--clg-float-arrow-width, var(--clg-float-arrow-size))
  );
  height: var(
    --clg-float-arrow-height-horizontal,
    var(--clg-float-arrow-height, var(--clg-float-arrow-size))
  );
  clip-path: var(
    --clg-float-arrow-clip-path-right,
    var(--clg-float-arrow-clip-path, none)
  );
}

.clg-float__arrow[placement="anchor"][data-side="top"],
.clg-float__arrow[placement="anchor"][data-side="bottom"] {
  left: var(--clg-float-arrow-x);
}

.clg-float__arrow[placement="anchor"][data-side="left"],
.clg-float__arrow[placement="anchor"][data-side="right"] {
  top: var(--clg-float-arrow-y);
}

.clg-float__arrow[placement="start"][data-side="top"],
.clg-float__arrow[placement="start"][data-side="bottom"] {
  left: calc(
    var(--clg-float-arrow-padding) - var(--clg-float-arrow-padding-offset, 0px)
  );
}

.clg-float__arrow[placement="start"][data-side="left"],
.clg-float__arrow[placement="start"][data-side="right"] {
  top: calc(
    var(--clg-float-arrow-padding) - var(--clg-float-arrow-padding-offset, 0px)
  );
}

.clg-float__arrow[placement="end"][data-side="top"],
.clg-float__arrow[placement="end"][data-side="bottom"] {
  right: calc(
    var(--clg-float-arrow-padding) - var(--clg-float-arrow-padding-offset, 0px)
  );
}

.clg-float__arrow[placement="end"][data-side="left"],
.clg-float__arrow[placement="end"][data-side="right"] {
  bottom: calc(
    var(--clg-float-arrow-padding) - var(--clg-float-arrow-padding-offset, 0px)
  );
}

.clg-float__arrow[placement="center"][data-side="top"],
.clg-float__arrow[placement="center"][data-side="bottom"] {
  left: calc(50% - var(--clg-float-arrow-size-diagonal));
}

.clg-float__arrow[placement="center"][data-side="left"],
.clg-float__arrow[placement="center"][data-side="right"] {
  top: calc(50% - var(--clg-float-arrow-size-diagonal));
}

.clg-float__hover-bridge {
  display: none;
  position: fixed;
  inset: 0;
  clip-path: polygon(
    var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
    var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
    var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
    var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
  );
}

:host(clg-float[active][hover-bridge]) .clg-float__hover-bridge {
  display: block;
}

.clg-form-label-decorator {
  display: inline;
}

.clg-form-label-decorator::after {
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

:host([required]) .clg-form-label-decorator::after {
  content: var(--clg-form-label-required-content, "*");
  color: var(--clg-color-sem-text-critical, #c7102f);
  vertical-align: text-top;
}

:host([optional]:not([required])) .clg-form-label-decorator::after {
  content: attr(data-optional-text);
}

.clg-form-label-decorator__sr-required,
.clg-form-label-decorator__sr-optional {
  display: none;
}

:host([required]) .clg-form-label-decorator__sr-required {
  display: inline;
}

:host([optional]:not([required])) .clg-form-label-decorator__sr-optional {
  display: inline;
}

.clg-form-field__label {
  display: flex;
  align-items: center;
  padding: 0;
}

:host([background-type="light"]) .clg-form-field__label {
  color: var(--clg-color-sem-text-on-surface-light, #312b36);
}

:host([background-type="dark"]) .clg-form-field__label {
  color: var(--clg-color-sem-text-on-surface-dark, #faf8f5);
}

.clg-form-field__label__text {
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
}

:host([variant="subtle"]) .clg-form-field__label__text {
  font-family: var(--clg-typography-sem-product-body-base-font-family);
  font-weight: var(--clg-typography-sem-product-body-base-font-weight);
  font-size: var(--clg-typography-sem-product-body-base-font-size);
  line-height: var(--clg-typography-sem-product-body-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-base-letter-spacing);
}

:host([disabled]) .clg-form-field__label__text {
  color: var(--clg-color-sem-text-disabled, #c8bdb7);
}

:host([size="small"]) .clg-form-field__label__text {
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

.clg-form-field__label__optional,
.clg-form-field__label__required-star {
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

.clg-form-field__label__optional {
  display: none;
}

:host([optional]:not([required])) .clg-form-field__label__optional {
  display: inline;
}

.clg-form-field__label__required-star,
.clg-form-field__label__required-text {
  display: none;
}

:host([required]) .clg-form-field__label__required-star,
:host([required]) .clg-form-field__label__required-text {
  display: inline;
}

.clg-form-field__label__required-star {
  color: var(--clg-color-sem-text-critical, #c7102f);
  align-self: flex-start;
  margin-left: var(--clg-dimension-pal-grid-025, 2px);
}

:host([hide-label]) .clg-form-field__label {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.clg-form-field__helper-text {
  margin-top: var(--clg-dimension-pal-grid-025, 2px);
}

:host([hide-helper-text]) .clg-form-field__helper-text {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.clg-form-field__error {
  color: var(--clg-color-app-input-error-text, #c7102f);
  transition: opacity var(--clg-effect-pal-duration-200, 200ms) ease-in;
  margin: 0;
}

.clg-form-field__error svg {
  font-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
  vertical-align: middle;
  position: relative;
  bottom: 2px;
}

.clg-form-field__helper-text,
.clg-form-field__caption,
.clg-form-field__error {
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

.clg-form-field__helper-text,
.clg-form-field__caption {
  color: var(--clg-color-sem-text-secondary, #665e5c);
}

:host(:not([with-helper-text]):not([helper-text])) .clg-form-field__helper-text,
:host(:not([with-caption]):not([caption])) .clg-form-field__caption,
:host([invalid]) .clg-form-field__caption {
  display: none;
}

.clg-brand-icon {
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.clg-brand-icon svg {
  display: block;
  fill: var(--clg-icon-fill-color, currentColor);
  height: var(--clg-icon-size, var(--clg-dimension-sem-icon-brand-base, 96px));
  width: var(--clg-icon-size, var(--clg-dimension-sem-icon-brand-base, 96px));
  aspect-ratio: 1/1;
}

:host(clg-icon) svg {
  display: block;
  fill: var(--clg-icon-fill-color, currentColor);
  height: var(--clg-icon-size, var(--clg-dimension-sem-icon-core-base, 24px));
  width: var(--clg-icon-size, var(--clg-dimension-sem-icon-core-base, 24px));
  aspect-ratio: 1/1;
}

:host(clg-dot-indicator) {
  display: inline-block;
}

.clg-dot-indicator {
  --clg-dot-indicator-background-color: unset;
  display: inline-block;
  border-radius: var(--clg-shape-app-button-border-radius, 24px);
  height: var(--clg-dimension-app-indicator-dot-size, 8px);
  width: var(--clg-dimension-app-indicator-dot-size, 8px);
  background-color: var(--clg-dot-indicator-background-color);
}

:host(clg-dot-indicator[color="important"]) .clg-dot-indicator {
  --clg-dot-indicator-background-color: var(
    --clg-color-app-indicator-important-background
  );
}

:host(clg-dot-indicator[color="highlight"]) .clg-dot-indicator {
  --clg-dot-indicator-background-color: var(
    --clg-color-app-indicator-highlight-background
  );
}

:host(clg-dot-indicator[border]) .clg-dot-indicator {
  border: var(--clg-shape-app-indicator-border-width, 1px) solid
    var(--clg-color-app-indicator-border, #faf8f5);
}

:host(clg-status-indicator) {
  display: inline-block;
}

.clg-status-indicator {
  --clg-status-indicator-bg-color: unset;
  --clg-status-indicator-text-color: unset;
  --clg-status-indicator-min-width: var(
    --clg-dimension-app-signal-minimum-height
  );
  --clg-status-indicator-padding-vertical: var(
    --clg-dimension-app-signal-padding-vertical
  );
  --clg-status-indicator-padding-horizontal: var(
    --clg-dimension-app-signal-padding-horizontal
  );
  display: inline-flex;
  min-height: var(--clg-dimension-app-signal-minimum-height, 20px);
  padding: var(--clg-status-indicator-padding-vertical)
    var(--clg-status-indicator-padding-horizontal);
  justify-content: center;
  align-items: center;
  gap: var(--clg-dimension-app-signal-gap, 3px);
  border-radius: var(--clg-shape-app-signal-border-radius, 16px);
  background-color: var(--clg-status-indicator-bg-color);
  color: var(--clg-status-indicator-text-color);
  font-family: var(--clg-typography-sem-product-title-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-title-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-title-smallest-font-size);
  line-height: var(--clg-typography-sem-product-title-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-title-smallest-letter-spacing
  );
}

:host(clg-status-indicator[color="success"]) .clg-status-indicator {
  --clg-status-indicator-bg-color: var(
    --clg-color-app-indicator-success-background
  );
  --clg-status-indicator-text-color: var(
    --clg-color-app-indicator-success-text
  );
}

:host(clg-status-indicator[color="warning"]) .clg-status-indicator {
  --clg-status-indicator-bg-color: var(
    --clg-color-app-indicator-warning-background
  );
  --clg-status-indicator-text-color: var(
    --clg-color-app-indicator-warning-text
  );
}

:host(clg-status-indicator[color="critical"]) .clg-status-indicator {
  --clg-status-indicator-bg-color: var(
    --clg-color-app-indicator-critical-background
  );
  --clg-status-indicator-text-color: var(
    --clg-color-app-indicator-critical-text
  );
}

:host(clg-status-indicator[size="large"]) .clg-status-indicator {
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
  --clg-status-indicator-min-width: var(
    --clg-dimension-app-signal-large-minimum-height
  );
  --clg-status-indicator-padding-vertical: var(
    --clg-dimension-app-signal-large-padding-vertical
  );
  --clg-status-indicator-padding-horizontal: var(
    --clg-dimension-app-signal-large-padding-horizontal
  );
}

:host(clg-counter-indicator) {
  display: inline-block;
}

.clg-counter-indicator {
  --clg-counter-indicator-bg-color: var(
    --clg-color-app-indicator-background,
    #efecea
  );
  --clg-counter-indicator-text-color: var(
    --clg-color-app-indicator-text,
    #312b36
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--clg-dimension-app-signal-minimum-height, 20px);
  min-width: var(--clg-dimension-app-signal-minimum-height, 20px);
  padding: var(--clg-dimension-app-signal-padding-vertical, 3px)
    var(--clg-dimension-app-signal-padding-horizontal, 6px);
  border-radius: var(--clg-shape-app-signal-border-radius, 16px);
  background-color: var(--clg-counter-indicator-bg-color);
  color: var(--clg-counter-indicator-text-color);
  font-family: var(--clg-typography-sem-product-body-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-body-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-body-smallest-font-size);
  line-height: var(--clg-typography-sem-product-body-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-body-smallest-letter-spacing
  );
}

:host(clg-counter-indicator[priority="neutral"]) .clg-counter-indicator {
  --clg-counter-indicator-bg-color: var(
    --clg-color-app-indicator-background,
    #efecea
  );
  --clg-counter-indicator-text-color: var(
    --clg-color-app-indicator-text,
    #312b36
  );
}

:host(clg-counter-indicator[priority="informational"]) .clg-counter-indicator {
  --clg-counter-indicator-bg-color: var(
    --clg-color-sem-background-surface-expressive-orange-lightest,
    #ffe0c3
  );
  --clg-counter-indicator-text-color: var(
    --clg-color-sem-text-on-surface-light,
    #312b36
  );
}

:host(clg-counter-indicator[priority="highlight"]) .clg-counter-indicator {
  --clg-counter-indicator-bg-color: var(
    --clg-color-app-indicator-highlight-background,
    #426bdb
  );
  --clg-counter-indicator-text-color: var(
    --clg-color-app-indicator-highlight-text,
    #faf8f5
  );
}

:host(clg-counter-indicator[priority="important"]) .clg-counter-indicator {
  --clg-counter-indicator-bg-color: var(
    --clg-color-app-indicator-important-background,
    #cf4018
  );
  --clg-counter-indicator-text-color: var(
    --clg-color-app-indicator-important-text,
    #faf8f5
  );
}

:host(clg-counter-indicator[size="large"]) .clg-counter-indicator {
  font-size: var(--clg-typography-sem-product-body-smaller-font-size);
  line-height: var(--clg-typography-sem-product-body-smaller-line-height);
  min-height: var(--clg-dimension-app-signal-large-minimum-height, 28px);
  min-width: var(--clg-dimension-app-signal-large-minimum-height, 28px);
  padding: var(--clg-dimension-app-signal-large-padding-vertical, 4px)
    var(--clg-dimension-app-signal-large-padding-horizontal, 8px);
  border-radius: var(--clg-shape-app-signal-large-border-radius, 16px);
}

:host(clg-counter-indicator[border]) .clg-counter-indicator {
  border: var(--clg-shape-app-indicator-border-width, 1px) solid
    var(--clg-color-app-indicator-border, #faf8f5);
}

.clg-counter-indicator__value {
  display: inline-block;
}

:host(clg-list) {
  display: block;
  --clg-list-gap: calc(
    var(--clg-dimension-app-list-padding-vertical, 12px) * 2
  );
}

.clg-list {
  --clg-list-direction: column;
}

.clg-list__content {
  display: flex;
  flex-direction: var(--clg-list-direction);
  gap: var(--clg-list-gap);
  padding-bottom: calc(var(--clg-list-gap) / 2);
}

.clg-list__label {
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
}

.clg-list__label ::slotted([slot="title"]) {
  font: inherit;
  margin: 0 var(--clg-dimension-sem-spacing-page-margin, 32px);
}

:host(clg-list[size="small"]) {
  --clg-list-gap: calc(
    var(--clg-dimension-app-list-padding-vertical, 12px) / 2
  );
  min-height: var(--clg-dimension-sem-interaction-small, 36px);
}

:host(clg-list[size="large"]) {
  --clg-list-gap: calc(
    var(--clg-dimension-app-list-padding-vertical, 12px) * 4
  );
}

.clg-list-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:host(clg-list-item[divider]) .clg-list-item::after {
  content: "";
  position: absolute;
  margin: 0;
  bottom: calc(var(--clg-list-gap, 0px) / -2);
  left: 0;
  right: 0;
  border-bottom: var(--clg-shape-sem-border-width-thin, 1px) solid
    var(--clg-color-sem-border-divider, #e0dad6);
}

:host(clg-logo) svg {
  display: block;
  width: var(--clg-logo-svg-width, 100%);
  height: var(--clg-logo-svg-height, 100%);
  fill: currentColor;
}

.clg-cascading-list-item__submenu {
  display: flex;
  flex-direction: column;
  width: min(
    var(--clg-menu-width, var(--clg-dimension-app-menu-width-base, 208px)),
    100vw
  );
  background: var(--clg-color-app-menu-background, #ffffff);
  color: var(--clg-color-app-menu-item-text, #312b36);
  border-radius: var(--clg-shape-app-menu-border-radius, 8px);
  box-shadow: var(
    --clg-effect-sem-shadow-elevation-3,
    0px 8px 16px 0px rgba(21, 10, 4, 0.0392156863),
    0px 12px 20px 2px rgba(21, 10, 4, 0.0588235294)
  );
  overflow: hidden;
}

.clg-cascading-list-item__submenu-inner {
  max-height: var(--clg-dimension-app-menu-max-height, 320px);
  overflow-y: auto;
}

:host(clg-menu) {
  display: contents;
}

:host(clg-menu[width="narrow"]) .clg-menu {
  --clg-menu-width: var(--clg-dimension-app-menu-width-narrow, 160px);
}

:host(clg-menu[width="wide"]) .clg-menu {
  --clg-menu-width: var(--clg-dimension-app-menu-width-wide, 320px);
}

.clg-menu__body {
  display: flex;
  flex-direction: column;
  width: min(
    var(--clg-menu-width, var(--clg-dimension-app-menu-width-base, 208px)),
    100vw
  );
  background: var(--clg-color-app-menu-background, #ffffff);
  color: var(--clg-color-app-menu-item-text, #312b36);
  border-radius: var(--clg-shape-app-menu-border-radius, 8px);
  box-shadow: var(
    --clg-effect-sem-shadow-elevation-3,
    0px 8px 16px 0px rgba(21, 10, 4, 0.0392156863),
    0px 12px 20px 2px rgba(21, 10, 4, 0.0588235294)
  );
  overflow: hidden;
}

.clg-menu__body-inner {
  overflow-y: auto;
  max-height: var(--clg-dimension-app-menu-max-height, 320px);
}

:host(clg-radio) {
  --clg-radio-focus-ring-offset: 0;
  --clg-radio-height: var(--clg-dimension-sem-minimum-tap-target, 48px);
  --clg-radio-padding: var(--clg-dimension-pal-grid-100, 8px);
  display: flex;
  align-items: center;
  min-height: var(--clg-radio-height);
}

.clg-radio {
  display: block;
}

:host(clg-radio) .clg-radio {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--clg-radio-padding);
  padding-bottom: var(--clg-radio-padding);
}

:host(clg-radio) .clg-radio__control {
  display: inline-flex;
  flex-direction: row;
}

:host(clg-radio) .clg-radio__label {
  display: flex;
  flex-direction: row;
  gap: var(--clg-dimension-pal-grid-100, 8px);
  align-items: center;
  color: var(--clg-color-sem-text-primary, #312b36);
  cursor: pointer;
}

:host(clg-radio) .clg-radio__label-text {
  font-family: var(--clg-typography-sem-product-body-base-font-family);
  font-weight: var(--clg-typography-sem-product-body-base-font-weight);
  font-size: var(--clg-typography-sem-product-body-base-font-size);
  line-height: var(--clg-typography-sem-product-body-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-base-letter-spacing);
}

:host(:focus-visible) {
  outline: none;
}

:host(clg-radio[checked]:focus-visible),
:host(clg-radio[checked][data-storybook-focus-visible]) {
  --clg-radio-focus-ring-offset: calc(
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host(:focus-visible) .clg-radio__label__circle,
:host(clg-radio[data-storybook-focus-visible]) .clg-radio__label__circle {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-radio-focus-ring-offset)
  );
  display: inline-flex;
  border-radius: 50%;
}

:host(clg-radio[invalid]:focus-visible) .clg-radio__label__circle,
:host(clg-radio[invalid][data-storybook-focus-visible])
  .clg-radio__label__circle {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-critical, #c7102f));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-radio-focus-ring-offset)
  );
}

:host(clg-radio[background-type="light"]) .clg-radio__label {
  color: var(--clg-color-sem-text-on-surface-light, #312b36);
}

:host(clg-radio[background-type="dark"]) .clg-radio__label {
  color: var(--clg-color-sem-text-on-surface-dark, #faf8f5);
}

:host(clg-radio[disabled]) .clg-radio__label {
  color: var(--clg-color-sem-text-disabled, #c8bdb7);
  cursor: not-allowed;
}

:host(clg-radio[position="end"]) {
  width: 100%;
}

:host(clg-radio[position="end"]) .clg-radio__label {
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
}

:host(clg-radio[size="small"]) {
  --clg-radio-height: calc(
    var(--clg-dimension-sem-minimum-tap-target, 48px) * 0.5
  );
  --clg-radio-padding: calc(
    var(--clg-dimension-pal-grid-050, 4px) +
      var(--clg-dimension-pal-grid-025, 2px)
  );
}

:host(clg-radio[size="small"]) .clg-radio__label-text {
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

.clg-radio-circle {
  position: relative;
}

:host(clg-radio-circle) .clg-radio-circle {
  --clg-radio-circle-background-color: var(
    --clg-color-app-input-selectable-background,
    rgba(0, 0, 0, 0)
  );
  --clg-radio-circle-dot-color: var(
    --clg-color-app-input-selectable-selected-text,
    #faf8f5
  );
  --clg-radio-circle-border-color: var(
    --clg-color-app-input-selectable-border,
    #928681
  );
  width: var(
    --clg-radio-circle-size,
    var(--clg-dimension-app-input-selectable-size, 32px)
  );
  height: var(
    --clg-radio-circle-size,
    var(--clg-dimension-app-input-selectable-size, 32px)
  );
  background-color: var(--clg-radio-circle-background-color);
  border-radius: 50%;
  border: calc(
      var(--clg-shape-pal-border-width-100, 1px) +
        var(--clg-shape-pal-border-width-050, 0.5px)
    )
    solid var(--clg-radio-circle-border-color);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:host(clg-radio-circle) .clg-radio-circle__dot {
  width: var(
    --clg-radio-circle-dot-size,
    var(--clg-dimension-app-input-selectable-radio-indicator-size, 16px)
  );
  height: var(
    --clg-radio-circle-dot-size,
    var(--clg-dimension-app-input-selectable-radio-indicator-size, 16px)
  );
  border-radius: 16px;
  background-color: var(--clg-radio-circle-dot-color);
  display: none;
}

:host(clg-radio-circle[checked]) .clg-radio-circle__dot {
  display: inline-block;
}

:host(clg-radio-circle[checked]) .clg-radio-circle,
:host(clg-radio-circle[checked]) .clg-radio-circle {
  --clg-radio-circle-background-color: var(
    --clg-color-app-input-selectable-selected-background,
    #312b36
  );
  --clg-radio-circle-dot-color: var(
    --clg-color-app-input-selectable-selected-text,
    #faf8f5
  );
  --clg-radio-circle-border-color: var(
    --clg-color-app-input-selectable-selected-border,
    #312b36
  );
}

:host(clg-radio-circle[background-type="dark"]) .clg-radio-circle {
  --clg-radio-circle-background-color: var(
    --clg-color-app-input-selectable-selected-background,
    #312b36
  );
  --clg-radio-circle-dot-color: var(
    --clg-color-app-input-selectable-selected-background,
    #312b36
  );
}

:host(clg-radio-circle[checked][background-type="dark"]) .clg-radio-circle {
  --clg-radio-circle-background-color: var(
    --clg-color-app-input-selectable-selected-text,
    #faf8f5
  );
  --clg-radio-circle-dot-color: var(
    --clg-color-app-input-selectable-selected-background,
    #312b36
  );
  --clg-radio-circle-border-color: var(
    --clg-color-app-input-selectable-selected-border,
    #312b36
  );
}

:host(clg-radio-circle[size="small"]) {
  --clg-radio-circle-size: var(
    --clg-dimension-app-input-selectable-small-size,
    20px
  );
  --clg-radio-circle-dot-size: var(
    --clg-dimension-app-input-selectable-radio-small-indicator-size,
    8px
  );
}

:host(clg-radio-circle[invalid]) .clg-radio-circle {
  --clg-radio-circle-background-color: var(
    --clg-color-app-input-error-background,
    #fdecef
  );
  --clg-radio-circle-border-color: var(
    --clg-color-app-input-selectable-error-selected-border,
    #c7102f
  );
}

:host(clg-radio-circle[invalid][background-type="dark"]) .clg-radio-circle {
  --clg-radio-circle-background-color: var(
    --clg-color-app-input-selectable-error-selected-border,
    #c7102f
  );
  --clg-radio-circle-border-color: var(
    --clg-color-app-input-error-background,
    #fdecef
  );
}

:host(clg-radio-circle[invalid][checked]) .clg-radio-circle {
  --clg-radio-circle-background-color: var(
    --clg-color-app-input-selectable-error-selected-background,
    #c7102f
  );
  --clg-radio-circle-border-color: var(
    --clg-color-app-input-selectable-error-selected-border,
    #c7102f
  );
}

:host(clg-radio-circle[disabled]) .clg-radio-circle {
  --clg-radio-circle-background-color: var(
    --clg-color-app-input-disabled-background,
    #efecea
  );
  --clg-radio-circle-border-color: var(
    --clg-color-app-input-disabled-border,
    #928681
  );
  --clg-radio-circle-dot-color: var(
    --clg-color-app-input-disabled-text,
    #736b68
  );
}

:host(clg-radio-group) {
  display: block;
  --clg-radio-group-direction: column;
  --clg-radio-group-gap: 0;
}

:host([orientation="horizontal"]) {
  --clg-radio-group-direction: row;
  --clg-radio-group-gap: var(--clg-dimension-pal-grid-200, 16px);
}

.clg-radio-group {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
}

:host(clg-radio-group:not([hide-label])) .clg-radio-group__label {
  padding-bottom: var(--clg-dimension-pal-grid-100, 8px);
}

.clg-radio-group__content {
  display: flex;
  flex-direction: var(--clg-radio-group-direction);
  gap: var(--clg-radio-group-gap);
}

:host(clg-scroll-overlay) {
  display: block;
}

.clg-scroll-overlay {
  --clg-scroll-overlay-gradient-width: var(--clg-dimension-pal-grid-1200, 96px);
  --clg-scroll-overlay-left-gradient: linear-gradient(
    -90deg,
    var(--clg-color-app-transparent-gradient-start, rgba(255, 255, 255, 0)) 0%,
    var(--clg-color-app-transparent-gradient-end, #faf8f5) 75%
  );
  --clg-scroll-overlay-right-gradient: linear-gradient(
    90deg,
    var(--clg-color-app-transparent-gradient-start, rgba(255, 255, 255, 0)) 0%,
    var(--clg-color-app-transparent-gradient-end, #faf8f5) 75%
  );
  position: relative;
  width: 100%;
  overflow: hidden;
  timeline-scope: --clg-scroll-overlay-timeline;
}

.clg-scroll-overlay::before,
.clg-scroll-overlay::after {
  content: "";
  position: absolute;
  top: var(--_scroll-area-top, 0px);
  height: var(--_scroll-area-height, 100%);
  width: var(--clg-scroll-overlay-gradient-width);
  pointer-events: none;
  z-index: 1;
}

.clg-scroll-overlay::before {
  left: 0;
  background: var(--clg-scroll-overlay-left-gradient);
}

.clg-scroll-overlay::after {
  right: 0;
  background: var(--clg-scroll-overlay-right-gradient);
}

@supports (animation-timeline: scroll()) {
  .clg-scroll-overlay::before {
    animation: fade-in linear both;
    animation-timeline: --clg-scroll-overlay-timeline;
    animation-range: 0px var(--clg-scroll-overlay-gradient-width);
  }

  .clg-scroll-overlay::after {
    animation: fade-out linear both;
    animation-timeline: --clg-scroll-overlay-timeline;
    animation-range: calc(100% - var(--clg-scroll-overlay-gradient-width)) 100%;
  }
}

:host(clg-scroll-overlay:not([has-inner-container]))
  .clg-scroll-overlay
  .clg-scroll-overlay__scroll-content {
  position: relative;
  display: flex;
  white-space: nowrap;
  flex-wrap: nowrap;
  scroll-snap-type: x mandatory;
  scroll-padding-left: calc(
    var(--clg-scroll-overlay-gradient-width) +
      var(--clg-dimension-pal-grid-500, 40px)
  );
  overflow: scroll hidden;
  scroll-timeline: --clg-scroll-overlay-timeline inline;
  scrollbar-width: none;
}

:host(clg-scroll-overlay:not([has-inner-container]))
  .clg-scroll-overlay
  .clg-scroll-overlay__scroll-content::-webkit-scrollbar {
  display: none;
}

:host(clg-scroll-overlay[hide-left-button]) .clg-scroll-overlay {
  --clg-scroll-overlay-left-gradient: 0;
}

:host(clg-scroll-overlay[hide-right-button]) .clg-scroll-overlay {
  --clg-scroll-overlay-right-gradient: 0;
}

.clg-scroll-overlay__shield {
  position: absolute;
  top: var(--_scroll-area-top, 0px);
  height: var(--_scroll-area-height, 100%);
  width: calc(
    var(--clg-dimension-pal-grid-100, 8px) +
      var(--clg-dimension-sem-minimum-tap-target, 48px)
  );
  z-index: 2;
  pointer-events: auto;
  touch-action: pan-x;
}

.clg-scroll-overlay__shield--start {
  left: 0;
}

:host(clg-scroll-overlay[hide-left-button]) .clg-scroll-overlay__shield--start {
  display: none;
}

.clg-scroll-overlay__shield--end {
  right: 0;
}

:host(clg-scroll-overlay[hide-right-button]) .clg-scroll-overlay__shield--end {
  display: none;
}

.clg-scroll-overlay__scroll-button {
  position: absolute;
  top: calc(
    var(--_scroll-area-top, 0px) + var(--_scroll-area-height, 100%) / 2
  );
  transform: translateY(-50%);
  z-index: var(--clg-effect-pal-z-index-300, 30);
  transition: opacity var(--clg-effect-pal-duration-200, 200ms)
    var(--clg-effect-pal-curve-symmetrical, cubic-bezier(0.5, 0, 0.5, 1));
}

.clg-scroll-overlay__scroll-button--left {
  left: var(--clg-dimension-pal-grid-100, 8px);
}

:host(clg-scroll-overlay[hide-left-button])
  .clg-scroll-overlay__scroll-button--left {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.clg-scroll-overlay__scroll-button--right {
  right: var(--clg-dimension-pal-grid-100, 8px);
}

:host(clg-scroll-overlay[hide-right-button])
  .clg-scroll-overlay__scroll-button--right {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

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

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

:host(clg-shape) svg {
  display: block;
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  transform-origin: center;
  transform: scale(var(--clg-avatar-svg-scale));
}

:host(clg-shape) path {
  vector-effect: non-scaling-stroke;
}

:host(clg-shape[border][size="larger"]) svg {
  --clg-avatar-svg-scale: calc(
    var(--clg-dimension-app-avatar-larger-image-size, 40px) /
      var(--clg-dimension-app-avatar-base-image-size, 32px) / 100 + 1
  );
}

:host(clg-shape[border][size="largest"]) svg {
  --clg-avatar-svg-scale: calc(
    var(--clg-dimension-app-avatar-largest-image-size, 64px) /
      var(--clg-dimension-app-avatar-base-image-size, 32px) / 100 + 1
  );
}

:host(clg-ad-signal) {
  display: inline-block;
}

.clg-ad-signal {
  --clg-ad-signal-color: unset;
  --clg-ad-signal-background: unset;
  --clg-ad-signal-min-height: unset;
  --clg-ad-signal-padding-vertical: unset;
  --clg-ad-signal-padding-horizontal: unset;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--clg-ad-signal-padding-vertical)
    var(--clg-ad-signal-padding-horizontal);
  min-height: var(--clg-ad-signal-min-height);
  color: var(--clg-ad-signal-color);
  background: var(--clg-ad-signal-background);
}

.clg-ad-signal__strong,
.clg-ad-signal__subtle {
  display: none;
}

:host(clg-ad-signal[variant="strong"]) .clg-ad-signal {
  border-radius: var(--clg-shape-app-signal-large-border-radius, 16px);
  --clg-ad-signal-min-height: var(--clg-dimension-app-signal-minimum-height);
  --clg-ad-signal-padding-vertical: var(
    --clg-dimension-app-signal-padding-vertical
  );
  --clg-ad-signal-padding-horizontal: var(
    --clg-dimension-app-signal-padding-horizontal
  );
  --clg-ad-signal-background: var(--clg-color-app-signal-ad-background);
  --clg-ad-signal-color: var(--clg-color-app-signal-ad-text);
  font-family: var(--clg-typography-sem-product-title-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-title-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-title-smallest-font-size);
  line-height: var(--clg-typography-sem-product-title-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-title-smallest-letter-spacing
  );
}

:host(clg-ad-signal[variant="strong"]) .clg-ad-signal__strong {
  display: block;
}

:host(clg-ad-signal[variant="subtle"]) .clg-ad-signal {
  --clg-ad-signal-min-height: var(
    --clg-dimension-app-signal-subtle-minimum-height
  );
  --clg-ad-signal-padding-vertical: var(
    --clg-dimension-app-signal-subtle-padding-vertical
  );
  --clg-ad-signal-padding-horizontal: var(
    --clg-dimension-app-signal-subtle-padding-horizontal
  );
  --clg-ad-signal-color: var(--clg-color-app-signal-ad-subtle-text);
  font-family: var(--clg-typography-sem-product-body-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-body-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-body-smallest-font-size);
  line-height: var(--clg-typography-sem-product-body-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-body-smallest-letter-spacing
  );
}

:host(clg-ad-signal[variant="subtle"]) .clg-ad-signal__subtle {
  display: block;
}

:host(clg-ad-signal[variant="strong"][size="large"]) .clg-ad-signal {
  --clg-ad-signal-min-height: var(
    --clg-dimension-app-signal-large-minimum-height
  );
  --clg-ad-signal-padding-vertical: var(
    --clg-dimension-app-signal-large-padding-vertical
  );
  --clg-ad-signal-padding-horizontal: var(
    --clg-dimension-app-signal-large-padding-horizontal
  );
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

:host(clg-ad-signal[variant="subtle"][size="large"]) .clg-ad-signal {
  --clg-ad-signal-min-height: var(
    --clg-dimension-app-signal-large-subtle-minimum-height
  );
  --clg-ad-signal-padding-vertical: var(
    --clg-dimension-app-signal-large-subtle-padding-vertical
  );
  --clg-ad-signal-padding-horizontal: var(
    --clg-dimension-app-signal-large-subtle-padding-horizontal
  );
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

.clg-signal {
  --clg-signal-bg-color: unset;
  --clg-signal-text-color: unset;
  --clg-signal-border-radius: var(--clg-shape-app-signal-border-radius);
  --clg-signal-min-height: var(--clg-dimension-app-signal-minimum-height);
  --clg-signal-min-width: var(--clg-dimension-app-signal-minimum-width);
  --clg-signal-padding-vertical: var(
    --clg-dimension-app-signal-padding-vertical
  );
  --clg-signal-padding-horizontal: var(
    --clg-dimension-app-signal-padding-horizontal
  );
  display: flex;
  gap: var(--clg-dimension-app-signal-gap, 3px);
  align-items: center;
  max-width: max-content;
  background-color: var(
    --clg-signal-bg-color,
    var(--clg-color-app-signal-background, #faf8f5)
  );
  color: var(
    --clg-signal-text-color,
    var(--clg-color-app-signal-text, #312b36)
  );
  border-radius: var(--clg-signal-border-radius);
  min-height: var(--clg-signal-min-height);
  min-width: var(--clg-signal-min-width);
  padding: var(--clg-signal-padding-vertical)
    var(--clg-signal-padding-horizontal);
  font-family: var(--clg-typography-sem-product-title-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-title-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-title-smallest-font-size);
  line-height: var(--clg-typography-sem-product-title-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-title-smallest-letter-spacing
  );
}

:host(clg-signal[size="large"]) .clg-signal {
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
  --clg-signal-border-radius: var(
    --clg-shape-app-signal-large-border-radius,
    16px
  );
  --clg-signal-min-height: var(
    --clg-dimension-app-signal-large-minimum-height,
    28px
  );
  --clg-signal-min-width: var(
    --clg-dimension-app-signal-large-minimum-height,
    28px
  );
  --clg-signal-padding-vertical: var(
    --clg-dimension-app-signal-large-padding-vertical,
    4px
  );
  --clg-signal-padding-horizontal: var(
    --clg-dimension-app-signal-large-padding-horizontal,
    8px
  );
}

:host(clg-signal[size="large"][variant="subtle"]) .clg-signal {
  --clg-signal-min-height: var(
    --clg-dimension-app-signal-large-subtle-minimum-height,
    18px
  );
  --clg-signal-min-width: var(
    --clg-dimension-app-signal-large-subtle-minimum-height,
    18px
  );
  --clg-signal-padding-vertical: var(
    --clg-dimension-app-signal-large-subtle-padding-vertical,
    2px
  );
  --clg-signal-padding-horizontal: 0;
}

:host(clg-signal[variant="subtle"]) .clg-signal {
  --clg-signal-min-height: var(
    --clg-dimension-app-signal-subtle-minimum-height,
    16px
  );
  --clg-signal-min-width: var(
    --clg-dimension-app-signal-subtle-minimum-height,
    16px
  );
  --clg-signal-padding-vertical: var(
    --clg-dimension-app-signal-subtle-padding-vertical,
    2px
  );
  --clg-signal-padding-horizontal: 0;
}

:host(clg-signal:not([variant="subtle"])) .clg-signal {
  border: var(--clg-shape-app-signal-border-width, 1px) solid
    var(--clg-signal-border-color, var(--clg-color-app-signal-border, #e0dad6));
}

:host(clg-signal[color="neutral"][variant="strong"]) .clg-signal {
  --clg-signal-border-color: var(
    --clg-color-app-signal-strong-border,
    rgba(0, 0, 0, 0)
  );
  --clg-signal-bg-color: var(--clg-color-app-signal-strong-background, #efecea);
  --clg-signal-color: var(--clg-color-app-signal-strong-text, #312b36);
  --clg-signal-text-color: var(--clg-color-sem-text-primary, #312b36);
}

:host(clg-signal[color="neutral"][variant="subtle"]) .clg-signal {
  --clg-signal-text-color: var(--clg-color-app-signal-subtle-text, #312b36);
  --clg-signal-bg-color: transparent;
}

:host(clg-signal[color="highlight"]) .clg-signal {
  --clg-signal-border-color: var(
    --clg-color-app-signal-highlight-border,
    #e0dad6
  );
  --clg-signal-bg-color: var(
    --clg-color-app-signal-highlight-background,
    #faf8f5
  );
  --clg-signal-text-color: var(--clg-color-app-signal-highlight-text, #426bdb);
}

:host(clg-signal[color="highlight"][variant="strong"]) .clg-signal {
  --clg-signal-border-color: var(
    --clg-color-app-signal-highlight-strong-border,
    rgba(0, 0, 0, 0)
  );
  --clg-signal-bg-color: var(
    --clg-color-app-signal-highlight-strong-background,
    #426bdb
  );
  --clg-signal-text-color: var(
    --clg-color-app-signal-highlight-strong-text,
    #faf8f5
  );
}

:host(clg-signal[color="highlight"][variant="subtle"]) .clg-signal {
  --clg-signal-text-color: var(
    --clg-color-app-signal-highlight-subtle-text,
    #426bdb
  );
  --clg-signal-bg-color: transparent;
}

:host(clg-signal[color="promote"]) .clg-signal {
  --clg-signal-border-color: var(
    --clg-color-app-signal-promote-border,
    #e0dad6
  );
  --clg-signal-bg-color: var(
    --clg-color-app-signal-promote-background,
    #faf8f5
  );
  --clg-signal-text-color: var(--clg-color-app-signal-promote-text, #4e7728);
}

:host(clg-signal[color="promote"][variant="strong"]) .clg-signal {
  --clg-signal-border-color: var(
    --clg-color-app-signal-promote-strong-border,
    rgba(0, 0, 0, 0)
  );
  --clg-signal-bg-color: var(
    --clg-color-app-signal-promote-strong-background,
    #a3d277
  );
  --clg-signal-text-color: var(
    --clg-color-app-signal-promote-strong-text,
    #312b36
  );
}

:host(clg-signal[color="promote"][variant="subtle"]) .clg-signal {
  --clg-signal-text-color: var(
    --clg-color-app-signal-promote-subtle-text,
    #4e7728
  );
  --clg-signal-bg-color: transparent;
}

:host(clg-signal[color="urgency"]) .clg-signal {
  --clg-signal-border-color: var(
    --clg-color-app-signal-urgency-border,
    #e0dad6
  );
  --clg-signal-bg-color: var(
    --clg-color-app-signal-urgency-background,
    #faf8f5
  );
  --clg-signal-text-color: var(--clg-color-app-signal-urgency-text, #c7102f);
}

:host(clg-signal[color="urgency"][variant="strong"]) .clg-signal {
  --clg-signal-border-color: var(
    --clg-color-app-signal-urgency-strong-border,
    rgba(0, 0, 0, 0)
  );
  --clg-signal-bg-color: var(
    --clg-color-app-signal-urgency-strong-background,
    #f58598
  );
  --clg-signal-text-color: var(
    --clg-color-app-signal-urgency-strong-text,
    #312b36
  );
}

:host(clg-signal[color="urgency"][variant="subtle"]) .clg-signal {
  --clg-signal-text-color: var(
    --clg-color-app-signal-urgency-subtle-text,
    #c7102f
  );
  --clg-signal-bg-color: transparent;
}

:host(clg-signal[color="trust"]) .clg-signal {
  --clg-signal-border-color: var(--clg-color-app-signal-trust-border, #e0dad6);
  --clg-signal-bg-color: var(--clg-color-app-signal-trust-background, #faf8f5);
  --clg-signal-text-color: var(--clg-color-app-signal-trust-text, #312b36);
}

:host(clg-signal[color="trust"][variant="strong"]) .clg-signal {
  --clg-signal-border-color: var(
    --clg-color-app-signal-trust-strong-border,
    rgba(0, 0, 0, 0)
  );
  --clg-signal-bg-color: var(
    --clg-color-app-signal-trust-strong-background,
    #ffc340
  );
  --clg-signal-text-color: var(
    --clg-color-app-signal-trust-strong-text,
    #312b36
  );
}

:host(clg-signal[color="trust"][variant="subtle"]) .clg-signal {
  --clg-signal-text-color: var(
    --clg-color-app-signal-trust-subtle-text,
    #312b36
  );
  --clg-signal-bg-color: transparent;
}

:host(clg-star-seller-signal) {
  display: inline-block;
}

.clg-star-seller-signal {
  --clg-star-seller-signal-padding-vertical: unset;
  --clg-star-seller-signal-padding-horizontal: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--clg-dimension-app-signal-gap, 3px);
  border-radius: var(--clg-shape-app-signal-large-border-radius, 16px);
  min-height: var(--clg-dimension-app-signal-minimum-height, 20px);
  border: var(--clg-shape-app-signal-border-width, 1px) solid
    var(--clg-color-app-signal-border, #e0dad6);
  background: var(--clg-color-app-signal-background, #faf8f5);
  color: var(--clg-color-sem-text-star-seller, #ae4d9d);
  padding: var(--clg-star-seller-signal-padding-vertical)
    var(--clg-star-seller-signal-padding-horizontal);
  font-family: var(--clg-typography-sem-product-title-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-title-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-title-smallest-font-size);
  line-height: var(--clg-typography-sem-product-title-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-title-smallest-letter-spacing
  );
}

.clg-star-seller-signal svg {
  font-size: var(--clg-dimension-sem-icon-core-smallest, 12px);
}

:host(clg-star-seller-signal[variant="strong"]) .clg-star-seller-signal {
  border: var(--clg-shape-app-signal-border-width, 1px) solid
    var(--clg-color-app-signal-strong-border, rgba(0, 0, 0, 0));
  background: var(--clg-color-sem-background-surface-star-seller-dark, #ae4d9d);
  color: var(--clg-color-sem-text-on-surface-dark, #faf8f5);
}

:host(clg-star-seller-signal[variant="subtle"]) .clg-star-seller-signal {
  border: none;
  background: none;
  --clg-star-seller-signal-padding-vertical: var(
    --clg-dimension-app-signal-large-subtle-padding-vertical
  );
  --clg-star-seller-signal-padding-horizontal: var(
    --clg-dimension-app-signal-large-subtle-padding-horizontal
  );
}

:host(clg-star-seller-signal[size="large"]) .clg-star-seller-signal {
  min-height: var(--clg-dimension-app-signal-large-minimum-height, 28px);
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

:host(clg-star-seller-signal[size="base"]:not([variant="subtle"]))
  .clg-star-seller-signal {
  --clg-star-seller-signal-padding-vertical: var(
    --clg-dimension-app-signal-padding-vertical
  );
  --clg-star-seller-signal-padding-horizontal: var(
    --clg-dimension-app-signal-padding-horizontal
  );
}

:host(clg-star-seller-signal[size="large"]:not([variant="subtle"]))
  .clg-star-seller-signal {
  --clg-star-seller-signal-padding-vertical: var(
    --clg-dimension-app-signal-large-padding-vertical
  );
  --clg-star-seller-signal-padding-horizontal: var(
    --clg-dimension-app-signal-large-padding-horizontal
  );
}

.clg-loading-spinner {
  --clg-spinner-stroke-color: var(--clg-color-app-spinner-foreground);
  --clg-spinner-border-color: var(--clg-color-app-spinner-background);
  --clg-spinner-size: var(--clg-dimension-app-spinner-size);
  display: block;
  position: relative;
  height: var(--clg-spinner-size);
  width: var(--clg-spinner-size);
  aspect-ratio: 1 / 1;
  stroke-width: var(--clg-shape-sem-border-width-medium, 4px);
}

:host([background-type="light"]) .clg-loading-spinner {
  --clg-spinner-stroke-color: var(
    --clg-color-app-spinner-on-surface-light-foreground
  );
  --clg-spinner-border-color: var(
    --clg-color-app-spinner-on-surface-light-background
  );
}

:host([background-type="dark"]) .clg-loading-spinner {
  --clg-spinner-stroke-color: var(
    --clg-color-app-spinner-on-surface-dark-foreground
  );
  --clg-spinner-border-color: var(
    --clg-color-app-spinner-on-surface-dark-background
  );
}

:host([size="large"]) .clg-loading-spinner {
  --clg-spinner-size: var(--clg-dimension-app-spinner-large-size);
}

.clg-loading-spinner circle {
  r: calc(50% - (var(--clg-shape-sem-border-width-medium, 4px) / 2));
}

.clg-loading-spinner__track {
  stroke: var(--clg-spinner-border-color);
}

.clg-loading-spinner__fill {
  transform: rotate(-90deg);
  transform-origin: 50%;
  stroke: var(--clg-spinner-stroke-color);
  stroke-dashoffset: 60;
  animation-name: clg-spinner-keyframe;
  animation-duration: 1.2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes clg-spinner-keyframe {
  0% {
    stroke-dashoffset: 95;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 50;
    transform: rotate(0deg);
  }

  100% {
    stroke-dashoffset: 95;
    transform: rotate(270deg);
  }
}

.clg-static-review-stars {
  display: inline-flex;
  align-items: center;
}

.clg-static-review-stars svg {
  font-size: var(--clg-dimension-sem-icon-core-base, 24px);
}

:host(clg-static-review-stars[size="smaller"]) .clg-static-review-stars svg {
  font-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host(clg-static-review-stars[size="smallest"]) .clg-static-review-stars svg {
  font-size: var(--clg-dimension-sem-icon-core-smallest, 12px);
}

.clg-static-review-stars__rating-label {
  margin-inline-end: var(--clg-dimension-pal-grid-025, 2px);
  font-family: var(--clg-typography-sem-product-title-large-font-family);
  font-weight: var(--clg-typography-sem-product-title-large-font-weight);
  font-size: var(--clg-typography-sem-product-title-large-font-size);
  line-height: var(--clg-typography-sem-product-title-large-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-large-letter-spacing);
}

:host(clg-static-review-stars[size="smaller"])
  .clg-static-review-stars__rating-label {
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

:host(clg-static-review-stars[size="smallest"])
  .clg-static-review-stars__rating-label {
  font-family: var(--clg-typography-sem-product-title-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-title-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-title-smallest-font-size);
  line-height: var(--clg-typography-sem-product-title-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-title-smallest-letter-spacing
  );
}

.clg-static-review-stars__review-count {
  margin-inline-start: var(--clg-dimension-pal-grid-025, 2px);
  white-space: nowrap;
  font-family: var(--clg-typography-sem-product-body-large-font-family);
  font-weight: var(--clg-typography-sem-product-body-large-font-weight);
  font-size: var(--clg-typography-sem-product-body-large-font-size);
  line-height: var(--clg-typography-sem-product-body-large-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-large-letter-spacing);
}

:host(clg-static-review-stars[size="smaller"])
  .clg-static-review-stars__review-count {
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

:host(clg-static-review-stars[size="smallest"])
  .clg-static-review-stars__review-count {
  font-family: var(--clg-typography-sem-product-body-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-body-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-body-smallest-font-size);
  line-height: var(--clg-typography-sem-product-body-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-body-smallest-letter-spacing
  );
}

.clg-static-review-stars__content {
  display: inline-flex;
  align-items: center;
}

.clg-static-review-stars__one-star {
  display: none;
}

:host(clg-static-review-stars[variant="one-star"])
  .clg-static-review-stars__one-star {
  display: inline-flex;
}

.clg-static-review-stars__five-stars {
  display: inline-flex;
  align-items: center;
}

:host(clg-static-review-stars[variant="one-star"])
  .clg-static-review-stars__five-stars {
  display: none;
}

.clg-switch {
  --clg-icon-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
  --clg-switch-height: var(--clg-dimension-app-switch-height, 32px);
  --clg-switch-width: var(--clg-dimension-app-switch-width, 64px);
  --clg-switch-handle-size: var(--clg-dimension-app-switch-handle-size, 16px);
  --clg-switch-padding-start: var(
    --clg-dimension-app-switch-padding-start,
    8px
  );
  --clg-switch-padding-end: var(--clg-dimension-app-switch-padding-end, 8px);
  --clg-switch-checked-padding-start: var(
    --clg-dimension-app-switch-checked-padding-start,
    8px
  );
  --clg-switch-track-color: var(
    --clg-color-app-switch-background,
    rgba(0, 0, 0, 0)
  );
  --clg-switch-knob-color: var(--clg-color-app-switch-foreground, #312b36);
  --clg-switch-knob-translate: var(--clg-switch-padding-start);
  --clg-switch-position-duration: var(--clg-effect-pal-duration-300, 300ms);
  --clg-switch-position-curve: var(
    --clg-effect-pal-curve-expressive-enter,
    cubic-bezier(0.1, 0, 0.1, 1)
  );
  --clg-switch-color-switch-duration: var(
    --clg-effect-app-switch-off-color-switch-duration,
    0ms
  );
  --clg-switch-color-switch-curve: var(
    --clg-effect-app-switch-off-color-switch-curve,
    cubic-bezier(0, 0, 1, 1)
  );
  --clg-switch-color-switch-delay: var(--clg-effect-pal-duration-050, 50ms);
  --clg-switch-knob-scale: 1;
  --clg-switch-knob-scale-duration: var(--clg-effect-pal-duration-300, 300ms);
  --clg-switch-knob-scale-curve: var(
    --clg-effect-pal-curve-expressive-enter,
    cubic-bezier(0.1, 0, 0.1, 1)
  );
  display: inline-flex;
  align-items: center;
  gap: var(--clg-dimension-pal-grid-150, 12px);
  cursor: pointer;
}

:host(clg-switch[size="small"]) .clg-switch {
  --clg-icon-size: var(--clg-dimension-sem-icon-core-smallest, 12px);
  --clg-switch-height: var(--clg-dimension-app-switch-small-height, 24px);
  --clg-switch-width: var(--clg-dimension-app-switch-small-width, 42px);
  --clg-switch-handle-size: var(
    --clg-dimension-app-switch-small-handle-size,
    12px
  );
  --clg-switch-padding-start: var(
    --clg-dimension-app-switch-small-padding-start,
    6px
  );
  --clg-switch-padding-end: var(
    --clg-dimension-app-switch-small-padding-end,
    6px
  );
  --clg-switch-checked-padding-start: var(
    --clg-dimension-app-switch-checked-small-padding-start,
    4px
  );
}

:host([with-helper-text]) .clg-switch,
:host([helper-text]) .clg-switch {
  align-items: flex-start;
}

.clg-switch .clg-form-field__label__text {
  color: var(--clg-color-sem-text-primary, #312b36);
  font-family: var(--clg-typography-sem-product-body-base-font-family);
  font-weight: var(--clg-typography-sem-product-body-base-font-weight);
  font-size: var(--clg-typography-sem-product-body-base-font-size);
  line-height: var(--clg-typography-sem-product-body-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-base-letter-spacing);
}

:host(clg-switch[size="small"]) .clg-switch .clg-form-field__label__text {
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

.clg-switch__frame {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: var(--clg-switch-height);
  width: var(--clg-switch-width);
}

.clg-switch__input {
  position: absolute;
  z-index: 2;
  border: none;
  opacity: 0;
  outline: none;
  inset: 0;
  cursor: inherit;
  margin: 0;
}

.clg-switch__toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: var(--clg-switch-height);
  width: var(--clg-switch-width);
}

@media (prefers-reduced-motion: no-preference) {
  .clg-switch__toggle {
    transition: opacity var(--clg-effect-sem-crossfade-fast-duration, 75ms)
      var(--clg-effect-sem-crossfade-fast-curve, cubic-bezier(0, 0, 1, 1));
  }
}

.clg-switch__toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--clg-shape-app-switch-border-radius, 999999px);
  border: var(--clg-shape-app-switch-border-width, 1px) solid
    var(--clg-color-app-switch-border, #312b36);
  background-color: var(--clg-switch-track-color);
}

@media (prefers-reduced-motion: no-preference) {
  .clg-switch__toggle::before {
    transition:
      outline var(--clg-effect-sem-crossfade-fast-duration, 75ms)
        var(--clg-effect-sem-crossfade-fast-curve, cubic-bezier(0, 0, 1, 1)),
      background-color var(--clg-switch-color-switch-duration)
        var(--clg-switch-color-switch-curve)
        var(--clg-switch-color-switch-delay);
  }
}

.clg-switch__toggle::after {
  border-radius: 50%;
  content: "";
  display: block;
  height: var(--clg-switch-handle-size);
  width: var(--clg-switch-handle-size);
  z-index: 1;
  translate: var(--clg-switch-knob-translate) 0;
  scale: var(--clg-switch-knob-scale);
  background-color: var(--clg-switch-knob-color);
}

@media (prefers-reduced-motion: no-preference) {
  .clg-switch__toggle::after {
    transition:
      translate var(--clg-switch-position-duration)
        var(--clg-switch-position-curve),
      scale var(--clg-switch-knob-scale-duration)
        var(--clg-switch-knob-scale-curve),
      background-color var(--clg-switch-color-switch-duration)
        var(--clg-switch-color-switch-curve)
        var(--clg-switch-color-switch-delay);
  }
}

.clg-switch svg {
  font-size: var(--clg-icon-size);
  position: absolute;
  top: 50%;
  transform: translate(var(--clg-switch-icon-offset, 0px), -50%);
  opacity: 0;
  pointer-events: none;
  color: var(--clg-switch-knob-color);
}

@media (prefers-reduced-motion: no-preference) {
  .clg-switch svg {
    transition:
      opacity var(--clg-switch-color-switch-duration)
        var(--clg-switch-color-switch-curve)
        var(--clg-switch-color-switch-delay),
      color var(--clg-switch-color-switch-duration)
        var(--clg-switch-color-switch-curve)
        var(--clg-switch-color-switch-delay),
      transform var(--clg-effect-pal-duration-100, 100ms)
        var(--clg-effect-pal-curve-functional-exit, cubic-bezier(0.8, 0, 1, 1));
  }
}

.clg-switch svg[data-name="close"] {
  --clg-switch-icon-offset: 6px;
  right: var(--clg-switch-padding-end);
}

.clg-switch svg[data-name="check"] {
  --clg-switch-icon-offset: -6px;
  left: var(--clg-switch-checked-padding-start);
}

.clg-switch__input:focus-visible + .clg-switch__toggle::before {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

.clg-switch__input:checked + .clg-switch__toggle {
  --clg-switch-track-color: var(
    --clg-color-app-switch-checked-background,
    #312b36
  );
  --clg-switch-knob-color: var(
    --clg-color-app-switch-checked-foreground,
    #faf8f5
  );
  --clg-switch-knob-translate: calc(
    var(--clg-switch-width) - var(--clg-switch-handle-size) -
      var(--clg-switch-padding-end)
  );
  --clg-switch-position-duration: var(--clg-effect-pal-duration-300, 300ms);
  --clg-switch-position-curve: var(
    --clg-effect-pal-curve-expressive-enter,
    cubic-bezier(0.1, 0, 0.1, 1)
  );
  --clg-switch-color-switch-duration: var(
    --clg-effect-app-switch-on-color-switch-duration,
    0ms
  );
  --clg-switch-color-switch-curve: var(
    --clg-effect-app-switch-on-color-switch-curve,
    cubic-bezier(0, 0, 1, 1)
  );
  --clg-switch-color-switch-delay: var(--clg-effect-pal-duration-050, 50ms);
}

.clg-switch__input:not(:checked) + .clg-switch__toggle svg[data-name="close"],
.clg-switch__input:checked + .clg-switch__toggle svg[data-name="check"] {
  --clg-switch-icon-offset: 0px;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .clg-switch__input:not(:checked) + .clg-switch__toggle svg[data-name="close"],
  .clg-switch__input:checked + .clg-switch__toggle svg[data-name="check"] {
    transition:
      opacity var(--clg-switch-color-switch-duration)
        var(--clg-switch-color-switch-curve)
        var(--clg-switch-color-switch-delay),
      color var(--clg-switch-color-switch-duration)
        var(--clg-switch-color-switch-curve)
        var(--clg-switch-color-switch-delay),
      transform 250ms
        var(
          --clg-effect-pal-curve-expressive-enter,
          cubic-bezier(0.1, 0, 0.1, 1)
        );
  }
}

.clg-switch__input:active + .clg-switch__toggle {
  --clg-switch-knob-scale: var(
    --clg-effect-sem-interaction-press-on-press-strong-scale,
    0.92
  );
  --clg-switch-knob-scale-duration: var(
    --clg-effect-sem-interaction-press-on-press-strong-duration,
    100ms
  );
  --clg-switch-knob-scale-curve: var(
    --clg-effect-sem-interaction-press-on-press-strong-curve,
    cubic-bezier(0, 0, 0, 1)
  );
}

:host(clg-switch[disabled]) .clg-switch {
  cursor: not-allowed;
}

:host(clg-switch[disabled]) .clg-switch__toggle {
  opacity: 0.5;
}

:host(clg-image-tile[layout$="grid"]) .clg-image-tile,
:host(clg-image-tile[layout*="mosaic"]) .clg-image-tile {
  display: grid;
  gap: var(--clg-dimension-app-image-tile-gap, 2px);
}

.clg-image-tile {
  display: flex;
  max-width: 100%;
}

:host(clg-image-tile) {
  display: flex;
  min-height: 0;
  max-width: 100%;
  width: 100%;
}

:host(clg-image-tile) ::slotted(*) {
  height: auto;
  min-width: 0;
  max-width: 100%;
  object-fit: cover;
}

:host(clg-image-tile[layout="one-one"]) ::slotted(*) {
  aspect-ratio: 1/1;
}

:host(clg-image-tile[layout="four-five"]) {
  aspect-ratio: 4/5;
}

:host(clg-image-tile[layout="five-four"]) {
  aspect-ratio: 5/4;
}

:host(clg-image-tile[layout="one-one-row"]) .clg-image-tile {
  display: flex;
  flex-direction: row;
  gap: var(--clg-dimension-app-image-tile-gap, 2px);
}

:host(clg-image-tile[layout="one-one-row"]) .clg-image-tile ::slotted(*) {
  aspect-ratio: 1/1;
}

:host(clg-image-tile[layout="four-five-row"]) .clg-image-tile {
  display: flex;
  flex-direction: row;
  gap: var(--clg-dimension-app-image-tile-gap, 2px);
}

:host(clg-image-tile[layout="four-five-row"]) .clg-image-tile ::slotted(*) {
  aspect-ratio: 4/5;
}

:host(clg-image-tile[layout="five-four-row"]) .clg-image-tile {
  display: flex;
  flex-direction: row;
  gap: var(--clg-dimension-app-image-tile-gap, 2px);
}

:host(clg-image-tile[layout="five-four-row"]) .clg-image-tile ::slotted(*) {
  aspect-ratio: 5/4;
}

:host(clg-image-tile[layout="one-one-grid"]) .clg-image-tile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:host(clg-image-tile[layout="one-one-grid"]) .clg-image-tile ::slotted(*) {
  aspect-ratio: 1/1;
}

:host(clg-image-tile[layout="four-five-grid"]) .clg-image-tile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:host(clg-image-tile[layout="four-five-grid"]) .clg-image-tile ::slotted(*) {
  aspect-ratio: 4/5;
}

:host(clg-image-tile[layout="five-four-grid"]) .clg-image-tile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:host(clg-image-tile[layout="five-four-grid"]) .clg-image-tile ::slotted(*) {
  aspect-ratio: 5/4;
}

:host(clg-image-tile[layout="one-one-mosaic-vertical"]) .clg-image-tile {
  grid-template-columns: 1fr 1fr;
}

:host(clg-image-tile[layout="one-one-mosaic-vertical"])
  .clg-image-tile
  ::slotted(*) {
  aspect-ratio: 1/1;
}

:host(clg-image-tile[layout="one-one-mosaic-vertical"])
  .clg-image-tile
  ::slotted(*:first-child) {
  grid-column: span 2;
}

:host(clg-image-tile[layout="one-one-mosaic-horizontal"]) .clg-image-tile {
  grid-template-columns: 66.6666666667% calc(
      33.3333333333% - (var(--clg-dimension-app-image-tile-gap, 2px) / 2)
    );
}

:host(clg-image-tile[layout="one-one-mosaic-horizontal"])
  .clg-image-tile
  ::slotted(*) {
  aspect-ratio: 1/1;
}

:host(clg-image-tile[layout="one-one-mosaic-horizontal"])
  .clg-image-tile
  ::slotted(*:first-child) {
  grid-row: span 2;
}

:host(clg-image-tile[layout="four-five-mosaic-horizontal"]) .clg-image-tile {
  grid-template-columns: 66.6666666667% calc(
      33.3333333333% - (var(--clg-dimension-app-image-tile-gap, 2px) / 2)
    );
}

:host(clg-image-tile[layout="four-five-mosaic-horizontal"])
  .clg-image-tile
  ::slotted(*) {
  aspect-ratio: 4/5;
}

:host(clg-image-tile[layout="four-five-mosaic-horizontal"])
  .clg-image-tile
  ::slotted(*:first-child) {
  grid-row: span 2;
}

:host(clg-image-tile[layout="five-four-mosaic-vertical"]) .clg-image-tile {
  grid-template-columns: 1fr 1fr;
}

:host(clg-image-tile[layout="five-four-mosaic-vertical"])
  .clg-image-tile
  ::slotted(*) {
  aspect-ratio: 5/4;
}

:host(clg-image-tile[layout="five-four-mosaic-vertical"])
  .clg-image-tile
  ::slotted(*:first-child) {
  grid-column: span 2;
}

:host(clg-image-tile[rounded]) .clg-image-tile {
  border-radius: var(--clg-shape-sem-border-radius-card, 8px);
  overflow: hidden;
}

:host(clg-text-input),
:host(clg-textarea) {
  display: block !important;
}

.clg-text-field__before {
  margin-bottom: var(--clg-dimension-pal-grid-050, 4px);
}

:host([hide-label][hide-helper-text]) .clg-text-field__before,
:host([hide-label]:not([with-helper-text])) .clg-text-field__before {
  margin-bottom: 0;
}

.clg-text-field__label {
  display: contents;
}

.clg-text-field__visual-box {
  border-radius: var(--clg-shape-app-input-border-radius, 8px);
  color: var(--clg-color-app-input-text, #312b36);
  display: flex;
  min-height: var(--clg-dimension-app-input-minimum-height, 48px);
  gap: var(--clg-dimension-app-input-gap, 4px);
  border: var(--clg-shape-app-input-border-width, 1px) solid
    var(--clg-color-app-input-border, #928681);
  outline-offset: -1px;
}

.clg-text-field__visual-box:has(input) {
  padding: 0 var(--clg-dimension-app-input-padding-horizontal, 12px);
}

.clg-text-field__visual-box:has(textarea) {
  padding: var(--clg-dimension-app-input-padding-vertical, 8px)
    var(--clg-dimension-app-input-padding-horizontal, 12px);
}

:host([size="small"]) .clg-text-field__visual-box {
  min-height: var(--clg-dimension-app-input-small-minimum-height, 36px);
}

:host([size="small"]) .clg-text-field__visual-box:has(textarea) {
  padding: var(--clg-dimension-app-input-small-padding-vertical, 4px)
    var(--clg-dimension-app-input-padding-horizontal, 12px);
}

.clg-text-field__visual-box:has(
  :is(input:focus-visible, textarea:focus-visible)
) {
  border-color: rgba(0, 0, 0, 0);
  outline: var(--clg-shape-app-input-border-focused-width, 2px) solid
    var(--clg-color-app-input-focused-border, #426bdb);
}

:host([invalid]) .clg-text-field__visual-box {
  background-color: var(--clg-color-app-input-error-background, #fdecef);
  border-color: var(
    --clg-color-app-input-selectable-error-selected-border,
    #c7102f
  );
  color: var(--clg-color-app-input-error-text, #c7102f);
}

:host([invalid])
  .clg-text-field__visual-box:has(
    :is(input:focus-visible, textarea:focus-visible)
  ) {
  color: var(--clg-color-app-input-text, #312b36);
}

:host([disabled]) .clg-text-field__visual-box {
  background-color: var(--clg-color-app-input-disabled-background, #efecea);
  border-color: var(--clg-color-app-input-disabled-border, #928681);
  color: var(--clg-color-app-input-disabled-text, #736b68);
}

.clg-text-field__visual-box:has(input) {
  align-items: center;
}

.clg-text-field__control {
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: inherit;
  color: inherit;
  border: 0;
  outline: 0;
  display: block;
  width: 100%;
  resize: none;
  caret-color: currentColor;
}

.clg-text-field__control :focus {
  outline: 0;
}

.clg-text-field__control[type="date"]::-webkit-inner-spin-button,
.clg-text-field__control[type="date"]::-webkit-calendar-picker-indicator,
.clg-text-field__control[type="datetime-local"]::-webkit-inner-spin-button,
.clg-text-field__control[type="datetime-local"]::-webkit-calendar-picker-indicator,
.clg-text-field__control[type="month"]::-webkit-inner-spin-button,
.clg-text-field__control[type="month"]::-webkit-calendar-picker-indicator,
.clg-text-field__control[type="week"]::-webkit-inner-spin-button,
.clg-text-field__control[type="week"]::-webkit-calendar-picker-indicator,
.clg-text-field__control[type="time"]::-webkit-inner-spin-button,
.clg-text-field__control[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

.clg-text-field__control[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.clg-text-field__control[type="number"]::-webkit-inner-spin-button,
.clg-text-field__control[type="number"]::-webkit-outer-spin-button {
  display: none;
}

:host([resize="vertical"]) .clg-text-field__control {
  resize: vertical;
  min-height: 1lh;
}

.clg-text-field__control::placeholder {
  color: var(--clg-color-sem-text-placeholder, #736b68);
}

input.clg-text-field__control {
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: stretch;
}

.clg-text-field__control,
.clg-text-field__visual-box {
  cursor: text;
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-base-font-weight);
  font-size: var(--clg-typography-sem-product-body-base-font-size);
  line-height: var(--clg-typography-sem-product-body-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-base-letter-spacing);
}

:host([size="small"]) .clg-text-field__control,
:host([size="small"]) .clg-text-field__visual-box {
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

:host([disabled]) .clg-text-field__control,
:host([disabled]) .clg-text-field__visual-box {
  cursor: not-allowed;
}

.clg-text-field__textarea-sizer {
  display: grid;
  width: 100%;
}

:host([resize="auto"]) .clg-text-field__textarea-sizer::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
  border-color: rgba(0, 0, 0, 0);
  font: inherit;
}

:host([resize="auto"]) .clg-text-field__textarea-sizer > textarea,
:host([resize="auto"]) .clg-text-field__textarea-sizer::after {
  grid-area: 1/1/2/2;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.clg-text-field__icon-affix {
  color: inherit;
  display: flex;
}

.clg-text-field__text-affix:empty {
  display: none;
}

.clg-text-field__action-btn {
  display: none;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.clg-text-field__action-btn__icon {
  display: block;
  height: var(--clg-dimension-sem-icon-core-base, 24px);
  width: var(--clg-dimension-sem-icon-core-base, 24px);
  background-color: currentColor;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-mask-image: var(--clg-affix-icon);
  mask-image: var(--clg-affix-icon);
}

:host([size="small"]) .clg-text-field__action-btn__icon {
  height: var(--clg-dimension-sem-icon-core-smaller, 16px);
  width: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host([pseudo-focus]) .clg-text-field__action-btn,
.clg-text-field__action-btn:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible]) .clg-text-field__action-btn,
.clg-text-field__action-btn:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus]) .clg-text-field__action-btn:not(:focus-visible),
.clg-text-field__action-btn:focus:not(:focus-visible) {
  outline: none;
}

:host([type="date"]) .clg-text-field__action-btn,
:host([type="datetime-local"]) .clg-text-field__action-btn,
:host([type="week"]) .clg-text-field__action-btn,
:host([type="month"]) .clg-text-field__action-btn,
:host([type="time"]) .clg-text-field__action-btn,
:host([type="password"]) .clg-text-field__action-btn {
  display: block;
}

:host([type="date"]) .clg-text-field__action-btn,
:host([type="datetime-local"]) .clg-text-field__action-btn,
:host([type="week"]) .clg-text-field__action-btn,
:host([type="month"]) .clg-text-field__action-btn {
  --clg-affix-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M8.5 3A.5.5 0 0 1 9 3.5V4H15V3.5A.5.5 0 0 1 15.5 3H16.5A.5.5 0 0 1 17 3.5V4H21.5A.5.5 0 0 1 22 4.5V20.5A.5.5 0 0 1 21.5 21H2.5A.5.5 0 0 1 2 20.5V4.5A.5.5 0 0 1 2.5 4H7V3.5A.5.5 0 0 1 7.5 3zM16.5 14.5A.5.5 0 0 0 16 15V17A.5.5 0 0 0 16.5 17.5H18.5A.5.5 0 0 0 19 17V15A.5.5 0 0 0 18.5 14.5zM4 9H20V6H17V6.5A.5.5 0 0 1 16.5 7H15.5A.5.5 0 0 1 15 6.5V6H9V6.5A.5.5 0 0 1 8.5 7H7.5A.5.5 0 0 1 7 6.5V6H4z%22%2F%3E%3C%2Fsvg%3E");
}

:host([type="time"]) .clg-text-field__action-btn {
  --clg-affix-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M12 2C17.523 2 22 6.477 22 12S17.523 22 12 22 2 17.523 2 12 6.477 2 12 2M11.5 5A.5.5 0 0 0 11 5.5V12.5A1 1 0 0 0 12 13.5H16.5A.5.5 0 0 0 17 13V12A.5.5 0 0 0 16.5 11.5H13V5.5A.5.5 0 0 0 12.5 5z%22%2F%3E%3C%2Fsvg%3E");
}

:host([type="password"]) .clg-text-field__action-btn {
  --clg-affix-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22%3E%3Cpath d%3D%22M12 8.5A3.5 3.5 0 1 1 12 15.5 3.5 3.5 0 0 1 12 8.5%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M12 5C16.859 5 19.747 8.87 22.074 11.162 22.531 11.612 22.531 12.388 22.074 12.838L21.631 13.284C20.223 14.73 18.592 16.602 16.455 17.802A10 10 0 0 1 15.799 18.14 8.8 8.8 0 0 1 11.999 19C7.446 19 4.622 15.598 2.37 13.284L1.926 12.838A1.17 1.17 0 0 1 1.583 12Q1.583 11.885 1.604 11.771C1.647 11.545 1.754 11.332 1.926 11.163 3.889 9.228 6.252 6.171 9.86 5.262A8.6 8.6 0 0 1 12 5M12 7C10.152 7 8.635 7.72 7.237 8.803 5.961 9.79 4.997 10.883 3.91 12 4.996 13.118 5.961 14.21 7.237 15.197 8.635 16.28 10.152 17 12 17S15.365 16.28 16.763 15.197C18.039 14.21 19.003 13.117 20.089 12 19.003 10.882 18.039 9.79 16.763 8.803 15.365 7.72 13.848 7 12 7%22%2F%3E%3C%2Fsvg%3E");
}

:host([type="password"]) .clg-text-field__action-btn--password-visible {
  --clg-affix-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21.44 1.147A.5.5 0 0 1 22.146 1.147L22.854 1.854A.5.5 0 0 1 22.854 2.56L18.103 7.31C19.669 8.55 20.939 10.045 22.074 11.163A1.197 1.197 0 0 1 22.074 12.839L21.631 13.285C19.379 15.599 16.555 19 12 19 10.311 19 8.86 18.531 7.589 17.825L2.56 22.854A.5.5 0 0 1 1.854 22.854L1.146 22.147A.5.5 0 0 1 1.146 21.44zM15.077 10.337A3.46 3.46 0 0 1 15.5 12 3.5 3.5 0 0 1 10.524 15.172L10.336 15.077 9.074 16.34A6.8 6.8 0 0 0 12 17C13.848 17 15.365 16.28 16.763 15.198 18.039 14.21 19.003 13.118 20.089 12 19.003 10.883 18.039 9.79 16.763 8.803L16.675 8.74z%22%2F%3E%3Cpath d%3D%22M12 5C12.902 5 13.737 5.133 14.513 5.366L12.827 7.05A7 7 0 0 0 12 7.001C10.152 7 8.635 7.72 7.237 8.802 5.961 9.791 4.997 10.883 3.91 12 4.576 12.685 5.197 13.36 5.871 14.007L4.46 15.42C3.699 14.69 3.01 13.943 2.369 13.284L1.926 12.839A1.197 1.197 0 0 1 1.926 11.163C4.252 8.87 7.14 5 12 5%22%2F%3E%3C%2Fsvg%3E");
}

.clg-text-field__after {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--clg-dimension-app-input-gap, 4px);
}

:host([with-caption]) .clg-text-field__after,
:host([caption]) .clg-text-field__after,
:host([invalid]) .clg-text-field__after,
:host([show-character-count]) .clg-text-field__after {
  margin-top: var(--clg-dimension-pal-grid-050, 4px);
}

.clg-text-field__character-count {
  flex-shrink: 1;
  text-align: right;
  margin-left: auto;
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

:host([invalid]) .clg-text-field__character-count {
  color: var(--clg-color-app-input-error-text, #c7102f);
}

:host(clg-text-link) {
  display: inline-block;
}

.clg-text-link {
  cursor: pointer;
  color: currentColor;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: var(--clg-dimension-app-text-link-gap, 4px);
  border-radius: var(--clg-shape-sem-border-radius-smallest, 2px);
}

:host([pseudo-focus]) .clg-text-link,
.clg-text-link:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible]) .clg-text-link,
.clg-text-link:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus]) .clg-text-link:not(:focus-visible),
.clg-text-link:focus:not(:focus-visible) {
  outline: none;
}

.clg-text-link[aria-disabled] {
  color: var(--clg-color-sem-text-disabled, #c8bdb7);
  cursor: not-allowed;
}

:host(clg-text-link[icon]) .clg-text-link,
:host(clg-text-link[no-underline]:not(:hover)) .clg-text-link {
  text-decoration: none;
}

:host(clg-text-link[icon="end"]) .clg-text-link {
  flex-direction: row-reverse;
}

:host(clg-text-link:not([target="_blank"])) .clg-text-link__new-tab-text {
  display: none;
}

:host(clg-toast) {
  display: block;
}

.clg-toast {
  padding: var(--clg-dimension-app-alert-toast-padding-vertical, 8px)
    var(--clg-dimension-app-alert-toast-padding-horizontal-end, 8px)
    var(--clg-dimension-app-alert-toast-padding-vertical, 8px)
    var(--clg-dimension-app-alert-toast-padding-horizontal-start, 12px);
  border-radius: var(--clg-shape-sem-border-radius-small, 8px);
  box-shadow: var(
    --clg-effect-sem-shadow-elevation-3,
    0px 8px 16px 0px rgba(21, 10, 4, 0.0392156863),
    0px 12px 20px 2px rgba(21, 10, 4, 0.0588235294)
  );
  min-height: 52px;
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: var(--clg-dimension-app-alert-toast-gap, 12px);
}

:host(clg-toast[color="neutral"]) .clg-toast {
  background-color: var(
    --clg-color-app-alert-toast-neutral-background,
    #ffffff
  );
  color: var(--clg-color-app-alert-toast-neutral-text, #312b36);
}

:host(clg-toast[color="critical"]) .clg-toast {
  background-color: var(
    --clg-color-app-alert-toast-critical-background,
    #c7102f
  );
  color: var(--clg-color-app-alert-toast-critical-text, #faf8f5);
}

:host(clg-toast[color="critical"]) .clg-toast slot[name="icon"] {
  display: none;
}

.clg-toast__icon-frame {
  display: none;
  background-color: var(
    --clg-color-app-alert-toast-neutral-icon-background,
    #efecea
  );
  color: var(--clg-color-app-alert-toast-neutral-icon-foreground, #312b36);
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  min-height: var(--clg-dimension-pal-grid-400, 32px);
  min-width: var(--clg-dimension-pal-grid-400, 32px);
  max-height: var(--clg-dimension-pal-grid-400, 32px);
  max-width: var(--clg-dimension-pal-grid-400, 32px);
  align-items: center;
  justify-content: center;
}

:host(clg-toast[color="critical"]) .clg-toast__icon-frame,
:host(clg-toast[with-icon]) .clg-toast__icon-frame {
  display: flex;
}

.clg-toast svg[data-name="exclamation"] {
  display: none;
  font-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host(clg-toast[color="critical"]) .clg-toast svg[data-name="exclamation"] {
  display: block;
}

.clg-toast__content {
  flex-grow: 1;
}

.clg-toast__actions {
  display: flex;
  align-items: center;
  gap: var(--clg-dimension-app-button-gap, 6px);
}

.clg-toast-group {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--clg-dimension-sem-spacing-card, 18px);
  z-index: var(--clg-effect-pal-z-index-800, 80);
  padding: var(--clg-dimension-sem-spacing-page-margin, 32px);
  overflow-y: auto;
  pointer-events: none;
  position: fixed;
  bottom: env(save-area-inset-bottom, 0px);
  right: env(save-area-inset-right, 0px);
  top: env(save-area-inset-top, 0px);
  left: env(save-area-inset-left, 0px);
  height: 100vh;
  max-height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  width: min(
    var(--clg-dimension-app-alert-toast-max-width, 616px) +
      (var(--clg-dimension-sem-spacing-page-margin, 32px) * 2),
    100%
  );
}

@media only screen and (min-width: 480px) {
  .clg-toast-group {
    top: auto;
    left: auto;
  }
}

:host(clg-on-image) {
  display: block;
  width: 100%;
  height: 100%;
}

.clg-on-image {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}

.clg-on-image__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clg-color-app-image-placeholder-background, #efecea);
  color: var(--clg-color-app-image-placeholder-icon, #d5cdc8);
  position: absolute;
  inset: 0;
}

.clg-on-image__placeholder svg {
  font-size: var(--clg-dimension-sem-icon-core-larger, 32px);
}

:host(clg-on-image:not([placeholder])) .clg-on-image__placeholder {
  display: none;
}

:host(clg-on-image) slot:not([name])::slotted(*) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clg-on-image-top-start,
.clg-on-image-top-end,
.clg-on-image-bottom-start,
.clg-on-image-bottom-end {
  position: absolute;
}

.clg-on-image-top-start,
.clg-on-image-top-end {
  padding-top: var(--clg-dimension-pal-grid-100, 8px);
  inset-block-start: 0;
}

.clg-on-image-bottom-start,
.clg-on-image-bottom-end {
  padding-bottom: var(--clg-dimension-pal-grid-100, 8px);
  inset-block-end: 0;
}

.clg-on-image-top-start,
.clg-on-image-bottom-start {
  padding-inline-start: var(--clg-dimension-pal-grid-100, 8px);
  inset-inline-start: 0;
}

.clg-on-image-top-end,
.clg-on-image-bottom-end {
  padding-inline-end: var(--clg-dimension-pal-grid-100, 8px);
  inset-inline-end: 0;
}

:host(:where(clg-chip-button, clg-chip-toggle-button)) {
  display: inline-block;
}

.clg-chip {
  display: block;
  width: 100%;
  min-width: var(--clg-dimension-sem-interaction-base, 48px);
  min-height: var(--clg-dimension-sem-interaction-small, 36px);
  padding: var(--clg-dimension-app-chip-padding-vertical, 4px)
    var(--clg-dimension-app-chip-padding-horizontal, 12px);
  position: relative;
  border-style: solid;
  border-radius: var(--clg-shape-app-chip-border-radius, 8px);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--clg-typography-pal-family-sans-serif-bold);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
  --clg-icon-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host(clg-chip-button[variant="primary"]) .clg-chip,
:host(clg-chip-toggle-button[selected]) .clg-chip {
  border-color: var(--clg-color-app-button-primary-border, rgba(0, 0, 0, 0));
  border-width: var(--clg-shape-app-chip-border-width, 1px);
  background: var(--clg-color-app-button-primary-background, #312b36);
  color: var(--clg-color-app-button-primary-text, #faf8f5);
}

:host(clg-chip-button[variant="primary"]) .clg-chip:not(:disabled):hover,
:host(clg-chip-toggle-button[selected]) .clg-chip:not(:disabled):hover {
  border-color: var(
    --clg-color-app-button-primary-hovered-border,
    rgba(0, 0, 0, 0)
  );
  background: var(--clg-color-app-button-primary-hovered-background, #534d4c);
  color: var(--clg-color-app-button-primary-hovered-text, #faf8f5);
}

:host(clg-chip-button[variant="primary"]) .clg-chip:not(:disabled):active,
:host(clg-chip-toggle-button[selected]) .clg-chip:not(:disabled):active {
  border-color: var(
    --clg-color-app-button-primary-pressed-border,
    rgba(0, 0, 0, 0)
  );
  background: var(--clg-color-app-button-primary-pressed-background, #605957);
  color: var(--clg-color-app-button-primary-pressed-text, #faf8f5);
}

:host(clg-chip-button[variant="primary"]) .clg-chip:disabled,
:host(clg-chip-toggle-button[selected]) .clg-chip:disabled {
  border-color: var(
    --clg-color-app-button-primary-disabled-border,
    rgba(0, 0, 0, 0)
  );
  background: var(--clg-color-app-button-primary-disabled-background, #c8bdb7);
  color: var(--clg-color-app-button-primary-disabled-text, #faf8f5);
}

:host(clg-chip-button[variant="secondary"]) .clg-chip,
:host(clg-chip-toggle-button:not([selected])) .clg-chip {
  border-color: var(--clg-color-app-button-tertiary-border, rgba(0, 0, 0, 0));
  border-width: var(--clg-shape-app-chip-border-width, 1px);
  background: var(
    --clg-color-app-button-tertiary-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  color: var(--clg-color-app-button-tertiary-text, #312b36);
}

:host(clg-chip-button[variant="secondary"]) .clg-chip:not(:disabled):hover,
:host(clg-chip-toggle-button:not([selected])) .clg-chip:not(:disabled):hover {
  border-color: var(
    --clg-color-app-button-tertiary-hovered-border,
    rgba(0, 0, 0, 0)
  );
  background: var(
    --clg-color-app-button-tertiary-hovered-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  color: var(--clg-color-app-button-tertiary-hovered-text, #312b36);
}

:host(clg-chip-button[variant="secondary"]) .clg-chip:not(:disabled):active,
:host(clg-chip-toggle-button:not([selected])) .clg-chip:not(:disabled):active {
  border-color: var(
    --clg-color-app-button-tertiary-pressed-border,
    rgba(0, 0, 0, 0)
  );
  background: var(
    --clg-color-app-button-tertiary-pressed-background,
    rgba(51, 20, 0, 0.2588235294)
  );
  color: var(--clg-color-app-button-tertiary-pressed-text, #312b36);
}

:host(clg-chip-button[variant="secondary"]) .clg-chip:disabled,
:host(clg-chip-toggle-button:not([selected])) .clg-chip:disabled {
  border-color: var(
    --clg-color-app-button-tertiary-disabled-border,
    rgba(0, 0, 0, 0)
  );
  background: var(
    --clg-color-app-button-tertiary-disabled-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  color: var(--clg-color-app-button-tertiary-disabled-text, #c8bdb7);
}

.clg-chip:disabled {
  cursor: not-allowed;
}

:host([pseudo-focus]) .clg-chip:not(:disabled),
.clg-chip:not(:disabled):focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible]) .clg-chip:not(:disabled),
.clg-chip:not(:disabled):focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus]) .clg-chip:not(:disabled):not(:focus-visible),
.clg-chip:not(:disabled):focus:not(:focus-visible) {
  outline: none;
}

:host([pseudo-focus]) .clg-chip:not(:disabled),
.clg-chip:not(:disabled):focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-within]) .clg-chip:not(:disabled),
.clg-chip:not(:disabled):focus-within {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus]) .clg-chip:not(:disabled):not(:focus-visible),
.clg-chip:not(:disabled):focus:not(:focus-visible) {
  outline: none;
}

:host([size="small"]) .clg-chip {
  min-width: var(--clg-dimension-sem-interaction-smallest, 24px);
  min-height: var(--clg-dimension-sem-interaction-smallest, 24px);
  font-family: var(--clg-typography-sem-product-title-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-title-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-title-smallest-font-size);
  line-height: var(--clg-typography-sem-product-title-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-title-smallest-letter-spacing
  );
  --clg-icon-size: var(--clg-dimension-sem-icon-core-smallest, 12px);
}

:host([size="large"]) .clg-chip {
  min-height: var(--clg-dimension-pal-grid-600, 48px);
  padding: var(--clg-dimension-app-chip-large-padding-vertical, 8px)
    var(--clg-dimension-app-chip-large-padding-horizontal, 16px);
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
}

.clg-chip slot[name="start-graphic"] {
  display: none;
}

:host(:has([slot="start-graphic"])) .clg-chip slot[name="start-graphic"] {
  display: contents;
}

@scope {
  :scope:has([slot="start-graphic"]) .clg-chip slot[name="start-graphic"] {
    display: contents;
  }
}

.clg-chip slot[name="end-graphic"] {
  display: none;
}

:host(:has([slot="end-graphic"])) .clg-chip slot[name="end-graphic"] {
  display: contents;
}

@scope {
  :scope:has([slot="end-graphic"]) .clg-chip slot[name="end-graphic"] {
    display: contents;
  }
}

.clg-chip__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--clg-dimension-app-chip-gap, 8px);
  min-width: 0;
}

.clg-chip__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:host(clg-chip-toggle-button[selected-label][selected])
  .clg-chip__unselected-text,
:host(clg-chip-toggle-button[selected-label]:not([selected]))
  .clg-chip__selected-text,
:host(clg-chip-toggle-button[selected]) slot[name="unselected-icon"],
:host(clg-chip-toggle-button:not([selected])) slot[name="selected-icon"] {
  display: none;
}

:host(clg-chip-toggle-button[icon-only]) .clg-chip__text {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

:host(clg-removable-chip) {
  display: inline-block;
  --clg-removable-chip-padding-vertical: var(
    --clg-dimension-app-chip-padding-vertical,
    4px
  );
  --clg-removable-chip-padding-horizontal: var(
    --clg-dimension-app-chip-padding-horizontal,
    12px
  );
  --clg-removable-chip-min-width: var(
    --clg-dimension-sem-interaction-base,
    48px
  );
  --clg-removable-chip-min-height: var(
    --clg-dimension-app-chip-small-minimum-height,
    36px
  );
  --clg-removable-chip-border-radius: var(
    --clg-shape-app-chip-border-radius,
    8px
  );
  --clg-removable-chip-border-width: var(
    --clg-shape-app-chip-removable-border-width,
    0px
  );
  --clg-removable-chip-border-color: var(
    --clg-color-app-chip-removable-border,
    rgba(0, 0, 0, 0)
  );
  --clg-removable-chip-background: var(
    --clg-color-app-chip-removable-background,
    #312b36
  );
  --clg-removable-chip-text-color: var(
    --clg-color-app-chip-removable-text,
    #faf8f5
  );
  --clg-removable-chip-cursor: pointer;
}

:host(clg-removable-chip[size="small"]) {
  --clg-removable-chip-min-width: var(
    --clg-dimension-sem-interaction-smallest,
    24px
  );
  --clg-removable-chip-min-height: var(
    --clg-dimension-sem-interaction-smallest,
    24px
  );
}

:host(clg-removable-chip[size="small"]) .clg-removable-chip {
  font-family: var(--clg-typography-sem-product-title-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-title-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-title-smallest-font-size);
  line-height: var(--clg-typography-sem-product-title-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-title-smallest-letter-spacing
  );
}

:host(clg-removable-chip[size="large"]) {
  --clg-removable-chip-padding-vertical: var(
    --clg-dimension-app-chip-large-padding-vertical,
    8px
  );
  --clg-removable-chip-padding-horizontal: var(
    --clg-dimension-app-chip-large-padding-horizontal,
    16px
  );
  --clg-removable-chip-min-height: var(
    --clg-dimension-sem-interaction-base,
    48px
  );
}

:host(clg-removable-chip[size="large"]) .clg-removable-chip {
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
}

:host(clg-removable-chip[disabled]) {
  --clg-removable-chip-border-color: var(
    --clg-color-app-chip-removable-disabled-border,
    rgba(0, 0, 0, 0)
  );
  --clg-removable-chip-background: var(
    --clg-color-app-chip-removable-disabled-background,
    #c8bdb7
  );
  --clg-removable-chip-text-color: var(
    --clg-color-app-chip-removable-disabled-text,
    #faf8f5
  );
  --clg-removable-chip-cursor: not-allowed;
}

.clg-removable-chip {
  display: inline-block;
  min-width: var(--clg-removable-chip-min-width);
  min-height: var(--clg-removable-chip-min-height);
  background-color: var(--clg-removable-chip-background);
  border: var(--clg-removable-chip-border-width) solid
    var(--clg-removable-chip-border-color);
  border-radius: var(--clg-removable-chip-border-radius);
  padding: var(--clg-removable-chip-padding-vertical)
    var(--clg-removable-chip-padding-horizontal);
  color: var(--clg-removable-chip-text-color);
  cursor: var(--clg-removable-chip-cursor);
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

.clg-removable-chip .clg-removable-chip__container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--clg-dimension-app-chip-gap, 8px);
}

:host(clg-removable-chip:not([disabled])) .clg-removable-chip:hover {
  --clg-removable-chip-border-color: var(
    --clg-color-app-chip-removable-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-removable-chip-background: var(
    --clg-color-app-chip-removable-hovered-background,
    #534d4c
  );
  color: var(--clg-color-app-chip-removable-hovered-text, #faf8f5);
}

:host(clg-removable-chip:not([disabled])) .clg-removable-chip:active {
  --clg-removable-chip-border-color: var(
    --clg-color-app-chip-removable-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-removable-chip-background: var(
    --clg-color-app-chip-removable-pressed-background,
    #605957
  );
  color: var(--clg-color-app-chip-removable-pressed-text, #faf8f5);
}

:host([pseudo-focus])
  :host(clg-removable-chip:not([disabled]))
  .clg-removable-chip,
:host(clg-removable-chip:not([disabled])) .clg-removable-chip:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible])
  :host(clg-removable-chip:not([disabled]))
  .clg-removable-chip,
:host(clg-removable-chip:not([disabled])) .clg-removable-chip:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus])
  :host(clg-removable-chip:not([disabled]))
  .clg-removable-chip:not(:focus-visible),
:host(clg-removable-chip:not([disabled]))
  .clg-removable-chip:focus:not(:focus-visible) {
  outline: none;
}

.clg-removable-chip svg {
  font-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host(clg-removable-chip-group) {
  display: inline-block;
}

.clg-removable-chip-group {
  display: flex;
  align-items: center;
  gap: var(--clg-dimension-sem-spacing-chip, 8px);
  flex-wrap: wrap;
}

:host(clg-removable-chip-group[has-scroll]) .clg-removable-chip-group {
  display: contents;
}

:host(clg-removable-chip-group[has-scroll]) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--clg-dimension-sem-spacing-chip, 8px);
  overflow: scroll hidden;
  scrollbar-width: none;
  scroll-timeline: --clg-scroll-overlay-timeline inline;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--clg-scroll-overlay-gradient-width);
}

:host(clg-removable-chip-group[has-scroll])::-webkit-scrollbar {
  display: none;
}

:host(clg-removable-chip-group[has-scroll]) ::slotted(clg-removable-chip) {
  scroll-snap-align: start;
}

:host(clg-selectable-chip) {
  display: inline-block;
  --clg-selectable-chip-padding-vertical: var(
    --clg-dimension-app-chip-padding-vertical,
    4px
  );
  --clg-selectable-chip-padding-horizontal: var(
    --clg-dimension-app-chip-padding-horizontal,
    12px
  );
  --clg-selectable-chip-min-width: var(
    --clg-dimension-sem-interaction-base,
    48px
  );
  --clg-selectable-chip-min-height: var(
    --clg-dimension-sem-interaction-small,
    36px
  );
  --clg-selectable-chip-gap: var(--clg-dimension-app-chip-gap, 8px);
  --clg-selectable-chip-border-radius: var(
    --clg-shape-app-chip-border-radius,
    8px
  );
  --clg-selectable-chip-border-width: 1px;
  --clg-selectable-chip-border-color: var(
    --clg-color-app-chip-selectable-border,
    rgba(0, 0, 0, 0)
  );
  --clg-selectable-chip-background: var(
    --clg-color-app-chip-selectable-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-selectable-chip-text-color: var(
    --clg-color-app-chip-selectable-text,
    #312b36
  );
  --clg-selectable-chip-cursor: pointer;
}

:host(clg-selectable-chip[size="small"]) {
  --clg-selectable-chip-min-width: var(
    --clg-dimension-sem-interaction-smallest,
    24px
  );
  --clg-selectable-chip-min-height: var(
    --clg-dimension-sem-interaction-smallest,
    24px
  );
}

:host(clg-selectable-chip[size="small"]) .clg-selectable-chip {
  font-family: var(--clg-typography-sem-product-title-smallest-font-family);
  font-weight: var(--clg-typography-sem-product-title-smallest-font-weight);
  font-size: var(--clg-typography-sem-product-title-smallest-font-size);
  line-height: var(--clg-typography-sem-product-title-smallest-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-title-smallest-letter-spacing
  );
}

:host(clg-selectable-chip[size="large"]) {
  --clg-selectable-chip-padding-vertical: var(
    --clg-dimension-app-chip-large-padding-vertical,
    8px
  );
  --clg-selectable-chip-padding-horizontal: var(
    --clg-dimension-app-chip-large-padding-horizontal,
    16px
  );
  --clg-selectable-chip-min-height: var(--clg-dimension-pal-grid-600, 48px);
}

:host(clg-selectable-chip[size="large"]) .clg-selectable-chip {
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
}

:host(clg-selectable-chip[icon-only]) {
  --clg-selectable-chip-padding-horizontal: var(
    --clg-selectable-chip-padding-vertical
  );
}

:host(clg-selectable-chip[selected]) {
  --clg-selectable-chip-border-color: var(
    --clg-color-app-chip-selectable-selected-border,
    rgba(0, 0, 0, 0)
  );
  --clg-selectable-chip-background: var(
    --clg-color-app-chip-selectable-selected-background,
    #312b36
  );
  --clg-selectable-chip-text-color: var(
    --clg-color-app-chip-selectable-selected-text,
    #faf8f5
  );
}

:host(clg-selectable-chip[disabled]) {
  --clg-selectable-chip-border-color: var(
    --clg-color-app-chip-selectable-disabled-border,
    rgba(0, 0, 0, 0)
  );
  --clg-selectable-chip-background: var(
    --clg-color-app-chip-selectable-disabled-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-selectable-chip-text-color: var(
    --clg-color-app-chip-selectable-disabled-text,
    #c8bdb7
  );
  --clg-selectable-chip-cursor: not-allowed;
}

.clg-selectable-chip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--clg-selectable-chip-gap);
  min-width: var(--clg-selectable-chip-min-width);
  min-height: var(--clg-selectable-chip-min-height);
  padding: var(--clg-selectable-chip-padding-vertical)
    var(--clg-selectable-chip-padding-horizontal);
  border: var(--clg-selectable-chip-border-width) solid
    var(--clg-selectable-chip-border-color);
  border-radius: var(--clg-selectable-chip-border-radius);
  background-color: var(--clg-selectable-chip-background);
  color: var(--clg-selectable-chip-text-color);
  cursor: var(--clg-selectable-chip-cursor);
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  font-family: var(--clg-typography-pal-family-sans-serif-bold);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

:host(clg-selectable-chip:not([disabled])) .clg-selectable-chip:hover {
  --clg-selectable-chip-border-color: var(
    --clg-color-app-chip-selectable-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-selectable-chip-background: var(
    --clg-color-app-chip-selectable-hovered-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  color: var(--clg-color-app-chip-selectable-hovered-text, #312b36);
}

:host(clg-selectable-chip:not([disabled])) .clg-selectable-chip:active {
  --clg-selectable-chip-border-color: var(
    --clg-color-app-chip-selectable-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-selectable-chip-background: var(
    --clg-color-app-chip-selectable-pressed-background,
    rgba(51, 20, 0, 0.2588235294)
  );
  color: var(--clg-color-app-chip-selectable-pressed-text, #312b36);
}

:host([pseudo-focus])
  :host(clg-selectable-chip:not([disabled]))
  .clg-selectable-chip,
:host(clg-selectable-chip:not([disabled])) .clg-selectable-chip:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible])
  :host(clg-selectable-chip:not([disabled]))
  .clg-selectable-chip,
:host(clg-selectable-chip:not([disabled])) .clg-selectable-chip:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus])
  :host(clg-selectable-chip:not([disabled]))
  .clg-selectable-chip:not(:focus-visible),
:host(clg-selectable-chip:not([disabled]))
  .clg-selectable-chip:focus:not(:focus-visible) {
  outline: none;
}

:host(clg-selectable-chip[selected]:not([disabled]))
  .clg-selectable-chip:hover {
  --clg-selectable-chip-border-color: var(
    --clg-color-app-chip-selectable-selected-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-selectable-chip-background: var(
    --clg-color-app-chip-selectable-selected-hovered-background,
    #534d4c
  );
  color: var(--clg-color-app-chip-selectable-selected-hovered-text, #faf8f5);
}

:host(clg-selectable-chip-group) {
  display: inline-block;
}

.clg-selectable-chip-group {
  display: flex;
  align-items: center;
  gap: var(--clg-dimension-sem-spacing-chip, 8px);
  flex-wrap: wrap;
}

:host(clg-selectable-chip-group[has-scroll]) .clg-selectable-chip-group {
  display: contents;
}

:host(clg-selectable-chip-group[has-scroll]) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--clg-dimension-sem-spacing-chip, 8px);
  overflow: scroll hidden;
  scrollbar-width: none;
  scroll-timeline: --clg-scroll-overlay-timeline inline;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--clg-scroll-overlay-gradient-width);
}

:host(clg-selectable-chip-group[has-scroll])::-webkit-scrollbar {
  display: none;
}

:host(clg-selectable-chip-group[has-scroll]) ::slotted(clg-selectable-chip) {
  scroll-snap-align: start;
}

:host(clg-toggle-button[variant="primary"]) .clg-toggle-button {
  --clg-toggle-button-background: var(
    --clg-color-app-button-toggle-primary-background,
    #312b36
  );
  --clg-toggle-button-text-color: var(
    --clg-color-app-button-toggle-primary-text,
    #faf8f5
  );
  --clg-toggle-button-border-color: var(
    --clg-color-app-button-toggle-primary-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-hovered: var(
    --clg-color-app-button-toggle-primary-hovered-background,
    #534d4c
  );
  --clg-toggle-button-text-hovered: var(
    --clg-color-app-button-toggle-primary-hovered-text,
    #faf8f5
  );
  --clg-toggle-button-border-hovered: var(
    --clg-color-app-button-toggle-primary-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-pressed: var(
    --clg-color-app-button-toggle-primary-pressed-background,
    #605957
  );
  --clg-toggle-button-text-pressed: var(
    --clg-color-app-button-toggle-primary-pressed-text,
    #faf8f5
  );
  --clg-toggle-button-border-pressed: var(
    --clg-color-app-button-toggle-primary-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-disabled: var(
    --clg-color-app-button-toggle-primary-disabled-background,
    #c8bdb7
  );
  --clg-toggle-button-text-disabled: var(
    --clg-color-app-button-toggle-primary-disabled-text,
    #faf8f5
  );
  --clg-toggle-button-border-disabled: var(
    --clg-color-app-button-toggle-primary-disabled-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-selected: var(
    --clg-color-app-button-toggle-primary-selected-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected: var(
    --clg-color-app-button-toggle-primary-selected-text,
    #312b36
  );
  --clg-toggle-button-border-selected: var(
    --clg-color-app-button-toggle-primary-selected-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-hovered: var(
    --clg-color-app-button-toggle-primary-selected-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-toggle-button-text-selected-hovered: var(
    --clg-color-app-button-toggle-primary-selected-hovered-text,
    #312b36
  );
  --clg-toggle-button-border-selected-hovered: var(
    --clg-color-app-button-toggle-primary-selected-hovered-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-pressed: var(
    --clg-color-app-button-toggle-primary-selected-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-toggle-button-text-selected-pressed: var(
    --clg-color-app-button-toggle-primary-selected-pressed-text,
    #312b36
  );
  --clg-toggle-button-border-selected-pressed: var(
    --clg-color-app-button-toggle-primary-selected-pressed-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-disabled: var(
    --clg-color-app-button-toggle-primary-selected-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected-disabled: var(
    --clg-color-app-button-toggle-primary-selected-disabled-text,
    #c8bdb7
  );
  --clg-toggle-button-border-selected-disabled: var(
    --clg-color-app-button-toggle-primary-selected-disabled-border,
    #c8bdb7
  );
}

:host(clg-toggle-button[variant="primary"][background-type="light"])
  .clg-toggle-button {
  --clg-toggle-button-background: var(
    --clg-color-app-button-toggle-primary-on-surface-light-background,
    #312b36
  );
  --clg-toggle-button-text-color: var(
    --clg-color-app-button-toggle-primary-on-surface-light-text,
    #faf8f5
  );
  --clg-toggle-button-border-color: var(
    --clg-color-app-button-toggle-primary-on-surface-light-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-light-hovered-background,
    #534d4c
  );
  --clg-toggle-button-text-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-light-hovered-text,
    #faf8f5
  );
  --clg-toggle-button-border-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-light-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-light-pressed-background,
    #605957
  );
  --clg-toggle-button-text-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-light-pressed-text,
    #faf8f5
  );
  --clg-toggle-button-border-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-light-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-light-disabled-background,
    #c8bdb7
  );
  --clg-toggle-button-text-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-light-disabled-text,
    #faf8f5
  );
  --clg-toggle-button-border-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-light-disabled-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-selected: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-text,
    #312b36
  );
  --clg-toggle-button-border-selected: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-toggle-button-text-selected-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-hovered-text,
    #312b36
  );
  --clg-toggle-button-border-selected-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-hovered-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-toggle-button-text-selected-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-pressed-text,
    #312b36
  );
  --clg-toggle-button-border-selected-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-pressed-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-disabled-text,
    #c8bdb7
  );
  --clg-toggle-button-border-selected-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-light-selected-disabled-border,
    #c8bdb7
  );
}

:host(clg-toggle-button[variant="primary"][background-type="dark"])
  .clg-toggle-button {
  --clg-toggle-button-background: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-background,
    #faf8f5
  );
  --clg-toggle-button-text-color: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-text,
    #312b36
  );
  --clg-toggle-button-border-color: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-hovered-background,
    #d5cdc8
  );
  --clg-toggle-button-text-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-hovered-text,
    #312b36
  );
  --clg-toggle-button-border-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-hovered-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-pressed-background,
    #c8bdb7
  );
  --clg-toggle-button-text-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-pressed-text,
    #312b36
  );
  --clg-toggle-button-border-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-pressed-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-disabled-background,
    #605957
  );
  --clg-toggle-button-text-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-disabled-text,
    #312b36
  );
  --clg-toggle-button-border-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-disabled-border,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-bg-selected: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-text,
    #faf8f5
  );
  --clg-toggle-button-border-selected: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-border,
    #faf8f5
  );
  --clg-toggle-button-bg-selected-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-hovered-background,
    rgba(255, 255, 255, 0.1294117647)
  );
  --clg-toggle-button-text-selected-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-hovered-text,
    #faf8f5
  );
  --clg-toggle-button-border-selected-hovered: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-hovered-border,
    #faf8f5
  );
  --clg-toggle-button-bg-selected-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-pressed-background,
    rgba(255, 255, 255, 0.3803921569)
  );
  --clg-toggle-button-text-selected-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-pressed-text,
    #faf8f5
  );
  --clg-toggle-button-border-selected-pressed: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-pressed-border,
    #faf8f5
  );
  --clg-toggle-button-bg-selected-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-disabled-text,
    #605957
  );
  --clg-toggle-button-border-selected-disabled: var(
    --clg-color-app-button-toggle-primary-on-surface-dark-selected-disabled-border,
    #605957
  );
}

:host(clg-toggle-button[variant="secondary"]) .clg-toggle-button {
  --clg-toggle-button-background: var(
    --clg-color-app-button-toggle-secondary-background,
    #faf8f5
  );
  --clg-toggle-button-text-color: var(
    --clg-color-app-button-toggle-secondary-text,
    #312b36
  );
  --clg-toggle-button-border-color: var(
    --clg-color-app-button-toggle-secondary-border,
    #e0dad6
  );
  --clg-toggle-button-bg-hovered: var(
    --clg-color-app-button-toggle-secondary-hovered-background,
    #efecea
  );
  --clg-toggle-button-text-hovered: var(
    --clg-color-app-button-toggle-secondary-hovered-text,
    #312b36
  );
  --clg-toggle-button-border-hovered: var(
    --clg-color-app-button-toggle-secondary-hovered-border,
    #e0dad6
  );
  --clg-toggle-button-bg-pressed: var(
    --clg-color-app-button-toggle-secondary-pressed-background,
    #d5cdc8
  );
  --clg-toggle-button-text-pressed: var(
    --clg-color-app-button-toggle-secondary-pressed-text,
    #312b36
  );
  --clg-toggle-button-border-pressed: var(
    --clg-color-app-button-toggle-secondary-pressed-border,
    #e0dad6
  );
  --clg-toggle-button-bg-disabled: var(
    --clg-color-app-button-toggle-secondary-disabled-background,
    #faf8f5
  );
  --clg-toggle-button-text-disabled: var(
    --clg-color-app-button-toggle-secondary-disabled-text,
    #c8bdb7
  );
  --clg-toggle-button-border-disabled: var(
    --clg-color-app-button-toggle-secondary-disabled-border,
    #c8bdb7
  );
  --clg-toggle-button-bg-selected: var(
    --clg-color-app-button-toggle-secondary-selected-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected: var(
    --clg-color-app-button-toggle-secondary-selected-text,
    #312b36
  );
  --clg-toggle-button-border-selected: var(
    --clg-color-app-button-toggle-secondary-selected-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-hovered: var(
    --clg-color-app-button-toggle-secondary-selected-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-toggle-button-text-selected-hovered: var(
    --clg-color-app-button-toggle-secondary-selected-hovered-text,
    #312b36
  );
  --clg-toggle-button-border-selected-hovered: var(
    --clg-color-app-button-toggle-secondary-selected-hovered-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-pressed: var(
    --clg-color-app-button-toggle-secondary-selected-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-toggle-button-text-selected-pressed: var(
    --clg-color-app-button-toggle-secondary-selected-pressed-text,
    #312b36
  );
  --clg-toggle-button-border-selected-pressed: var(
    --clg-color-app-button-toggle-secondary-selected-pressed-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-disabled: var(
    --clg-color-app-button-toggle-secondary-selected-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected-disabled: var(
    --clg-color-app-button-toggle-secondary-selected-disabled-text,
    #c8bdb7
  );
  --clg-toggle-button-border-selected-disabled: var(
    --clg-color-app-button-toggle-secondary-selected-disabled-border,
    #c8bdb7
  );
}

:host(clg-toggle-button[variant="secondary"][background-type="light"])
  .clg-toggle-button {
  --clg-toggle-button-background: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-background,
    #faf8f5
  );
  --clg-toggle-button-text-color: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-text,
    #312b36
  );
  --clg-toggle-button-border-color: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-border,
    #e0dad6
  );
  --clg-toggle-button-bg-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-hovered-background,
    #efecea
  );
  --clg-toggle-button-text-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-hovered-text,
    #312b36
  );
  --clg-toggle-button-border-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-hovered-border,
    #e0dad6
  );
  --clg-toggle-button-bg-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-pressed-background,
    #d5cdc8
  );
  --clg-toggle-button-text-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-pressed-text,
    #312b36
  );
  --clg-toggle-button-border-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-pressed-border,
    #e0dad6
  );
  --clg-toggle-button-bg-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-disabled-background,
    #faf8f5
  );
  --clg-toggle-button-text-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-disabled-text,
    #c8bdb7
  );
  --clg-toggle-button-border-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-disabled-border,
    #c8bdb7
  );
  --clg-toggle-button-bg-selected: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-text,
    #312b36
  );
  --clg-toggle-button-border-selected: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-hovered-background,
    rgba(51, 20, 0, 0.0509803922)
  );
  --clg-toggle-button-text-selected-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-hovered-text,
    #312b36
  );
  --clg-toggle-button-border-selected-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-hovered-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-pressed-background,
    rgba(51, 20, 0, 0.1882352941)
  );
  --clg-toggle-button-text-selected-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-pressed-text,
    #312b36
  );
  --clg-toggle-button-border-selected-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-pressed-border,
    #312b36
  );
  --clg-toggle-button-bg-selected-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-disabled-text,
    #c8bdb7
  );
  --clg-toggle-button-border-selected-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-light-selected-disabled-border,
    #c8bdb7
  );
}

:host(clg-toggle-button[variant="secondary"][background-type="dark"])
  .clg-toggle-button {
  --clg-toggle-button-background: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-background,
    #312b36
  );
  --clg-toggle-button-text-color: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-text,
    #faf8f5
  );
  --clg-toggle-button-border-color: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-border,
    #534d4c
  );
  --clg-toggle-button-bg-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-hovered-background,
    #534d4c
  );
  --clg-toggle-button-text-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-hovered-text,
    #faf8f5
  );
  --clg-toggle-button-border-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-hovered-border,
    #534d4c
  );
  --clg-toggle-button-bg-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-pressed-background,
    #605957
  );
  --clg-toggle-button-text-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-pressed-text,
    #faf8f5
  );
  --clg-toggle-button-border-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-pressed-border,
    #534d4c
  );
  --clg-toggle-button-bg-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-disabled-background,
    #312b36
  );
  --clg-toggle-button-text-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-disabled-text,
    #605957
  );
  --clg-toggle-button-border-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-disabled-border,
    #605957
  );
  --clg-toggle-button-bg-selected: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-text,
    #faf8f5
  );
  --clg-toggle-button-border-selected: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-border,
    #faf8f5
  );
  --clg-toggle-button-bg-selected-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-hovered-background,
    rgba(255, 255, 255, 0.1294117647)
  );
  --clg-toggle-button-text-selected-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-hovered-text,
    #faf8f5
  );
  --clg-toggle-button-border-selected-hovered: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-hovered-border,
    #faf8f5
  );
  --clg-toggle-button-bg-selected-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-pressed-background,
    rgba(255, 255, 255, 0.3803921569)
  );
  --clg-toggle-button-text-selected-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-pressed-text,
    #faf8f5
  );
  --clg-toggle-button-border-selected-pressed: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-pressed-border,
    #faf8f5
  );
  --clg-toggle-button-bg-selected-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-disabled-background,
    rgba(0, 0, 0, 0)
  );
  --clg-toggle-button-text-selected-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-disabled-text,
    #605957
  );
  --clg-toggle-button-border-selected-disabled: var(
    --clg-color-app-button-toggle-secondary-on-surface-dark-selected-disabled-border,
    #605957
  );
}

:host(clg-toggle-button) {
  display: inline-block;
  --clg-toggle-button-padding-vertical: var(
    --clg-dimension-app-button-padding-vertical,
    12px
  );
  --clg-toggle-button-padding-horizontal: var(
    --clg-dimension-app-button-padding-horizontal,
    18px
  );
  --clg-toggle-button-min-width: var(
    --clg-dimension-app-button-minimum-width,
    80px
  );
  --clg-toggle-button-min-height: var(
    --clg-dimension-app-button-minimum-height,
    48px
  );
  --clg-toggle-button-border-radius: var(
    --clg-shape-app-button-border-radius,
    24px
  );
  --clg-toggle-button-cursor: pointer;
}

:host(clg-toggle-button[size="small"]) {
  --clg-toggle-button-padding-vertical: calc(
    var(--clg-dimension-pal-spacing-100, 6px) +
      var(--clg-dimension-pal-spacing-050, 3px)
  );
  --clg-toggle-button-padding-horizontal: var(
    --clg-dimension-app-button-small-padding-horizontal,
    15px
  );
  --clg-toggle-button-min-height: var(
    --clg-dimension-sem-interaction-small,
    36px
  );
  --clg-toggle-button-border-radius: var(
    --clg-shape-app-button-small-border-radius,
    18px
  );
}

:host(clg-toggle-button[icon-only]) {
  --clg-toggle-button-min-width: var(
    --clg-dimension-sem-interaction-base,
    48px
  );
  --clg-toggle-button-size: var(--clg-dimension-app-button-icon-size, 48px);
}

:host(clg-toggle-button[icon-only][size="small"]) {
  --clg-toggle-button-min-width: var(
    --clg-dimension-sem-interaction-smallest,
    24px
  );
  --clg-toggle-button-size: var(
    --clg-dimension-app-button-icon-small-size,
    36px
  );
}

:host(clg-toggle-button[disabled]) {
  --clg-toggle-button-cursor: not-allowed;
}

.clg-toggle-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--clg-dimension-app-button-gap, 6px);
  min-width: var(--clg-toggle-button-min-width);
  min-height: var(--clg-toggle-button-min-height);
  padding: var(--clg-toggle-button-padding-vertical)
    var(--clg-toggle-button-padding-horizontal);
  border: var(--clg-shape-app-button-secondary-border-width, 1px) solid
    var(--clg-toggle-button-border-color);
  border-radius: var(--clg-toggle-button-border-radius);
  background-color: var(--clg-toggle-button-background);
  color: var(--clg-toggle-button-text-color);
  cursor: var(--clg-toggle-button-cursor);
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  transition:
    scale
      var(
        --clg-effect-app-button-on-hover-scale-curve,
        cubic-bezier(0.3, 0, 0, 1)
      )
      var(--clg-effect-app-button-on-hover-scale-duration, 75ms),
    background-color
      var(--clg-effect-app-button-on-hover-fade-curve, cubic-bezier(0, 0, 1, 1))
      var(--clg-effect-app-button-on-hover-fade-duration, 25ms);
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
}

:host(clg-toggle-button[size="small"]) .clg-toggle-button {
  font-family: var(--clg-typography-pal-family-sans-serif-bold);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

:host(clg-toggle-button[icon-only]) .clg-toggle-button {
  width: var(--clg-toggle-button-size);
  height: var(--clg-toggle-button-size);
  padding: 0;
}

:host(clg-toggle-button[selected]) .clg-toggle-button {
  --clg-toggle-button-background: var(--clg-toggle-button-bg-selected);
  --clg-toggle-button-text-color: var(--clg-toggle-button-text-selected);
  --clg-toggle-button-border-color: var(--clg-toggle-button-border-selected);
}

:host(clg-toggle-button[disabled]) .clg-toggle-button {
  --clg-toggle-button-background: var(--clg-toggle-button-bg-disabled);
  --clg-toggle-button-text-color: var(--clg-toggle-button-text-disabled);
  --clg-toggle-button-border-color: var(--clg-toggle-button-border-disabled);
}

:host(clg-toggle-button[selected][disabled]) .clg-toggle-button {
  --clg-toggle-button-background: var(--clg-toggle-button-bg-selected-disabled);
  --clg-toggle-button-text-color: var(
    --clg-toggle-button-text-selected-disabled
  );
  --clg-toggle-button-border-color: var(
    --clg-toggle-button-border-selected-disabled
  );
}

:host(clg-toggle-button:not([disabled])) .clg-toggle-button:hover {
  --clg-toggle-button-background: var(--clg-toggle-button-bg-hovered);
  --clg-toggle-button-text-color: var(--clg-toggle-button-text-hovered);
  --clg-toggle-button-border-color: var(--clg-toggle-button-border-hovered);
  scale: var(--clg-effect-app-button-on-hover-scale-to, 1.01);
}

:host(clg-toggle-button:not([disabled])) .clg-toggle-button:active {
  --clg-toggle-button-background: var(--clg-toggle-button-bg-pressed);
  --clg-toggle-button-text-color: var(--clg-toggle-button-text-pressed);
  --clg-toggle-button-border-color: var(--clg-toggle-button-border-pressed);
  scale: var(--clg-effect-app-button-on-press-scale-to, 0.94);
  transition:
    scale
      var(
        --clg-effect-app-button-on-press-scale-curve,
        cubic-bezier(0, 0, 0, 1)
      )
      var(--clg-effect-app-button-on-press-scale-duration, 100ms),
    background-color
      var(--clg-effect-app-button-on-press-fade-curve, cubic-bezier(0, 0, 1, 1))
      var(--clg-effect-app-button-on-press-fade-duration, 25ms);
}

:host([pseudo-focus])
  :host(clg-toggle-button:not([disabled]))
  .clg-toggle-button,
:host(clg-toggle-button:not([disabled])) .clg-toggle-button:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible])
  :host(clg-toggle-button:not([disabled]))
  .clg-toggle-button,
:host(clg-toggle-button:not([disabled])) .clg-toggle-button:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus])
  :host(clg-toggle-button:not([disabled]))
  .clg-toggle-button:not(:focus-visible),
:host(clg-toggle-button:not([disabled]))
  .clg-toggle-button:focus:not(:focus-visible) {
  outline: none;
}

:host(clg-toggle-button[selected]:not([disabled])) .clg-toggle-button:hover {
  --clg-toggle-button-background: var(--clg-toggle-button-bg-selected-hovered);
  --clg-toggle-button-text-color: var(
    --clg-toggle-button-text-selected-hovered
  );
  --clg-toggle-button-border-color: var(
    --clg-toggle-button-border-selected-hovered
  );
}

:host(clg-toggle-button[selected]:not([disabled])) .clg-toggle-button:active {
  --clg-toggle-button-background: var(--clg-toggle-button-bg-selected-pressed);
  --clg-toggle-button-text-color: var(
    --clg-toggle-button-text-selected-pressed
  );
  --clg-toggle-button-border-color: var(
    --clg-toggle-button-border-selected-pressed
  );
}

:host(clg-toggle-button[selected-label][selected])
  .clg-toggle-button__unselected-text {
  display: none;
}

:host(clg-toggle-button[selected-label]:not([selected]))
  .clg-toggle-button__selected-text {
  display: none;
}

:host(clg-toggle-button[selected]) slot[name="unselected-icon"] {
  display: none;
}

:host(clg-toggle-button:not([selected])) slot[name="selected-icon"] {
  display: none;
}

:host(clg-toggle-button[icon-only]) .clg-toggle-button__label {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

:host(clg-label-text) {
  display: inline-block;
}

:host(clg-label-text[visually-hidden]) {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.clg-label-text {
  display: inline-block;
  color: inherit;
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
}

:host(clg-label-text[disabled]) .clg-label-text {
  color: var(--clg-color-sem-text-disabled, #c8bdb7);
}

:host(clg-label-text[variant="subtle"]) .clg-label-text {
  font-family: var(--clg-typography-sem-product-body-base-font-family);
  font-weight: var(--clg-typography-sem-product-body-base-font-weight);
  font-size: var(--clg-typography-sem-product-body-base-font-size);
  line-height: var(--clg-typography-sem-product-body-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-base-letter-spacing);
}

:host(clg-label-text[size="small"]) .clg-label-text {
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

:host(clg-label-text[variant="subtle"][size="small"]) .clg-label-text {
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

:host(clg-label-text[nowrap]) .clg-label-text {
  white-space: nowrap;
}

:host(clg-select) {
  display: block !important;
  width: 100%;
}

.clg-select {
  width: 100%;
}

.clg-select__before {
  margin-bottom: var(--clg-dimension-pal-grid-050, 4px);
}

.clg-select__visual-box {
  position: relative;
  width: 100%;
}

.clg-select__control {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: var(--clg-color-app-input-background, rgba(0, 0, 0, 0));
  color: var(--clg-color-app-input-text, #312b36);
  display: block;
  width: 100%;
  font-family: var(--clg-typography-sem-product-body-base-font-family);
  font-weight: var(--clg-typography-sem-product-body-base-font-weight);
  font-size: var(--clg-typography-sem-product-body-base-font-size);
  line-height: var(--clg-typography-sem-product-body-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-base-letter-spacing);
  line-height: 1;
  border: var(--clg-shape-app-input-border-width, 1px) solid
    var(--clg-color-app-input-border, #928681);
  border-radius: var(--clg-shape-app-input-border-radius, 8px);
  color: var(--clg-color-app-input-text, #312b36);
  min-height: var(--clg-dimension-app-input-minimum-height, 48px);
  gap: var(--clg-dimension-app-input-gap, 4px);
  text-overflow: ellipsis;
  padding-left: var(--clg-dimension-app-input-padding-horizontal, 12px);
  padding-right: calc(
    var(--clg-dimension-app-input-padding-horizontal, 12px) +
      var(--clg-dimension-sem-icon-core-base, 24px) +
      var(--clg-dimension-pal-grid-050, 4px)
  );
}

:host(clg-select[size="small"]) .clg-select__control {
  min-height: var(--clg-dimension-app-input-small-minimum-height, 36px);
  font-family: var(--clg-typography-pal-family-sans-serif-regular);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
  line-height: 1;
}

.clg-select__control:focus {
  outline: 0;
}

.clg-select__control:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(--clg-focus-ring-offset, 0);
  border-color: rgba(0, 0, 0, 0);
}

:host([invalid]) .clg-select__control {
  background-color: var(--clg-color-app-input-error-background, #fdecef);
  border-color: var(
    --clg-color-app-input-selectable-error-selected-border,
    #c7102f
  );
  color: var(--clg-color-app-input-error-text, #c7102f);
}

:host([disabled]) .clg-select__control {
  cursor: not-allowed;
  background-color: var(--clg-color-app-input-disabled-background, #efecea);
  border-color: var(--clg-color-app-input-disabled-border, #928681);
  color: var(--clg-color-app-input-disabled-text, #736b68);
}

.clg-select__control:has(input) {
  align-items: center;
}

:host(clg-select[orientation="horizontal"]:not([size="small"]))
  .clg-select__control {
  text-align: right;
  text-align-last: right;
  padding-left: calc(
    var(--clg-dimension-app-input-padding-horizontal, 12px) +
      var(--clg-select-label-width, 0px) +
      var(--clg-dimension-pal-grid-200, 16px)
  );
}

.clg-select__control--placeholder:has(option:first-child[selected][disabled]) {
  color: var(--clg-color-sem-text-placeholder, #736b68);
}

.clg-select__inline-label {
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
  left: var(--clg-dimension-app-input-padding-horizontal, 12px);
  display: none;
}

:host(clg-select[orientation="horizontal"]:not([size="small"]))
  .clg-select__inline-label {
  display: block;
}

.clg-select svg[data-name="directdown"] {
  display: block;
  position: absolute;
  right: var(--clg-dimension-app-input-padding-horizontal, 12px);
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
  font-size: var(--clg-dimension-sem-icon-core-base, 24px);
}

:host([size="small"]) .clg-select svg[data-name="directdown"] {
  font-size: var(--clg-dimension-sem-icon-core-smaller, 16px);
}

:host(clg-select[orientation="horizontal"]:not([size="small"]))
  .clg-text-field__before {
  display: none;
}

:host(clg-tooltip) {
  display: contents;
  --clg-float-arrow-color: var(--clg-color-app-tooltip-background);
  --clg-float-arrow-width: 12px;
  --clg-float-arrow-height: 5px;
  --clg-float-arrow-offset: 5px;
  --clg-float-arrow-transform-top: rotate(180deg);
  --clg-float-arrow-transform-bottom: none;
  --clg-float-arrow-clip-path: path(
    "M12 5L7.41 0.41C6.63 -0.37 5.37 -0.37 4.59 0.41L0 5H12Z"
  );
  --clg-float-arrow-transform-left: none;
  --clg-float-arrow-transform-right: none;
  --clg-float-arrow-width-horizontal: 5px;
  --clg-float-arrow-height-horizontal: 12px;
  --clg-float-arrow-clip-path-left: path(
    "M0 0L4.59 4.59C5.37 5.37 5.37 6.63 4.59 7.41L0 12V0Z"
  );
  --clg-float-arrow-clip-path-right: path(
    "M5 12L0.41 7.41C-0.37 6.63 -0.37 5.37 0.41 4.59L5 0V12Z"
  );
  --clg-tooltip-background-color: var(--clg-color-app-tooltip-background);
  --clg-tooltip-text-color: var(--clg-color-app-tooltip-text);
  --clg-tooltip-padding: var(--clg-dimension-app-tooltip-padding-vertical)
    var(--clg-dimension-app-tooltip-padding-horizontal);
  --clg-tooltip-border-radius: var(--clg-shape-app-tooltip-border-radius);
  --clg-tooltip-font-size: var(--clg-font-size-app-tooltip-text);
}

.clg-tooltip__body {
  background: var(--clg-tooltip-background-color);
  color: var(--clg-color-app-tooltip-text);
  padding: var(--clg-tooltip-padding);
  border-radius: var(--clg-tooltip-border-radius);
  font-size: var(--clg-tooltip-font-size);
  max-width: var(
    --clg-tooltip-max-width,
    var(--clg-dimension-app-tooltip-max-width, 240px)
  );
  word-wrap: break-word;
}

:host(clg-popover) {
  display: contents;
  --clg-float-arrow-color: var(--clg-color-app-popover-background, #ffffff);
  --clg-float-arrow-width: 12px;
  --clg-float-arrow-height: 5px;
  --clg-float-arrow-offset: 5px;
  --clg-float-arrow-transform-top: rotate(180deg);
  --clg-float-arrow-transform-bottom: none;
  --clg-float-arrow-clip-path: path(
    "M12 5L7.41 0.41C6.63 -0.37 5.37 -0.37 4.59 0.41L0 5H12Z"
  );
  --clg-float-arrow-transform-left: none;
  --clg-float-arrow-transform-right: none;
  --clg-float-arrow-width-horizontal: 5px;
  --clg-float-arrow-height-horizontal: 12px;
  --clg-float-arrow-clip-path-left: path(
    "M0 0L4.59 4.59C5.37 5.37 5.37 6.63 4.59 7.41L0 12V0Z"
  );
  --clg-float-arrow-clip-path-right: path(
    "M5 12L0.41 7.41C-0.37 6.63 -0.37 5.37 0.41 4.59L5 0V12Z"
  );
  --clg-popover-background-color: var(
    --clg-color-app-popover-background,
    #ffffff
  );
  --clg-popover-text-color: var(--clg-color-sem-text-primary, #312b36);
  --clg-popover-padding: var(--clg-dimension-app-popover-padding-vertical, 16px)
    var(--clg-dimension-app-popover-padding-horizontal, 16px);
  --clg-popover-border-radius: var(--clg-shape-app-popover-border-radius, 8px);
}

.clg-popover__body {
  font-family: var(--clg-typography-sem-product-body-smaller-font-family);
  font-weight: var(--clg-typography-sem-product-body-smaller-font-weight);
  font-size: var(--clg-typography-sem-product-body-smaller-font-size);
  line-height: var(--clg-typography-sem-product-body-smaller-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-smaller-letter-spacing);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--clg-dimension-pal-grid-050, 4px);
  background: var(--clg-popover-background-color);
  color: var(--clg-popover-text-color);
  padding: var(--clg-popover-padding);
  border-radius: var(--clg-popover-border-radius);
  box-shadow: var(
    --clg-effect-app-popover-shadow,
    0px 0px 24px 4px rgba(51, 20, 0, 0.2588235294)
  );
  width: var(--clg-dimension-app-popover-width, 240px);
  max-width: var(
    --clg-popover-max-width,
    var(--clg-dimension-app-popover-width, 240px)
  );
}

.clg-popover__header {
  display: flex;
  align-items: flex-start;
  text-align: left;
}

.clg-popover__header ::slotted(*) {
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
  flex: 1;
}

:host(clg-popover:not([no-dismiss-outside])) .clg-popover__dismiss-btn {
  display: none;
}

.clg-popover__dismiss-btn {
  margin-inline-start: auto;
  margin-block: calc(-1 * var(--clg-dimension-pal-grid-100, 8px));
  margin-inline-end: calc(-1 * var(--clg-dimension-pal-grid-100, 8px));
}

:host(clg-popover[variant="highlight"]) {
  --clg-float-arrow-color: var(
    --clg-color-app-alert-banner-strong-highlight-background,
    #426bdb
  );
  --clg-popover-background-color: var(
    --clg-color-app-alert-banner-strong-highlight-background,
    #426bdb
  );
  --clg-popover-text-color: var(--clg-color-sem-text-on-surface-dark, #faf8f5);
}

:host(clg-feature-illustration) img,
:host(clg-spot-illustration) .clg-illustration__light,
:host(clg-spot-illustration) .clg-illustration__dark {
  min-width: 100%;
  aspect-ratio: 1;
}

:host(clg-spot-illustration) .clg-illustration__light,
:host(clg-spot-illustration) .clg-illustration__dark {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

:host(clg-spot-illustration:not([fill-color])) .clg-illustration__light,
:host(clg-spot-illustration:not([fill-color])) .clg-illustration__dark {
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:host(clg-spot-illustration:not([fill-color])) .clg-illustration__light,
:host(clg-spot-illustration:not([fill-color]))
  .clg-illustration__light--hidden {
  display: block;
}

:host(clg-spot-illustration:not([fill-color])) .clg-illustration__dark {
  display: none;
}

.clg-illustration__light--hidden,
.clg-illustration__dark {
  display: none;
}

.clg-illustration__light--hidden ~ .clg-illustration__dark {
  display: block;
}

@container clg-dark-mode (min-width: 0) {
  .clg-illustration__light {
    display: none;
  }

  .clg-illustration__dark {
    display: block;
  }
}

:host(clg-list-title) {
  display: block;
}

:host(clg-list-title) ::slotted(*) {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
}

.clg-list-title {
  display: block;
  font-family: var(--clg-typography-sem-product-title-large-font-family);
  font-weight: var(--clg-typography-sem-product-title-large-font-weight);
  font-size: var(--clg-typography-sem-product-title-large-font-size);
  line-height: var(--clg-typography-sem-product-title-large-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-large-letter-spacing);
}

@container clg-interactive-list-tight (min-width: 0) {
  .clg-list-title {
    font-family: var(--clg-typography-sem-product-title-base-font-family);
    font-weight: var(--clg-typography-sem-product-title-base-font-weight);
    font-size: var(--clg-typography-sem-product-title-base-font-size);
    line-height: var(--clg-typography-sem-product-title-base-line-height);
    letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
  }
}

:host(clg-list-title[size="small"]) .clg-list-title {
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

:host(clg-list-title[size="base"]) .clg-list-title {
  font-family: var(--clg-typography-sem-product-title-base-font-family);
  font-weight: var(--clg-typography-sem-product-title-base-font-weight);
  font-size: var(--clg-typography-sem-product-title-base-font-size);
  line-height: var(--clg-typography-sem-product-title-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-base-letter-spacing);
}

:host(clg-list-title[variant="subtle"]) .clg-list-title {
  font-family: var(--clg-typography-sem-product-body-large-font-family);
  font-weight: var(--clg-typography-sem-product-body-large-font-weight);
  font-size: var(--clg-typography-sem-product-body-large-font-size);
  line-height: var(--clg-typography-sem-product-body-large-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-large-letter-spacing);
}

:host(clg-list-title[size="small"][variant="subtle"]) .clg-list-title {
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

:host(clg-list-title[size="base"][variant="subtle"]) .clg-list-title {
  font-family: var(--clg-typography-sem-product-body-base-font-family);
  font-weight: var(--clg-typography-sem-product-body-base-font-weight);
  font-size: var(--clg-typography-sem-product-body-base-font-size);
  line-height: var(--clg-typography-sem-product-body-base-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-base-letter-spacing);
}

:host(clg-selectable-swatch) {
  display: inline-block;
}

.clg-selectable-swatch {
  display: flex;
  min-width: var(--clg-dimension-sem-minimum-tap-target, 48px);
  min-height: var(--clg-dimension-sem-minimum-tap-target, 48px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  position: relative;
  --_swatch-size: var(--clg-dimension-app-selectable-swatch-size-base, 40px);
  --scale-duration: var(
    --clg-effect-sem-interaction-press-on-release-duration,
    150ms
  );
  --scale-curve: var(
    --clg-effect-pal-curve-functional-enter,
    cubic-bezier(0, 0, 0.2, 1)
  );
}

:host(clg-selectable-swatch[size="small"]) .clg-selectable-swatch {
  --_swatch-size: var(--clg-dimension-app-selectable-swatch-size-small, 32px);
}

:host(clg-selectable-swatch[size="large"]) .clg-selectable-swatch {
  --_swatch-size: var(--clg-dimension-app-selectable-swatch-size-large, 64px);
}

.clg-selectable-swatch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--_swatch-size);
  height: var(--_swatch-size);
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  pointer-events: none;
}

.clg-selectable-swatch:focus {
  outline: none;
}

:host([pseudo-focus-visible]) .clg-selectable-swatch::after,
:host([pseudo-focus]) .clg-selectable-swatch::after,
.clg-selectable-swatch:focus-visible::after {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host(clg-selectable-swatch[selected])
  .clg-selectable-swatch:focus-visible::after,
:host([pseudo-focus-visible][selected]) .clg-selectable-swatch::after,
:host([pseudo-focus][selected]) .clg-selectable-swatch::after {
  outline-offset: calc(
    var(--clg-shape-app-selectable-swatch-selected-border-inner-width, 3px) +
      var(--clg-shape-app-selectable-swatch-selected-border-outer-width, 2px) +
      var(--clg-shape-sem-border-width-focused, 2px)
  );
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-swatch {
    transition: scale var(--scale-duration) var(--scale-curve);
  }
}

.clg-selectable-swatch:active,
.clg-selectable-swatch.is-pressing {
  --scale-duration: var(
    --clg-effect-sem-interaction-press-on-press-strong-duration,
    100ms
  );
  --scale-curve: var(
    --clg-effect-pal-curve-functional-enter,
    cubic-bezier(0, 0, 0.2, 1)
  );
  scale: var(--clg-effect-sem-interaction-press-on-press-strong-scale, 0.92);
}

:host(clg-selectable-swatch[size="large"]) .clg-selectable-swatch:active,
:host(clg-selectable-swatch[size="large"]) .clg-selectable-swatch.is-pressing {
  scale: var(--clg-effect-sem-interaction-press-on-press-default-scale, 0.94);
}

.clg-selectable-swatch:disabled:active,
.clg-selectable-swatch:disabled.is-pressing {
  scale: none;
}

.clg-selectable-swatch:disabled {
  cursor: not-allowed;
}

.clg-selectable-swatch__fill {
  display: block;
  width: var(--_swatch-size);
  height: var(--_swatch-size);
  border: var(--clg-shape-sem-border-width-thin, 1px) solid
    var(--clg-color-app-selectable-swatch-border, #928681);
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  background: var(--clg-selectable-swatch-fill);
}

.clg-selectable-swatch:hover .clg-selectable-swatch__fill {
  box-shadow:
    0 0 0 var(--clg-shape-app-selectable-swatch-hovered-border-inner-width, 3px)
      var(--clg-color-app-selectable-swatch-hovered-border-inner, #ffffff),
    0 0 0
      calc(
        var(--clg-shape-app-selectable-swatch-hovered-border-inner-width, 3px) +
          var(--clg-shape-app-selectable-swatch-hovered-border-outer-width, 1px)
      )
      var(--clg-color-app-selectable-swatch-hovered-border-outer, #e0dad6);
}

:host(clg-selectable-swatch[selected])
  .clg-selectable-swatch:hover
  .clg-selectable-swatch__fill {
  box-shadow: none;
}

.clg-selectable-swatch:disabled:hover .clg-selectable-swatch__fill {
  box-shadow: none;
}

.clg-selectable-swatch__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--_swatch-size);
  height: var(--_swatch-size);
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  box-shadow:
    0 0 0 0
      var(--clg-color-app-selectable-swatch-selected-border-inner, #ffffff),
    0 0 0 0
      var(--clg-color-app-selectable-swatch-selected-border-outer, #312b36);
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-swatch__ring {
    transition:
      box-shadow var(--clg-effect-pal-duration-150, 150ms)
        var(--clg-effect-pal-curve-functional-exit, cubic-bezier(0.8, 0, 1, 1)),
      opacity var(--clg-effect-pal-duration-050, 50ms)
        var(--clg-effect-pal-duration-100, 100ms)
        var(--clg-effect-pal-curve-functional-exit, cubic-bezier(0.8, 0, 1, 1));
  }
}

:host(clg-selectable-swatch[selected]) .clg-selectable-swatch__ring {
  opacity: 1;
  box-shadow:
    0 0 0
      var(--clg-shape-app-selectable-swatch-selected-border-inner-width, 3px)
      var(--clg-color-app-selectable-swatch-selected-border-inner, #ffffff),
    0 0 0
      calc(
        var(
            --clg-shape-app-selectable-swatch-selected-border-inner-width,
            3px
          ) +
          var(
            --clg-shape-app-selectable-swatch-selected-border-outer-width,
            2px
          )
      )
      var(--clg-color-app-selectable-swatch-selected-border-outer, #312b36);
}

@media (prefers-reduced-motion: no-preference) {
  :host(clg-selectable-swatch[selected]) .clg-selectable-swatch__ring {
    transition:
      box-shadow var(--clg-effect-pal-duration-200, 200ms)
        var(
          --clg-effect-pal-curve-expressive-enter,
          cubic-bezier(0.1, 0, 0.1, 1)
        ),
      opacity var(--clg-effect-pal-duration-100, 100ms)
        var(
          --clg-effect-pal-curve-expressive-enter,
          cubic-bezier(0.1, 0, 0.1, 1)
        );
  }
}

.clg-selectable-swatch__slash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  overflow: hidden;
  pointer-events: none;
  --_slash-size: calc(
    var(--_swatch-size) - calc(var(--clg-shape-sem-border-width-thin, 1px) * 2)
  );
  --_outer-clip: calc(
    var(--_swatch-size) - calc(var(--clg-shape-sem-border-width-thin, 1px) * 2)
  );
  width: var(--_slash-size);
  height: var(--_slash-size);
  background-color: var(
    --clg-color-app-selectable-swatch-unavailable-overlay,
    rgba(255, 255, 255, 0.3803921569)
  );
  background-image: linear-gradient(
    -45deg,
    transparent calc(50% - var(--clg-shape-sem-border-width-thin, 1px) * 0.5),
    var(--clg-color-app-selectable-swatch-slash-inner, #312b36)
      calc(50% - var(--clg-shape-sem-border-width-thin, 1px) * 0.5),
    var(--clg-color-app-selectable-swatch-slash-inner, #312b36)
      calc(50% + var(--clg-shape-sem-border-width-thin, 1px) * 0.5),
    transparent calc(50% + var(--clg-shape-sem-border-width-thin, 1px) * 0.5)
  );
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-swatch__slash {
    transition:
      width var(--clg-effect-pal-duration-150, 150ms)
        var(--clg-effect-pal-curve-functional-exit, cubic-bezier(0.8, 0, 1, 1)),
      height var(--clg-effect-pal-duration-150, 150ms)
        var(--clg-effect-pal-curve-functional-exit, cubic-bezier(0.8, 0, 1, 1));
  }
}

:host(clg-selectable-swatch[selected]) .clg-selectable-swatch__slash {
  --_ring-width: calc(
    var(--clg-shape-app-selectable-swatch-selected-border-inner-width, 3px) +
      var(--clg-shape-app-selectable-swatch-selected-border-inner-width, 3px) +
      var(--clg-shape-app-selectable-swatch-selected-border-outer-width, 2px) +
      var(--clg-shape-app-selectable-swatch-selected-border-outer-width, 2px)
  );
  --_slash-size: calc(
    var(--_swatch-size) + var(--_ring-width) -
      calc(var(--clg-shape-sem-border-width-thin, 1px) * 2)
  );
  --_outer-clip: calc(
    var(--_swatch-size) +
      var(--clg-shape-app-selectable-swatch-selected-border-inner-width, 3px) +
      var(--clg-shape-app-selectable-swatch-selected-border-inner-width, 3px) -
      calc(var(--clg-shape-sem-border-width-thin, 1px) * 2)
  );
}

@media (prefers-reduced-motion: no-preference) {
  :host(clg-selectable-swatch[selected]) .clg-selectable-swatch__slash {
    transition:
      width var(--clg-effect-pal-duration-200, 200ms)
        var(
          --clg-effect-pal-curve-expressive-enter,
          cubic-bezier(0.1, 0, 0.1, 1)
        ),
      height var(--clg-effect-pal-duration-200, 200ms)
        var(
          --clg-effect-pal-curve-expressive-enter,
          cubic-bezier(0.1, 0, 0.1, 1)
        );
  }
}

.clg-selectable-swatch__slash::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: var(--clg-shape-sem-border-radius-full, 999999px);
  overflow: hidden;
  width: var(--_outer-clip);
  height: var(--_outer-clip);
  background-image: linear-gradient(
    -45deg,
    transparent calc(50% + var(--clg-shape-sem-border-width-thin, 1px) * 0.5),
    var(--clg-color-app-selectable-swatch-slash-outer, #ffffff)
      calc(50% + var(--clg-shape-sem-border-width-thin, 1px) * 0.5),
    var(--clg-color-app-selectable-swatch-slash-outer, #ffffff)
      calc(50% + var(--clg-shape-sem-border-width-thin, 1px) * 1.5),
    transparent calc(50% + var(--clg-shape-sem-border-width-thin, 1px) * 1.5)
  );
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-swatch__slash::before {
    transition:
      width var(--clg-effect-pal-duration-150, 150ms)
        var(--clg-effect-pal-curve-functional-exit, cubic-bezier(0.8, 0, 1, 1)),
      height var(--clg-effect-pal-duration-150, 150ms)
        var(--clg-effect-pal-curve-functional-exit, cubic-bezier(0.8, 0, 1, 1));
  }
}

@media (prefers-reduced-motion: no-preference) {
  :host(clg-selectable-swatch[selected]) .clg-selectable-swatch__slash::before {
    transition:
      width var(--clg-effect-pal-duration-200, 200ms)
        var(
          --clg-effect-pal-curve-expressive-enter,
          cubic-bezier(0.1, 0, 0.1, 1)
        ),
      height var(--clg-effect-pal-duration-200, 200ms)
        var(
          --clg-effect-pal-curve-expressive-enter,
          cubic-bezier(0.1, 0, 0.1, 1)
        );
  }
}

:host(clg-selectable-swatch-group) {
  display: block;
}

.clg-selectable-swatch-group {
  display: flex;
  flex-direction: column;
}

.clg-selectable-swatch-group__label {
  display: flex;
  align-items: baseline;
  gap: var(--clg-dimension-pal-grid-050, 4px);
  margin-bottom: var(
    --clg-dimension-app-selectable-swatch-group-gap-vertical-base,
    4px
  );
}

:host(clg-selectable-swatch-group[size="small"])
  .clg-selectable-swatch-group__label {
  margin-bottom: calc(
    calc(
        var(
            --clg-dimension-app-selectable-swatch-group-gap-vertical-base,
            4px
          ) +
          (
            var(--clg-dimension-sem-minimum-tap-target, 48px) -
              var(--clg-dimension-app-selectable-swatch-size-base, 40px)
          ) /
          2
      ) -
      (
        var(--clg-dimension-sem-minimum-tap-target, 48px) -
          var(--clg-dimension-app-selectable-swatch-size-small, 32px)
      ) /
      2
  );
}

:host(clg-selectable-swatch-group[size="large"])
  .clg-selectable-swatch-group__label {
  margin-bottom: calc(
    var(--clg-dimension-app-selectable-swatch-group-gap-vertical-base, 4px) +
      (
        var(--clg-dimension-sem-minimum-tap-target, 48px) -
          var(--clg-dimension-app-selectable-swatch-size-base, 40px)
      ) /
      2
  );
}

.clg-selectable-swatch-group__label-text {
  color: var(--clg-color-sem-text-primary, #312b36);
}

.clg-selectable-swatch-group__label-text::after {
  content: ":";
}

.clg-selectable-swatch-group__label:has(
    .clg-selectable-swatch-group__label-placeholder:empty
  )
  .clg-selectable-swatch-group__label-text::after {
  content: none;
}

.clg-selectable-swatch-group__label-placeholder {
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
  color: var(--clg-color-sem-text-placeholder, #736b68);
}

.clg-selectable-swatch-group__label-placeholder.has-value {
  color: var(--clg-color-sem-text-primary, #312b36);
}

:host(clg-selectable-swatch-group[invalid])
  .clg-selectable-swatch-group__after {
  margin-top: var(--clg-dimension-pal-grid-050, 4px);
}

.clg-selectable-swatch-group__swatches-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clg-dimension-app-selectable-swatch-group-gap-base, 8px);
  row-gap: var(--clg-dimension-app-selectable-swatch-group-gap-row-base, 12px);
  margin-inline-start: calc(
    (
        var(--clg-dimension-sem-minimum-tap-target, 48px) -
          var(--clg-dimension-app-selectable-swatch-size-base, 40px)
      ) /
      -2
  );
}

: host(clg-selectable-swatch-group[size=small]) .clg-selectable-swatch-group__swatches-list {
  gap: calc(
    var(--clg-dimension-app-selectable-swatch-group-gap-small, 16px) -
      calc(
        var(--clg-dimension-sem-minimum-tap-target, 48px) -
          var(--clg-dimension-app-selectable-swatch-size-small, 32px)
      )
  );
  row-gap: calc(
    var(--clg-dimension-app-selectable-swatch-group-gap-row-small, 16px) -
      calc(
        var(--clg-dimension-sem-minimum-tap-target, 48px) -
          var(--clg-dimension-app-selectable-swatch-size-small, 32px)
      )
  );
  margin-inline-start: calc(
    calc(
        var(--clg-dimension-sem-minimum-tap-target, 48px) -
          var(--clg-dimension-app-selectable-swatch-size-small, 32px)
      ) /
      -2
  );
}

: host(clg-selectable-swatch-group[size=large]) .clg-selectable-swatch-group__swatches-list {
  gap: var(--clg-dimension-app-selectable-swatch-group-gap-large, 16px);
  row-gap: var(--clg-dimension-app-selectable-swatch-group-gap-row-large, 16px);
  margin-inline-start: 0;
}

:host(clg-selectable-swatch-group[has-scroll])
  .clg-selectable-swatch-group__swatches-list {
  flex-wrap: nowrap;
  margin-inline-start: 0;
  align-items: center;
  overflow-x: scroll;
  scrollbar-width: none;
  scroll-timeline: --clg-scroll-overlay-timeline inline;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--clg-scroll-overlay-gradient-width);
  padding-block: calc(
    var(--clg-shape-app-selectable-swatch-selected-border-inner-width, 3px) +
      var(--clg-shape-app-selectable-swatch-selected-border-outer-width, 2px) +
      2 * var(--clg-shape-sem-border-width-focused, 2px) + 1px
  );
  padding-inline: calc(
    var(--clg-shape-app-selectable-swatch-selected-border-inner-width, 3px) +
      var(--clg-shape-app-selectable-swatch-selected-border-outer-width, 2px)
  );
}

:host(clg-selectable-swatch-group[has-scroll])
  .clg-selectable-swatch-group__swatches-list::-webkit-scrollbar {
  display: none;
}

:host(clg-selectable-swatch-group[has-scroll])
  ::slotted(clg-selectable-swatch) {
  scroll-snap-align: start;
}

:host(clg-selectable-text) {
  display: inline-flex;
}

.clg-selectable-text {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 var(--clg-dimension-pal-grid-100, 8px);
  position: relative;
  text-align: center;
  color: var(--clg-color-sem-text-primary, #312b36);
  border: var(--clg-shape-sem-border-width-thin, 1px) solid
    var(--clg-color-app-selectable-text-border, #928681);
  border-radius: var(--clg-shape-sem-border-radius-base, 8px);
  min-width: var(--clg-dimension-app-selectable-text-min-width-base, 80px);
  min-height: var(--clg-dimension-app-selectable-text-min-height-base, 48px);
  --scale-duration: var(
    --clg-effect-app-selectable-text-on-release-scale-duration,
    150ms
  );
  --scale-curve: var(
    --clg-effect-pal-curve-functional-enter,
    cubic-bezier(0, 0, 0.2, 1)
  );
}

:host(clg-selectable-text[size="small"]) .clg-selectable-text {
  min-width: var(--clg-dimension-app-selectable-text-min-width-small, 48px);
  min-height: var(--clg-dimension-app-selectable-text-min-height-small, 32px);
}

:host(clg-selectable-text[size="large"]) .clg-selectable-text {
  min-width: var(--clg-dimension-app-selectable-text-min-width-large, 152px);
  min-height: var(--clg-dimension-app-selectable-text-min-height-large, 48px);
}

.clg-selectable-text__title::slotted(*),
.clg-selectable-text__subtitle::slotted(*) {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
}

.clg-selectable-text__title {
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
  text-wrap: pretty;
}

.clg-selectable-text__subtitle {
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

:host(clg-selectable-text[size="small"]) .clg-selectable-text__subtitle {
  display: none;
}

:host([pseudo-focus]) .clg-selectable-text,
.clg-selectable-text:focus {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus-visible]) .clg-selectable-text,
.clg-selectable-text:focus-visible {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host([pseudo-focus]) .clg-selectable-text:not(:focus-visible),
.clg-selectable-text:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-text {
    transition: scale var(--scale-duration) var(--scale-curve);
  }
}

.clg-selectable-text:active,
.clg-selectable-text.is-pressing {
  --scale-duration: var(
    --clg-effect-app-selectable-text-on-press-scale-duration,
    100ms
  );
  --scale-curve: var(
    --clg-effect-pal-curve-functional-enter,
    cubic-bezier(0, 0, 0.2, 1)
  );
  scale: var(--clg-effect-app-selectable-text-on-press-scale-to, 0.92);
}

.clg-selectable-text:disabled:active,
.clg-selectable-text:disabled.is-pressing {
  scale: none;
}

.clg-selectable-text:disabled {
  cursor: not-allowed;
}

.clg-selectable-text__ring {
  position: absolute;
  inset: calc(-1 * var(--clg-shape-sem-border-width-thin, 1px));
  border-radius: var(--clg-shape-sem-border-radius-base, 8px);
  pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-text__ring {
    transition: box-shadow
      var(
        --clg-effect-app-selectable-text-deselect-stroke-width-duration,
        100ms
      )
      var(
        --clg-effect-app-selectable-text-deselect-stroke-width-curve,
        cubic-bezier(0.8, 0, 1, 1)
      );
  }
}

:host(clg-selectable-text[selected]) .clg-selectable-text__ring {
  box-shadow: inset 0 0 0
    var(--clg-shape-app-selectable-text-border-selected-width, 2px)
    var(--clg-color-app-selectable-text-selected-border, #312b36);
}

@media (prefers-reduced-motion: no-preference) {
  :host(clg-selectable-text[selected]) .clg-selectable-text__ring {
    transition: box-shadow
      var(--clg-effect-app-selectable-text-select-stroke-width-duration, 100ms)
      var(
        --clg-effect-app-selectable-text-select-stroke-width-curve,
        cubic-bezier(0.1, 0, 0.1, 1)
      );
  }
}

.clg-selectable-text__slash {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.clg-selectable-text__slash::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: var(--clg-shape-app-selectable-text-slash-width, 1px);
  background-color: var(--clg-color-app-selectable-text-slash, #312b36);
  transform: translate(-50%, -50%) rotate(-45deg);
}

:host(clg-selectable-text[unavailable]) .clg-selectable-text,
:host(clg-selectable-text[disabled]) .clg-selectable-text {
  color: var(--clg-color-sem-text-disabled, #c8bdb7);
}

:host(clg-selectable-text-group) {
  display: block;
}

.clg-selectable-text-group {
  display: flex;
  flex-direction: column;
}

.clg-selectable-text-group__label {
  display: flex;
  align-items: baseline;
  gap: var(--clg-dimension-pal-grid-050, 4px);
  margin-bottom: var(--clg-dimension-pal-grid-100, 8px);
}

.clg-selectable-text-group__label-text {
  color: var(--clg-color-sem-text-primary, #312b36);
}

.clg-selectable-text-group__label-text::after {
  content: ":";
}

.clg-selectable-text-group__label:has(
    .clg-selectable-text-group__label-placeholder:empty
  )
  .clg-selectable-text-group__label-text::after {
  content: none;
}

.clg-selectable-text-group__label-placeholder {
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
  color: var(--clg-color-sem-text-placeholder, #736b68);
}

.clg-selectable-text-group__label-placeholder.has-value {
  color: var(--clg-color-sem-text-primary, #312b36);
}

:host(clg-selectable-text-group[invalid]) .clg-selectable-text-group__after {
  margin-top: var(--clg-dimension-pal-grid-100, 8px);
}

.clg-selectable-text-group__text-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clg-dimension-pal-grid-150, 12px);
}

:host(clg-selectable-text-group[has-scroll])
  .clg-selectable-text-group__text-list {
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: scroll;
  scrollbar-width: none;
  scroll-timeline: --clg-scroll-overlay-timeline inline;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--clg-scroll-overlay-gradient-width);
  padding-block: calc(
    2 * var(--clg-shape-app-selectable-text-border-selected-width, 2px) + 2 *
      var(--clg-shape-sem-border-width-focused, 2px) + 1px
  );
  padding-inline: calc(
    2 * var(--clg-shape-app-selectable-text-border-selected-width, 2px)
  );
}

:host(clg-selectable-text-group[has-scroll])
  .clg-selectable-text-group__text-list::-webkit-scrollbar {
  display: none;
}

:host(clg-selectable-text-group[has-scroll]) ::slotted(clg-selectable-text) {
  scroll-snap-align: start;
}

:host(clg-empty-state) {
  display: block;
}

.clg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.clg-empty-state__illustration {
  display: none;
  margin-bottom: var(--clg-dimension-app-empty-state-gap, 16px);
}

:host(:has([slot="illustration"])) .clg-empty-state__illustration {
  display: block;
}

@scope {
  :scope:has([slot="illustration"]) .clg-empty-state__illustration {
    display: block;
  }
}

:host(:is([variant="subtle-no-fill"], [variant="subtle-fill"]))
  .clg-empty-state__illustration {
  display: none;
}

.clg-empty-state__header {
  display: none;
  margin-bottom: var(--clg-dimension-app-empty-state-text-gap, 4px);
}

:host(:has([slot="header"])) .clg-empty-state__header {
  display: block;
}

@scope {
  :scope:has([slot="header"]) .clg-empty-state__header {
    display: block;
  }
}

.clg-empty-state__header ::slotted([slot="header"]) {
  font-family: var(--clg-typography-sem-product-title-small-font-family);
  font-weight: var(--clg-typography-sem-product-title-small-font-weight);
  font-size: var(--clg-typography-sem-product-title-small-font-size);
  line-height: var(--clg-typography-sem-product-title-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-title-small-letter-spacing);
}

:host([variant="strong"]) .clg-empty-state__header ::slotted([slot="header"]) {
  font-family: var(--clg-typography-sem-product-heading-small-font-family);
  font-weight: var(--clg-typography-sem-product-heading-small-font-weight);
  font-size: var(--clg-typography-sem-product-heading-small-font-size);
  line-height: var(--clg-typography-sem-product-heading-small-line-height);
  letter-spacing: var(
    --clg-typography-sem-product-heading-small-letter-spacing
  );
}

.clg-empty-state__body,
.clg-empty-state__body ::slotted(*) {
  font-family: var(--clg-typography-sem-product-body-small-font-family);
  font-weight: var(--clg-typography-sem-product-body-small-font-weight);
  font-size: var(--clg-typography-sem-product-body-small-font-size);
  line-height: var(--clg-typography-sem-product-body-small-line-height);
  letter-spacing: var(--clg-typography-sem-product-body-small-letter-spacing);
}

.clg-empty-state__action {
  display: none;
  flex-direction: column;
  gap: var(--clg-dimension-sem-spacing-button, 6px);
  margin-top: var(--clg-dimension-app-empty-state-gap, 16px);
}

:host(:has([slot="action"])) .clg-empty-state__action {
  display: flex;
}

@scope {
  :scope:has([slot="action"]) .clg-empty-state__action {
    display: flex;
  }
}

:host([variant="subtle-fill"]) .clg-empty-state {
  background-color: var(
    --clg-color-sem-background-surface-informational-subtle,
    #efecea
  );
  border-radius: var(--clg-shape-sem-border-radius-card, 8px);
  padding: var(--clg-dimension-pal-spacing-200, 12px);
}

:host(clg-selectable-image) {
  display: inline-block;
}

.clg-selectable-image {
  display: flex;
  width: 100%;
  min-width: var(--clg-dimension-app-selectable-image-size-base, 72px);
  min-height: var(--clg-dimension-app-selectable-image-size-base, 72px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--clg-shape-sem-border-radius-card, 8px);
  position: relative;
  --_image-size: var(--clg-dimension-app-selectable-image-size-base, 72px);
  --scale-duration: var(
    --clg-effect-sem-interaction-press-on-release-duration,
    150ms
  );
  --scale-curve: var(
    --clg-effect-pal-curve-functional-enter,
    cubic-bezier(0, 0, 0.2, 1)
  );
}

:host(clg-selectable-image[size="small"]) .clg-selectable-image {
  --_image-size: var(--clg-dimension-app-selectable-image-size-small, 48px);
}

:host(clg-selectable-image[size="large"]) .clg-selectable-image {
  --_image-size: var(--clg-dimension-app-selectable-image-size-large, 96px);
}

.clg-selectable-image::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--_image-size);
  height: var(--_image-size);
  border-radius: var(--clg-shape-sem-border-radius-card, 8px);
  pointer-events: none;
}

.clg-selectable-image:focus {
  outline: none;
}

:host([pseudo-focus-visible]) .clg-selectable-image::after,
.clg-selectable-image:focus-visible::after {
  outline: var(
      --clg-focus-ring-width,
      var(--clg-shape-sem-border-width-focused, 2px)
    )
    solid
    var(--clg-focus-ring-color, var(--clg-color-sem-border-focused, #426bdb));
  outline-offset: var(
    --clg-focus-ring-offset,
    var(--clg-shape-sem-border-width-focused, 2px)
  );
}

:host(clg-selectable-image[selected])
  .clg-selectable-image:focus-visible::after,
:host([pseudo-focus-visible][selected]) .clg-selectable-image::after,
:host([pseudo-focus][selected]) .clg-selectable-image::after {
  outline-offset: calc(
    var(--clg-shape-app-selectable-image-border-selected-inner-width, 3px) +
      var(--clg-shape-app-selectable-image-border-selected-outer-width, 2px) +
      var(--clg-shape-sem-border-width-focused, 2px)
  );
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-image {
    transition: scale var(--scale-duration) var(--scale-curve);
  }
}

.clg-selectable-image:active,
.clg-selectable-image.is-pressing {
  --scale-duration: var(
    --clg-effect-sem-interaction-press-on-press-default-duration,
    100ms
  );
  --scale-curve: var(
    --clg-effect-pal-curve-functional-enter,
    cubic-bezier(0, 0, 0.2, 1)
  );
  scale: var(--clg-effect-sem-interaction-press-on-press-default-scale, 0.94);
}

:host(clg-selectable-image[size="small"]) .clg-selectable-image:active,
:host(clg-selectable-image[size="small"]) .clg-selectable-image.is-pressing {
  scale: var(--clg-effect-sem-interaction-press-on-press-strong-scale, 0.92);
}

.clg-selectable-image:disabled:active,
.clg-selectable-image:disabled.is-pressing {
  scale: none;
}

.clg-selectable-image:disabled {
  cursor: not-allowed;
}

.clg-selectable-image__image {
  display: block;
  width: var(--_image-size);
  height: var(--_image-size);
  border: var(--clg-shape-sem-border-width-thin, 1px) solid
    var(--clg-color-app-selectable-image-border, #928681);
  border-radius: var(--clg-shape-sem-border-radius-card, 8px);
  overflow: hidden;
}

.clg-selectable-image:hover .clg-selectable-image__image {
  box-shadow:
    0 0 0 var(--clg-shape-app-selectable-image-border-hovered-inner-width, 3px)
      var(--clg-color-app-selectable-image-hovered-border-inner, #ffffff),
    0 0 0
      calc(
        var(--clg-shape-app-selectable-image-border-hovered-inner-width, 3px) +
          var(--clg-shape-app-selectable-image-border-hovered-outer-width, 1px)
      )
      var(--clg-color-app-selectable-image-hovered-border-outer, #e0dad6);
}

:host(clg-selectable-image[selected])
  .clg-selectable-image:hover
  .clg-selectable-image__image,
.clg-selectable-image:disabled:hover .clg-selectable-image__image {
  box-shadow: none;
}

.clg-selectable-image__slot {
  display: block;
}

.clg-selectable-image__slot::slotted(*) {
  display: block;
  transform: scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-image__slot::slotted(*) {
    transition: transform
      var(--clg-effect-sem-parallax-on-hover-duration, 400ms)
      var(
        --clg-effect-sem-parallax-on-hover-curve,
        cubic-bezier(0.1, 0, 0.1, 1)
      );
  }
}

.clg-selectable-image:hover .clg-selectable-image__slot::slotted(*) {
  transform: scale(var(--clg-effect-sem-parallax-on-hover-scale, 1.04));
}

.clg-selectable-image:disabled:hover .clg-selectable-image__slot::slotted(*) {
  transform: scale(1);
}

.clg-selectable-image__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--_image-size);
  height: var(--_image-size);
  border-radius: var(--clg-shape-sem-border-radius-card, 8px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  box-shadow:
    0 0 0 0 var(--clg-color-app-selectable-image-selected-border-inner, #ffffff),
    0 0 0 0 var(--clg-color-app-selectable-image-selected-border-outer, #312b36);
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-image__ring {
    transition:
      box-shadow
        var(--clg-effect-app-selectable-image-deselect-size-duration, 150ms)
        var(
          --clg-effect-app-selectable-image-deselect-size-curve,
          cubic-bezier(0.8, 0, 1, 1)
        ),
      opacity
        var(--clg-effect-app-selectable-image-deselect-opacity-duration, 50ms)
        var(--clg-effect-app-selectable-image-deselect-opacity-delay, 100ms)
        var(--clg-effect-pal-curve-functional-exit, cubic-bezier(0.8, 0, 1, 1));
  }
}

:host(clg-selectable-image[selected]) .clg-selectable-image__ring {
  opacity: 1;
  box-shadow:
    0 0 0 var(--clg-shape-app-selectable-image-border-selected-inner-width, 3px)
      var(--clg-color-app-selectable-image-selected-border-inner, #ffffff),
    0 0 0
      calc(
        var(--clg-shape-app-selectable-image-border-selected-inner-width, 3px) +
          var(--clg-shape-app-selectable-image-border-selected-outer-width, 2px)
      )
      var(--clg-color-app-selectable-image-selected-border-outer, #312b36);
}

@media (prefers-reduced-motion: no-preference) {
  :host(clg-selectable-image[selected]) .clg-selectable-image__ring {
    transition:
      box-shadow
        var(--clg-effect-app-selectable-image-select-size-duration, 200ms)
        var(
          --clg-effect-app-selectable-image-select-size-curve,
          cubic-bezier(0.1, 0, 0.1, 1)
        ),
      opacity
        var(--clg-effect-app-selectable-image-select-opacity-duration, 100ms)
        var(
          --clg-effect-app-selectable-image-select-opacity-curve,
          cubic-bezier(0.1, 0, 0.1, 1)
        );
  }
}

.clg-selectable-image__slash {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--clg-shape-sem-border-radius-card, 8px);
  overflow: hidden;
  pointer-events: none;
  --_slash-size: calc(
    var(--_image-size) - calc(var(--clg-shape-sem-border-width-thin, 1px) * 2)
  );
  --_outer-clip: calc(
    var(--_image-size) - calc(var(--clg-shape-sem-border-width-thin, 1px) * 2)
  );
  width: var(--_slash-size);
  height: var(--_slash-size);
  background-color: var(
    --clg-color-app-selectable-image-unavailable-overlay,
    rgba(255, 255, 255, 0.3803921569)
  );
  background-image: linear-gradient(
    -45deg,
    transparent
      calc(50% - var(--clg-shape-app-selectable-image-slash-width, 1px) * 0.5),
    var(--clg-color-app-selectable-image-slash-inner, #312b36)
      calc(50% - var(--clg-shape-app-selectable-image-slash-width, 1px) * 0.5),
    var(--clg-color-app-selectable-image-slash-inner, #312b36)
      calc(50% + var(--clg-shape-app-selectable-image-slash-width, 1px) * 0.5),
    transparent
      calc(50% + var(--clg-shape-app-selectable-image-slash-width, 1px) * 0.5)
  );
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-image__slash {
    transition:
      width var(--clg-effect-app-selectable-image-deselect-size-duration, 150ms)
        var(
          --clg-effect-app-selectable-image-deselect-size-curve,
          cubic-bezier(0.8, 0, 1, 1)
        ),
      height
        var(--clg-effect-app-selectable-image-deselect-size-duration, 150ms)
        var(
          --clg-effect-app-selectable-image-deselect-size-curve,
          cubic-bezier(0.8, 0, 1, 1)
        ),
      border-radius
        var(--clg-effect-app-selectable-image-deselect-radius-duration, 150ms)
        var(
          --clg-effect-app-selectable-image-deselect-radius-curve,
          cubic-bezier(0.8, 0, 1, 1)
        );
  }
}

:host(clg-selectable-image[selected]) .clg-selectable-image__slash {
  --_ring-width: calc(
    var(--clg-shape-app-selectable-image-border-selected-inner-width, 3px) +
      var(--clg-shape-app-selectable-image-border-selected-inner-width, 3px) +
      var(--clg-shape-app-selectable-image-border-selected-outer-width, 2px) +
      var(--clg-shape-app-selectable-image-border-selected-outer-width, 2px)
  );
  --_slash-size: calc(
    var(--_image-size) + var(--_ring-width) -
      calc(var(--clg-shape-sem-border-width-thin, 1px) * 2)
  );
  --_outer-clip: calc(
    var(--_image-size) +
      var(--clg-shape-app-selectable-image-border-selected-inner-width, 3px) +
      var(--clg-shape-app-selectable-image-border-selected-inner-width, 3px) -
      calc(var(--clg-shape-sem-border-width-thin, 1px) * 2)
  );
  border-radius: calc(
    var(--clg-shape-sem-border-radius-card, 8px) +
      var(--clg-shape-app-selectable-image-border-selected-inner-width, 3px) +
      var(--clg-shape-app-selectable-image-border-selected-outer-width, 2px)
  );
}

@media (prefers-reduced-motion: no-preference) {
  :host(clg-selectable-image[selected]) .clg-selectable-image__slash {
    transition:
      width var(--clg-effect-app-selectable-image-select-size-duration, 200ms)
        var(
          --clg-effect-app-selectable-image-select-size-curve,
          cubic-bezier(0.1, 0, 0.1, 1)
        ),
      height var(--clg-effect-app-selectable-image-select-size-duration, 200ms)
        var(
          --clg-effect-app-selectable-image-select-size-curve,
          cubic-bezier(0.1, 0, 0.1, 1)
        ),
      border-radius
        var(--clg-effect-app-selectable-image-select-radius-duration, 200ms)
        var(
          --clg-effect-app-selectable-image-select-radius-curve,
          cubic-bezier(0.1, 0, 0.1, 1)
        );
  }
}

.clg-selectable-image__slash::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: var(--clg-shape-sem-border-radius-card, 8px);
  overflow: hidden;
  width: var(--_outer-clip);
  height: var(--_outer-clip);
  background-image: linear-gradient(
    -45deg,
    transparent
      calc(50% + var(--clg-shape-app-selectable-image-slash-width, 1px) * 0.5),
    var(--clg-color-app-selectable-image-slash-outer, #ffffff)
      calc(50% + var(--clg-shape-app-selectable-image-slash-width, 1px) * 0.5),
    var(--clg-color-app-selectable-image-slash-outer, #ffffff)
      calc(50% + var(--clg-shape-app-selectable-image-slash-width, 1px) * 1.5),
    transparent
      calc(50% + var(--clg-shape-app-selectable-image-slash-width, 1px) * 1.5)
  );
}

@media (prefers-reduced-motion: no-preference) {
  .clg-selectable-image__slash::before {
    transition:
      width var(--clg-effect-app-selectable-image-deselect-size-duration, 150ms)
        var(
          --clg-effect-app-selectable-image-deselect-size-curve,
          cubic-bezier(0.8, 0, 1, 1)
        ),
      height
        var(--clg-effect-app-selectable-image-deselect-size-duration, 150ms)
        var(
          --clg-effect-app-selectable-image-deselect-size-curve,
          cubic-bezier(0.8, 0, 1, 1)
        ),
      border-radius
        var(--clg-effect-app-selectable-image-deselect-radius-duration, 150ms)
        var(
          --clg-effect-app-selectable-image-deselect-radius-curve,
          cubic-bezier(0.8, 0, 1, 1)
        );
  }
}

:host(clg-selectable-image[selected]) .clg-selectable-image__slash::before {
  border-radius: calc(
    var(--clg-shape-sem-border-radius-card, 8px) +
      var(--clg-shape-app-selectable-image-border-selected-inner-width, 3px)
  );
}

@media (prefers-reduced-motion: no-preference) {
  :host(clg-selectable-image[selected]) .clg-selectable-image__slash::before {
    transition:
      width var(--clg-effect-app-selectable-image-select-size-duration, 200ms)
        var(
          --clg-effect-app-selectable-image-select-size-curve,
          cubic-bezier(0.1, 0, 0.1, 1)
        ),
      height var(--clg-effect-app-selectable-image-select-size-duration, 200ms)
        var(
          --clg-effect-app-selectable-image-select-size-curve,
          cubic-bezier(0.1, 0, 0.1, 1)
        ),
      border-radius
        var(--clg-effect-app-selectable-image-select-radius-duration, 200ms)
        var(
          --clg-effect-app-selectable-image-select-radius-curve,
          cubic-bezier(0.1, 0, 0.1, 1)
        );
  }
}

:host(:not(:defined)) {
  opacity: 1 !important;
}

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

[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

.clg-screen-reader-only {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.clg-screen-reader-only.focusable:active,
.clg-screen-reader-only.focusable:focus,
.clg-screen-reader-only.wt-focusable:active,
.clg-screen-reader-only.wt-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  border: initial !important;
  margin: auto !important;
  padding: initial !important;
}