@mixin textfield
    margin: 0 1em
    min-width: 100%
    position: relative
    display: block
    margin: 0
    
    background: #fafafa
    border-radius: .3em
    border-bottom: 1px solid #ccc
    &:hover
        background: #fff
    input
        //overflow: hidden
        display: block
        background: none
        width: 100%
        border-radius: none
        outline: none
        border: none
        font-size: 1em
        padding: 0.7em
        + label
            user-select: none
            position: absolute
            top: 0.15em
            left: 0.25em
            right: 0
            font-size: .7em
            cursor: text
            transition: 250ms all
            overflow: hidden
            text-overflow: ellipsis
        &::placeholder
            color: transparent

        &:placeholder-shown + label
            color: grey
            position: absolute
            padding: .7em
            top: 0em
            left: 0em
            right: 0
            bottom: 0
            font-size: 1em
    &__info
        color: #ccc
        font-size: 0.7em
    &__hint
        position: absolute
        z-index: 1
        left: 0
        right: 0
        top: calc(100% - .6em)
        border-bottom-left-radius: .3em
        border-bottom-right-radius: .3em
        color: #fff
        font-size: .7em
        background: red

@mixin checkbox
    position: relative
    font-size: 1.5em
    label
        user-select: none
        margin-left: 1em
        padding-left: .5em
        transition: all 250ms ease-in-out
        &::before
            position: absolute
            content: ''
            left: 0
            top: 0
            width: 1em
            height: 1em
            background: radial-gradient(circle, #e2e2e2 0%, #b8b8b8 100%)
            border-radius: .3em
            border: solid 1px #ccc
            box-shadow: 0 0 .5em #fff, inset 0 0 .3em #fff

        &::after
            content: ''
            left: 0
            top: 0
            width: 1em
            height: 1em
            position: absolute
            display: flex
            align-items: center
            justify-content: center
            transform: scale(0)
            padding: 0
            text-shadow: 0 0 .2em #888
            transition: all 250ms ease-in-out
    input
        display: none
        &:checked + label
            text-shadow: 0 0 .5em #888
            &::before
                box-shadow: 0 0 .5em #fff, inset 0 0 .5em #fff
            &::after
                transform: scale(1)
                content: '✔'
                color: #fff