@layer component.theme {
  .bar__item {
    color: inherit;
    text-decoration: none;
    font: var(--tiny);
    position: relative;
    &::after {
      content: "";
      background-color: currentColor;
      position: absolute;
      height: 1px;
      inset: auto 0 0 0;
      width: 0;
      transition: width ease-in-out 0.25s;
    }
    &:hover,
    &:is(.bar__item--active) {
      &::after {
        width: 100%;
      }
    }
  }
}