input {
    font-family: var(--drs-font-primary);
    width: 100%;
    min-width: 80px;
    height: var(--drs-input-height);
    border: 1px solid var(--drs-neutral-80);
    border-radius: 5px;
    font-size: var(--drs-text-md);
    padding: 7px 16px;
    color: var(--drs-neutral-24);
    letter-spacing: 0.4px;
}

input::placeholder {
    color: var(--drs-neutral-59);
    opacity: 0;
}

input:focus-visible {
    border: 2px solid var(--drs-primary-60);
    outline: none;
}
input:focus-visible::placeholder {
    opacity: 1;
}

.entry-item, .attrEntry {
    position: relative;
}

label {
    font-family: var(--drs-font-primary);
    letter-spacing: 0.4px;
    text-align: left;
    position: absolute;
    left: 16px;
    max-width: 95%;
    transition: all .15s ease-in-out;
    pointer-events: none;

    font-size: var(--drs-text-md);
    line-height: var(--drs-text-lh-md);
    color: var(--drs-neutral-59);
    top: 7px;
}

label.up {
    font-size: var(--drs-text-xsm);
    line-height: var(--drs-text-lh-sm);
    font-weight: var(--drs-font-bold);
    top: 0;
    transform: translateY(-50%);
}

label.focused {
    color: var(--drs-primary-60);
}

label::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    width: calc(100% + 8px);
    height: 100%;
    background-color: var(--drs-neutral-white);
    transform: translateX(-50%);
    transition: all .15s ease-in-out;
}
