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

.max-characters {
  display: flex;
  justify-content: flex-end;
  padding-top: spacers.getSpacer(2xs);
  padding-right: 2px;
  font-size: font-settings.$font-size-sm;
  line-height: font-settings.$lineheight-size-sm;

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

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

  &--invalid {
    color: palette.$cherry600;
    font-weight: 600;
  }
}