@use 'styles/tokens' as *;

:export {
  breakpointXs: strip-unit($breakpoint-xs);
  breakpointS: strip-unit($breakpoint-s);
  breakpointM: strip-unit($breakpoint-m);
  breakpointL: strip-unit($breakpoint-l);
  breakpointXl: strip-unit($breakpoint-xl);
  breakpointHeightL: strip-unit($breakpoint-height-l);

  borderColorLight: $border-color-light;
  borderWidth: strip-unit($border-width);

  colorBlueLight: $color-blue-light;
  colorGreenLight: $color-green-light;
  colorRedLight: $color-red-light;
  colorVioletLight: $color-violet-light;
  colorYellowLight: $color-yellow-light;

  colorBackground: $color-background;

  colorBonusCharacterMultiplier2: $color-bonus-character-multiplier-2;
  colorBonusCharacterMultiplier3: $color-bonus-character-multiplier-3;
  colorBonusCharacterMultiplier4: $color-bonus-character-multiplier-4;
  colorBonusWordMultiplier2: $color-bonus-word-multiplier-2;
  colorBonusWordMultiplier3: $color-bonus-word-multiplier-3;
  colorBonusWordMultiplier4: $color-bonus-word-multiplier-4;

  transitionDuration: strip-unit($transition-duration);
  transitionDurationLong: strip-unit($transition-duration-long);

  resultsItemHeight: strip-unit($results-item-height);
}