/**
 * Split Container Styles - Smooth and functional
 */

@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.split-container {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;

  // Horizontal split (default)
  &--horizontal {
    flex-direction: row;
  }

  // Vertical split
  &--vertical {
    flex-direction: column;
  }

  // Dragging state - high specificity to override other styles
  &--dragging,
  &.split-container--dragging {
    * {
      user-select: none;
      pointer-events: none;
    }

    // Ensure dragging state overrides all child elements
    *,
    *::before,
    *::after {
      user-select: none;
      pointer-events: none;
    }

    // Re-enable pointer events on the splitter itself
    .split-container__splitter {
      pointer-events: auto;
    }
  }

  // Panel styling
  &__panel {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0; // Prevent flex items from overflowing
    min-height: 0;

    &--first {
      flex-shrink: 0;
    }

    &--second {
      flex-shrink: 0;
    }
  }

  // Dynamic sizing using CSS custom properties
  &--horizontal &__panel--first {
    width: var(--split-size, 50%);
  }

  &--horizontal &__panel--second {
    width: var(--remaining-size, 50%);
  }

  &--vertical &__panel--first {
    height: var(--split-size, 50%);
  }

  &--vertical &__panel--second {
    height: var(--remaining-size, 50%);
  }

  // Splitter handle
  &__splitter {
    position: relative;
    background-color: $CAP_G07;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    z-index: 10;

    &:hover {
      background-color: $CAP_G06;

      .split-container__splitter-line {
        opacity: 1;
        background-color: $CAP_G04;
      }
    }

    &:active {
      background-color: map-get($CAP_PRIMARY, base);

      .split-container__splitter-line {
        background-color: $CAP_WHITE;
        opacity: 1;
      }
    }
  }

  // Horizontal splitter dimensions
  &--horizontal &__splitter {
    width: 0.375rem;
    min-width: 0.375rem;
    max-width: 0.375rem;
    height: 100%;
    cursor: col-resize;
  }

  // Vertical splitter dimensions
  &--vertical &__splitter {
    height: 0.375rem;
    min-height: 0.375rem;
    max-height: 0.375rem;
    width: 100%;
    cursor: row-resize;
  }

  // Splitter handle (visual indicator)
  &__splitter-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  // Splitter line (visual feedback)
  &__splitter-line {
    background-color: $CAP_G10;
    border-radius: 0.0625rem;
    transition: all 0.15s ease;
    opacity: 0.6;
  }

  // Horizontal splitter line
  &--horizontal &__splitter-line {
    width: 0.125rem;
    height: 1.25rem;
  }

  // Vertical splitter line
  &--vertical &__splitter-line {
    width: 1.25rem;
    height: 0.125rem;
  }


  // Dragging state styling
  &--dragging &__splitter {
    background-color: map-get($CAP_SECONDARY, base);
  }

  &--dragging &__splitter-line {
    background-color: $CAP_WHITE;
    opacity: 1;
  }

  // Responsive adjustments
  @media (max-width: 768px) {
    &--horizontal &__splitter {
      width: 0.75rem;
      min-width: 0.75rem;
      max-width: 0.75rem;
    }

    &--vertical &__splitter {
      height: 0.75rem;
      min-height: 0.75rem;
      max-height: 0.75rem;
    }

    &__splitter-line {
      opacity: 1;
    }

    &--horizontal &__splitter-line {
      width: 0.1875rem;
      height: 1.875rem;
    }

    &--vertical &__splitter-line {
      width: 1.875rem;
      height: 0.1875rem;
    }
  }

  // Focus styles for accessibility
  &__splitter:focus {
    outline: 0.125rem solid map-get($CAP_PRIMARY, base);
    outline-offset: -0.125rem;
    box-shadow: 0 0 0 0.125rem rgba(map-get($CAP_PRIMARY, base), 0.2);
  }

  // Focus-visible for better keyboard navigation
  &__splitter:focus-visible {
    outline: 0.125rem solid map-get($CAP_PRIMARY, base);
    outline-offset: 0.125rem;
    box-shadow: 0 0 0 0.25rem rgba(map-get($CAP_PRIMARY, base), 0.2);
  }

  // Remove focus outline when not using keyboard
  &__splitter:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  // High contrast mode support
  @media (prefers-contrast: high) {
    &__splitter {
      background-color: $CAP_G01;
      border: 0.0625rem solid $CAP_WHITE;

      &:focus,
      &:focus-visible {
        outline-color: $CAP_WHITE;
        box-shadow: 0 0 0 0.25rem rgba($CAP_WHITE, 0.5);
      }
    }

    &__splitter-line {
      background-color: $CAP_WHITE;
      opacity: 1;
    }

    &--dragging &__splitter {
      background-color: $CAP_WHITE;
      border-color: $CAP_G01;
    }

    &--dragging &__splitter-line {
      background-color: $CAP_G01;
    }
  }

  // Reduced motion support
  @media (prefers-reduced-motion: reduce) {

    &__splitter,
    &__splitter-line {
      transition: none;
    }
  }
}