:host([hidden]) {
  display: none;
}
:host {
  display: inline-flex;
}

:host {
  color: var(--colorNeutralForeground1);
  cursor: pointer;
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  user-select: none;
}

.asterisk {
  color: var(--colorPaletteRedForeground1);
  margin-inline-start: var(--spacingHorizontalXS);
}

:host([size='small']) {
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}

:host([size='large']) {
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
}

:host(:is([size='large'], [weight='semibold'])) {
  font-weight: var(--fontWeightSemibold);
}

:host([disabled]),
:host([disabled]) .asterisk {
  color: var(--colorNeutralForegroundDisabled);
}