/* Animated underline */

.animated-underline-list a:not(.wp-block-social-link-anchor) {
  line-height: 1.5;
  display: inline-block;
}

:is(
  .animated-underline,
  .animated-underline-child,
  .animated-underline-list a,
) {
  text-decoration: none;
  background-image: linear-gradient(
    transparent calc(100% - var(--underline-height)),
    var(--underline-color) var(--underline-height)
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--underline-duration, 450ms) cubic-bezier(0.22, 1, 0.36, 1) 100ms;

  &.animated-underline-transition-slow {
    transition: background-size var(--underline-duration * 1.8, 850ms) cubic-bezier(0.22, 1, 0.36, 1) 150ms;
  }
}

:is(
  .animated-underline,
  .animated-underline-child,
  .animated-underline-list a,
) {
  --underline-color: currentColor;
  --underline-offset: 90%;
  --underline-height: clamp(1px, 0.0625em, 2px);
}

/* Underline, removed on hover */

:is(
  .animated-underline-list a,
  .animated-underline:not(.animated-underline-invert),
  .animated-underline-child:not(.animated-underline-invert),
  .current-menu-item > a .wp-block-navigation-item__label > span
) {
  background-size: 100% var(--underline-offset) !important;
}

:is(
  .animated-underline:not(.animated-underline-invert, .animated-underline-always):hover,
  .animated-underline:not(.animated-underline-invert, .animated-underline-always):focus,
  .animated-underline-child:not(.animated-underline-invert):hover,
  .animated-underline-child:not(.animated-underline-invert):focus,
  .current-menu-item > a .wp-block-navigation-item__label > span:hover,
  .current-menu-item > a .wp-block-navigation-item__label > span:focus,
  .animated-underline-list:not(.animated-underline-invert) a:hover,
  .animated-underline-list:not(.animated-underline-invert) a:focus,
  .animated-underline-list:not(.animated-underline-invert) a:has(+ button[aria-expanded="true"]),
  .animated-underline-list:not(.animated-underline-invert) button.wp-block-navigation-submenu__toggle:hover > span.wp-block-navigation-item__label > span,
  .animated-underline-list:not(.animated-underline-invert) button.wp-block-navigation-submenu__toggle:focus > span.wp-block-navigation-item__label > span,
  .animated-underline-list:not(.animated-underline-invert) button.wp-block-navigation-submenu__toggle[aria-expanded="true"] > span.wp-block-navigation-item__label > span,
  .animated-underline-list:not(.animated-underline-invert) .current-menu-item > a:hover,
  .animated-underline-list:not(.animated-underline-invert) .current-menu-item > a:focus
) {
  background-size: 0% var(--underline-offset) !important;
}

/* Underline on hover (invert) */

:is(
  .animated-underline.animated-underline-invert,
  .animated-underline-child.animated-underline-invert,
  .animated-underline-list.animated-underline-invert a,
  .animated-underline-list.animated-underline-invert button.wp-block-navigation-submenu__toggle > span.wp-block-navigation-item__label,
) {
  background-size: 0% var(--underline-offset);
}

:is(
  .animated-underline.animated-underline-invert:hover,
  .animated-underline.animated-underline-invert:focus,
  .animated-underline-child.animated-underline-invert:hover,
  .animated-underline-child.animated-underline-invert:focus,
  .animated-underline-group:hover .animated-underline-child,
  .animated-underline-group:has(:focus:not(button)) .animated-underline-child,
  .animated-underline-list.animated-underline-invert a:hover,
  .animated-underline-list.animated-underline-invert a:focus,
  .animated-underline-list.animated-underline-invert a:has(+ button[aria-expanded="true"]),
  .animated-underline-list.animated-underline-invert button.wp-block-navigation-submenu__toggle:hover > span.wp-block-navigation-item__label > span,
  .animated-underline-list.animated-underline-invert button.wp-block-navigation-submenu__toggle:focus > span.wp-block-navigation-item__label > span,
  .animated-underline-list.animated-underline-invert button.wp-block-navigation-submenu__toggle[aria-expanded="true"] > span.wp-block-navigation-item__label > span,
  .animated-underline-list.animated-underline-invert .current-menu-item > a:hover,
  .animated-underline-list.animated-underline-invert .current-menu-item > a:focus
) {
  background-size: 100% var(--underline-offset);
}

/* Cancel animation */

:is(
  body .animated-underline-list .main-navigation-search a
) {
  --underline-offset: 0 !important;
  --underline-height: 0 !important;
}