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();
    }
}
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-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-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-separated when (@list-separated) and (@lists-classes) {
        zoom : 1;

        & > li {
            margin         : 0;
            padding-top    : @padding-base-vertical;
            padding-bottom : @padding-base-vertical;

            & + li {
                border-top : 1px solid @hr-color;
            }

            footer & {
                border-color : inherit;
            }
        }

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

    &.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;

            &[data-count]::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;
            }
        }
    }

    &.list-select when (@lists-classes) {
        border     : 1px solid @input-border-color;
        min-height : ~'calc(24px + 1em)';

        & > li {
            padding : .5em;
            margin  : 0;
            cursor  : pointer;

            & + li {
                border-top : 1px solid @gray-light;
            }

            &.active {
                background : @gray-lighter;

                &::after {
                    &:extend(.flexkit-icon);
                    content   : "\e000";
                    color     : @brand-success;
                    font-size : 1.45em;
                    float     : right;
                }
            }

            &:hover {
                background : @gray-lighter;
            }
        }
    }
}