@mixin input-item {
    background-color: $input-item-default-background-color;
    border-radius: $input-item-border-radius;
    color: $input-item-text-color;
    text-shadow: 0 1px 0 $black-opaque-80;

    > span {

        display: inline-block;

        &.input-item-content {
            cursor: move;
            padding: 0 5px;
        }

        &.input-item-expand-hierachy-button,
        &.input-item-remove-button {
            background-color: $black-opaque-20;
            cursor: pointer;
            transition: background-color .25s;
            width: 25px;

            &:hover {
                background-color: $black-opaque-30;
            }
        }

        &.input-item-expand-hierachy-button {
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS40MTQyMTsiPjxnPjxwYXRoIGQ9Ik0xNy43NjYsMzYuNzMzbC05LjEzNywwYzAsMCAwLDM5LjcyNCAwLDUxLjA4YzAsMC43OTUgMC4zMTYsMS41NTggMC44NzksMi4xMmMwLjU2MiwwLjU2MyAxLjMyNSwwLjg3OSAyLjEyLDAuODc5YzQuNjk0LDAgMTMuMjQ1LDAgMTMuMjQ1LDBsMCwtMTAuMjA0bC03LjEwNywwbDAsLTI1LjUwOWw3LjEwNywwbDAsLTEwLjIwM2wtNy4xMDcsMGwwLC04LjE2M1oiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PHBhdGggZD0iTTEwMCw0Mi44NTVjMCwtMy45NDIgLTMuMiwtNy4xNDMgLTcuMTQyLC03LjE0M2wtNTEuNzA1LDBjLTMuOTQyLDAgLTcuMTQzLDMuMjAxIC03LjE0Myw3LjE0M2wwLDE0LjI4NWMwLDMuOTQyIDMuMjAxLDcuMTQyIDcuMTQzLDcuMTQybDUxLjcwNSwwYzMuOTQyLDAgNy4xNDIsLTMuMiA3LjE0MiwtNy4xNDJsMCwtMTQuMjg1WiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz48cGF0aCBkPSJNNjUuOTksNy4xNDJjMCwtMy45NDIgLTMuMjAxLC03LjE0MiAtNy4xNDMsLTcuMTQybC01MS43MDUsMGMtMy45NDIsMCAtNy4xNDIsMy4yIC03LjE0Miw3LjE0MmwwLDE0LjI4NWMwLDMuOTQzIDMuMiw3LjE0MyA3LjE0Miw3LjE0M2w1MS43MDUsMGMzLjk0MiwwIDcuMTQzLC0zLjIgNy4xNDMsLTcuMTQzbDAsLTE0LjI4NVoiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PHBhdGggZD0iTTEwMCw3OC41NjdjMCwtMy45NDIgLTMuMiwtNy4xNDIgLTcuMTQyLC03LjE0MmwtNTEuNzA1LDBjLTMuOTQyLDAgLTcuMTQzLDMuMiAtNy4xNDMsNy4xNDJsMCwxNC4yODVjMCwzLjk0MiAzLjIwMSw3LjE0MyA3LjE0Myw3LjE0M2w1MS43MDUsMGMzLjk0MiwwIDcuMTQyLC0zLjIwMSA3LjE0MiwtNy4xNDNsMCwtMTQuMjg1WiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz48L2c+PC9zdmc+');
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: 50%;
            position: relative;

            &::after {
                background-color: $black-opaque-10;
                content: '';
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                width: 1px;
            }
        }

        &.input-item-remove-button {
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS40MTQyMTsiPjxwYXRoIGQ9Ik05LDljMCwwIDUuMTA1LC01LjEwNSA4LjEwOSwtOC4xMDljMC41NjgsLTAuNTY4IDEuMzM4LC0wLjg4NyAyLjE0MSwtMC44ODdjMC44MDMsMCAxLjU3MywwLjMxOSAyLjE0MSwwLjg4N2M1LjYzOSw1LjYzOSAyMC44NTQsMjAuODU0IDI2LjQ4LDI2LjQ4YzEuMTc2LDEuMTc2IDMuMDgyLDEuMTc2IDQuMjU4LDBjNS42MzUsLTUuNjM1IDIwLjg5MSwtMjAuODkxIDI2LjUwOCwtMjYuNTA4YzEuMTY3LC0xLjE2NyAzLjA1OSwtMS4xNjcgNC4yMjYsMGMzLjk0MiwzLjk0MiAxMi4zNzMsMTIuMzczIDE2LjI5NywxNi4yOTdjMS4xNTQsMS4xNTQgMS4xNTQsMy4wMjYgMCw0LjE4Yy01LjYwNiw1LjYwNiAtMjAuOTM0LDIwLjkzNCAtMjYuNTU3LDI2LjU1N2MtMS4xNjEsMS4xNjEgLTEuMTYxLDMuMDQ1IDAsNC4yMDZjNS42MDYsNS42MDYgMjAuODYsMjAuODYgMjYuNTA3LDI2LjUwN2MxLjE4MiwxLjE4MiAxLjE4MiwzLjA5OCAwLDQuMjhjLTMuOTQ5LDMuOTQ5IC0xMi4zMzgsMTIuMzM4IC0xNi4yNTgsMTYuMjU4Yy0xLjE2MSwxLjE2MSAtMy4wNDMsMS4xNjEgLTQuMjA0LDBjLTUuNjIxLC01LjYyMSAtMjAuOTU1LC0yMC45NTUgLTI2LjU2LC0yNi41NmMtMS4xNTMsLTEuMTUzIC0zLjAyMywtMS4xNTMgLTQuMTc2LDBjLTUuNTk5LDUuNTk5IC0yMC45MDcsMjAuOTA3IC0yNi41NDMsMjYuNTQzYy0xLjE3LDEuMTcgLTMuMDY4LDEuMTcgLTQuMjM4LDBjLTMuOTM1LC0zLjkzNSAtMTIuMzI4LC0xMi4zMjggLTE2LjI2MywtMTYuMjYzYy0wLjU2MSwtMC41NjEgLTAuODc3LC0xLjMyMyAtMC44NzcsLTIuMTE4YzAsLTAuNzk1IDAuMzE2LC0xLjU1NyAwLjg3NywtMi4xMThjNS42MywtNS42MyAyMC45MTQsLTIwLjkxNCAyNi41MjgsLTI2LjUyOGMxLjE2MiwtMS4xNjIgMS4xNjIsLTMuMDQ2IDAsLTQuMjA4Yy01LjYxNywtNS42MTcgLTIwLjkxNiwtMjAuOTE2IC0yNi41MzgsLTI2LjUzOGMtMC41NTksLTAuNTU5IC0wLjg3MywtMS4zMTcgLTAuODczLC0yLjEwOGMwLC0wLjc5MSAwLjMxNCwtMS41NDkgMC44NzMsLTIuMTA4YzMuMDAxLC0zLjAwMSA4LjE0MiwtOC4xNDIgOC4xNDIsLTguMTQyWiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz48L3N2Zz4=');
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: 45%;
            border-radius: 0 3px 3px 0;
        }
    }
}