#{$prefix}label {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    margin-right: 5px;
    padding: 2px 10px;
    font-size: 17px;
    @include vertical-center(32px);

    &.arrowed,
    &.arrowed-in {
        position: relative;
        margin-left: 10px;

        &::before {
            content: "";
            display: inline-block;
            position: absolute;
            top: 0;
            border: 1px solid transparent;
            border-width: 18px 8px;
        }
    }

    &.arrowed {
        padding-left: 8px;

        &::before {
            left: -16px;
        }
    }

    &.arrowed-in {
        padding-left: 8px;

        &::before {
            left: -9px;
        }
    }

    &.arrowed-right,
    &.arrowed-right-in {
        position: relative;
        margin-right: 12px;

        &::after {
            content: "";
            display: inline-block;
            position: absolute;
            top: 0;
            border: 1px solid transparent;
            border-width: 18px 8px;
        }
    }

    &.arrowed-right {
        padding-right: 5px;

        &::after {
            right: -16px;
        }
    }

    &.arrowed-right-in {
        padding-right: 5px;

        &::after {
            right: -9px;
        }
    }

    @mixin label-type($color) {
        background: $color;

        &.arrowed {
            &::before {
                border-right-color: $color;
            }
        }

        &.arrowed-in {
            &::before {
                border-color: $color $color $color transparent;
            }
        }

        &.arrowed-right {
            &::after {
                border-left-color: $color;
            }
        }

        &.arrowed-right-in {
            &::after {
                border-color: $color transparent $color $color;
            }
        }
    }

    @include label-type($color-info);

    &-success {
        @include label-type($color-success);
    }

    &-primary {
        @include label-type($color-primary);
    }

    &-warning {
        @include label-type($color-warning);
    }

    &-danger {
        @include label-type($color-danger);
    }

    &.medium {
        margin-right: 5px;
        padding: 2px 10px;
        font-size: 16px;
        @include vertical-center(28px);

        &.arrowed,
        &.arrowed-in {
            margin-left: 10px;

            &::before {
                border-width: 16px 8px;
            }
        }

        &.arrowed {
            padding-left: 8px;

            &::before {
                left: -16px;
            }
        }

        &.arrowed-in {
            padding-left: 8px;

            &::before {
                left: -9px;
            }
        }

        &.arrowed-right,
        &.arrowed-right-in {
            margin-right: 12px;

            &::after {
                border-width: 16px 8px;
            }
        }

        &.arrowed-right {
            padding-right: 5px;

            &::after {
                right: -16px;
            }
        }

        &.arrowed-right-in {
            padding-right: 5px;

            &::after {
                right: -9px;
            }
        }
    }

    &.small {
        margin-right: 5px;
        padding: 2px 10px;
        font-size: 14px;
        @include vertical-center(24px);

        &.arrowed,
        &.arrowed-in {
            margin-left: 10px;

            &::before {
                border-width: 14px 6px;
            }
        }

        &.arrowed {
            padding-left: 8px;

            &::before {
                left: -12px;
            }
        }

        &.arrowed-in {
            padding-left: 5px;

            &::before {
                left: -9px;
            }
        }

        &.arrowed-right,
        &.arrowed-right-in {
            margin-right: 12px;

            &::after {
                border-width: 14px 6px;
            }
        }

        &.arrowed-right {
            padding-right: 5px;

            &::after {
                right: -12px;
            }
        }

        &.arrowed-right-in {
            padding-right: 5px;

            &::after {
                right: -9px;
            }
        }
    }

    &.mini {
        margin-right: 5px;
        padding: 2px 7px;
        font-size: 12px;
        @include vertical-center(20px);

        &.arrowed,
        &.arrowed-in {
            margin-left: 10px;

            &::before {
                border-width: 12px 5px;
            }
        }

        &.arrowed {
            padding-left: 3px;

            &::before {
                left: -10px
            }
        }

        &.arrowed-in {
            padding-left: 3px;

            &::before {
                left: -9px;
            }
        }

        &.arrowed-right,
        &.arrowed-right-in {
            margin-right: 12px;

            &::after {
                border-width: 12px 5px;
            }
        }

        &.arrowed-right {
            padding-right: 5px;

            &::after {
                right: -10px;
            }
        }

        &.arrowed-right-in {
            padding-right: 5px;

            &::after {
                right: -9px;
            }
        }
    }
}