/* ============================================ */
/* ANIMATED UNDERLINE EFFECTS */
/* ============================================ */

.underline-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

/* Center Underline - expands from center on hover */
.underline-center {
    position: relative;
}

.underline-center::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.3s ease, left 0.3s ease;
}

.underline-center:hover::after {
    width: 100%;
    left: 0;
}

/* Comes In Goes Out - slides in from one direction, slides out to the other */
.underline-comes-in-goes-out-right {
    position: relative;
}

.underline-comes-in-goes-out-right::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -100%;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: left 0.3s ease;
}

.underline-comes-in-goes-out-right:hover::after {
    left: 100%;
}

.underline-comes-in-goes-out-left {
    position: relative;
}

.underline-comes-in-goes-out-left::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -100%;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: right 0.3s ease;
}

.underline-comes-in-goes-out-left:hover::after {
    right: 100%;
}

/* Goes Out Comes In - slides out, then slides back in from opposite direction */
.underline-goes-out-comes-in-left {
    position: relative;
}

.underline-goes-out-comes-in-left::before,
.underline-goes-out-comes-in-left::after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
}

.underline-goes-out-comes-in-left::before {
    left: 0;
    transition: left 0.3s ease;
}

.underline-goes-out-comes-in-left::after {
    right: -100%;
    transition: right 0.3s ease 0.3s;
}

.underline-goes-out-comes-in-left:hover::before {
    left: -100%;
}

.underline-goes-out-comes-in-left:hover::after {
    right: 0;
}

.underline-goes-out-comes-in-right {
    position: relative;
}

.underline-goes-out-comes-in-right::before,
.underline-goes-out-comes-in-right::after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
}

.underline-goes-out-comes-in-right::before {
    right: 0;
    transition: right 0.3s ease;
}

.underline-goes-out-comes-in-right::after {
    left: -100%;
    transition: left 0.3s ease 0.3s;
}

.underline-goes-out-comes-in-right:hover::before {
    right: -100%;
}

.underline-goes-out-comes-in-right:hover::after {
    left: 0;
}