span[class ^= icon]{
    font-size: 14px;
    position: relative;
}

span[class ^= icon]::after{
    font-size: 0.85em;
    position: relative;
    top: -1px;
    overflow: hidden;
    transition: font-size ease-in-out 0.2s;
}

button:hover>span[class ^= icon]::after{
    font-size: 0.85em;
    transition: font-size ease-out 0.2s 0.2s;
    white-space: nowrap;
}

#new-image>span::after{
    content:" Load Picture";
}

#new-mesh>span::after{
    content:" Load Mesh";
}

#new-curve>span::after{
    content:" New Curve";
}

#new-curve>span.not-closed::after{
    content:" Close Curve";
}

#new-points>span::after{
    content:" New Point Set";
}

#new-delete>span::after{
    content:" Delete";
}

.btn-show-toggle>span::after{
    content: " Show/ Hide";
}

.btn-paint-layer>span::after{
    content: " Add Color";
}

.btn-show-toggle>span::after,
.btn-paint-layer>span::after{
    font-size: 0;
}

.btn-show-toggle:hover>span::after,
.btn-paint-layer:hover>span::after{
    font-size: 0.8em;
}

input[name=tool-type]:not(:checked)+div{
    display: none;
}

/* @media(max-width:1400px){ */
    button>span[class ^= icon]::after{
        font-size: 0;
    }

    button:disabled>span[class ^= icon]::after{
        font-size: 0 !important;
    }

    .btn-show-toggle>span::after,
    .btn-paint-layer>span::after{
        position: absolute;
        top: 100%;
        transform: translateX(-100%);
        opacity: 0;
        transition: opacity ease-in-out 0.2s;
    }

    .btn-show-toggle:hover>span::after,
    .btn-paint-layer:hover>span::after{
        padding: 5px;
        opacity: 1;
        background-color: rgba(100, 100, 100, 0.8);
        z-index: 999;
        border: 1px solid #999;
    }
/* } */