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

.ui-sticky-layout {
  position: sticky;
  display: block;
  box-sizing: border-box;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  
  // Position variants
  &--top {
    top: 0;
    z-index: $semantic-z-index-sticky;
  }
  
  &--bottom {
    bottom: 0;
    z-index: $semantic-z-index-sticky;
  }
  
  &--left {
    left: 0;
    z-index: $semantic-z-index-sticky;
  }
  
  &--right {
    right: 0;
    z-index: $semantic-z-index-sticky;
  }
  
  // Size variants
  &--full {
    width: 100%;
    
    &.ui-sticky-layout--left,
    &.ui-sticky-layout--right {
      height: 100vh;
    }
  }
  
  &--content {
    width: fit-content;
    height: fit-content;
  }
  
  // Offset variants
  &--offset-xs {
    &.ui-sticky-layout--top {
      top: $semantic-spacing-component-xs;
    }
    
    &.ui-sticky-layout--bottom {
      bottom: $semantic-spacing-component-xs;
    }
    
    &.ui-sticky-layout--left {
      left: $semantic-spacing-component-xs;
    }
    
    &.ui-sticky-layout--right {
      right: $semantic-spacing-component-xs;
    }
  }
  
  &--offset-sm {
    &.ui-sticky-layout--top {
      top: $semantic-spacing-component-sm;
    }
    
    &.ui-sticky-layout--bottom {
      bottom: $semantic-spacing-component-sm;
    }
    
    &.ui-sticky-layout--left {
      left: $semantic-spacing-component-sm;
    }
    
    &.ui-sticky-layout--right {
      right: $semantic-spacing-component-sm;
    }
  }
  
  &--offset-md {
    &.ui-sticky-layout--top {
      top: $semantic-spacing-component-md;
    }
    
    &.ui-sticky-layout--bottom {
      bottom: $semantic-spacing-component-md;
    }
    
    &.ui-sticky-layout--left {
      left: $semantic-spacing-component-md;
    }
    
    &.ui-sticky-layout--right {
      right: $semantic-spacing-component-md;
    }
  }
  
  &--offset-lg {
    &.ui-sticky-layout--top {
      top: $semantic-spacing-component-lg;
    }
    
    &.ui-sticky-layout--bottom {
      bottom: $semantic-spacing-component-lg;
    }
    
    &.ui-sticky-layout--left {
      left: $semantic-spacing-component-lg;
    }
    
    &.ui-sticky-layout--right {
      right: $semantic-spacing-component-lg;
    }
  }
  
  &--offset-xl {
    &.ui-sticky-layout--top {
      top: $semantic-spacing-component-xl;
    }
    
    &.ui-sticky-layout--bottom {
      bottom: $semantic-spacing-component-xl;
    }
    
    &.ui-sticky-layout--left {
      left: $semantic-spacing-component-xl;
    }
    
    &.ui-sticky-layout--right {
      right: $semantic-spacing-component-xl;
    }
  }
  
  // Background variants
  &--surface {
    background: $semantic-color-surface-primary;
  }
  
  &--surface-secondary {
    background: $semantic-color-surface-secondary;
  }
  
  &--surface-elevated {
    background: $semantic-color-surface-elevated;
  }
  
  &--backdrop {
    background: $semantic-color-backdrop;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  // Variant styles
  &--header {
    padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
    background: $semantic-color-surface-primary;
    border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
    z-index: $semantic-z-index-header;
    
    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);
  }
  
  &--sidebar {
    padding: $semantic-spacing-component-lg;
    background: $semantic-color-surface-secondary;
    border-right: $semantic-border-width-1 solid $semantic-color-border-subtle;
    z-index: $semantic-z-index-sidebar;
    min-width: 250px;
    height: 100vh;
    overflow-y: auto;
  }
  
  &--footer {
    padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
    background: $semantic-color-surface-primary;
    border-top: $semantic-border-width-1 solid $semantic-color-border-subtle;
    z-index: $semantic-z-index-footer;
    
    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);
  }
  
  &--floating {
    padding: $semantic-spacing-component-sm;
    background: $semantic-color-surface-elevated;
    border-radius: $semantic-border-radius-lg;
    box-shadow: $semantic-shadow-elevation-3;
    border: $semantic-border-width-1 solid $semantic-color-border-subtle;
    z-index: $semantic-z-index-floating;
    margin: $semantic-spacing-component-md;
  }
  
  &--toolbar {
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    background: $semantic-color-surface-elevated;
    border: $semantic-border-width-1 solid $semantic-color-border-primary;
    border-radius: $semantic-border-radius-md;
    z-index: $semantic-z-index-elevated;
    
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-sm;
  }
  
  // Shadow enhancement
  &--shadow {
    box-shadow: $semantic-shadow-elevation-2;
    
    &.ui-sticky-layout--header {
      box-shadow: $semantic-shadow-elevation-1;
    }
    
    &.ui-sticky-layout--floating {
      box-shadow: $semantic-shadow-elevation-4;
    }
  }
  
  // Border enhancement
  &--border {
    border: $semantic-border-width-1 solid $semantic-color-border-primary;
    
    &.ui-sticky-layout--top {
      border-bottom: $semantic-border-width-2 solid $semantic-color-border-primary;
    }
    
    &.ui-sticky-layout--bottom {
      border-top: $semantic-border-width-2 solid $semantic-color-border-primary;
    }
    
    &.ui-sticky-layout--left {
      border-right: $semantic-border-width-2 solid $semantic-color-border-primary;
    }
    
    &.ui-sticky-layout--right {
      border-left: $semantic-border-width-2 solid $semantic-color-border-primary;
    }
  }
  
  // Blur effect
  &--blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.8);
    
    &.ui-sticky-layout--surface {
      background: color-mix(in srgb, $semantic-color-surface-primary 80%, transparent);
    }
    
    &.ui-sticky-layout--surface-secondary {
      background: color-mix(in srgb, $semantic-color-surface-secondary 80%, transparent);
    }
    
    &.ui-sticky-layout--surface-elevated {
      background: color-mix(in srgb, $semantic-color-surface-elevated 80%, transparent);
    }
  }
  
  // Responsive behavior
  @media (max-width: 768px) {
    &--sidebar {
      min-width: 200px;
      padding: $semantic-spacing-component-md;
    }
    
    &--header,
    &--footer {
      padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    }
    
    &--floating {
      margin: $semantic-spacing-component-sm;
      padding: $semantic-spacing-component-xs;
    }
  }
  
  @media (max-width: 480px) {
    &--sidebar {
      min-width: 180px;
      padding: $semantic-spacing-component-sm;
    }
    
    &--header,
    &--footer,
    &--toolbar {
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
    }
    
    &--floating {
      margin: $semantic-spacing-component-xs;
      border-radius: $semantic-border-radius-sm;
    }
  }
}