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

.ui-divider {
  display: flex;
  align-items: center;
  position: relative;
  
  // Horizontal divider (default)
  &--horizontal {
    width: 100%;
    flex-direction: row;
    
    &::before,
    &::after {
      content: '';
      flex: 1;
      height: $semantic-border-width-1;
      background-color: $semantic-color-border-primary;
    }
    
    // Thickness variants for horizontal
    &.ui-divider--thin {
      &::before,
      &::after {
        height: $semantic-border-width-1;
      }
    }
    
    &.ui-divider--thick {
      &::before,
      &::after {
        height: $semantic-border-width-2;
      }
    }
    
    // Style variants for horizontal
    &.ui-divider--dashed {
      &::before,
      &::after {
        background: none;
        border-top: $semantic-border-width-1 dashed $semantic-color-border-primary;
        height: 0;
      }
      
      &.ui-divider--thin {
        &::before,
        &::after {
          border-top-width: $semantic-border-width-1;
        }
      }
      
      &.ui-divider--thick {
        &::before,
        &::after {
          border-top-width: $semantic-border-width-2;
        }
      }
    }
    
    &.ui-divider--dotted {
      &::before,
      &::after {
        background: none;
        border-top: $semantic-border-width-1 dotted $semantic-color-border-primary;
        height: 0;
      }
      
      &.ui-divider--thin {
        &::before,
        &::after {
          border-top-width: $semantic-border-width-1;
        }
      }
      
      &.ui-divider--thick {
        &::before,
        &::after {
          border-top-width: $semantic-border-width-2;
        }
      }
    }
  }
  
  // Vertical divider
  &--vertical {
    height: 100%;
    min-height: $semantic-spacing-layout-lg;
    flex-direction: column;
    width: $semantic-border-width-1;
    background-color: $semantic-color-border-primary;
    
    // Thickness variants for vertical
    &.ui-divider--thin {
      width: $semantic-border-width-1;
    }
    
    &.ui-divider--thick {
      width: $semantic-border-width-2;
    }
    
    // Style variants for vertical
    &.ui-divider--dashed {
      background: none;
      border-left: $semantic-border-width-1 dashed $semantic-color-border-primary;
      width: 0;
      
      &.ui-divider--thin {
        border-left-width: $semantic-border-width-1;
      }
      
      &.ui-divider--thick {
        border-left-width: $semantic-border-width-2;
      }
    }
    
    &.ui-divider--dotted {
      background: none;
      border-left: $semantic-border-width-1 dotted $semantic-color-border-primary;
      width: 0;
      
      &.ui-divider--thin {
        border-left-width: $semantic-border-width-1;
      }
      
      &.ui-divider--thick {
        border-left-width: $semantic-border-width-2;
      }
    }
  }
  
  // Content styling (only for horizontal dividers)
  &__content {
    padding: 0 $semantic-spacing-component-sm;
    background: $semantic-color-surface-primary;
    color: $semantic-color-text-secondary;
    font-size: $semantic-typography-font-size-sm;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  // Dark mode support
  :host-context(.dark-theme) & {
    &::before,
    &::after {
      background-color: $semantic-color-border-subtle;
    }
    
    &--vertical {
      background-color: $semantic-color-border-subtle;
    }
    
    &--dashed,
    &--dotted {
      &::before,
      &::after {
        border-color: $semantic-color-border-subtle;
      }
      
      &.ui-divider--vertical {
        border-left-color: $semantic-color-border-subtle;
      }
    }
    
    .ui-divider__content {
      background: $semantic-color-surface-primary;
      color: $semantic-color-text-tertiary;
    }
  }
  
  // Responsive adjustments
  @media (max-width: $semantic-breakpoint-sm - 1) {
    &__content {
      padding: 0 $semantic-spacing-component-xs;
      font-size: $semantic-typography-font-size-xs;
    }
  }
}