hikari-components 0.1.8

// Use theme variables with namespace to avoid conflicts
@use 'variables' as vars;
@use 'mixins' as mix;
@use './input-vars.scss' as input-vars;

// ============================================
// Hikari Input Component
// Features: Acrylic focus, glowing borders, smooth transitions
// Three-layer CSS variable system:
// - Layer1: Foundation variables (foundation.scss)
// - Layer2: Component variables (input-vars.scss)
// - Custom: Runtime overrides via AnimationBuilder
// ============================================

// ============================================
// Base Input Styles
// ============================================

.hi-input {
  // Layer2 variables are defined in input-vars.scss

  // Layout
  display: inline-block;
  width: 100%;

  // Typography - use CSS variables
  font-family: vars.$hikari-font-family-sans;
  font-size: var(--hi-input-font-size);
  line-height: var(--hi-input-line-height);
  color: var(--hi-input-text-color);

  // Spacing - use CSS variables
  padding: var(--hi-input-padding-y) var(--hi-input-padding-x);

  // Appearance - use CSS variables
  border-radius: var(--hi-input-radius);
  border: var(--hi-input-border-width) var(--hi-input-border-style) var(--hi-input-border-color);

  // Background
  background: var(--hi-input-bg);

  // Remove default outline
  outline: none;

  // Placeholder styling - use CSS variables
  &::placeholder {
    color: var(--hi-input-placeholder-color);
    opacity: var(--hi-input-placeholder-opacity);
  }

  // Override browser autofill styles to remove background color
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
    transition: background-color 2147483647s ease-in-out 0s;
    -webkit-text-fill-color: var(--hi-input-text-color);
    caret-color: var(--hi-input-text-color);
    box-shadow: none;
  }

  // Focus state - use CSS variables
  &:focus {
    border-color: var(--hi-input-border-color-focus);
    box-shadow: var(--hi-input-shadow-focus);

    &:active {
      box-shadow: var(--hi-input-shadow-active);
    }
  }

  // Disabled state - use CSS variables
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--hi-input-bg-disabled);
    color: var(--hi-input-text-color-disabled);
  }

  // Error state - use CSS variables
  &.hi-input-error {
    border-color: var(--hi-input-border-color-error);

    &:focus {
      box-shadow: var(--hi-input-shadow-focus);
    }
  }

  // Success state - use CSS variables
  &.hi-input-success {
    border-color: var(--hi-input-border-color-success);

    &:focus {
      box-shadow: var(--hi-input-shadow-focus);
    }
  }
}

// ============================================
// Input with Wrapper (for icons, prefixes, suffixes)
// ============================================

.hi-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 320px;

  // Background - use CSS variables
  background: var(--hi-input-wrapper-bg);
  backdrop-filter: var(--hi-input-wrapper-blur);

  border-radius: var(--hi-input-wrapper-radius);
  border: var(--hi-input-border-width) var(--hi-input-border-style) var(--hi-input-wrapper-border-color);

  &:focus-within {
    border-color: var(--hi-input-wrapper-border-color-focus);
    background: var(--hi-input-wrapper-bg-focus);
    box-shadow: var(--hi-input-wrapper-shadow-focus);

    &:active {
      box-shadow: var(--hi-input-wrapper-shadow-active);
    }

    .hi-input:focus {
      box-shadow: none;
    }

    .hi-input:focus:active {
      box-shadow: none;
    }

    // 确保 IconButton 在 Input focus 时不改变颜色
    // 保持 secondary 颜色，不使用 --hi-icon-button-icon-color（ghost 变体中指向 primary）
    .hi-icon-button {
      color: var(--hi-color-text-secondary) !important;
      
      .hi-icon-button-icon,
      .hikari-icon {
        color: var(--hi-color-text-secondary) !important;
      }
    }
  }

  .hi-input {
    flex: 1;
    border: none;
    background: transparent;
    box-shadow: none;
    max-width: none;

    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
      transition: background-color 2147483647s ease-in-out 0s;
      -webkit-text-fill-color: var(--hi-input-text-color);
      caret-color: var(--hi-input-text-color);
      box-shadow: none;
    }

    &:focus {
      box-shadow: none;
    }

    &:hover {
      box-shadow: none;
    }
  }
}

// Prefix and Suffix - use CSS variables
.hi-input-prefix,
.hi-input-suffix {
  display: inline-flex;
  align-items: center;
  padding: var(--hi-input-affix-padding);
  color: var(--hi-input-affix-color);
  font-size: var(--hi-input-affix-font-size);
}

.hi-input-prefix {
  border-right: 1px solid var(--hi-input-affix-border-color);
}

.hi-input-suffix {
  border-left: 1px solid var(--hi-input-affix-border-color);
}

// Clear button
.hi-input-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  margin-right: 0.25rem;
  cursor: pointer;
  color: var(--hi-input-affix-color);
  border-radius: var(--hi-input-radius);

  &:hover {
    color: var(--hi-input-text-color);
    background: rgba(255, 76, 0, 0.2);
  }
}

// ============================================
// Textarea Variant
// ============================================

.hi-input-textarea {
  min-height: 80px;
  resize: vertical;
  font-family: vars.$hikari-font-family-sans;
}

// ============================================
// Search Input
// ============================================

.hi-input-search {
  .hi-input-suffix {
    cursor: pointer;

    &:hover {
      color: var(--hi-color-primary);
    }
  }
}

// ============================================
// Password Input
// ============================================

.hi-input-password {
  .hi-input-suffix {
    cursor: pointer;

    &:hover {
      color: var(--hi-color-primary);
    }
  }
}

// ============================================
// Size Variants - Variables defined in input-vars.scss
// ============================================

.hi-input-sm,
.hi-input-wrapper-sm {
  height: 24px;

  .hi-input {
    padding: var(--hi-input-padding-y) var(--hi-input-padding-x);
    font-size: var(--hi-input-font-size);
  }

  .hi-input-prefix,
  .hi-input-suffix {
    padding: 0 0.375rem;
    font-size: var(--hi-input-font-size);
  }
}

.hi-input-md,
.hi-input-wrapper-md {
  height: 32px;

  .hi-input {
    padding: var(--hi-input-padding-y) var(--hi-input-padding-x);
    font-size: var(--hi-input-font-size);
  }

  .hi-input-prefix,
  .hi-input-suffix {
    padding: var(--hi-input-affix-padding);
    font-size: var(--hi-input-affix-font-size);
  }
}

.hi-input-lg,
.hi-input-wrapper-lg {
  height: 40px;

  .hi-input {
    padding: var(--hi-input-padding-y) var(--hi-input-padding-x);
    font-size: var(--hi-input-font-size);
  }

  .hi-input-prefix,
  .hi-input-suffix {
    padding: 0 0.75rem;
    font-size: var(--hi-input-font-size);
  }
}

// ============================================
// Input Group
// ============================================

.hi-input-group {
  display: flex;
  width: 100%;

  .hi-input-wrapper {
    flex: 1;
    max-width: none;

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
      margin-left: -1px;
    }

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:focus-within {
      z-index: 1;
    }
  }
}

// ============================================
// Character Counter
// ============================================

.hi-input-counter {
  position: absolute;
  right: 0.75rem;
  bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--hi-color-text-secondary);
  pointer-events: none;
  opacity: 0.8;

  &.hi-input-counter-limit {
    color: var(--hi-color-danger);
  }
}

// ============================================
// Animations
// ============================================

.hi-input-animate-in {
  // Animation handled by JS
}

.hi-input-shake {
  // Animation handled by JS
}

// ============================================
// Spotlight Effect (Mouse-following glow)
// ============================================

.hi-input-spotlight-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    opacity: var(--spotlight-opacity, 0);

    background-image: radial-gradient(
      circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
      var(--hi-color-primary) 0%,
      transparent 70%
    );

    transition: opacity 0.1s ease-out;
  }

  .hi-input,
  .hi-input-wrapper {
    position: relative;
    z-index: 2;
  }
}