@use '../variables' as variables;
@use '../functions' as functions;

.tag {
  --tag-bg: #{variables.$tag-bg};
  --tag-border-radius: #{variables.$tag-border-radius};
  --tag-color: #{functions.color-contrast(variables.$tag-bg)};
  --tag-font-size: #{variables.$tag-font-size};
  --tag-font-weight: #{variables.$tag-font-weight};
  --tag-padding-x: #{variables.$tag-padding-x};
  --tag-padding-y: #{variables.$tag-padding-y};

  background-color: var(--tag-bg);
  border-radius: var(--tag-border-radius);
  color: var(--tag-color);
  display: inline-flex;
  font-size: var(--tag-font-size);
  font-weight: var(--tag-font-weight);
  padding: var(--tag-padding-y) var(--tag-padding-x);
}