/**
 * List Component Styles
 *
 * Provides default styling for ul, ol, and dl list elements with CSS custom
 * properties for theming. Uses rem units exclusively for accessibility.
 *
 * @base-rem: 16px = 1rem
 */

// =============================================================================
// CSS Custom Properties (Theming)
// =============================================================================

ul,
ol,
dl {
  // Spacing
  --list-margin-top: 0;
  --list-margin-bottom: 1rem; // 16px
  --list-margin-inline: 0;
  --list-padding-inline: 0.5rem; // 40px - default browser indent
  --list-gap: 0.5rem; // 8px - gap between items

  // List marker/bullet styling
  --list-marker-color: currentColor;
  --list-marker-size: 1em; // Relative to font size
  --list-marker-offset: 0.5rem; // 8px - space between marker and text

  // Typography
  --list-font-size: 1rem; // 16px
  --list-line-height: 1.5; // 24px with 16px font
  --list-font-family: inherit;
  --list-color: inherit;

  // List item spacing
  --list-item-margin-bottom: 0.5rem; // 8px
  --list-item-padding-inline: 0;
  --list-item-padding-block: 0;

  // Definition list specific
  --dt-font-weight: 600; // Semi-bold for terms
  --dt-margin-bottom: 0.25rem; // 4px
  --dd-margin-inline-start: 2rem; // 32px - indent for definitions
  --dd-margin-bottom: 1rem; // 16px
}

// =============================================================================
// Base List Styles
// =============================================================================

ul,
ol,
dl {
  margin-block-start: var(--list-margin-top);
  margin-block-end: var(--list-margin-bottom);
  margin-inline: var(--list-margin-inline);
  padding-inline-start: var(--list-padding-inline);
  font-size: var(--list-font-size);
  line-height: var(--list-line-height);
  font-family: var(--list-font-family);
  color: var(--list-color);

  // Nested lists
  ul,
  ol,
  dl {
    margin-block-start: var(--list-gap);
    margin-block-end: var(--list-gap);
  }
}

// =============================================================================
// Unordered Lists (ul)
// =============================================================================

ul {
  list-style-type: disc;

  // Marker color support (modern browsers)
  &::marker {
    color: var(--list-marker-color);
    font-size: var(--list-marker-size);
  }

  // Nested list markers
  ul {
    list-style-type: circle;

    ul {
      list-style-type: square;
    }
  }
}

// =============================================================================
// Ordered Lists (ol)
// =============================================================================

ol {
  list-style-type: decimal;

  // Marker color support (modern browsers)
  &::marker {
    color: var(--list-marker-color);
    font-size: var(--list-marker-size);
  }

  // Nested ordered list markers
  ol {
    list-style-type: lower-alpha;

    ol {
      list-style-type: lower-roman;
    }
  }
}

// =============================================================================
// List Items (li)
// =============================================================================

li {
  margin-block-end: var(--list-item-margin-bottom);
  padding-inline: var(--list-item-padding-inline);
  padding-block: var(--list-item-padding-block);

  // Last item shouldn't have bottom margin
  &:last-child {
    margin-block-end: 0;
  }

  // Support for custom marker offset
  padding-inline-start: var(--list-marker-offset);
}

// =============================================================================
// Definition Lists (dl)
// =============================================================================

dl {
  padding-inline-start: 0;
}

// Definition Term (dt)
dt {
  font-weight: var(--dt-font-weight);
  margin-block-end: var(--dt-margin-bottom);
  padding-inline: var(--list-item-padding-inline);
  padding-block: var(--list-item-padding-block);
}

// Definition Description (dd)
dd {
  margin-inline-start: var(--dd-margin-inline-start);
  margin-block-end: var(--dd-margin-bottom);
  padding-inline: var(--list-item-padding-inline);
  padding-block: var(--list-item-padding-block);

  &:last-child {
    margin-block-end: 0;
  }
}

// =============================================================================
// List Variants (data-variant attribute)
// =============================================================================

ul,
ol,
dl {
  // None variant - removes list styling
  &[data-variant="none"] {
    list-style-type: none;
    padding-inline-start: 0;

    li {
      padding-inline-start: 0;
    }
  }

  // Inline variant - horizontal list for navigation
  &[data-variant="inline"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--list-gap);
    padding-inline-start: 0;
    list-style-type: none;

    li {
      padding-inline-start: 0;
      margin-block-end: 0;
    }
  }

  // Custom marker variant - allows for custom list markers
  &[data-variant="custom"] {
    list-style-type: none;
    padding-inline-start: 0;

    li {
      position: relative;
      padding-inline-start: calc(
        var(--list-marker-size) + var(--list-marker-offset)
      );

      // Allow custom marker via ::before pseudo-element
      &::before {
        content: var(--list-marker-content, "•");
        color: var(--list-marker-color);
        font-size: var(--list-marker-size);
        position: absolute;
        left: 0;
      }
    }
  }

  // Compact variant - reduced spacing
  &[data-variant="compact"] {
    --list-gap: 0.25rem; // 4px
    --list-item-margin-bottom: 0.25rem; // 4px
    --list-margin-bottom: 0.5rem; // 8px
  }

  // Spaced variant - increased spacing
  &[data-variant="spaced"] {
    --list-gap: 1rem; // 16px
    --list-item-margin-bottom: 1rem; // 16px
  }
}

// =============================================================================
// Accessibility Enhancements
// =============================================================================

// Focus indicators for interactive list items
li:has(a:focus-visible),
li:has(button:focus-visible) {
  // Parent list item gets subtle highlight when child is focused
  outline: 0.0625rem solid transparent; // 1px
}

// Ensure list items with focusable children are keyboard accessible
li:has(> a),
li:has(> button) {
  // Reset margins for better click targets
  margin-block-end: 0;
}

// =============================================================================
// Print Styles
// =============================================================================

@media print {
  ul,
  ol,
  dl {
    // Reduce margins for print
    --list-margin-bottom: 0.5rem;
    --list-item-margin-bottom: 0.25rem;
  }

  // Ensure markers print correctly
  ul,
  ol {
    list-style-position: inside;
  }
}

// =============================================================================
// Reduced Motion
// =============================================================================

@media (prefers-reduced-motion: reduce) {
  // Disable any potential animations on list markers
  ul,
  ol,
  dl,
  li,
  dt,
  dd {
    animation: none;
    transition: none;
  }
}