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

$sizes: 'xs', 's';
$label-typography: (
  'xs': styles-tokens-tag.$sans-label-s,
  's': styles-tokens-tag.$sans-label-m
);

.button {
  cursor: pointer;

  display: inline-flex;
  align-items: center;

  box-sizing: border-box;

  color: styles-tokens-tag.$sys-neutral-text-support;
  white-space: nowrap;

  background: none;
  border-color: styles-tokens-tag.$sys-neutral-decor-disabled;
  border-style: solid;

  &:focus-visible {
    @include styles-tokens-tag.outline-var(styles-tokens-element.$container-focused-s);

    outline-color: styles-tokens-tag.$sys-available-complementary;
  }

  @each $size in $sizes {
    @include styles-tokens-tag.composite-var($label-typography, $size);

    &[data-size=#{$size}] {
      @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-more, 'container', $size, 'label-only');
    }
  }
}

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

.tagRowDroplistScroll {
  max-height: 200px;
}

.triggerClassName {
  --offset: #{styles-tokens-tag.$space-drop-list-drop-offset}; 
}