@use '../config' as *;

// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references

// scss-docs-start tracking-css-vars
$tracking-tokens: () !default;
$tracking-tokens: defaults(
  (
    --tracking-height: $tracking-height,
    --tracking-gap-width: $tracking-gap-width,
    --tracking-block-border-radius: $tracking-border-radius,
    --tracking-block-min-width: $tracking-block-min-width,
  ),
  $tracking-tokens
);
// scss-docs-end tracking-css-vars

// stylelint-enable custom-property-no-missing-var-function

.tracking {
  @include tokens($tracking-tokens);
  display: flex;
  gap: var(--tracking-gap-width);
}

.tracking-squares {
  --tracking-block-border-radius: var(--border-radius-sm);

  .tracking-block {
    height: auto;

    &::before {
      display: block;
      padding-top: 100%;
      content: '';
    }
  }
}

.tracking-block {
  flex: 1;
  min-width: var(--tracking-block-min-width);
  height: var(--tracking-height);
  background: var(--border-color);
  @include border-radius(var(--tracking-block-border-radius));
}