/* ==========================================================================
   ATOMS / input / input.css
   --------------------------------------------------------------------------
   TYPES:    text, email, password, number, search, tel, url
   SIZES:    sm, md (default), lg
   STATES:   default, focus, error, success, disabled, readonly
   MODIFIER: with prefix icon, with suffix icon/action

   HTML PATTERN (pakai dengan form-field molecule untuk label + hint):
     <input class="input" type="text" placeholder="Enter value">
     <input class="input input-error" type="email">
     <input class="input input-sm" type="text">

   Dengan ikon (wrapper diperlukan):
     <div class="input-wrapper">
       <span class="input-icon input-icon-left"><!-- svg --></span>
       <input class="input has-icon-left" type="search">
       <button class="input-action"><!-- clear svg --></button>
     </div>
   ========================================================================== */


/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
.input {
  /* Layout */
  display:    block;
  width:      100%;

  /* Sizing md (default) */
  height:          40px;
  padding-inline:  var(--size-400);   /* 16px */
  padding-block:   0;

  /* Typography */
  font-size:   var(--text-body-size);       /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-none);
  color:       var(--color-text-primary);
  font-family: inherit;

  /* Appearance */
  background-color: var(--color-bg-surface);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-md);
  outline:          none;
  appearance:       none;
  -webkit-appearance: none;

  /* Transition */
  transition:
    border-color var(--duration-fast) var(--ease-default),
    box-shadow   var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default);
}

/* Placeholder */
.input::placeholder {
  color:   var(--color-text-disabled);
  opacity: 1;   /* Firefox mengurangi opacity secara default */
}

/* Focus */
.input:focus {
  border-color: var(--color-border-focus);
  box-shadow:   var(--shadow-focus-ring);
  background-color: var(--color-bg-surface);
  outline: none;
}

/* Hover (saat tidak focus) */
.input:not(:focus):hover:not(:disabled):not([readonly]) {
  border-color: var(--color-border-strong);
}


/* --------------------------------------------------------------------------
   STATES
   -------------------------------------------------------------------------- */

/* Error */
.input-error,
.input[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: var(--color-error-subtle);
}
.input-error:focus,
.input[aria-invalid="true"]:focus {
  border-color: var(--color-error);
  box-shadow:   var(--shadow-focus-ring-error);
}

/* Success */
.input-success {
  border-color: var(--color-success);
}
.input-success:focus {
  border-color: var(--color-success);
  box-shadow:   0 0 0 3px hsla(142, 55%, 48%, 0.25);
}

/* Disabled */
.input:disabled {
  cursor:           not-allowed;
  opacity:          0.6;
  background-color: var(--color-bg-sunken);
  color:            var(--color-text-disabled);
}

/* Readonly */
.input[readonly] {
  cursor:           default;
  background-color: var(--color-bg-sunken);
  border-color:     var(--color-border-default);
}
.input[readonly]:focus {
  box-shadow: none;
  border-color: var(--color-border-default);
}


/* --------------------------------------------------------------------------
   SIZES
   -------------------------------------------------------------------------- */

/* SM */
.input-sm {
  height:         34px;
  padding-inline: var(--size-300);   /* 12px */
  font-size:      var(--text-body-sm-size);   /* 14px */
  border-radius:  var(--radius-sm);
}

/* LG */
.input-lg {
  height:         48px;
  padding-inline: var(--size-500);   /* 20px */
  font-size:      var(--text-body-size);
}


/* --------------------------------------------------------------------------
   WRAPPER — untuk input dengan ikon atau action button
   -------------------------------------------------------------------------- */
.input-wrapper {
  position: relative;
  display:  flex;
  align-items: center;
}

.input-wrapper .input {
  flex: 1;
}

/* Ikon dekoratif (non-interactive) */
.input-icon {
  position:       absolute;
  top:            50%;
  transform:      translateY(-50%);
  display:        flex;
  align-items:    center;
  pointer-events: none;
  color:          var(--color-text-disabled);
  width:          var(--size-icon-md);
  height:         var(--size-icon-md);
}
.input-icon-left  { left: var(--size-300); }
.input-icon-right { right: var(--size-300); }

/* Padding adjustment saat ada ikon */
.input.has-icon-left  { padding-left:  calc(var(--size-300) + var(--size-icon-md) + var(--size-200)); }
.input.has-icon-right { padding-right: calc(var(--size-300) + var(--size-icon-md) + var(--size-200)); }

/* Action button (clear, show password, dll) */
.input-action {
  position:        absolute;
  right:           var(--size-200);
  top:             50%;
  transform:       translateY(-50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--size-800);    /* 32px */
  height:          var(--size-800);
  background:      none;
  border:          none;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  color:           var(--color-text-disabled);
  transition:      var(--transition-base);
  padding:         0;
}
.input-action:hover {
  color:            var(--color-text-secondary);
  background-color: var(--color-bg-sunken);
}
.input-action:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 1px;
}

/* Padding adjustment untuk action button */
.input.has-action { padding-right: calc(var(--size-200) + var(--size-800) + var(--size-100)); }