ul, ol{
    margin-bottom : 1.5em;
    padding-left  : 2.5em;
    .clearfix-mixin();

    ol, ul{
        margin : 0.3em 0 1em;
    }

    li{
        margin-bottom : 0.3em;
        .clearfix-mixin();

        li{
        }
    }
}

ul{
    list-style-type : disc;

    ul{ list-style-type : circle; }
}

ol{
    list-style-type : decimal;

    ol{ list-style-type : lower-latin; }
}

dl{
    dt{ font-weight : bold; }

    dd{
        margin-bottom : 0.75em;

        & + dd{ margin-top : -0.5em; }
    }

    &.horizontal{
        dt{
            float      : left;
            clear      : left;
            width      : 35%;
            text-align : right;
        }

        dd{ margin-left : 37%; }
    }
}

[class*=" list-"], [class^="list-"]{
    & when (@lists-classes){
        list-style-type : none;
        padding-left    : 0;
    }
}

ul{
    &.list-unstyled when (@list-unstyled) and (@lists-classes){
        zoom : 1;
    }

    &.list-striped when (@list-striped) and (@lists-classes){
        & > li{
            margin  : 0;
            padding : .75em;

            &:nth-child(odd){
                background : @gray-lighter;
            }
        }
    }

    &.list-inline when (@list-inline) and (@lists-classes){
        zoom : 1;

        & > li{
            .inline-block(top);
            margin : 0 0.5em;
        }
    }

    &.list-bordered when (@list-bordered) and (@lists-classes){
        zoom : 1;

        & > li{
            border-bottom  : 1px solid @hr-color;
            margin         : 0;
            padding-top    : @padding-base-vertical;
            padding-bottom : @padding-base-vertical;

            footer &{ border-color : inherit; }
        }

        &.dashed > li{
            border-bottom-style : dashed;
        }
    }

    &.list-arrow when (@list-arrow) and (@lists-classes){
        zoom : 1;

        & > li{
            padding-left : 1em;

            &:before{
                float       : left;
                color       : inherit;
                margin-left : -1em;
                & when (@flexkit-icons){
                    font-family : @font-family-icons;
                    content     : '\e0c3';
                }
                & when not(@flexkit-icons){
                    content : '>';
                }
            }

            &:hover{
                &:before{ color : @brand-primary; }
            }
        }
    }

    &.list-checkmark when (@list-checkmark) and (@lists-classes){
        zoom : 1;

        & > li{
            padding-left : 1.5em;

            &:before{
                float       : left;
                color       : inherit;
                margin-left : -1.5em;
                margin-top  : .35em;
                font-family : @font-family-icons;
                font-size   : .75em;
                content     : '\e0a3';
            }

            &:hover{
                &:before{ color : @brand-primary; }
            }
        }
    }

    &.list-count-sign when (@list-count-sign) and (@lists-classes){
        counter-reset : list;

        & > li{
            margin-bottom : 0.5em;
            padding-left  : 3em;
            line-height   : 2em;

            &:before{
                .inline-block();
                counter-increment : list;
                content           : counter(list);
                width             : 2em;
                height            : 2em;
                text-align        : center;
                background-color  : fade(#000, 15%);
                margin-left       : -3em;
                margin-right      : 1em;
                color             : #fff;
                .transition(background-color; 0.5s);
                .border-radius(10em);
            }

            &:hover{
                &:before{
                    background-color : fade(#000, 25%);
                }
            }
        }
    }

    &.list-icon-sign when (@list-icon-sign) and (@lists-classes){

        & > li{
            margin-bottom : 0.5em;
            padding-left  : 3em;
            line-height   : 2em;

            &:before{
                .inline-block();
                width            : 2em;
                height           : 2em;
                line-height      : inherit;
                text-align       : center;
                background-color : @gray-lighter;
                margin-left      : -3em;
                margin-right     : 1em;
                .transition(background-color; 0.5s);
                .border-radius(10em);
            }

            &:hover{
                &:before{
                    background : @primary-bg;
                    color      : @primary-color;
                }
            }
        }
    }

    &.list-bullet when (@list-bullet) and (@lists-classes){
        zoom : 1;

        & > li{
            padding-left : 1em;

            &:before{
                content        : '\002022';
                vertical-align : top;
                color          : @brand-primary;
                margin-left    : -1em;
                margin-right   : 1em;
            }

            &:hover{
                &:before{ }
            }
        }
    }

    &.list-testimonials when (@list-testimonials) and (@lists-classes){
        zoom : 1;

        li{
            position  : relative;
            margin    : 0 0 3.5em;
            border    : 1px solid @gray-light;
            padding   : @padding-large-vertical;
            font-size : @font-size-small;

            p{
                margin : 0.5em 0 0;

                &:first-child{
                    margin : 0;
                }
            }

            cite{
                position : absolute;
                left     : 0;
                right    : 0;
                top      : 100%;
                padding  : 5px 5px 5px 50px;
                color    : @brand-primary;

                & > *{
                    color : @text-color;
                }

                &:after, &:before{
                    content      : "";
                    position     : absolute;
                    top          : 0;
                    left         : 11px;
                    border-style : solid;
                    border-width : 15px;
                    border-color : #fff #fff transparent transparent;
                }

                &:before{
                    left         : 10px;
                    border-width : 16px;
                    border-color : @gray-light @gray-light transparent transparent;
                }
            }
        }
    }

    &.list-tags when (@list-tags) and (@lists-classes){
        margin-bottom : 0;
        .clearfix-mixin();

        & > li{
            float       : left;
            margin      : 0.5%;
            padding     : @padding-small-vertical @padding-small-horizontal;
            background  : @gray-lighter;
            cursor      : pointer;
            line-height : 1;
            border      : 1px solid darken(@gray-lighter, 10%);
            .text-overflow;

            &.filed{
                padding : 1px;
            }

            & > *{
                line-height : normal;
            }

            img{
                width      : auto;
                max-height : 16px;
            }

            &:hover, &.active, &.tag-current{
                background : darken(@gray-lighter, 10%);
            }

            &.disabled{
                cursor     : default;
                background : @gray-lighter;
                color      : darken(@gray-lighter, 10%);
            }

            &.active, &.tag-current{
            }
        }
    }

    &.list-icon-line when (@list-icon-line) and (@lists-classes){
        @icon-size : @icon-size-large;
        @icon-box  : @icon-size * 1.75;
        @size-line : 2px;

        & > li{
            margin      : 0 0 0 @icon-box * 0.75;
            padding     : 10px 0 15px @icon-box;
            border-left : @size-line solid @gray-lighter;
            position    : relative;

            .bubble{
                position         : absolute;
                top              : 5px;
                left             : -(@icon-box * 0.5) - (@size-line / 2);
                width            : @icon-box;
                height           : @icon-box;
                font-size        : @icon-size;
                text-align       : center;
                background-color : #fff;
                border           : @size-line solid @gray-lighter;
                .border-radius(10em);
            }

            &:hover{
                &.bubble{
                    border-color : darken(@gray-lighter, 5%);
                }
            }

        }
    }

    &.list-step when (@list-step) and (@lists-classes){
        text-align : center;

        .step-item{
            display        : inline-block;
            vertical-align : middle;
            line-height    : 3em;
            position       : relative;
            background     : @state-success-bg;
            color          : #fff;
            padding        : 0 1em;
            border-color   : @state-success-bg;
            cursor         : pointer;

            & + .step-item{
                margin-left : 1.5em;
            }

            &:before, &:after{
                content      : '';
                width        : 0;
                height       : 0;
                position     : absolute;
                top          : 0;
                bottom       : 0;
                margin       : auto;
                border-style : solid;
                border-width : 1.5em 0 1.5em 1.5em;
                border-color : inherit;
            }
            &:before{
                z-index           : 1;
                left              : -1.5em;
                border-left-color : transparent !important;
            }
            &:after{
                right               : -1.5em;
                border-top-color    : transparent !important;
                border-bottom-color : transparent !important;
            }
            &.active{
                background   : @brand-success;
                border-color : @brand-success;
            }
            &.active ~ .step-item{
                background   : #ddd;
                border-color : #ddd;

                &:hover{
                    background   : darken(#ddd, 5%);
                    border-color : darken(#ddd, 5%);
                }
            }
            &.error{
                background   : @state-error-bg !important;
                border-color : @state-error-bg !important;
            }
            &.active.error{
                background   : @brand-error !important;
                border-color : @brand-error !important;
            }
            &:first-child:before, &:last-child:after{
                content : none;
            }
        }

        .step-title{
            font-size   : 1.15em;
            line-height : normal;

            &:before{
                content       : attr(data-count);
                border        : 2px solid #fff;
                border-radius : 2em;
                width         : 1.15em;
                height        : 1.15em;
                line-height   : 1.15em;
                font-size     : 1.25em;
                margin-right  : 0.25em;
                .inline-block();
                .box-sizing(content-box);
            }

            &:after{
                &:extend(ul.list-step .step-item:before);
                font-size          : 0.9em;
                z-index            : 0;
                left               : -1.75em;
                border-right-width : .3em;
                border-left-color  : transparent !important;
            }
        }
    }
}