include icon.pug

mixin text-field
    - const slots = {}

    mixin slot(key)
        - slots[key] = block

    -
        block ? block() : undefined 

        let classes = {
            'o-text-field':      true,
            'o-text-field--ext': attributes.ext,
            'is-invalid':        attributes.invalid,
            'is-disabled':       attributes.disabled,
            'l-card':            !!block,
            'l-card--flush':     !!block,
            'l-card--gapless':   !!block,
            'u-p-xs':            !!block
        }

    div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
        if !!block
            if slots.pre
                - slots.pre()
            input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes)
            if slots.post
                - slots.post()
            .o-text-field__bg
        else
            input.o-text-field__native&attributes(attributes)
            .o-text-field__bg