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

.ui-popover {
  position: absolute;
  display: block;
  opacity: 0;
  transform: scale(0.95);
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  z-index: $semantic-layer-dropdown;
  will-change: opacity, transform;

  // Core Structure
  background: $semantic-color-surface-primary;
  border: $semantic-border-card-width solid $semantic-color-border-primary;
  border-radius: $semantic-border-card-radius;
  box-shadow: $semantic-shadow-popover;
  
  // Typography
  font-size: $semantic-typography-font-size-sm;
  color: $semantic-color-text-primary;
  line-height: $semantic-typography-line-height-normal;

  // Size Variants
  &--sm {
    min-width: $semantic-sizing-card-width-sm;
    max-width: $semantic-sizing-modal-width-sm;
    padding: $semantic-spacing-component-xs;
  }

  &--md {
    min-width: $semantic-sizing-card-width-md;
    max-width: $semantic-sizing-modal-width-md;
    padding: $semantic-spacing-component-sm;
  }

  &--lg {
    min-width: $semantic-sizing-card-width-lg;
    max-width: $semantic-sizing-modal-width-lg;
    padding: $semantic-spacing-component-md;
  }

  // Position Variants
  &--top {
    transform-origin: bottom center;
    margin-bottom: $semantic-spacing-component-sm;
  }

  &--bottom {
    transform-origin: top center;
    margin-top: $semantic-spacing-component-sm;
  }

  &--left {
    transform-origin: center right;
    margin-right: $semantic-spacing-component-sm;
  }

  &--right {
    transform-origin: center left;
    margin-left: $semantic-spacing-component-sm;
  }

  &--top-start {
    transform-origin: bottom left;
    margin-bottom: $semantic-spacing-component-sm;
  }

  &--top-end {
    transform-origin: bottom right;
    margin-bottom: $semantic-spacing-component-sm;
  }

  &--bottom-start {
    transform-origin: top left;
    margin-top: $semantic-spacing-component-sm;
  }

  &--bottom-end {
    transform-origin: top right;
    margin-top: $semantic-spacing-component-sm;
  }

  // Variant Styles
  &--default {
    background: $semantic-color-surface-primary;
    border-color: $semantic-color-border-primary;
  }

  &--elevated {
    background: $semantic-color-surface-primary;
    border: none;
    box-shadow: $semantic-shadow-elevation-3;
  }

  &--floating {
    background: $semantic-color-surface-secondary;
    border-color: $semantic-color-border-subtle;
    backdrop-filter: blur(8px);
  }

  &--menu {
    padding: $semantic-spacing-content-line-tight;
    background: $semantic-color-surface-primary;
  }

  &--tooltip {
    padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
    background: $semantic-color-surface-dim;
    color: $semantic-color-text-inverse;
    border: none;
    font-size: $semantic-typography-font-size-xs;
    box-shadow: $semantic-shadow-elevation-2;
  }

  // State Variants
  &--visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  &--entering {
    opacity: 0;
    transform: scale(0.95);
  }

  &--leaving {
    opacity: 0;
    transform: scale(0.95);
    transition-duration: $semantic-motion-duration-fast;
  }

  &--disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  // Arrow/Triangle
  &__arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    pointer-events: none;

    // Arrow positioning and styling based on popover position
    .ui-popover--top & {
      bottom: calc(-1 * $semantic-spacing-component-sm);
      left: 50%;
      transform: translateX(-50%);
      border-width: $semantic-spacing-component-sm $semantic-spacing-component-sm 0 $semantic-spacing-component-sm;
      border-color: $semantic-color-surface-primary transparent transparent transparent;
      
      &::before {
        content: '';
        position: absolute;
        top: calc(-1 * $semantic-spacing-component-sm - 1px);
        left: calc(-1 * $semantic-spacing-component-sm);
        border-width: $semantic-spacing-component-sm $semantic-spacing-component-sm 0 $semantic-spacing-component-sm;
        border-color: $semantic-color-border-primary transparent transparent transparent;
        border-style: solid;
      }
    }

    .ui-popover--bottom & {
      top: calc(-1 * $semantic-spacing-component-sm);
      left: 50%;
      transform: translateX(-50%);
      border-width: 0 $semantic-spacing-component-sm $semantic-spacing-component-sm $semantic-spacing-component-sm;
      border-color: transparent transparent $semantic-color-surface-primary transparent;

      &::before {
        content: '';
        position: absolute;
        top: calc(-1px);
        left: calc(-1 * $semantic-spacing-component-sm);
        border-width: 0 $semantic-spacing-component-sm $semantic-spacing-component-sm $semantic-spacing-component-sm;
        border-color: transparent transparent $semantic-color-border-primary transparent;
        border-style: solid;
      }
    }

    .ui-popover--left & {
      right: calc(-1 * $semantic-spacing-component-sm);
      top: 50%;
      transform: translateY(-50%);
      border-width: $semantic-spacing-component-sm 0 $semantic-spacing-component-sm $semantic-spacing-component-sm;
      border-color: transparent transparent transparent $semantic-color-surface-primary;

      &::before {
        content: '';
        position: absolute;
        top: calc(-1 * $semantic-spacing-component-sm);
        left: calc(-1 * $semantic-spacing-component-sm - 1px);
        border-width: $semantic-spacing-component-sm 0 $semantic-spacing-component-sm $semantic-spacing-component-sm;
        border-color: transparent transparent transparent $semantic-color-border-primary;
        border-style: solid;
      }
    }

    .ui-popover--right & {
      left: calc(-1 * $semantic-spacing-component-sm);
      top: 50%;
      transform: translateY(-50%);
      border-width: $semantic-spacing-component-sm $semantic-spacing-component-sm $semantic-spacing-component-sm 0;
      border-color: transparent $semantic-color-surface-primary transparent transparent;

      &::before {
        content: '';
        position: absolute;
        top: calc(-1 * $semantic-spacing-component-sm);
        left: calc(-1px);
        border-width: $semantic-spacing-component-sm $semantic-spacing-component-sm $semantic-spacing-component-sm 0;
        border-color: transparent $semantic-color-border-primary transparent transparent;
        border-style: solid;
      }
    }

    // Hide arrow for elevated and floating variants
    .ui-popover--elevated &,
    .ui-popover--floating & {
      display: none;
    }
  }

  // Content Area
  &__content {
    position: relative;
    width: 100%;
    max-height: $semantic-sizing-modal-height-max;
    overflow: auto;
    
    // Scrollbar styling
    scrollbar-width: thin;
    scrollbar-color: $semantic-color-border-subtle $semantic-color-surface-secondary;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: $semantic-color-surface-secondary;
      border-radius: $semantic-border-input-radius;
    }

    &::-webkit-scrollbar-thumb {
      background: $semantic-color-border-subtle;
      border-radius: $semantic-border-input-radius;

      &:hover {
        background: $semantic-color-border-primary;
      }
    }
  }

  // Header (optional)
  &__header {
    padding: $semantic-spacing-component-sm;
    border-bottom: $semantic-border-card-width solid $semantic-color-border-subtle;
    margin-bottom: $semantic-spacing-content-line-tight;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__title {
    font-size: $semantic-typography-font-size-md;
    font-weight: $semantic-typography-font-weight-semibold;
    color: $semantic-color-text-primary;
    margin: 0;
  }

  // Footer (optional)
  &__footer {
    padding: $semantic-spacing-component-sm;
    border-top: $semantic-border-card-width solid $semantic-color-border-subtle;
    margin-top: $semantic-spacing-content-line-tight;
    display: flex;
    gap: $semantic-spacing-content-line-tight;
    justify-content: flex-end;

    &:first-child {
      margin-top: 0;
    }

    &--start {
      justify-content: flex-start;
    }

    &--center {
      justify-content: center;
    }

    &--between {
      justify-content: space-between;
    }
  }

  // Interactive states for focusable content
  &:not(.ui-popover--disabled) {
    &:focus-within {
      box-shadow: $semantic-shadow-popover, 0 0 0 2px $semantic-color-focus;
    }
  }

  // Responsive adjustments
  @media (max-width: $semantic-breakpoint-sm - 1) {
    // On mobile, popovers should be more prominent
    &:not(.ui-popover--tooltip) {
      min-width: auto;
      max-width: calc(100vw - #{$semantic-spacing-layout-section-xs});
      
      &.ui-popover--sm {
        padding: $semantic-spacing-component-sm;
      }
    }
  }

  // Dark mode support
  :host-context(.dark-theme) & {
    &--default {
      background: $semantic-color-surface-primary;
      border-color: $semantic-color-border-primary;
    }

    &--elevated {
      background: $semantic-color-surface-primary;
      box-shadow: $semantic-shadow-elevation-3;
    }

    &--floating {
      background: $semantic-color-surface-secondary;
      border-color: $semantic-color-border-subtle;
    }
  }

  // Animation variants for different entrance effects
  &--slide-in {
    &.ui-popover--top {
      transform: translateY(-10px) scale(0.95);
      
      &.ui-popover--visible {
        transform: translateY(0) scale(1);
      }
    }

    &.ui-popover--bottom {
      transform: translateY(10px) scale(0.95);
      
      &.ui-popover--visible {
        transform: translateY(0) scale(1);
      }
    }

    &.ui-popover--left {
      transform: translateX(-10px) scale(0.95);
      
      &.ui-popover--visible {
        transform: translateX(0) scale(1);
      }
    }

    &.ui-popover--right {
      transform: translateX(10px) scale(0.95);
      
      &.ui-popover--visible {
        transform: translateX(0) scale(1);
      }
    }
  }
}

// Popover backdrop (if needed for modal-like behavior)
.ui-popover-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: calc($semantic-layer-dropdown - 1);
  pointer-events: auto;
}