// Spacer utilities (v1 compatible)

/**
 * @section Flexible Space
 */

/** @public Flex-grow spacer */
.spacer {
  flex-grow: 1;
}

/**
 * @section Fixed Height Spacers
 */

/** @public Fixed height spacer (4px) */
.spacer-h-1 { height: var(--spacing-1); }

/** @public Fixed height spacer (8px) */
.spacer-h-2 { height: var(--spacing-2); }

/** @public Fixed height spacer (16px) */
.spacer-h-4 { height: var(--spacing-4); }

/** @public Fixed height spacer (32px) */
.spacer-h-8 { height: var(--spacing-8); }

/**
 * @section Fixed Width Spacers
 */

/** @public Fixed width spacer (4px) */
.spacer-w-1 { width: var(--spacing-1); }

/** @public Fixed width spacer (8px) */
.spacer-w-2 { width: var(--spacing-2); }

/** @public Fixed width spacer (16px) */
.spacer-w-4 { width: var(--spacing-4); }

/** @public Fixed width spacer (32px) */
.spacer-w-8 { width: var(--spacing-8); }

/**
 * @section Responsive Spacers
 */

// Mobile breakpoint @480px
@media (max-width: 480px) {
  /** @public Flex-grow spacer @480px */
  .xs-spacer { flex-grow: 1; }
  
  /** @public Fixed height (4px) @480px */
  .xs-spacer-h-1 { height: var(--spacing-1); }
  
  /** @public Fixed height (8px) @480px */
  .xs-spacer-h-2 { height: var(--spacing-2); }
  
  /** @public Fixed height (16px) @480px */
  .xs-spacer-h-4 { height: var(--spacing-4); }
  
  /** @public Fixed height (32px) @480px */
  .xs-spacer-h-8 { height: var(--spacing-8); }
  
  /** @public Fixed width (4px) @480px */
  .xs-spacer-w-1 { width: var(--spacing-1); }
  
  /** @public Fixed width (8px) @480px */
  .xs-spacer-w-2 { width: var(--spacing-2); }
  
  /** @public Fixed width (16px) @480px */
  .xs-spacer-w-4 { width: var(--spacing-4); }
  
  /** @public Fixed width (32px) @480px */
  .xs-spacer-w-8 { width: var(--spacing-8); }
}