.cobalt-form-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);

    input {
        background-color: var(--clr-surface-a10);
        border: 1px solid rgb(from var(--clr-surface-a20) r g b / 0.8);
        border-radius: calc(infinity * 1px);
        padding: var(--space-xs) var(--space-m);
        color: var(--clr-light-a0);
        transition: var(--transition);

        &::placeholder {
            /* font-style: italic; */
            font-weight: 300;
            opacity: 0.6;
        }

        &:focus-visible {
            &::placeholder {
                opacity: 0;
            }
        }
    }

    &:focus-within {
        input {
            outline: none !important;
            border-color: var(--clr-primary-a10);
            background-color: var(--clr-surface-tonal-a10);
        }
    }

    &.is--label-hidden {
        label {
            display: none;
        }
    }
}