.tool-btn {
    margin: 0;
    padding: 0.5rem;

    width: 2.5rem;
    height: 2.5rem;

    position: relative;

    border: none;
    background-color: transparent;
    color: $white100;

    svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    &:hover {
        cursor: pointer;

        color: $green;

        .tool-tip {
            opacity: 1;
            top: -2.5rem;
            transform: translateX(calc(-50% + 1.25rem ));
        }
    }
}
.tool-btn--evil {
    color: $red;

    span {
        background-color: $red;
    }

    &:hover {
        color: $white100;
    }
}
.tool-btn--blu {
    color: $blue;

    span {
        background-color: $blue;
    }

    &:hover {
        color: $white100;
    }
}

.tool-tip {
    margin: 0;
    padding: 0.5rem 0.75rem;

    width: auto;

    display: block;

    position: absolute;
    top: -1.7rem;
    left: 0;
    transform: translateX(calc(-50% + 1.25rem ));

    font-family: $font-body;
    font-size: 1rem;
    font-weight: 600;

    background-color: $black300;
    color: $white100;
    opacity: 0;
    border-radius: $rad;

    transition: opacity 0.2s cubic-bezier(.76,0,.17,1), top 0.2s cubic-bezier(.76,0,.17,1);

    pointer-events: none;
}