/**
 * SegmentedControl (Mantine) + responsive_stack
 *
 * withItemsBorders=false removes Mantine’s .control::before separators. We draw
 * the same divider in CSS: inline-start between segments in a row, block-start
 * (top) when stacked — same elements, orientation swap.
 */

@container main-content (min-width: 901px) {
  .custom-segmented-control--responsive-stack[class*="mantine-SegmentedControl-root"] {
    flex-direction: row !important;
    width: fit-content !important;
    max-width: 100%;
    align-items: stretch !important;
  }

  .custom-segmented-control--responsive-stack[class*="mantine-SegmentedControl-root"]
    [class*="mantine-SegmentedControl-control"]:not(:first-of-type) {
    border-inline-start: 1px solid hsl(var(--border)) !important;
    border-top: none !important;
  }
}

@container main-content (max-width: 900px) {
  .custom-segmented-control--responsive-stack[class*="mantine-SegmentedControl-root"] {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .custom-segmented-control--responsive-stack[class*="mantine-SegmentedControl-root"]
    [class*="mantine-SegmentedControl-control"] {
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: none !important;
  }

  .custom-segmented-control--responsive-stack[class*="mantine-SegmentedControl-root"]
    [class*="mantine-SegmentedControl-control"]:not(:first-of-type) {
    border-top: 1px solid hsl(var(--border)) !important;
    border-inline-start: none !important;
  }

  .custom-segmented-control--responsive-stack[class*="mantine-SegmentedControl-root"]
    [class*="mantine-SegmentedControl-label"] {
    justify-content: flex-start;
    text-align: left;
  }
}

/* Fallback when container queries are unavailable */
@media (max-width: 900px) {
  .custom-segmented-control--responsive-stack[class*="mantine-SegmentedControl-root"] {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .custom-segmented-control--responsive-stack[class*="mantine-SegmentedControl-root"]
    [class*="mantine-SegmentedControl-control"] {
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: none !important;
  }

  .custom-segmented-control--responsive-stack[class*="mantine-SegmentedControl-root"]
    [class*="mantine-SegmentedControl-control"]:not(:first-of-type) {
    border-top: 1px solid hsl(var(--border)) !important;
    border-inline-start: none !important;
  }

  .custom-segmented-control--responsive-stack[class*="mantine-SegmentedControl-root"]
    [class*="mantine-SegmentedControl-label"] {
    justify-content: flex-start;
    text-align: left;
  }
}