/// Fancy underscore
///
/// Animated underscore used on logo images, site nav
///
/// @param {string} $width - width of the underscore

@use "../links";
@use "../../settings";

@mixin ds_fancy-underscore($width: links.$link__current-underline-thickness, $horiz-padding: 0) {
    position: relative;
    transition-duration: 0s !important;

    &:hover:not(:focus) {
        background: transparent;
        outline-color: transparent;
    }

    &::after {
        background-color: currentColor;
        bottom: -0.3125rem;
        content: '';
        height: round($width, 1px);
        left: 50%;
        opacity: 0;
        position: absolute;
        right: 50%;
        transition: left settings.$transition-in-time, right settings.$transition-in-time, opacity settings.$transition-in-time;
    }

    &:hover::after {
        left: $horiz-padding;
        opacity: 1;
        right: $horiz-padding;
    }

    &:focus {
        &::after {
            content: none;
        }
    }
}




/// legacy non-prefixed names
/// DEPRECATED - use prefixed mixin instead
@mixin fancy-underscore($width: links.$link__current-underline-thickness) {
    @include ds_fancy-underscore($width);
}