.tip {
    @tipSize: 24px;
    display: inline-block;
    width: @tipSize;
    height: @tipSize;
    margin: 2px;
    color: @white;
    background-color: @turquoise;
    font-size: 8px;
    border-radius: 100%;
    user-select: none;
    -moz-user-select: none;
    cursor: pointer;

    &.tip-remove {
        background-color: @red;
        border: 1px solid @mediumGrey;
        font-size: @tipSize - 6;
        line-height: @tipSize;

        &:before, &:after {
            color: @white;
            position: relative !important;
            top: -1px !important;
            left: 4px !important;
        }
    }

    &.tip-checkmark {
        background-color: @white;
        border: 1px solid @mediumGrey;
        font-size: @tipSize - 5;
        line-height: @tipSize;

        &:before, &:after {
            color: @white;
            margin-left: -@tipSize / 3;
        }

        input[type=checkbox]:checked ~ & {
            background-color: @red;
        }
    }
}