/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../../styling/defs.scss' as bk;

@layer baklava.components {
  .bk-input {
    @include bk.component-base(bk-input);
    
    --bk-input-accent-color: #{bk.$theme-form-rule-default};
    
    cursor: text;
    border: 0 solid var(--bk-input-accent-color);
    border-block-end-width: bk.rem-from-px(1);
    
    display: flex;
    align-items: center;
    column-gap: bk.$spacing-1;
    
    > .bk-input__input {
      flex-grow: 1;
      min-inline-size: 0;
      
      line-height: bk.$line-height-m;
      
      @include bk.focus-hidden; // Apply focus outline on the container instead
      
      &::placeholder {
        color: color-mix(in oklch, currentColor 60%, transparent);
      }
    }
    
    // Consider the container focused when there is any focused element within (the input, or actions)
    &:focus-within, &:global(.pseudo-focus) {
      --bk-input-accent-color: #{bk.$theme-form-rule-focused};
    }
    
    // Style the container as an invalid input when the nested input is invalid and not currently focused.
    // Note: allow global `.invalid` to explicitly control invalid state in addition to `:user-invalid`
    &:not(:focus-within) {
      &:global(.invalid), &:has(> .bk-input__input:user-invalid) {
        --bk-input-accent-color: #{bk.$theme-form-rule-error};
      }
    }
    
    &:has(> .bk-input__input:disabled) {
      --bk-input-accent-color: #{bk.$theme-form-text-disabled};
      color: #{bk.$theme-form-text-disabled};
    }
    
    &.bk-input--automatic-resize {
      > .bk-input__input {
        field-sizing: content;
      }
    }
    
    @media (prefers-reduced-motion: no-preference) {
      transition: none 150ms;
      transition-property: background, border;
    }
  }
}
