.#{$package-prefix}-notifier-holder {
    position: relative;
    padding-top: rem-calc(10);
    
    span.#{$package-prefix}-notifier {
        top: 0 !important;    
    }
}

span.#{$package-prefix}-notifier {
    position: absolute;
    display: inline-block;
    top: rem-calc(-10);
    left: 100%;
    
    min-width: rem-calc(20);
    min-height: rem-calc(20);
    padding: rem-calc(0 5);

    font-family: "Brandon Grotesque Medium";
    font-size: rem-calc(14);
    text-align: center;
    color: $white;

    background-color: $dark-gray;
    border-radius: rem-calc(50);

    @each $key, $value in $app-colors {
        &.#{$key} {
            background-color: $value;
        }
    }
}