.gds-number-circle {
    border: 1px solid $numberCircleBorderColor;
    color: $numberCircleTextColor;
    border-radius: 50%;
    padding: ($unit * 0.25) 0;
    margin-right: $unit;
    font-size: $font-size-minus-1;
    float: left;
    width: ($unit * 2.25);
    height: ($unit * 2.25);
    text-align: center;
}

.gds-number-circle--xs,
.gds-number-circle--sm,
.gds-number-circle--lg,
.gds-number-circle--xl {
    padding: 0;
}

.gds-number-circle--xs {
    width: ($unit * 1.25);
    height: ($unit * 1.25);
    line-height: ($unit * 1.2);
    font-size: $font-size-minus-3;
}

.gds-number-circle--sm {
    width: ($unit * 1.75);
    height: ($unit * 1.75);
    line-height: ($unit * 1.65);
    font-size: $font-size-minus-2;
}

.gds-number-circle--lg {
    width: ($unit * 3);
    height: ($unit * 3);
    line-height: ($unit * 2.9);
    font-size: $font-size-plus-1;
}

.gds-number-circle--xl {
    width: ($unit * 4);
    height: ($unit * 4);
    line-height: ($unit * 3.8);
    font-size: $font-size-plus-3;
}

.gds-number-circle--secondary {
    color: $secondaryColor;
    border-color: $secondaryColor;
}

.gds-number-circle--success {
    color: $successColor;
    border-color: $successColor;
}

.gds-number-circle--warning {
    color: $warningColor;
    border-color: $warningColor;
}

.gds-number-circle--info {
    color: $infoColor;
    border-color: $infoColor;
}

.gds-number-circle--danger {
    color: $dangerColor;
    border-color: $dangerColor;
}

.gds-number-circle--white {
    color: #ffffff;
    border-color: #ffffff;
}

.gds-number-circle--dark {
    color: $grayLight4Color;
    border-color: $grayLight4Color;
}