[type="email"],
[type="password"],
[type="text"],
[type="search"],
[type="url"],
textarea {
    --palette-background-bold: var(--palette-neutral-bold);
    --palette-foreground-normal: var(--palette-light-normal);

    --size-text-size: var(--document-font-size);
    --size-text-line-height: var(--document-font-line-height);

    @apply appearance-none align-middle bg-transparent border-2 border-solid border-transparent 
    leading-[var(--size-text-line-height)] px-[var(--spacing-local-small)] py-[var(--spacing-local-tiny)] relative;

    border-radius: var(--radius-medium);

    font-size: var(--size-text-size);

    text-align: var(--align-text);
    text-transform: var(--transform-text);

    outline: none !important;

    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &:disabled {
        @apply cursor-not-allowed opacity-40;
    }

    &::placeholder {
        @apply opacity-50 text-current;
    }

    &:not([data-variation]) {
        @apply;

        border-color: rgba(var(--palette-background-bold), theme("opacity.20"));

        &:enabled {
            &:hover {
                @apply;

                border-color: rgba(var(--palette-background-bold), theme("opacity.50"));
            }

            &:is(:focus) {
                @apply border-[rgb(var(--palette-background-bold))];
            }
        }
    }

    &[data-variation="block"] {
        @apply;

        background-color: rgba(var(--palette-background-bold), theme("opacity.20"));

        &:enabled {
            &:hover {
                @apply;

                background-color: rgba(var(--palette-background-bold), theme("opacity.50"));
            }

            &:is(:focus) {
                @apply border-[rgb(var(--palette-background-bold))];

                background-color: transparent;
            }
        }
    }

    &[data-variation="flush"] {
        @apply align-top border-0 p-0 rounded-none;

        font-size: inherit;
        line-height: inherit;

        text-align: inherit;
        text-transform: inherit;

        &[data-palette] {
            @apply text-[rgb(var(--palette-background-bold))];
        }
    }

    &:not([cols], [size]) {
        @apply w-full;
    }
}

textarea {
    @apply max-h-full resize-none max-w-full;
}