/**
 * Spacer Component
Full accessibility support
 * Creates consistent spacing between elements
 */

/* ========================================
   SPACER CUSTOM PROPERTIES
   ======================================== */

.c-spacer {
  /* Base properties */
  --c-spacer-size: var(--ds-space-m);
  --c-spacer-direction: vertical;
  --c-spacer-color: transparent;
  --c-spacer-style: solid;
  --c-spacer-width: 1px;
}

/* ========================================
   BASE SPACER STYLES
   ======================================== */

.c-spacer {
  display: block;
  flex-shrink: 0;
  background: var(--c-spacer-color);
  border: none;
  margin: 0;
  padding: 0;
}

/* Vertical spacer (default) */
.c-spacer {
  width: 100%;
  height: var(--c-spacer-size);
}

/* Horizontal spacer */
.c-spacer--horizontal {
  --c-spacer-direction: horizontal;
  width: var(--c-spacer-size);
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

/* ========================================
   SIZE VARIANTS
   ======================================== */

/* Extra small */
.c-spacer--size-xs {
  --c-spacer-size: var(--ds-space-xs);
}

/* Small */
.c-spacer--size-s {
  --c-spacer-size: var(--ds-space-s);
}

/* Medium (default) */
.c-spacer--size-m {
  --c-spacer-size: var(--ds-space-m);
}

/* Large */
.c-spacer--size-l {
  --c-spacer-size: var(--ds-space-l);
}

/* Extra large */
.c-spacer--size-xl {
  --c-spacer-size: var(--ds-space-xl);
}

/* Extra extra large */
.c-spacer--size-xxl {
  --c-spacer-size: var(--ds-space-xxl);
}

/* Extra extra extra large */
.c-spacer--size-xxxl {
  --c-spacer-size: var(--ds-space-xxxl);
}

/* Custom size */
.c-spacer--custom {
  /* Size set via CSS custom property or inline style */
}

/* ========================================
   VISUAL VARIANTS
   ======================================== */

/* Invisible spacer (default) */
.c-spacer--invisible {
  --c-spacer-color: transparent;
}

/* Visible spacer with border */
.c-spacer--visible {
  --c-spacer-color: var(--ds-color-border);
  background: none;
}

.c-spacer--visible {
  border-top: var(--c-spacer-width) var(--c-spacer-style) var(--c-spacer-color);
}

.c-spacer--visible.c-spacer--horizontal {
  border-top: none;
  border-left: var(--c-spacer-width) var(--c-spacer-style) var(--c-spacer-color);
}

/* Dotted style */
.c-spacer--dotted {
  --c-spacer-style: dotted;
}

/* Dashed style */
.c-spacer--dashed {
  --c-spacer-style: dashed;
}

/* Double style */
.c-spacer--double {
  --c-spacer-style: double;
  --c-spacer-width: 3px;
}

/* ========================================
   COLOR VARIANTS
   ======================================== */

.c-spacer--border {
  --c-spacer-color: var(--ds-color-border);
}

.c-spacer--border-weak {
  --c-spacer-color: var(--ds-color-border-weak);
}

.c-spacer--border-strong {
  --c-spacer-color: var(--ds-color-border-strong);
}

.c-spacer--primary {
  --c-spacer-color: var(--ds-color-primary);
}

.c-spacer--secondary {
  --c-spacer-color: var(--ds-color-secondary);
}

.c-spacer--success {
  --c-spacer-color: var(--ds-color-success);
}

.c-spacer--warning {
  --c-spacer-color: var(--ds-color-warning);
}

.c-spacer--danger {
  --c-spacer-color: var(--ds-color-danger);
}

/* ========================================
   RESPONSIVE VARIANTS
   ======================================== */

/* Hide on small screens */
@media (max-width: 575px) {
  .c-spacer--hide-xs {
    display: none;
  }
}

/* Hide on medium screens */
@media (min-width: 576px) and (max-width: 767px) {
  .c-spacer--hide-s {
    display: none;
  }
}

/* Hide on large screens */
@media (min-width: 768px) and (max-width: 991px) {
  .c-spacer--hide-m {
    display: none;
  }
}

/* Hide on extra large screens */
@media (min-width: 992px) {
  .c-spacer--hide-l {
    display: none;
  }
}

/* Responsive sizes */
@media (max-width: 575px) {
  .c-spacer--xs-size-xs { --c-spacer-size: var(--ds-space-xs); }
  .c-spacer--xs-size-s { --c-spacer-size: var(--ds-space-s); }
  .c-spacer--xs-size-m { --c-spacer-size: var(--ds-space-m); }
  .c-spacer--xs-size-l { --c-spacer-size: var(--ds-space-l); }
  .c-spacer--xs-size-xl { --c-spacer-size: var(--ds-space-xl); }
}

@media (min-width: 576px) and (max-width: 767px) {
  .c-spacer--s-size-xs { --c-spacer-size: var(--ds-space-xs); }
  .c-spacer--s-size-s { --c-spacer-size: var(--ds-space-s); }
  .c-spacer--s-size-m { --c-spacer-size: var(--ds-space-m); }
  .c-spacer--s-size-l { --c-spacer-size: var(--ds-space-l); }
  .c-spacer--s-size-xl { --c-spacer-size: var(--ds-space-xl); }
}

@media (min-width: 768px) and (max-width: 991px) {
  .c-spacer--m-size-xs { --c-spacer-size: var(--ds-space-xs); }
  .c-spacer--m-size-s { --c-spacer-size: var(--ds-space-s); }
  .c-spacer--m-size-m { --c-spacer-size: var(--ds-space-m); }
  .c-spacer--m-size-l { --c-spacer-size: var(--ds-space-l); }
  .c-spacer--m-size-xl { --c-spacer-size: var(--ds-space-xl); }
}

@media (min-width: 992px) {
  .c-spacer--l-size-xs { --c-spacer-size: var(--ds-space-xs); }
  .c-spacer--l-size-s { --c-spacer-size: var(--ds-space-s); }
  .c-spacer--l-size-m { --c-spacer-size: var(--ds-space-m); }
  .c-spacer--l-size-l { --c-spacer-size: var(--ds-space-l); }
  .c-spacer--l-size-xl { --c-spacer-size: var(--ds-space-xl); }
}

/* ========================================
   FLEX SPACER
   ======================================== */

/* Flex spacer that grows to fill available space */
.c-spacer--flex {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.c-spacer--flex.c-spacer--horizontal {
  width: auto;
  height: 100%;
}

.c-spacer--flex:not(.c-spacer--horizontal) {
  width: 100%;
  height: auto;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Screen reader handling */
.c-spacer {
  /* Hide from screen readers by default */
  aria-hidden: true;
}

/* When spacer is visible, it might be semantically meaningful */
.c-spacer--visible[role="separator"] {
  aria-hidden: false;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .c-spacer {
    /* Reduce spacing in print */
    --c-spacer-size: calc(var(--c-spacer-size) * 0.5);
  }
  
  .c-spacer--visible {
    /* Ensure visible spacers print in black */
    --c-spacer-color: #000;
  }
  
  /* Hide decorative spacers in print */
  .c-spacer--hide-print {
    display: none;
  }
}

/* ========================================
   UTILITIES
   ======================================== */

/* Auto spacer that adjusts based on context */
.c-spacer--auto {
  --c-spacer-size: auto;
}

/* Negative spacer (pulls elements closer) */
.c-spacer--negative {
  margin-top: calc(-1 * var(--c-spacer-size));
}

.c-spacer--negative.c-spacer--horizontal {
  margin-top: 0;
  margin-left: calc(-1 * var(--c-spacer-size));
}

/* Spacer with minimum size */
.c-spacer--min {
  min-height: var(--c-spacer-size);
}

.c-spacer--min.c-spacer--horizontal {
  min-height: 0;
  min-width: var(--c-spacer-size);
}

/* Spacer with maximum size */
.c-spacer--max {
  max-height: var(--c-spacer-size);
}

.c-spacer--max.c-spacer--horizontal {
  max-height: none;
  max-width: var(--c-spacer-size);
}

/* ========================================
   INTEGRATION WITH LAYOUT SYSTEMS
   ======================================== */

/* Spacer in flexbox containers */
.ds-stack .c-spacer,
.ds-stack-horizontal .c-spacer {
  flex-shrink: 0;
}

/* Spacer in grid containers */
.c-grid .c-spacer {
  grid-column: 1 / -1; /* Span full width by default */
}

.c-grid .c-spacer--horizontal {
  grid-column: auto; /* Reset for horizontal spacers */
  grid-row: 1 / -1; /* Span full height */
}

/* ========================================
   ANIMATION SUPPORT
   ======================================== */

.c-spacer {
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}

/* Animated spacer that can grow/shrink */
.c-spacer--animated {
  transition: 
    width var(--ds-duration-normal) var(--ds-ease-out),
    height var(--ds-duration-normal) var(--ds-ease-out),
    opacity var(--ds-duration-fast) var(--ds-ease-out);
}

/* Collapsible spacer */
.c-spacer--collapsed {
  --c-spacer-size: 0;
  opacity: 0;
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .c-spacer,
  .c-spacer *,
  .c-spacer *::before,
  .c-spacer *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}