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

.ui-command-palette-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: $semantic-spacing-component-sm;
  margin: 0;
  border: none;
  border-radius: $semantic-border-radius-sm;
  background: transparent;
  color: $semantic-color-text-primary;
  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);
  text-align: left;
  cursor: pointer;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;

  &:hover,
  &--selected {
    background: $semantic-color-surface-elevated;
    box-shadow: $semantic-shadow-elevation-1;
  }

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

  &--disabled {
    opacity: $semantic-opacity-disabled;
    cursor: not-allowed;
    pointer-events: none;
  }

  &__content {
    display: flex;
    align-items: center;
    width: 100%;
    gap: $semantic-spacing-component-sm;
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $semantic-sizing-icon-navigation;
    height: $semantic-sizing-icon-navigation;
    flex-shrink: 0;
    color: $semantic-color-text-secondary;
    transition: color $semantic-motion-duration-fast $semantic-motion-easing-ease;
  }

  &:hover &__icon,
  &--selected &__icon {
    color: $semantic-color-primary;
  }

  &__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-content-line-tight;
  }

  &__title {
    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-primary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__description {
    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);
    color: $semantic-color-text-secondary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__highlight {
    background: $semantic-color-primary;
    color: $semantic-color-on-primary;
    padding: 0 2px;
    border-radius: $semantic-border-radius-sm;
    font-weight: $semantic-typography-font-weight-semibold;
  }

  &__shortcut {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-content-line-tight;
    flex-shrink: 0;
    margin-left: auto;
  }

  &__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: $semantic-sizing-touch-minimum;
    height: $semantic-sizing-button-height-sm;
    padding: 0 $semantic-spacing-component-xs;
    background: $semantic-color-surface-secondary;
    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;
    text-transform: uppercase;
    box-shadow: $semantic-shadow-elevation-1;
  }

  &__plus {
    color: $semantic-color-text-tertiary;
    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);
  }

  // Hover state for shortcut keys
  &:hover &__kbd,
  &--selected &__kbd {
    background: $semantic-color-surface-elevated;
    border-color: $semantic-color-border-primary;
    color: $semantic-color-text-primary;
  }

  // Focus state improvements
  &:focus-visible {
    .ui-command-palette-item__icon {
      color: $semantic-color-primary;
    }

    .ui-command-palette-item__kbd {
      background: $semantic-color-surface-elevated;
      border-color: $semantic-color-focus;
      color: $semantic-color-text-primary;
    }
  }

  // Responsive adjustments
  @media (max-width: calc(#{$semantic-breakpoint-md} - 1px)) {
    padding: $semantic-spacing-component-xs;
    
    &__content {
      gap: $semantic-spacing-component-xs;
    }

    &__shortcut {
      display: none; // Hide shortcuts on smaller screens
    }
  }
}