@use '../../foundations/spacing/tokens.scss' as spacing;
@use '../../foundations/typography/mixins.scss' as typography;
@use '../../foundations/typography/tokens.scss' as typographyToken;
@use '../../foundations/colors/mixins.scss' as colorMixin;

.fudis-label {
  @include colorMixin.text-color('gray-dark');
  @include typography.text-field-label;

  display: flex;
  align-items: baseline;
  justify-content: space-between;

  &__content {
    display: inline-block;
    margin: spacing.$spacing-xxs 0;
    min-height: spacing.$spacing-md;

    &__button {
      display: inline-block;
      margin-left: spacing.$spacing-xxs;

      /** The button element inside the fudis-button exceeds the 32px because
      button likely has different font metrics, that affects the baseline calculations. We set here
      the container width to be the expected size of the button, so it does not affect the height of the container
      when we use baseline */
      height: spacing.$spacing-md;
    }

    &__text {
      display: inline-block;
      white-space: break-spaces;
    }

    &__space {
      display: inline-block;
      margin-left: spacing.$spacing-xs;
      width: 0;

      &::before {
        content: ' ';
      }
    }

    &__required {
      @include typography.text-field-label;
      @include colorMixin.text-color('gray-middle');

      display: inline-block;
      vertical-align: baseline;
      text-transform: initial;

      /* stylelint-disable-next-line property-disallowed-list */
      line-height: typographyToken.$text-input-line-height;
      /* stylelint-disable-next-line property-disallowed-list */
      font-size: typographyToken.$body-text-sm-font-size;
    }
  }
}