/**
 * Spacer component styles
 */

/* Base component */
.spacer {
  display: block;
  width: 100%;
}

/* Size variants */
.spacer--small {
  height: var(--spacing-sm, 1rem);
}

.spacer--medium {
  height: var(--spacing-md, 2rem);
}

.spacer--large {
  height: var(--spacing-lg, 3rem);
}

.spacer--xl {
  height: var(--spacing-xl, 4rem);
}

/* Custom height (set via CSS custom properties) */
.spacer--custom {
  height: var(--spacer-height);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .spacer--small {
    height: var(--spacing-xs, 0.75rem);
  }

  .spacer--medium {
    height: var(--spacing-sm, 1rem);
  }

  .spacer--large {
    height: var(--spacing-md, 2rem);
  }

  .spacer--xl {
    height: var(--spacing-lg, 3rem);
  }

  /* Apply mobile custom height if provided */
  .spacer--custom {
    height: var(--spacer-height-mobile, var(--spacer-height));
  }
}