// vf-text

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

.vf-text {
  @include margin--block(bottom, 16px);
}

.vf-text-heading--5 {
  @include set-type(text-heading--5);
}
.vf-text-heading--4 {
  @include set-type(text-heading--4);
}
.vf-text-heading--3 {
  @include set-type(text-heading--3);
}
.vf-text-heading--2 {
  @include set-type(text-heading--2);
}
.vf-text-heading--1 {
  @include set-type(text-heading--1);
}

.vf-text--has-tag {
  align-items: center;
  display: flex;

  .vf-badge {
    margin-left: 8px;
  }
}

.vf-text--invert {
  background-color: ui-color(black);
  color: ui-color(white);
  display: inline-block;
  padding: 4px 8px 4px 4px;
}