// 2D Transformations
.hover-grow {
    &:hover, &:focus {
        transform: scale(1.05, 1.05);
        transition-duration: 0.3s;
        transition-property: transform;
    }
}
.hover-shrink {
    &:hover, &:focus {
        transform: scale(0.95, 0.95);
        transition-duration: 0.3s;
        transition-property: transform;
    }
}
.hover-float {
    &:hover, &:focus {
        transform: translateY(-0.35em);
        transition-duration: 0.3s;
        transition-property: transform;
    }
}
.hover-sink {
    &:hover, &:focus {
        transform: translateY(0.35em);
        transition-duration: 0.3s;
        transition-property: transform;
    }
}
.hover-pulse {
    &:hover, &:focus {
        animation: pulse 1s linear;
        animation-iteration-count: infinite;
        @keyframes pulse {
            0% {
                transform: scale(1, 1);
            }
            25% {
                transform: scale(1.05, 1.05);
            }
            75% {
                transform: scale(0.95, 0.95);
            }
            100% {
                transform: scale(1, 1);
            }
        }
    }
}
.hover-hop {
    &:hover, &:focus {
        animation: hop 1s ease-in-out;
        animation-iteration-count: infinite;
        @keyframes hop {
            0% {
                transform: translateY(0em);
            }
            50% {
                transform: translateY(-0.55em);
            }
            100% {
                transform: translateY(0em);
            }
        }
    }
}
.hover-bob {
    &:hover, &:focus {
        animation: bob 1s ease-in-out;
        animation-iteration-count: infinite;
        @keyframes bob {
            0% {
                transform: translateY(0em);
            }
            50% {
                transform: translateY(0.55em);
            }
            100% {
                transform: translateY(0em);
            }
        }
    }
}