/*
*UNDERLINE TITLE*
*/
.ws-underline-hover__anchor{
    display: flex;
    width: fit-content;
    height: fit-content;

    color: currentColor !important;
    text-decoration: unset;
}
.ws-underline-hover{
    text-decoration: unset !important;

    display: block;
    width: fit-content;
    height: fit-content;
    margin: 0;
}
.ws-underline-hover__inner{
    position: relative;
    display: block;
    width: 100%;
}
.ws-underline-hover__inner[data-underline-type="side-to-side"]:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--bottom-distance);
    height: var(--height);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
    background: var(--background);
    -webkit-transition: -webkit-transform var(--duration) var(--ease);
    transition: -webkit-transform var(--duration) var(--ease);
    -o-transition: -o-transform var(--duration) var(--ease);
    -moz-transition: transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease);
    transition: transform var(--duration) var(--ease);
    transition: transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease), -o-transform var(--duration) var(--ease);
}
.ws-underline-hover__inner[data-underline-type="side-to-side"]:hover:before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    transition-delay: unset;
    -webkit-transition-delay: unset;
    -o-transition-delay: unset;
    -moz-transition-delay: unset;
}
.ws-underline-hover__inner[data-underline-type="one-side"]:after {
    content: '';
    position: absolute;
    bottom: var(--bottom-distance);
    left: 0;
    width: var(--width);
    border-bottom: var(--height) solid var(--background);
    transition: var(--duration) var(--ease);
}
.ws-underline-hover__inner[data-underline-type="two-sides"]:after {
    content: '';
    display: block;
    margin: auto;
    bottom: var(--bottom-distance);
    left: 0;
    width: var(--width);
    height: var(--height);
    background: var(--background);
    transition: width var(--duration) var(--ease);

    position: relative;
    border-bottom: unset;
}
.ws-underline-hover__inner[data-underline-type="one-side"]:hover:after, .ws-underline-hover__inner[data-underline-type="two-sides"]:hover:after {
    width: 100%;
}
.ws-underline-hover__inner[data-underline-type="one-side"]:hover::after, .ws-underline-hover__inner[data-underline-type="two-sides"]:hover::after {
    -webkit-transition: width var(--duration) var(--ease);
    transition: width var(--duration) var(--ease);
    -o-transition: width var(--duration) var(--ease);
    -moz-transition: width var(--duration) var(--ease);
    transition: width var(--duration) var(--ease);
    transition: width var(--duration) var(--ease);
}
.ws-underline-hover__inner[data-underline-type="full-side"]::after,
.ws-underline-hover__inner[data-underline-type="full-side"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--bottom-distance);
    height: var(--height);
    background: var(--background);

    -webkit-transition: -webkit-transform var(--duration) var(--ease);
    transition: -webkit-transform var(--duration) var(--ease);
    -o-transition: -o-transform var(--duration) var(--ease);
    -moz-transition: transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease);
    transition: transform var(--duration) var(--ease);
    transition: transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease), -o-transform var(--duration) var(--ease);
}
.ws-underline-hover__inner[data-underline-type="full-side"]::before {
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    -o-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
}
.ws-underline-hover__inner[data-underline-type="full-side"]::after {
    -webkit-transform-origin: right;
    -moz-transform-origin: right;
    -ms-transform-origin: right;
    -o-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}
.ws-underline-hover__inner[data-underline-type="full-side"]:hover::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    transition-delay: 0.25s;
    -webkit-transition-delay: 0.25s;
    -o-transition-delay: 0.25s;
    -moz-transition-delay: 0.25s;
}
.ws-underline-hover__inner[data-underline-type="full-side"]:hover::after {
    width: unset;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
}