Active nav item smooth underline

This minimalistic nav item animation comes from Luka Anicic at ani.agency. Don't forget to set style to Active in the Style editor.

.tweak-header-primary-nav-hover-style-active .Header--bottom .Header-branding:active {
    opacity: .66
}

.tweak-header-primary-nav-hover-style-active .Header--bottom .Header-branding img {
    user-select: none;
    pointer-events: none
}

.tweak-header-primary-nav-hover-style-active .Header--bottom .Header-nav .Header-nav-item {
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased
}

.tweak-header-primary-nav-hover-style-active .Header--bottom .Header-nav .Header-nav-item:after {
    content: '';
    display: block;
    height: 2px;
    width: 16px;
    background: #0d0c0c;
    position: absolute;
    bottom: 0;
    transform: translatex(-100%);
    transform-origin: center right;
    opacity: 0;
    transition: opacity .2s cubic-bezier(.165, .84, .44, 1), transform .4s cubic-bezier(.165, .84, .44, 1)
}

.tweak-header-primary-nav-hover-style-active .Header--bottom .Header-nav .Header-nav-item.Header-nav-item--active:after,
.tweak-header-primary-nav-hover-style-active .Header--bottom .Header-nav .Header-nav-item:hover:after {
    opacity: 1;
    transform: translatex(0%)
}

.tweak-header-primary-nav-hover-style-active .Header--bottom .Header-nav .Header-nav-item:active {
    opacity: .66
}