@use 'ui-design-system/src/styles/semantic/index' as *;

.ui-supporting-pane-layout {
  // Core Structure
  display: flex;
  position: relative;
  min-height: 100vh;
  width: 100%;
  
  // Layout & Spacing
  gap: 0;
  
  // Visual Design
  background: $semantic-color-surface;
  color: $semantic-color-text-primary;
  
  // Transitions
  transition: all $semantic-motion-duration-normal $semantic-motion-easing-ease;
  
  // Right position variant
  &--position-right {
    flex-direction: row-reverse;
    
    .ui-supporting-pane-layout__pane {
      border-left: $semantic-border-width-1 solid $semantic-color-border-secondary;
      border-right: none;
    }
  }
  
  // Collapsed state
  &--collapsed {
    .ui-supporting-pane-layout__pane {
      width: 60px;
      min-width: 60px;
      
      .ui-supporting-pane-layout__pane-content {
        opacity: 0;
        visibility: hidden;
      }
      
      .ui-supporting-pane-layout__pane-toggle {
        padding: $semantic-spacing-component-xs;
      }
    }
  }
  
  // Sticky positioning
  &--sticky-pane {
    .ui-supporting-pane-layout__pane {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
    }
  }
  
  // Visual variants
  &--bordered {
    .ui-supporting-pane-layout__pane {
      border-right: $semantic-border-width-1 solid $semantic-color-border-primary;
    }
  }
  
  &--elevated {
    .ui-supporting-pane-layout__pane {
      box-shadow: $semantic-shadow-elevation-2;
      background: $semantic-color-surface-elevated;
    }
  }
  
  &--subtle {
    .ui-supporting-pane-layout__pane {
      background: $semantic-color-surface-secondary;
      border-right: $semantic-border-width-1 solid $semantic-color-border-subtle;
    }
  }
  
  // Size variants
  &--sm {
    .ui-supporting-pane-layout__pane:not(.ui-supporting-pane-layout__pane--collapsed) {
      width: 240px;
      min-width: 240px;
    }
  }
  
  &--md {
    .ui-supporting-pane-layout__pane:not(.ui-supporting-pane-layout__pane--collapsed) {
      width: 320px;
      min-width: 320px;
    }
  }
  
  &--lg {
    .ui-supporting-pane-layout__pane:not(.ui-supporting-pane-layout__pane--collapsed) {
      width: 400px;
      min-width: 400px;
    }
  }
  
  &--xl {
    .ui-supporting-pane-layout__pane:not(.ui-supporting-pane-layout__pane--collapsed) {
      width: 480px;
      min-width: 480px;
    }
  }
  
  // Main Content Element
  &__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    position: relative;
    
    // Layout & Spacing
    padding: $semantic-spacing-component-md;
    
    // Visual Design
    background: $semantic-color-surface;
    color: $semantic-color-text-primary;
    
    // Typography
    font-family: map-get($semantic-typography-body-medium, font-family);
    font-size: map-get($semantic-typography-body-medium, font-size);
    font-weight: map-get($semantic-typography-body-medium, font-weight);
    line-height: map-get($semantic-typography-body-medium, line-height);
    
    // Transitions
    transition: margin $semantic-motion-duration-normal $semantic-motion-easing-ease;
  }
  
  // Supporting Pane Element
  &__pane {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    width: 320px;
    min-width: 320px;
    
    // Layout & Spacing
    padding: 0;
    
    // Visual Design
    background: $semantic-color-surface-secondary;
    border-right: $semantic-border-width-1 solid $semantic-color-border-secondary;
    
    // Typography
    font-family: map-get($semantic-typography-body-medium, font-family);
    font-size: map-get($semantic-typography-body-medium, font-size);
    font-weight: map-get($semantic-typography-body-medium, font-weight);
    line-height: map-get($semantic-typography-body-medium, line-height);
    
    // Transitions
    transition: all $semantic-motion-duration-normal $semantic-motion-easing-ease;
    
    &--collapsed {
      width: 60px;
      min-width: 60px;
    }
  }
  
  // Pane Header Element
  &__pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    
    // Layout & Spacing
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
    
    // Visual Design
    background: $semantic-color-surface-elevated;
    color: $semantic-color-text-primary;
    
    // Typography
    font-family: map-get($semantic-typography-body-medium, font-family);
    font-size: map-get($semantic-typography-body-medium, font-size);
    font-weight: $semantic-typography-font-weight-semibold;
    line-height: map-get($semantic-typography-body-medium, line-height);
  }
  
  // Pane Content Element
  &__pane-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    
    // Layout & Spacing
    padding: $semantic-spacing-component-md;
    
    // Visual Design
    background: inherit;
    color: $semantic-color-text-primary;
    
    // Transitions
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    // When collapsed
    .ui-supporting-pane-layout--collapsed & {
      opacity: 0;
      visibility: hidden;
      padding: 0;
    }
  }
  
  // Pane Toggle Button
  &__pane-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    // Layout & Spacing
    width: $semantic-sizing-touch-target;
    height: $semantic-sizing-touch-target;
    padding: $semantic-spacing-component-xs;
    
    // Visual Design
    background: transparent;
    border: none;
    border-radius: $semantic-border-radius-sm;
    color: $semantic-color-text-secondary;
    
    // Typography
    font-size: $semantic-sizing-icon-button;
    line-height: 1;
    
    // Transitions
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    cursor: pointer;
    
    // Interactive States
    &:hover {
      background: $semantic-color-interactive-primary;
      color: $semantic-color-text-primary;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
    
    &:active {
      background: $semantic-color-interactive-primary;
      opacity: $semantic-opacity-hover;
    }
    
    // Icon styling
    .fa-icon {
      font-size: inherit;
      transition: transform $semantic-motion-duration-fast $semantic-motion-easing-ease;
    }
    
    // Collapsed state rotation
    .ui-supporting-pane-layout--collapsed & .fa-icon {
      transform: rotate(180deg);
    }
    
    .ui-supporting-pane-layout--position-right & .fa-icon {
      transform: rotate(180deg);
    }
    
    .ui-supporting-pane-layout--position-right.ui-supporting-pane-layout--collapsed & .fa-icon {
      transform: rotate(0deg);
    }
  }
  
  // Pane Footer Element (optional)
  &__pane-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    
    // Layout & Spacing
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    border-top: $semantic-border-width-1 solid $semantic-color-border-subtle;
    
    // Visual Design
    background: $semantic-color-surface-elevated;
    color: $semantic-color-text-secondary;
    
    // Typography
    font-family: map-get($semantic-typography-body-small, font-family);
    font-size: map-get($semantic-typography-body-small, font-size);
    font-weight: map-get($semantic-typography-body-small, font-weight);
    line-height: map-get($semantic-typography-body-small, line-height);
  }
  
  // Responsive Design
  @media (max-width: 1024px) {
    &:not(.ui-supporting-pane-layout--always-visible) {
      .ui-supporting-pane-layout__pane {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        z-index: $semantic-z-index-modal;
        box-shadow: $semantic-shadow-elevation-4;
        transform: translateX(100%);
        
        &:not(.ui-supporting-pane-layout__pane--collapsed) {
          transform: translateX(0);
        }
      }
      
      &.ui-supporting-pane-layout--position-left .ui-supporting-pane-layout__pane {
        left: 0;
        right: auto;
        transform: translateX(-100%);
        
        &:not(.ui-supporting-pane-layout__pane--collapsed) {
          transform: translateX(0);
        }
      }
      
      .ui-supporting-pane-layout__content {
        width: 100%;
        padding: $semantic-spacing-component-sm;
      }
    }
  }
  
  @media (max-width: 768px) {
    .ui-supporting-pane-layout__content {
      padding: $semantic-spacing-component-sm;
    }
    
    .ui-supporting-pane-layout__pane {
      width: 280px !important;
      min-width: 280px !important;
      
      &--collapsed {
        width: 60px !important;
        min-width: 60px !important;
      }
    }
    
    .ui-supporting-pane-layout__pane-content {
      padding: $semantic-spacing-component-sm;
    }
  }
  
  @media (max-width: 480px) {
    .ui-supporting-pane-layout__content {
      padding: $semantic-spacing-component-xs;
    }
    
    .ui-supporting-pane-layout__pane {
      width: 240px !important;
      min-width: 240px !important;
    }
    
    .ui-supporting-pane-layout__pane-content {
      padding: $semantic-spacing-component-xs;
    }
    
    .ui-supporting-pane-layout__pane-header {
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
    }
    
    .ui-supporting-pane-layout__pane-footer {
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
    }
  }
}