counters.scss

// Demo Tracks Account
// --------------------------------------------------

$tracks-total: 10;

%tracks-used {
    font-family: FontAwesome;
    content: "\f058";
    font-size: 23px;
}

.anw-account__demo {
    border-top: 1px solid $gray-lighter;
    border-bottom: 1px solid $gray-lighter;
    padding-top: 30px;
    padding-bottom: 30px;

    &.anw-welcome__demo {
        padding-bottom: 0;
        margin-bottom: 0;
        padding-top: 0;
        border: 0;

        .anw-account__demo__counters:not([data-tracks="0"]) {
            margin: 20px 0 0;
        }
    }

    &.anw-welcome__dashboard {
        padding-bottom: 0;
        margin-bottom: 0;
        padding-top: 0;
        border: 0;

        .anw-account__demo__counters:not([data-tracks="0"]) {
            margin: 20px 0 0;
        }
    }

    h2 {
        font-size: $font-size-h1;
        color: $anw-brand-9;
        padding: 0;
        line-height: $font-size-h1;
    }

    .anw-account__demo__counters {
        color: $anw-brand-light-grey-4;
        margin: $grid-gutter-width 0;
        font-size: 14px;

        li {
            vertical-align: middle;
            margin-right: 7px;
        }

        @for $i from 0 through $tracks-total {
            &[data-tracks="#{$i}"] {
                li:nth-child(-n+#{$tracks-total - $i}) {
                    color: $anw-brand-5;
                    .fa:before {
                        @extend %tracks-used;
                    }
                }
            }
        }
    }

    .anw-account__demo__remaining {
        font-size: 16px;
        color: $gray-light;

        > a {
            cursor: pointer;
        }

        .btn {
            max-width: 110px;
            margin-top: $grid-gutter-width;
        }
    }

}