/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Utility Component Styles
 * ═══════════════════════════════════════════════════════════
 * Styles pour composants utilitaires
 * Divider, Spacer, Inplace, ThemeSelector
 *
 * Version: 1.0.0
 * Date: 2 Janvier 2026
 * Author: Lions Development Team
 * Priority: BASSE #27-28, #45-46
 * ═══════════════════════════════════════════════════════════
 */

@import '../variables';
@import '../mixins';

// ============================================
// ➖ DIVIDER STYLES
// ============================================

.ui-divider {
  display: flex;
  align-items: center;
  margin: $lions-spacing-5 0;
  @include lions-transition();

  // Horizontal divider (default)
  &.ui-divider-horizontal {
    flex-direction: row;

    &::before,
    &::after {
      content: '';
      flex: 1;
      height: 1px;
      background: $lions-gray-300;
    }

    &.ui-divider-left::before {
      flex: 0;
      margin-right: $lions-spacing-4;
    }

    &.ui-divider-right::after {
      flex: 0;
      margin-left: $lions-spacing-4;
    }

    &.ui-divider-center {
      &::before {
        margin-right: $lions-spacing-4;
      }

      &::after {
        margin-left: $lions-spacing-4;
      }
    }

    // No content variant
    &.ui-divider-no-content {
      &::before {
        margin-right: 0;
      }

      &::after {
        display: none;
      }
    }
  }

  // Vertical divider
  &.ui-divider-vertical {
    flex-direction: column;
    min-height: 100px;
    margin: 0 $lions-spacing-5;

    &::before,
    &::after {
      content: '';
      flex: 1;
      width: 1px;
      background: $lions-gray-300;
    }

    &.ui-divider-top::before {
      flex: 0;
      margin-bottom: $lions-spacing-4;
    }

    &.ui-divider-bottom::after {
      flex: 0;
      margin-top: $lions-spacing-4;
    }

    &.ui-divider-center {
      &::before {
        margin-bottom: $lions-spacing-4;
      }

      &::after {
        margin-top: $lions-spacing-4;
      }
    }
  }

  // Content
  .ui-divider-content {
    @include lions-font-size('sm');
    @include lions-font-weight('medium');
    color: $lions-gray-600;
    padding: 0 $lions-spacing-3;
    white-space: nowrap;
  }

  // Style variants
  &.ui-divider-solid {
    &::before,
    &::after {
      border-style: solid;
    }
  }

  &.ui-divider-dashed {
    &::before,
    &::after {
      border-style: dashed;
      background: none;
      border-width: 1px 0 0 0;
      height: 0;
    }

    &.ui-divider-vertical {
      &::before,
      &::after {
        border-width: 0 0 0 1px;
        width: 0;
      }
    }
  }

  &.ui-divider-dotted {
    &::before,
    &::after {
      border-style: dotted;
      background: none;
      border-width: 1px 0 0 0;
      height: 0;
    }

    &.ui-divider-vertical {
      &::before,
      &::after {
        border-width: 0 0 0 1px;
        width: 0;
      }
    }
  }

  // Color variants
  &.ui-divider-primary {
    &::before,
    &::after {
      background: $lions-blue-300;
      border-color: $lions-blue-300;
    }

    .ui-divider-content {
      color: $lions-blue-700;
    }
  }

  &.ui-divider-success {
    &::before,
    &::after {
      background: $lions-success-300;
      border-color: $lions-success-300;
    }

    .ui-divider-content {
      color: $lions-success-700;
    }
  }

  &.ui-divider-warning {
    &::before,
    &::after {
      background: $lions-warning-300;
      border-color: $lions-warning-300;
    }

    .ui-divider-content {
      color: $lions-warning-700;
    }
  }

  &.ui-divider-danger {
    &::before,
    &::after {
      background: $lions-danger-300;
      border-color: $lions-danger-300;
    }

    .ui-divider-content {
      color: $lions-danger-700;
    }
  }
}

// ============================================
// ⬜ SPACER STYLES
// ============================================

.ui-spacer {
  display: block;

  // Default spacing
  &.ui-spacer-horizontal {
    width: 100%;
    height: $lions-spacing-5;
  }

  &.ui-spacer-vertical {
    display: inline-block;
    width: $lions-spacing-5;
    height: auto;
    min-height: 1px;
  }

  // Size variants
  &.ui-spacer-xs {
    &.ui-spacer-horizontal {
      height: $lions-spacing-1;
    }

    &.ui-spacer-vertical {
      width: $lions-spacing-1;
    }
  }

  &.ui-spacer-sm {
    &.ui-spacer-horizontal {
      height: $lions-spacing-3;
    }

    &.ui-spacer-vertical {
      width: $lions-spacing-3;
    }
  }

  &.ui-spacer-md {
    &.ui-spacer-horizontal {
      height: $lions-spacing-5;
    }

    &.ui-spacer-vertical {
      width: $lions-spacing-5;
    }
  }

  &.ui-spacer-lg {
    &.ui-spacer-horizontal {
      height: $lions-spacing-8;
    }

    &.ui-spacer-vertical {
      width: $lions-spacing-8;
    }
  }

  &.ui-spacer-xl {
    &.ui-spacer-horizontal {
      height: $lions-spacing-12;
    }

    &.ui-spacer-vertical {
      width: $lions-spacing-12;
    }
  }
}

// ============================================
// ✏️ INPLACE STYLES
// ============================================

.ui-inplace {
  display: inline-block;
  position: relative;

  .ui-inplace-display {
    display: inline-flex;
    align-items: center;
    gap: $lions-spacing-2;
    padding: $lions-spacing-2 $lions-spacing-3;
    @include lions-rounded('md');
    cursor: pointer;
    @include lions-transition();
    @include lions-font-size('base');
    color: $lions-text-primary;

    &:hover {
      background: $lions-gray-50;
    }

    &:focus-visible {
      @include lions-focus-ring();
    }

    .ui-inplace-display-icon {
      font-size: 1rem;
      color: $lions-gray-500;
      margin-left: $lions-spacing-2;
    }
  }

  .ui-inplace-content {
    display: inline-block;
    padding: $lions-spacing-2;

    .ui-inplace-save,
    .ui-inplace-cancel {
      @include lions-button-base;
      padding: $lions-spacing-2 $lions-spacing-3;
      @include lions-rounded('md');
      @include lions-font-weight('semibold');
      @include lions-font-size('sm');
      margin-left: $lions-spacing-2;
      cursor: pointer;
      @include lions-transition();
    }

    .ui-inplace-save {
      @include lions-gradient-blue;
      color: $lions-white;
      border: none;

      &:hover {
        @include lions-shadow('md');
        transform: translateY(-1px);
      }
    }

    .ui-inplace-cancel {
      background: $lions-gray-200;
      color: $lions-gray-700;
      border: 1px solid $lions-gray-300;

      &:hover {
        background: $lions-gray-300;
      }
    }
  }

  &.ui-inplace-disabled {
    .ui-inplace-display {
      cursor: not-allowed;
      opacity: 0.6;

      &:hover {
        background: transparent;
      }
    }
  }
}

// ============================================
// 🎨 THEME SELECTOR STYLES
// ============================================

.ui-theme-selector {
  position: relative;
  display: inline-block;

  .ui-theme-selector-button {
    @include lions-button-base;
    padding: $lions-spacing-2 $lions-spacing-4;
    @include lions-rounded('md');
    background: $lions-gray-100;
    border: 1px solid $lions-gray-300;
    color: $lions-gray-700;
    @include lions-flex-center;
    gap: $lions-spacing-2;
    cursor: pointer;
    @include lions-transition();

    &:hover {
      background: $lions-gray-200;
      border-color: $lions-gray-400;
    }

    &:focus-visible {
      @include lions-focus-ring();
    }

    .ui-theme-selector-icon {
      font-size: 1.125rem;
      color: $lions-blue-600;
    }

    .ui-theme-selector-label {
      @include lions-font-size('sm');
      @include lions-font-weight('medium');
    }

    .ui-theme-selector-chevron {
      font-size: 0.875rem;
      color: $lions-gray-500;
      @include lions-transition();
    }

    &.ui-state-active {
      .ui-theme-selector-chevron {
        transform: rotate(180deg);
      }
    }
  }

  .ui-theme-selector-panel {
    position: absolute;
    top: calc(100% + $lions-spacing-2);
    right: 0;
    min-width: 200px;
    background: $lions-white;
    @include lions-rounded('lg');
    @include lions-shadow('xl');
    border: 1px solid $lions-gray-200;
    padding: $lions-spacing-2;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    @include lions-transition();

    &.ui-state-active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }

  .ui-theme-selector-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ui-theme-selector-item {
    display: flex;
    align-items: center;
    gap: $lions-spacing-3;
    padding: $lions-spacing-3;
    @include lions-rounded('md');
    cursor: pointer;
    @include lions-transition();

    &:hover {
      background: $lions-gray-50;
    }

    &.ui-state-active {
      background: $lions-blue-50;

      .ui-theme-selector-item-label {
        color: $lions-blue-700;
        @include lions-font-weight('semibold');
      }

      .ui-theme-selector-item-check {
        opacity: 1;
      }
    }

    .ui-theme-selector-item-preview {
      width: 2rem;
      height: 2rem;
      @include lions-rounded('md');
      border: 2px solid $lions-gray-300;
      display: flex;
      overflow: hidden;

      .ui-theme-color {
        flex: 1;
        height: 100%;
      }
    }

    .ui-theme-selector-item-label {
      flex: 1;
      @include lions-font-size('sm');
      color: $lions-text-primary;
    }

    .ui-theme-selector-item-check {
      font-size: 1rem;
      color: $lions-blue-600;
      opacity: 0;
      @include lions-transition();
    }
  }
}

// ============================================
// 🎯 SKELETON LOADER (Bonus Utility)
// ============================================

.ui-skeleton {
  background: linear-gradient(
    90deg,
    $lions-gray-200 0%,
    $lions-gray-100 50%,
    $lions-gray-200 100%
  );
  background-size: 200% 100%;
  animation: lions-skeleton-loading 1.5s ease-in-out infinite;
  @include lions-rounded('md');

  &.ui-skeleton-circle {
    @include lions-rounded('full');
    width: 3rem;
    height: 3rem;
  }

  &.ui-skeleton-text {
    height: 1rem;
    width: 100%;

    &.ui-skeleton-sm {
      height: 0.75rem;
    }

    &.ui-skeleton-lg {
      height: 1.25rem;
    }
  }

  &.ui-skeleton-rect {
    width: 100%;
    height: 10rem;
  }

  &.ui-skeleton-button {
    width: 8rem;
    height: 2.5rem;
  }

  &.ui-skeleton-card {
    width: 100%;
    height: 15rem;
  }
}

@keyframes lions-skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

// ============================================
// 📱 RESPONSIVE ADJUSTMENTS
// ============================================

@media (max-width: $lions-breakpoint-md) {
  .ui-divider {
    &.ui-divider-horizontal {
      margin: $lions-spacing-4 0;

      .ui-divider-content {
        @include lions-font-size('xs');
      }
    }

    &.ui-divider-vertical {
      min-height: 60px;
      margin: 0 $lions-spacing-3;
    }
  }

  .ui-theme-selector {
    .ui-theme-selector-panel {
      right: auto;
      left: 0;
    }
  }

  .ui-inplace {
    .ui-inplace-display {
      padding: $lions-spacing-2;
      @include lions-font-size('sm');
    }
  }
}

// ============================================
// ♿ ACCESSIBILITY ENHANCEMENTS
// ============================================

.ui-inplace,
.ui-theme-selector {
  // Focus visible
  button:focus-visible,
  .ui-inplace-display:focus-visible,
  .ui-theme-selector-button:focus-visible {
    @include lions-focus-ring();
  }

  // High contrast mode
  @media (prefers-contrast: high) {
    border-width: 2px !important;

    button,
    .ui-inplace-display,
    .ui-theme-selector-button {
      border-width: 2px !important;
    }
  }

  // Reduced motion
  @media (prefers-reduced-motion: reduce) {
    * {
      transition: none !important;
      animation: none !important;
    }
  }
}

// Skeleton - Reduced motion
@media (prefers-reduced-motion: reduce) {
  .ui-skeleton {
    animation: none !important;
    background: $lions-gray-200;
  }
}

// ============================================
// 🎨 UTILITY CLASSES
// ============================================

// Hidden divider (just for spacing)
.ui-divider-hidden {
  &::before,
  &::after {
    display: none !important;
  }
}

// Thick divider
.ui-divider-thick {
  &::before,
  &::after {
    height: 2px !important;

    &.ui-divider-vertical {
      width: 2px !important;
      height: auto !important;
    }
  }
}

// Inplace full width
.ui-inplace-fullwidth {
  display: block;
  width: 100%;

  .ui-inplace-display {
    width: 100%;
  }
}
