/*--------------------------------------------------
    [Lists]
----------------------------------------------------*/

%lists {

    > li {
        @include font($size: $font-size-14, $weight: $font-weight-300);
        margin-bottom: 5px;
        color: $color-subtitle;

        > a {
            @include font($size: $font-size-14, $weight: $font-weight-300);
            color: $color-subtitle;
            
            &:hover {
                color: $color-base;
                text-decoration: none;
            }
        }

        %lists-item-element {
            min-width: 15px;
            color: $color-base;
            text-align: center;
            margin-right: 10px;
        }

        %lists-item-element-brd {
            @include size(15px);
            @include font($size: $font-size-11);
            line-height: 3px;
            padding: 5px;
            margin-right: 10px;
        }

        %lists-item-element-bg {
            @include size(15px);
            @include font($size: $font-size-11);
            color: $color-white;
            line-height: 3px;
            padding: 6px;
            margin-right: 10px;
        }
    }
}


/* Lists Base */
.lists-base {
    @extend %lists;

    .lists-item-element {
        @extend %lists-item-element;
    }

    .lists-item-element-brd {
        @extend %lists-item-element-brd;
        color: $color-base;
        border: 1px solid $color-base;
    }

    .lists-item-element-bg {
        @extend %lists-item-element-bg;
        background: $color-base;
    }
}

/* Lists Dark */
.lists-dark {
    @extend %lists;

    .lists-item-element {
        margin-right: 10px;
    }

    .lists-item-element-brd {
        @extend %lists-item-element-brd;
        color: $color-dark;
        border: 1px solid $color-dark;
    }

    .lists-item-element-bg {
        @extend %lists-item-element-bg;
        background: $color-dark;
    }
}


/*--------------------------------------------------
    [Lists Base White Color]
----------------------------------------------------*/

.lists-base-white {
    > li {
        color: $color-white;

        > a {
            color: $color-white;

            &:hover {
                color: $color-white;
                text-decoration: underline;
            }
        }

        .lists-item-element,
        .lists-item-element-brd,
        .lists-item-element-bg {
            color: $color-white;
        }
    }
}


/*--------------------------------------------------
    [Numeric Lists]
----------------------------------------------------*/

%numeric-lists {
    counter-reset: li;
    list-style: decimal;
    padding-left: 14px;

    > li {
        @include font($size: $font-size-14, $weight: $font-weight-300);
        margin-bottom: 5px;
        color: $color-subtitle;

        > a {
            @include font($size: $font-size-14, $weight: $font-weight-300);
            color: $color-subtitle;
            
            &:hover {
                color: $color-base;
                text-decoration: none;
            }
        }
    }
}

/* Numeric Base Lists */
.numeric-base-lists {
    @extend %numeric-lists;
    > li {
        color: $color-base;
    }
}


/* Numeric Dark Lists */
.numeric-dark-lists {
    @extend %numeric-lists;
    > li {
        color: $color-dark;
    }
}