.ps-field {
    position: relative;
    width: 100%;
    margin: 16px auto;
}

.ps-field__control {
    position: relative;
    width: 100%;
    margin-top: 16px;
}

.ps-field__input {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 8px 16px;
    border: var(--secondary-border);
    border-radius: var(--border-radius);
    outline: none;
    background: var(--color-surface-card);
    color: var(--color-text-primary);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    text-align: right;
    transition: border-color .15s ease, border-width .15s ease;
}

    .ps-field__input::placeholder {
        color: transparent;
    }

textarea.ps-field__input {
    min-height: 120px;
    resize: vertical;
}

.ps-field__label {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    padding: 0 8px;
    color: var(--color-text-primary);
    background: var(--color-surface-card);
    font-size: var(--fs-body-md);
    font-weight: var(--fw-semibold);
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
    transition: top .15s ease, right .15s ease, transform .15s ease, font-size .15s ease, color .15s ease;
}

.ps-field.is-focused .ps-field__label,
.ps-field.is-filled .ps-field__label,
.ps-field.is-error .ps-field__label {
    top: 0;
    right: 16px;
    transform: translateY(-50%);
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
}

.ps-field__input.ps-field__textarea + .ps-field__label {
    top: 28px;
}

.ps-field.is-focused .ps-field__input.ps-field__textarea + .ps-field__label,
.ps-field.is-filled .ps-field__input.ps-field__textarea + .ps-field__label,
.ps-field.is-error .ps-field__input.ps-field__textarea + .ps-field__label {
    top: 0;
}

.ps-field__control:hover .ps-field__input {
    border-color: var(--color-link);
}

.ps-field.is-focused .ps-field__input {
    border: var(--primary-border);
}


/* =========================================================
   Supporting Area
   ========================================================= */

.ps-field__support {
    display: block;
    text-align: right;
    padding: 0 8px;
    width: 100%;
    min-height: 22px;
    font-size: var(--fs-body-sm);
    pointer-events: none;
}

/* =========================================================
   Message
   ========================================================= */

.ps-field__message {
    display: inline-block;
    text-align: right;
    color: var(--color-text-secondary);
    white-space: normal;
    visibility: hidden;
    margin-left: 8px;
}

.ps-field.is-focused .ps-field__message {
    visibility: visible;
}

.ps-field.is-error .ps-field__message {
    visibility: visible;
    color: var(--color-error);
}


/* =========================================================
   Counter
   ========================================================= */

.ps-field__counter {
    display: inline-block;
    text-align: right;
    color: var(--color-text-secondary);
    font-size: var(--fs-body-sm);
    visibility: hidden;
}

    .ps-field__counter.is-hidden {
        display: none;
    }

.ps-field.is-focused .ps-field__counter,
.ps-field.is-error .ps-field__counter {
    visibility: visible;
}

.ps-field.is-error .ps-field__counter {
    color: var(--color-error);
}

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

.ps-field.is-error .ps-field__input {
    border-color: var(--color-error);
}

.ps-field.is-error .ps-field__label {
    color: var(--color-error);
}


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

.ps-field.is-disabled .ps-field__input,
.ps-field__input:disabled {
    background: #e1e2e6;
    border-color: transparent;
    color: var(--color-disabled-text);
    cursor: not-allowed;
}

.ps-field.is-disabled .ps-field__label {
    color: var(--color-disabled-text);
}


/* =========================================================
   Readonly
   ========================================================= */

.ps-field.is-readonly .ps-field__input,
.ps-field__input[readonly] {
    background: var(--color-disabled-bg);
    cursor: default;
}