// Stack utilities (v1 compatible)

/**
 * @section Vertical Spacing
 */

/** @public Default vertical gap */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/** @public Extra small vertical gap */
.stack-xs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
}

/** @public Small vertical gap */
.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/** @public Medium vertical gap */
.stack-md {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/** @public Large vertical gap */
.stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/** @public Extra large vertical gap */
.stack-xl {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

// Responsive variants
@media (max-width: 480px) {
  /** @public Column layout with gap @480px */
  .xs-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }
}

// Internal utility
/** @public Stack on screens wider than XS */
@media (min-width: 600px) {
  .gt-xs-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }
}