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

.ui-command-palette {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $semantic-z-index-modal;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: $semantic-spacing-layout-section-lg $semantic-spacing-component-md;

  &--open,
  &--entering,
  &--leaving {
    display: flex;
  }

  &__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $semantic-color-backdrop;
    opacity: 0;
    animation: backdropEnter $semantic-motion-duration-normal $semantic-motion-easing-ease forwards;
  }

  &--leaving &__backdrop {
    animation: backdropExit $semantic-motion-duration-normal $semantic-motion-easing-ease forwards;
  }

  &__container {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: $semantic-color-surface-primary;
    border: $semantic-border-width-1 solid $semantic-color-border-subtle;
    border-radius: $semantic-border-radius-lg;
    box-shadow: $semantic-shadow-modal;
    overflow: hidden;
    transform: translateY(-20px);
    opacity: 0;
    animation: containerEnter $semantic-motion-duration-normal $semantic-motion-easing-spring forwards;
  }

  &--leaving &__container {
    animation: containerExit $semantic-motion-duration-normal $semantic-motion-easing-ease forwards;
  }

  // Size variants
  &--md &__container {
    max-width: 480px;
  }

  &--lg &__container {
    max-width: 640px;
  }

  &--xl &__container {
    max-width: 800px;
  }

  // Search Section
  &__search {
    position: relative;
    display: flex;
    align-items: center;
    padding: $semantic-spacing-component-md;
    border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
    background: $semantic-color-surface-primary;
  }

  &__search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $semantic-sizing-icon-navigation;
    height: $semantic-sizing-icon-navigation;
    margin-right: $semantic-spacing-component-sm;
    color: $semantic-color-text-secondary;
    flex-shrink: 0;
  }

  &__input {
    flex: 1;
    padding: 0;
    border: none;
    background: transparent;
    font-family: map-get($semantic-typography-input, font-family);
    font-size: map-get($semantic-typography-input, font-size);
    font-weight: map-get($semantic-typography-input, font-weight);
    line-height: map-get($semantic-typography-input, line-height);
    color: $semantic-color-text-primary;

    &::placeholder {
      color: $semantic-color-text-tertiary;
    }

    &:focus {
      outline: none;
    }

    // Remove search input styling
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration {
      -webkit-appearance: none;
    }

    &[type="search"] {
      -webkit-appearance: textfield;
    }
  }

  &__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $semantic-sizing-touch-minimum;
    height: $semantic-sizing-touch-minimum;
    padding: 0;
    margin-left: $semantic-spacing-component-xs;
    border: none;
    border-radius: $semantic-border-radius-sm;
    background: transparent;
    color: $semantic-color-text-secondary;
    cursor: pointer;
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    font-size: $semantic-typography-font-size-lg;
    font-weight: $semantic-typography-font-weight-bold;

    &:hover {
      background: $semantic-color-surface-elevated;
      color: $semantic-color-text-primary;
    }

    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
  }

  // Results Section
  &__results {
    max-height: 400px;
    overflow-y: auto;
    padding: $semantic-spacing-component-xs 0;
    background: $semantic-color-surface-primary;

    // Custom scrollbar
    &::-webkit-scrollbar {
      width: 8px;
    }

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

    &::-webkit-scrollbar-thumb {
      background: $semantic-color-border-secondary;
      border-radius: $semantic-border-radius-sm;

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

  // Group styling
  &__group {
    &:not(:first-child) {
      margin-top: $semantic-spacing-component-md;
      padding-top: $semantic-spacing-component-sm;
      border-top: $semantic-border-width-1 solid $semantic-color-border-subtle;
    }
  }

  &__group-header {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-xs;
    padding: $semantic-spacing-component-xs $semantic-spacing-component-md;
    margin-bottom: $semantic-spacing-component-xs;
  }

  &__group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $semantic-sizing-icon-inline;
    height: $semantic-sizing-icon-inline;
    color: $semantic-color-text-tertiary;
  }

  &__group-title {
    flex: 1;
    margin: 0;
    font-family: map-get($semantic-typography-label, font-family);
    font-size: map-get($semantic-typography-label, font-size);
    font-weight: map-get($semantic-typography-label, font-weight);
    line-height: map-get($semantic-typography-label, line-height);
    color: $semantic-color-text-secondary;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  &__group-count {
    font-family: map-get($semantic-typography-caption, font-family);
    font-size: map-get($semantic-typography-caption, font-size);
    font-weight: map-get($semantic-typography-caption, font-weight);
    line-height: map-get($semantic-typography-caption, line-height);
    color: $semantic-color-text-tertiary;
    background: $semantic-color-surface-secondary;
    padding: 2px $semantic-spacing-component-xs;
    border-radius: $semantic-border-radius-full;
    min-width: 20px;
    text-align: center;
  }

  // Empty state
  &__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $semantic-spacing-layout-section-md;
    text-align: center;
  }

  &__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: $semantic-spacing-component-md;
    color: $semantic-color-text-tertiary;
    opacity: $semantic-opacity-subtle;
  }

  &__empty-text {
    margin: 0;
    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);
    color: $semantic-color-text-secondary;
  }

  // Footer
  &__footer {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-lg;
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    border-top: $semantic-border-width-1 solid $semantic-color-border-subtle;
    background: $semantic-color-surface-secondary;
    justify-content: center;
  }

  &__footer-section {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-xs;
  }

  &__footer-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 $semantic-spacing-component-xs;
    background: $semantic-color-surface-primary;
    border: $semantic-border-width-1 solid $semantic-color-border-subtle;
    border-radius: $semantic-border-radius-sm;
    font-family: map-get($semantic-typography-caption, font-family);
    font-size: map-get($semantic-typography-caption, font-size);
    font-weight: map-get($semantic-typography-caption, font-weight);
    line-height: map-get($semantic-typography-caption, line-height);
    color: $semantic-color-text-secondary;
    box-shadow: $semantic-shadow-elevation-1;
  }

  &__footer-section span {
    font-family: map-get($semantic-typography-caption, font-family);
    font-size: map-get($semantic-typography-caption, font-size);
    font-weight: map-get($semantic-typography-caption, font-weight);
    line-height: map-get($semantic-typography-caption, line-height);
    color: $semantic-color-text-tertiary;
  }

  // Responsive design
  @media (max-width: calc(#{$semantic-breakpoint-md} - 1px)) {
    padding: $semantic-spacing-component-md $semantic-spacing-component-sm;

    &__container {
      max-width: none;
    }

    &__search {
      padding: $semantic-spacing-component-sm;
    }

    &__results {
      max-height: 300px;
    }

    &__footer {
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
      gap: $semantic-spacing-component-md;
    }
  }

  @media (max-width: calc(#{$semantic-breakpoint-sm} - 1px)) {
    padding: $semantic-spacing-component-sm;

    &__footer-section:not(:first-child) {
      display: none; // Hide extra keyboard hints on mobile
    }
  }

  // Reduce motion for users who prefer it
  @media (prefers-reduced-motion: reduce) {
    &__backdrop,
    &__container {
      animation: none !important;
    }

    &--entering &__backdrop {
      opacity: $semantic-opacity-backdrop;
    }

    &--entering &__container {
      transform: none;
      opacity: 1;
    }
  }
}

// Animations
@keyframes backdropEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: $semantic-opacity-backdrop;
  }
}

@keyframes backdropExit {
  from {
    opacity: $semantic-opacity-backdrop;
  }
  to {
    opacity: 0;
  }
}

@keyframes containerEnter {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes containerExit {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-10px);
    opacity: 0;
  }
}