@in-icon-size: 16px;

.in-icon {
    padding: 0 2px;

    font-size: 16px;
    color: @color-action;
    text-decoration: none;
    cursor: pointer;

    &:hover {
        color: @color-action-hover;
        text-decoration: none;
    }

    &--no-click {
        cursor: default;
    }

    &--after-input {
        position: absolute;
        top: calc(~"50% - @{in-icon-size}/2");
        right: -@in-icon-size - 5px;
    }

    &--after-flag {
        position: relative;
        top: 2px;
    }

    &--in-text {
        position: relative;
        top: 3px;
    }

    &--visible {
        color: @color-green;
        cursor: help;
    }

    &--invisible {
        color: @color-c;
    }

    &--denied {
        font-size: 20px;
        cursor: help;
        color: @color-c;
    }

    &--ok {
        color: @color-green;
    }

    &--save {
        color: @color-green;
    }

    &--cancel {
        color: @color-red;
        font-size: 14px;
    }

    &--spinner {
        color: @color-a;
    }

    &--delete {
        font-size: 15px;
    }

    &--edit {
        font-size: 15px;
    }

    &--move {
        margin-top: 1px;
        color: @color-move;
        cursor: move;
    }

    &--add {
        font-size: 20px;
        color: @color-green;
    }

    &--link {
        color: @color-blue;
        font-size: 16px;
    }

    &--info {
        color: @color-a;
        font-size: 14px;
    }

    &--detail {
        width: 16px;
        height: 16px;
        line-height: 16px;
        vertical-align: top;

        background: @color-f;
        border: 1px solid @color-border;
        color: @color-inactive;
        font-size: 10px;
        text-align: center;

        &:hover {
            color: @color-primary;
            border-color: @color-9;
        }
    }

    &--partially-visible {
        padding: 0 2px;

        font-size: 16px;
        color: @color-orange;
        text-decoration: none;
        cursor: help;
    }
}