@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';

$sizes: 'xs', 's';

.wrapper {
  position: relative;

  overflow: hidden;
  display: flex;
  flex-wrap: wrap;

  width: 100%;
  max-width: 100%;

  @each $size in $sizes {
    &[data-size=#{$size}] {
      @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-row, $size);
    }
  }
}

.visibleRow {
  display: flex;
  flex-wrap: wrap;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  &[data-shrink-first-tag='true'] {
    flex-wrap: nowrap;
  }

  @each $size in $sizes {
    &[data-size=#{$size}] {
      @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-row, $size);
    }
  }
}

.hiddenRow {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  flex-wrap: wrap;

  width: 100%;

  visibility: hidden;

  @each $size in $sizes {
    &[data-size=#{$size}] {
      @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-row, $size);
    }
  }
}

.hiddenMoreButton {
  position: absolute;
  left: 0;
  visibility: hidden;
}