@layer components {
  /* =========================================
     BASE RESET & SHARED
     ========================================= */
  .rc-input {
    /* Use box-sizing border-box for predictable sizing */
    box-sizing: border-box;

    display: inline-block;
    width: 100%;

    /* Using variable dimensions */
    height: var(--input-height);
    padding: 0 var(--input-padding-x); /* Consistent with 0.92rem */

    font-size: var(--input-font-size);
    line-height: 1.5;
    color: var(--input-text);

    background-color: var(--input-bg);
    border: 1px solid transparent;
    border-radius: var(--input-radius);

    /* Standard Transition */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
  }

  .rc-input::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
  }

  /* Disabled State (Standalone Input) */
  .rc-input:disabled {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text);
    border-color: var(--disabled-border) !important;
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
  }

  /* =========================================
     CLEAR ICON
     Button (x) to clear input content
     ========================================= */
  .rc-input-clear-icon {
    /* Reset Button Styles */
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    outline: none;

    /* Layout & Sizing */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm); /* ~12px icon size */
    line-height: 1;
    cursor: pointer;

    /* Colors & Transition */
    color: var(--color-gray-400); /* Default gray color */
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Visibility Control ( Smooth appearance/disappearance could use opacity + pointer-events )
    /* visibility: hidden; */
    visibility: visible;
  }

  /* Hover State: Darker Gray */
  .rc-input-clear-icon:hover {
    color: var(--color-gray-500);
  }

  /* Active/Click State */
  .rc-input-clear-icon:active {
    color: var(--color-gray-600);
  }

  /* Hidden State */
  .rc-input-clear-icon-hidden {
    display: none;
    /*  Alternative approach to keep layout but invisible:
       visibility: hidden;
       pointer-events: none;
    */
  }

  /* Placement Helper: Margin to separate from input text */
  .rc-input-affix-wrapper .rc-input-clear-icon {
    margin-left: 0.5rem; /* ~8px spacing from text */
    z-index: 2; /* Above input text */
  }

  /* =========================================
     AFFIX WRAPPER (PREFIX / SUFFIX) SETUP
     ========================================= */

  /* Base Wrapper Style */
  .rc-input-affix-wrapper {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;

    /* Using variable dimensions */
    height: var(--input-height);
    padding: 0 var(--input-padding-x);

    border: 1px solid transparent;
    border-radius: var(--input-radius);
    background-color: var(--input-bg);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Reset Input inside Affix Wrapper */
  .rc-input-affix-wrapper .rc-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    background-color: transparent;
    box-shadow: none !important;
  }

  /* Prefix & Suffix Positioning */
  .rc-input-prefix {
    margin-right: 0.5rem; /* ~8px, hardcoded */
    display: flex;
    align-items: center;
    flex: none;
  }
  .rc-input-suffix {
    margin-left: 0.5rem; /* ~8px */
    display: flex;
    align-items: center;
    flex: none;
  }

  /* Disabled Wrapper */
  .rc-input-affix-wrapper-disabled {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text);
    border-color: var(--disabled-border) !important;
    cursor: not-allowed;
    pointer-events: none;
  }
  .rc-input-affix-wrapper-disabled .rc-input {
    cursor: not-allowed;
  }

  /* =========================================
     LOGIC MATRIX: [VARIANT] x [STATUS]
     ========================================= */

  /* ------------------------------------------------
     1. VARIANT: OUTLINED (Default)
     ------------------------------------------------ */

  /* DEFAULT */
  .input-status-default {
    border-color: var(--input-border);
  }
  /* Hover */
  .input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
    border-color: var(--input-border-hover);
  }
  /* Focus */
  .input-status-default:focus,
  .input-status-default.rc-input-affix-wrapper-focused {
    border-color: var(--focus-border-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
    z-index: 1;
  }

  /* ERROR */
  .input-status-error {
    border-color: var(--color-error-500);
    z-index: 1;
  }
  .input-status-error:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
    border-color: var(--color-error-600);
  }
  .input-status-error:focus,
  .input-status-error.rc-input-affix-wrapper-focused {
    border-color: var(--color-error-600);
    box-shadow: 0 0 0 3px var(--color-error-100);
  }

  /* WARNING */
  .input-status-warning {
    border-color: var(--color-warning-500);
    z-index: 1;
  }
  .input-status-warning:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
    border-color: var(--color-warning-600);
  }
  .input-status-warning:focus,
  .input-status-warning.rc-input-affix-wrapper-focused {
    border-color: var(--color-warning-600);
    box-shadow: 0 0 0 3px var(--color-warning-100);
  }

  /* SUCCESS */
  .input-status-success {
    border-color: var(--color-success-500);
    z-index: 1;
  }
  .input-status-success:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
    border-color: var(--color-success-600);
  }
  .input-status-success:focus,
  .input-status-success.rc-input-affix-wrapper-focused {
    border-color: var(--color-success-600);
    box-shadow: 0 0 0 3px var(--color-success-100);
  }

  /* INFO */
  .input-status-info {
    border-color: var(--color-info-500);
    z-index: 1;
  }
  .input-status-info:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
    border-color: var(--color-info-600);
  }
  .input-status-info:focus,
  .input-status-info.rc-input-affix-wrapper-focused {
    border-color: var(--color-info-600);
    box-shadow: 0 0 0 3px var(--color-info-100);
  }
}