/* Divider Component */

/* Component-specific custom properties */
.c-divider {
  /* Base properties */
  --c-divider-color: var(--ds-color-border);
  --c-divider-color-strong: var(--ds-color-border-strong);
  --c-divider-size: 1px;
  --c-divider-style: solid;
  --c-divider-margin: var(--ds-space-m);
  
  /* Orientation-specific properties */
  --c-divider-horizontal-margin: var(--c-divider-margin) 0;
  --c-divider-vertical-margin: 0 var(--c-divider-margin);
  
  /* Color variants */
  --c-divider-color-neutral: var(--ds-color-border-neutral);
  --c-divider-color-success: var(--ds-color-border-success);
  --c-divider-color-warning: var(--ds-color-border-warning);
  --c-divider-color-danger: var(--ds-color-border-danger);
  --c-divider-color-info: var(--ds-color-border-info);
  
  /* Gradient colors */
  --c-divider-gradient-start: var(--ds-color-border);
  --c-divider-gradient-end: transparent;
}

/* Base divider styles */
.c-divider {
  border: none;
  margin: 0;
  padding: 0;
  background-color: var(--c-divider-color);
  flex-shrink: 0;
  
  /* Default to horizontal */
  width: 100%;
  height: var(--c-divider-size);
  margin: var(--c-divider-horizontal-margin);
}

/* Ensure proper semantics */
.c-divider[role="separator"] {
  /* Already has proper role */
}

.c-divider:not([role]) {
  /* Add role if not present */
  /* This will be handled by JavaScript */
}

/* ========================================
   DIVIDER ORIENTATIONS
   ======================================== */

/* Horizontal divider (default) */
.c-divider--horizontal {
  width: 100%;
  height: var(--c-divider-size);
  margin: var(--c-divider-horizontal-margin);
  
  /* Reset vertical properties */
  min-height: auto;
  align-self: stretch;
}

/* Vertical divider */
.c-divider--vertical {
  width: var(--c-divider-size);
  height: 100%;
  margin: var(--c-divider-vertical-margin);
  
  /* Ensure proper height in flex containers */
  min-height: 1rem;
  align-self: stretch;
}

/* ========================================
   DIVIDER STYLES
   ======================================== */

/* Solid style (default) */
.c-divider--solid {
  background-color: var(--c-divider-color);
  border: none;
}

/* Dashed style */
.c-divider--dashed {
  background: none;
  border: none;
  position: relative;
}

.c-divider--dashed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--c-divider-color) 0,
    var(--c-divider-color) 0.5rem,
    transparent 0.5rem,
    transparent 1rem
  );
}

.c-divider--dashed.c-divider--vertical::before {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--c-divider-color) 0,
    var(--c-divider-color) 0.5rem,
    transparent 0.5rem,
    transparent 1rem
  );
}

/* Dotted style */
.c-divider--dotted {
  background: none;
  border: none;
  position: relative;
}

.c-divider--dotted::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--c-divider-color) 0,
    var(--c-divider-color) 0.25rem,
    transparent 0.25rem,
    transparent 0.75rem
  );
}

.c-divider--dotted.c-divider--vertical::before {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--c-divider-color) 0,
    var(--c-divider-color) 0.25rem,
    transparent 0.25rem,
    transparent 0.75rem
  );
}

/* Double style */
.c-divider--double {
  background: none;
  border: none;
  position: relative;
}

.c-divider--double::before,
.c-divider--double::after {
  content: '';
  position: absolute;
  background-color: var(--c-divider-color);
}

.c-divider--double.c-divider--horizontal::before,
.c-divider--double.c-divider--horizontal::after {
  left: 0;
  right: 0;
  height: var(--c-divider-size);
}

.c-divider--double.c-divider--horizontal::before {
  top: 0;
}

.c-divider--double.c-divider--horizontal::after {
  bottom: 0;
}

.c-divider--double.c-divider--vertical::before,
.c-divider--double.c-divider--vertical::after {
  top: 0;
  bottom: 0;
  width: var(--c-divider-size);
}

.c-divider--double.c-divider--vertical::before {
  left: 0;
}

.c-divider--double.c-divider--vertical::after {
  right: 0;
}

/* Gradient style */
.c-divider--gradient {
  background: none;
  border: none;
}

.c-divider--gradient.c-divider--horizontal {
  background: linear-gradient(
    to right,
    var(--c-divider-gradient-start),
    var(--c-divider-color),
    var(--c-divider-gradient-end)
  );
}

.c-divider--gradient.c-divider--vertical {
  background: linear-gradient(
    to bottom,
    var(--c-divider-gradient-start),
    var(--c-divider-color),
    var(--c-divider-gradient-end)
  );
}

/* ========================================
   DIVIDER COLORS
   ======================================== */

.c-divider--color-strong {
  --c-divider-color: var(--c-divider-color-strong);
}

.c-divider--color-neutral {
  --c-divider-color: var(--c-divider-color-neutral);
}

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

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

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

.c-divider--color-info {
  --c-divider-color: var(--c-divider-color-info);
}

/* ========================================
   DIVIDER SIZES
   ======================================== */

.c-divider--size-xs {
  --c-divider-size: 1px;
}

.c-divider--size-s {
  --c-divider-size: 2px;
}

.c-divider--size-m {
  --c-divider-size: 3px;
}

.c-divider--size-l {
  --c-divider-size: 4px;
}

.c-divider--size-xl {
  --c-divider-size: 6px;
}

/* ========================================
   DIVIDER SPACING
   ======================================== */

.c-divider--spacing-none {
  --c-divider-margin: 0;
  --c-divider-horizontal-margin: 0;
  --c-divider-vertical-margin: 0;
}

.c-divider--spacing-xs {
  --c-divider-margin: var(--ds-space-xs);
  --c-divider-horizontal-margin: var(--ds-space-xs) 0;
  --c-divider-vertical-margin: 0 var(--ds-space-xs);
}

.c-divider--spacing-s {
  --c-divider-margin: var(--ds-space-s);
  --c-divider-horizontal-margin: var(--ds-space-s) 0;
  --c-divider-vertical-margin: 0 var(--ds-space-s);
}

.c-divider--spacing-m {
  --c-divider-margin: var(--ds-space-m);
  --c-divider-horizontal-margin: var(--ds-space-m) 0;
  --c-divider-vertical-margin: 0 var(--ds-space-m);
}

.c-divider--spacing-l {
  --c-divider-margin: var(--ds-space-l);
  --c-divider-horizontal-margin: var(--ds-space-l) 0;
  --c-divider-vertical-margin: 0 var(--ds-space-l);
}

.c-divider--spacing-xl {
  --c-divider-margin: var(--ds-space-xl);
  --c-divider-horizontal-margin: var(--ds-space-xl) 0;
  --c-divider-vertical-margin: 0 var(--ds-space-xl);
}

/* ========================================
   DIVIDER WITH TEXT
   ======================================== */

.c-divider--with-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--c-divider-horizontal-margin);
}

.c-divider--with-text::before,
.c-divider--with-text::after {
  content: '';
  flex: 1;
  height: var(--c-divider-size);
  background-color: var(--c-divider-color);
}

.c-divider--with-text::before {
  margin-right: var(--ds-space-s);
}

.c-divider--with-text::after {
  margin-left: var(--ds-space-s);
}

.c-divider__text {
  color: var(--ds-color-text-weak);
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-medium);
  white-space: nowrap;
  padding: 0 var(--ds-space-xs);
}

/* ========================================
   RESPONSIVE BEHAVIOR
   ======================================== */

/* Mobile adjustments */
@media (max-width: 768px) {
  .c-divider--responsive.c-divider--vertical {
    /* Convert to horizontal on mobile */
    width: 100%;
    height: var(--c-divider-size);
    margin: var(--c-divider-horizontal-margin);
    min-height: auto;
  }
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
  .c-divider {
    --c-divider-color: var(--ds-color-text);
  }
}

/* Print styles */
@media print {
  .c-divider {
    background-color: #000 !important;
    color-adjust: exact;
  }
  
  .c-divider--gradient {
    background: #000 !important;
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Full width divider */
.c-divider--full-width {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* Inset divider */
.c-divider--inset {
  margin-left: var(--ds-space-l);
  margin-right: var(--ds-space-l);
}

/* Middle divider (for flex containers) */
.c-divider--middle {
  align-self: center;
}