// vf-utility-classes

@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')}
 */

@import 'vf-u-float.scss';
@import 'vf-u-grid.scss';
@import 'vf-u-text.scss';
@import 'vf-u-screen-reader.scss';
@import 'vf-u-width.scss';


.vf-u-background-color {
  @include color-modifiers($attribute: 'background-color');
}
.vf-u-background-color-ui {
  @include ui-color-modifiers($attribute: 'background-color');
}

.vf-u-border-color {
  @include color-modifiers($attribute: 'border-color');
}
.vf-u-border-color-ui {
  @include ui-color-modifiers($attribute: 'border-color');
}

.vf-u-margin {
  @include spacing-modifiers(margin);
}

.vf-u-padding {
  @include spacing-modifiers;
}

.vf-u-text-color {
  @include color-modifiers;
}
.vf-u-text-color--ui {
  @include ui-color-modifiers;
}

.vf-u-type {
  @include type-modifiers;
}

// Sometimes content needs to escape a grid container, for example full-width content inside of `.vf-body`
.vf-u-grid--reset {
  grid-column: 1 / -1;
}

.vf-u-display-none {
  display: none;
}

.vf-u-grid {
  @include grid-modifiers;
}