/* Spacer Block - Adds vertical spacing or horizontal divider between content */

.spacer {
  display: block;
  width: 100%;
  height: var(--size-48); /* Default: medium spacing */
}

/* Small variant */
.spacer.small {
  height: var(--size-24);
}

/* Medium variant (explicit, same as default) */
.spacer.medium {
  height: var(--size-48);
}

/* Large variant */
.spacer.large {
  height: var(--size-64);
}

/* Extra Large variant */
.spacer.extra-large {
  height: var(--size-80);
}

/* Divider variant - 1px horizontal line */
.spacer.divider {
  height: 1px;
  background: var(--color-gray-secondary, #b8c8dc);
}

/* Divider Spaced variant - 1px line with 32px padding above and below */
.spacer.divider-spaced {
  height: 1px;
  background: var(--color-gray-secondary, #b8c8dc);
  margin-block: 32px;
}

/* Responsive adjustments for mobile */
@media (width < 600px) {
  .spacer {
    height: var(--size-32); /* Default scales down on mobile */
  }

  .spacer.small {
    height: var(--size-16);
  }

  .spacer.medium {
    height: var(--size-32);
  }

  .spacer.large {
    height: var(--size-48);
  }

  .spacer.extra-large {
    height: var(--size-64);
  }
}