@use 'libs/components/theme/src/lib/styles/mixins' as mixins;

$sky-tokens-gutter-size: 2px;

.sky-tokens {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: -1 * $sky-tokens-gutter-size;

  .sky-tokens-content,
  ::ng-deep sky-token {
    flex: 0 0 auto;
    display: inline-flex;
    padding: $sky-tokens-gutter-size;
  }

  .sky-tokens-content {
    flex-grow: 1;
    flex-basis: 0px;

    > div {
      display: contents;

      // Add a zero-width space to allow form controls to align
      // properly to text baseline.
      &:before {
        content: "#{'\200B'}";
      }
    }
  }
}
