.labeled when (@form-labeled){
    position : relative;
    .clearfix-mixin();

    label, .label{
        margin-top    : 0;
        margin-bottom : 0;
        height        : unit(@button-line-height * 2, em);
        line-height   : unit(@button-line-height * 2, em);
        background    : @input-border-color;
        text-align    : center;
        color         : #fff;
        .transition(all; 0.3s);
    }

    input:focus, select:focus{
        .box-shadow(none; @input-shadow-focus) !important;

        & ~ label, & ~ .label{
            background : @input-border-color-focus;
        }
    }

    &.icon when (@form-labeled-icon){
        input, select, textarea{

            &:focus ~ [class*="@{icon-prefix}-"]{
                .opacity(1);
            }
        }

        [class*="@{icon-prefix}-"]{
            position  : absolute;
            margin    : auto;
            top       : 0;
            bottom    : 0;
            z-index   : 2;
            height    : 1em;
            font-size : 1.25em;
            .opacity();

            &:before{
                vertical-align : top;
            }
        }

        &.right{
            [class*="@{icon-prefix}-"]{
                right : .375em;
            }

            input, textarea{
                padding-right : 2em;
            }
        }

        &.left{
            [class*="@{icon-prefix}-"]{
                left : .375em
            }
            input, textarea{
                padding-left : 2em;
            }
        }

        &.top{
            [class*="@{icon-prefix}-"]{
                margin : 0;
                top    : .375em;
            }
        }
    }
}