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

.ui-sidebar-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-sidebar-layout__sidebar {
      border-left: $semantic-border-width-1 solid $semantic-color-border-secondary;
      border-right: none;
    }
  }
  
  // Collapsed state
  &--collapsed {
    .ui-sidebar-layout__content {
      margin-left: 0;
    }
    
    &.ui-sidebar-layout--position-right .ui-sidebar-layout__content {
      margin-right: 0;
    }
  }
  
  // Hidden variant
  &--hidden {
    .ui-sidebar-layout__sidebar {
      display: none;
    }
  }
  
  // Overlay mode
  &--overlay {
    .ui-sidebar-layout__sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      z-index: $semantic-z-index-modal;
      
      &--collapsed {
        transform: translateX(-100%);
      }
    }
    
    &.ui-sidebar-layout--position-right .ui-sidebar-layout__sidebar {
      left: auto;
      right: 0;
      
      &--collapsed {
        transform: translateX(100%);
      }
    }
    
    .ui-sidebar-layout__content {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
  }
  
  // Visual variants
  &--bordered {
    .ui-sidebar-layout__sidebar {
      border-right: $semantic-border-width-1 solid $semantic-color-border-primary;
    }
  }
  
  &--elevated {
    .ui-sidebar-layout__sidebar {
      box-shadow: $semantic-shadow-elevation-2;
      background: $semantic-color-surface-elevated;
    }
  }
  
  // Sidebar Element
  &__sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    
    // Layout & Spacing
    padding: $semantic-spacing-component-md;
    
    // 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;
    
    // Width variants
    &--sm {
      width: 200px;
      min-width: 200px;
    }
    
    &--md {
      width: 280px;
      min-width: 280px;
    }
    
    &--lg {
      width: 360px;
      min-width: 360px;
    }
    
    &--xl {
      width: 440px;
      min-width: 440px;
    }
    
    // Collapsed state
    &--collapsed {
      width: 60px;
      min-width: 60px;
      padding: $semantic-spacing-component-sm;
    }
  }
  
  // Backdrop Element
  &__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: $semantic-z-index-overlay;
    
    // Visual Design
    background: $semantic-color-backdrop;
    opacity: $semantic-opacity-backdrop;
    
    // Transitions
    transition: opacity $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    // Interactive
    cursor: pointer;
  }
  
  // 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;
  }
  
  // Responsive Design
  @media (max-width: 768px) {
    &:not(.ui-sidebar-layout--overlay) {
      .ui-sidebar-layout__sidebar {
        &--sm {
          width: 60px;
          min-width: 60px;
          padding: $semantic-spacing-component-xs;
        }
        
        &--md, &--lg, &--xl {
          width: 60px;
          min-width: 60px;
          padding: $semantic-spacing-component-xs;
        }
      }
    }
    
    .ui-sidebar-layout__content {
      padding: $semantic-spacing-component-sm;
    }
  }
  
  @media (max-width: 480px) {
    .ui-sidebar-layout__content {
      padding: $semantic-spacing-component-xs;
    }
  }
}