/*
 * ===================================
 * UTKInputField.uss
 * Unity TextField 래핑 스타일
 * ===================================
 */

/* ===================================
   Base Container
   =================================== */

.utk-input {
    flex-direction: row;
    align-items: center;
    padding-left: var(--space-s);
    padding-right: var(--space-s);
}

/* ===================================
   Label
   =================================== */

.utk-input > .unity-label {
    min-width: 60px;
    height: var(--size-input-height);
    margin-left: 0;
    margin-right: var(--space-s);
    padding-left: var(--space-s);
    padding-right: var(--space-m);
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
    -unity-text-align: middle-left;
    border-right-width: var(--border-width);
    border-right-color: var(--color-border);
}

/* ===================================
   Text Input
   =================================== */

.utk-input > .unity-base-text-field__input {
    flex-grow: 1;
    height: var(--size-input-height);
    min-width: 120px;
    padding-left: var(--space-s);
    padding-right: var(--space-s);
    background-color: var(--color-bg-input);
    border-width: var(--border-width);
    border-color: var(--color-border);
    border-radius: var(--radius-s);
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
    -unity-text-align: middle-left;
    --unity-cursor-color: var(--color-text-primary);
    transition-duration: var(--anim-fast);
    transition-property: border-color, background-color;
}

/* Hide inner text-input border and cursor container */
.utk-input .unity-text-input {
    background-color: transparent;
    border-width: 0;
    padding: 0;
    margin: 0;
}

.utk-input .unity-base-text-field__input > .unity-text-element {
    -unity-text-align: middle-left;
}

/* Hide cursor container right border (the vertical line) */
.utk-input .unity-text-field__input,
.utk-input .unity-base-text-field__input--single-line {
    border-width: 0;
    background-color: transparent;
}

.utk-input > .unity-base-text-field__input:hover {
    border-color: var(--color-btn-primary);
}

.utk-input--focused > .unity-base-text-field__input {
    border-color: var(--color-border-focus);
}

/* ===================================
   Placeholder
   =================================== */

.utk-input .unity-text-element--placeholder {
    color: var(--color-text-secondary);
}

/* ===================================
   Multiline
   =================================== */

.utk-input--multiline > .unity-base-text-field__input {
    height: auto;
    min-height: 60px;
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
    white-space: normal;
    align-items: flex-start;
}

/* Note: min-width: 60px (label), min-width: 120px (input), min-height: 60px (multiline)
   are intentionally kept as fixed values for layout consistency */

/* ===================================
   Error State
   =================================== */

.utk-input--error > .unity-base-text-field__input {
    border-color: var(--color-border-error);
}

.utk-input--error > .unity-label {
    color: var(--color-state-error);
}

/* ===================================
   Variants
   =================================== */

/* Default */
.utk-input--default > .unity-base-text-field__input {
    background-color: var(--color-bg-input);
}

/* Filled */
.utk-input--filled > .unity-base-text-field__input {
    background-color: var(--color-btn-normal);
    border-width: 0;
    border-bottom-width: var(--border-width-thick);
    border-radius: var(--radius-s) var(--radius-s) 0 0;
}

.utk-input--filled.utk-input--focused > .unity-base-text-field__input {
    border-bottom-color: var(--color-border-focus);
}

/* Outlined */
.utk-input--outlined > .unity-base-text-field__input {
    background-color: transparent;
    border-width: var(--border-width-thick);
}

/* ===================================
   Read Only
   =================================== */

.utk-input--readonly > .unity-base-text-field__input {
    background-color: var(--color-btn-disabled);
}

/* ===================================
   Disabled State
   =================================== */

.utk-input--disabled {
    cursor: default;
}

.utk-input--disabled > .unity-base-text-field__input {
    color: var(--color-text-disabled);
    cursor: default;
}

.utk-input--disabled > .unity-base-text-field__input:hover {
    border-color: var(--color-border);
}

.utk-input--disabled > .unity-label {
    color: var(--color-text-disabled);
}