.link {
  position: relative;
  color: $conversion-500;
  font-weight: $weight-bold;
  text-decoration: none;

  &:hover {
    color: $conversion-600;
    text-decoration: underline;
  }
}

.link--menu {
  display: flex;
  align-items: center;
  color: $primary-900;
  font-weight: $weight-bold;
  font-size: 0.875rem;
  line-height: 1.5rem;
  gap: 0.5rem;
  text-transform: uppercase;
  transition: $global-transition;

  &:hover {
    color: $primary-900;
    text-decoration: none;
    margin-top: -0.3125rem;
    padding-bottom: 0.3125rem;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -0.3125rem;
    left: 0;
    width: 100%;
    height: 0;
    background-color: $conversion-400;
    transition: $global-transition;
    opacity: 0;
  }

  &:hover::after {
    bottom: 0rem;
  }

  &:hover::after, &.is-active::after {
    height: 0.25rem;
    opacity: 1;
  }
}

.link--submenu {
  color: $primary-900;

  &:hover {
    color: $primary-900;
    text-decoration: none;
  }
}