:host {
  display: inline-block;
}

label {
  box-sizing: border-box;
  width: fit-content;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: var(--typography-size-body-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-md);
  user-select: none;

  .content {
    gap: var(--typography-spacing-xs);

    span[title] {
      cursor: help;
      icon-mynaui-question-circle > * {
        width: var(--typography-size-heading-h3);
        height: var(--typography-size-heading-h3);
        display: flex;
      }
    }
  }

  span {
    display: flex;
    align-items: center;

    &.required {
      align-items: flex-start;
      color: var(--color-icon-error);
    }

    &.optional {
      color: var(--color-text-disabled);
      margin-left: var(--typography-spacing-xs);
      font-weight: var(--font-weight-regular);
    }
  }
}