@layer components {
  /* =========================================
     1. BASE SETUP (Layout & Reset)
     ========================================= */
  .rc-input-number {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;

    /* Global Variables */
    height: var(--input-height);
    font-size: var(--input-font-size);
    border-radius: var(--input-radius);
    line-height: 1.5;
    color: var(--input-text);

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

    /* Transisi standar */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    margin: 0;
    padding: 0;
  }

  /* Input Element */
  .rc-input-number-input {
    width: 100%;
    height: 100%;
    padding: 0 var(--input-padding-x);
    background-color: transparent;
    border: 0;
    border-radius: var(--input-radius);
    outline: 0;
    color: inherit; /* Mewarisi dari parent */
    transition: all 0.2s linear;

    /* Padding Kanan Wajib (Space untuk Actions) */
    padding-right: var(--input-handler-width);
  }

  /* Hide Native Spinners (Browser Default) */
  .rc-input-number-input::-webkit-inner-spin-button,
  .rc-input-number-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    display: none;
  }
  .rc-input-number-input {
    -moz-appearance: textfield;
  }

  /* Prefix Styling */
  .rc-input-number-prefix {
    margin-left: var(--input-padding-x);
    margin-right: 0.5rem; /* ~8px */
    display: flex;
    align-items: center;
    flex: none;
    color: var(--color-gray-500);
  }

  /* Suffix Styling */
  .rc-input-number-suffix {
    margin-right: var(--input-padding-x);
    display: flex;
    align-items: center;
    flex: none;
    color: var(--color-gray-500);
    z-index: 10;
    transition: margin-right 0.2s ease-in-out;
  }

  /* Animation Trigger: Geser Suffix saat hover/focus agar tidak tertutup tombol action */
  .rc-input-number:hover .rc-input-number-suffix,
  .rc-input-number-affix-wrapper:hover .rc-input-number-suffix,
  .rc-input-number-focused .rc-input-number-suffix,
  .rc-input-number-affix-wrapper-focused .rc-input-number-suffix,
  .rc-input-number:focus-within .rc-input-number-suffix,
  .rc-input-number-affix-wrapper:focus-within .rc-input-number-suffix {
    margin-right: calc(var(--input-padding-x) + var(--input-handler-width));
  }

  /* =========================================
     2. ACTIONS CONTAINER (Custom Spinners)
     Target: .rc-input-number-actions
     ========================================= */
  .rc-input-number-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    width: var(--input-handler-width);
    height: 100%;

    /* Menggunakan var input-bg agar konsisten (putih) */
    background: var(--input-bg);

    /* Default Border (akan di-override status) */
    border-left: 1px solid var(--input-border);
    border-radius: 0 var(--input-radius) var(--input-radius) 0;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s linear 0.1s;
    z-index: 10;

    display: flex;
    flex-direction: column;
  }

  /* Show Actions on Interaction */
  .rc-input-number:hover .rc-input-number-actions,
  .rc-input-number:focus-within .rc-input-number-actions {
    opacity: 1;
    pointer-events: auto;
  }

  /* Individual Buttons */
  .rc-input-number-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    color: var(--color-gray-400);
    cursor: pointer;
    transition: all 0.2s linear;
  }

  .rc-input-number-action:active {
    background-color: var(--color-gray-100);
  }

  .rc-input-number-action:hover {
    color: var(--color-brand-500);
    height: 60%; /* Efek hover button membesar dikit */
  }

  /* Border Bawah untuk Action UP */
  .rc-input-number-action-up {
    border-bottom: 1px solid var(--input-border);
  }

  /* =========================================
     3. STATUS MATRIX (VARIANT: OUTLINED)
     ========================================= */

  /* --- DEFAULT --- */
  .input-number-variant-outlined.input-number-status-default {
    border-color: var(--input-border);
  }
  .input-number-variant-outlined.input-number-status-default:hover:not(.rc-input-number-disabled) {
    border-color: var(--input-border-hover);
  }
  .input-number-variant-outlined.input-number-status-default:focus-within {
    border-color: var(--focus-border-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
  }
  /* Action Borders Sync */
  .input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-actions {
    border-left-color: var(--focus-border-color);
  }
  .input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-action-up {
    border-bottom-color: var(--focus-border-color);
  }

  /* --- ERROR --- */
  .input-number-variant-outlined.input-number-status-error {
    border-color: var(--color-error-500);
  }
  .input-number-variant-outlined.input-number-status-error:hover:not(.rc-input-number-disabled) {
    border-color: var(--color-error-600);
  }
  .input-number-variant-outlined.input-number-status-error:focus-within {
    border-color: var(--color-error-600);
    box-shadow: 0 0 0 3px var(--color-error-100);
  }
  /* Action Borders Sync */
  .input-number-variant-outlined.input-number-status-error .rc-input-number-actions {
    border-left-color: var(--color-error-500);
  }
  .input-number-variant-outlined.input-number-status-error .rc-input-number-action-up {
    border-bottom-color: var(--color-error-500);
  }

  /* --- WARNING --- */
  .input-number-variant-outlined.input-number-status-warning {
    border-color: var(--color-warning-500);
  }
  .input-number-variant-outlined.input-number-status-warning:hover:not(.rc-input-number-disabled) {
    border-color: var(--color-warning-600);
  }
  .input-number-variant-outlined.input-number-status-warning:focus-within {
    border-color: var(--color-warning-600);
    box-shadow: 0 0 0 3px var(--color-warning-100);
  }
  /* Action Borders Sync */
  .input-number-variant-outlined.input-number-status-warning .rc-input-number-actions {
    border-left-color: var(--color-warning-500);
  }
  .input-number-variant-outlined.input-number-status-warning .rc-input-number-action-up {
    border-bottom-color: var(--color-warning-500);
  }

  /* --- SUCCESS --- */
  .input-number-variant-outlined.input-number-status-success {
    border-color: var(--color-success-500);
  }
  .input-number-variant-outlined.input-number-status-success:hover:not(.rc-input-number-disabled) {
    border-color: var(--color-success-600);
  }
  .input-number-variant-outlined.input-number-status-success:focus-within {
    border-color: var(--color-success-600);
    box-shadow: 0 0 0 3px var(--color-success-100);
  }
  /* Action Borders Sync */
  .input-number-variant-outlined.input-number-status-success .rc-input-number-actions {
    border-left-color: var(--color-success-500);
  }
  .input-number-variant-outlined.input-number-status-success .rc-input-number-action-up {
    border-bottom-color: var(--color-success-500);
  }

  /* --- INFO --- */
  .input-number-variant-outlined.input-number-status-info {
    border-color: var(--color-info-500);
  }
  .input-number-variant-outlined.input-number-status-info:hover:not(.rc-input-number-disabled) {
    border-color: var(--color-info-600);
  }
  .input-number-variant-outlined.input-number-status-info:focus-within {
    border-color: var(--color-info-600);
    box-shadow: 0 0 0 3px var(--color-info-100);
  }
  /* Action Borders Sync */
  .input-number-variant-outlined.input-number-status-info .rc-input-number-actions {
    border-left-color: var(--color-info-500);
  }
  .input-number-variant-outlined.input-number-status-info .rc-input-number-action-up {
    border-bottom-color: var(--color-info-500);
  }

  /* =========================================
     4. STATUS MATRIX (VARIANT: FILLED)
     ========================================= */

  /* --- NORMAL FILLED --- */
  .input-number-variant-filled.input-number-status-default {
    background-color: var(--input-bg);
    border-color: var(--input-border);
  }
  .input-number-variant-filled.input-number-status-default:hover:not(.rc-input-number-disabled) {
    border-color: var(--input-border-hover);
  }
  .input-number-variant-filled.input-number-status-default:focus-within {
    border-color: var(--focus-border-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
  }

  /* --- ERROR FILLED --- */
  .input-number-variant-filled.input-number-status-error {
    background-color: var(--color-error-50);
    border-color: var(--color-error-500);
  }
  /* Actions Background & Border Sync (Error) */
  .input-number-variant-filled.input-number-status-error .rc-input-number-actions {
    background-color: var(--color-error-50);
    border-left-color: var(--color-error-500);
  }
  .input-number-variant-filled.input-number-status-error .rc-input-number-action-up {
    border-bottom-color: var(--color-error-500);
  }
  /* Focus: Revert to White BG */
  .input-number-variant-filled.input-number-status-error:focus-within {
    background-color: var(--input-bg);
    box-shadow: 0 0 0 3px var(--color-error-100);
  }
  .input-number-variant-filled.input-number-status-error:focus-within .rc-input-number-actions {
    background-color: var(--input-bg);
  }

  /* --- WARNING FILLED --- */
  .input-number-variant-filled.input-number-status-warning {
    background-color: var(--color-warning-50);
    border-color: var(--color-warning-500);
  }
  .input-number-variant-filled.input-number-status-warning .rc-input-number-actions {
    background-color: var(--color-warning-50);
    border-left-color: var(--color-warning-500);
  }
  .input-number-variant-filled.input-number-status-warning .rc-input-number-action-up {
    border-bottom-color: var(--color-warning-500);
  }
  .input-number-variant-filled.input-number-status-warning:focus-within {
    background-color: var(--input-bg);
    box-shadow: 0 0 0 3px var(--color-warning-100);
  }
  .input-number-variant-filled.input-number-status-warning:focus-within .rc-input-number-actions {
    background-color: var(--input-bg);
  }

  /* --- SUCCESS FILLED --- */
  .input-number-variant-filled.input-number-status-success {
    background-color: var(--color-success-50);
    border-color: var(--color-success-500);
  }
  .input-number-variant-filled.input-number-status-success .rc-input-number-actions {
    background-color: var(--color-success-50);
    border-left-color: var(--color-success-500);
  }
  .input-number-variant-filled.input-number-status-success .rc-input-number-action-up {
    border-bottom-color: var(--color-success-500);
  }
  .input-number-variant-filled.input-number-status-success:focus-within {
    background-color: var(--input-bg);
    box-shadow: 0 0 0 3px var(--color-success-100);
  }
  .input-number-variant-filled.input-number-status-success:focus-within .rc-input-number-actions {
    background-color: var(--input-bg);
  }

  /* --- INFO FILLED --- */
  .input-number-variant-filled.input-number-status-info {
    background-color: var(--color-info-50);
    border-color: var(--color-info-500);
  }
  .input-number-variant-filled.input-number-status-info .rc-input-number-actions {
    background-color: var(--color-info-50);
    border-left-color: var(--color-info-500);
  }
  .input-number-variant-filled.input-number-status-info .rc-input-number-action-up {
    border-bottom-color: var(--color-info-500);
  }
  .input-number-variant-filled.input-number-status-info:focus-within {
    background-color: var(--input-bg);
    box-shadow: 0 0 0 3px var(--color-info-100);
  }
  .input-number-variant-filled.input-number-status-info:focus-within .rc-input-number-actions {
    background-color: var(--input-bg);
  }

  /* =========================================
     5. DISABLED STATE
     ========================================= */
  .rc-input-number-disabled {
    background-color: var(--disabled-bg) !important;
    border-color: var(--disabled-border) !important;
    color: var(--disabled-text);
    cursor: not-allowed;
    opacity: 1;
  }
  .rc-input-number-disabled .rc-input-number-input {
    cursor: not-allowed;
  }
  .rc-input-number-disabled .rc-input-number-actions {
    display: none !important;
  }
}