/**
 * Component Groups
 */
:where(:root),
:host,
.wa-theme-default,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-light,
.wa-dark,
.wa-invert {
  /* Form controls */
  --wa-form-control-background-color: var(--wa-color-surface-default);

  --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
  --wa-form-control-border-style: var(--wa-border-style);
  --wa-form-control-border-width: var(--wa-border-width-s);
  --wa-form-control-border-radius: var(--wa-border-radius-m);

  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);

  --wa-form-control-label-color: var(--wa-color-text-normal);
  --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
  --wa-form-control-label-line-height: var(--wa-line-height-normal);

  --wa-form-control-value-color: var(--wa-color-text-normal);
  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
  --wa-form-control-value-line-height: var(--wa-line-height-condensed);

  --wa-form-control-placeholder-color: var(--wa-color-gray-60);

  --wa-form-control-required-content: '*';
  --wa-form-control-required-content-color: inherit;
  --wa-form-control-required-content-offset: -0.1em;

  /* Panels */
  --wa-panel-border-style: var(--wa-border-style);
  --wa-panel-border-width: var(--wa-border-width-s);
  --wa-panel-border-radius: var(--wa-border-radius-l);

  /* Tooltips */
  --wa-tooltip-arrow-size: 0.375rem;

  --wa-tooltip-background-color: var(--wa-color-text-normal);

  --wa-tooltip-border-radius: var(--wa-border-radius-s);

  --wa-tooltip-content-color: var(--wa-color-surface-default);
  --wa-tooltip-font-size: var(--wa-font-size-s);
  --wa-tooltip-line-height: var(--wa-line-height-normal);
}
