@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/font-mixins' as fonts;
@use '../../scss/breakpoints' as breakpoints;

.label-wrapper {
  margin-bottom: spacers.getSpacer(2xs);
  line-height: font-settings.$lineheight-size-xs;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
    line-height: font-settings.$lineheight-size-sm;
  }

  &--no-bottom-margin {
    margin-bottom: 0;
  }

  &--after-label-children {
    display: flex;
    align-items: flex-start;
  }
}

.label-content-wrapper {
  display: flex;
  min-width: 0;
}

.label {
  @include fonts.label;

  &--subdued {
    @include fonts.label-subdued;
  }

  &--on-dark {
    color: palette.$white;
  }

  &::after {
    content: ' ';
  }

  &__texts {
    min-width: 0;
  }
}

.sublabel {
  @include fonts.sublabel;

  color: var(--color-base-text-onlight-subdued);

  &--subdued {
    @include fonts.sublabel-subdued;
  }

  &--on-dark {
    color: palette.$white;
  }

  &::after {
    content: ' ';
  }
}

.after-label-children {
  padding-left: spacers.getSpacer(xs);
}