@mixin animated-border-bottom($val) {
    @if ($val != null) {
        &::after {
            display: block;
            content: '';
            border-bottom: solid $val $primary-color;

            @include transform(scaleX(0));

            transform-origin: 0% 50%;

            @include transition(transform 250ms ease-in-out);
        }

        &.active::after,
        &:hover::after {
            transform: scaleX(1);
        }
    }
}